@iapps/ng-dhis2-ui 1.2.137 → 1.2.138

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

@@ -1,4 +1,4 @@
-import * as i1 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { NgModule, ContentChild, Input, Directive, inject, ElementRef, Component, EventEmitter, Output, NgZone, input, ChangeDetectionStrategy, Injectable, model, computed, signal, effect, ViewChildren } from '@angular/core';
@@ -23,7 +23,7 @@ import { Divider } from '@dhis2-ui/divider';
 import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
 import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
-import { Button as Button$1, IconDimensionOrgUnit16, IconClock16, IconDimensionData16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, DropdownButton, FlyoutMenu, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, FileInputField, FileListItem, Field, Help, MultiSelectField, TextAreaField, NoticeBox } from '@dhis2/ui';
+import { Button as Button$1, IconDimensionOrgUnit16, IconClock16, IconDimensionData16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, DropdownButton, FlyoutMenu, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, Field, NoticeBox, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { isObject, isString, debounce, isUndefined, find, sortBy, camelCase, flatten, isArray, isEmpty } from 'lodash';
 import cx from 'classnames';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
@@ -31,10 +31,10 @@ import { Pager, DataOrderCriteria, DataQueryFilter, DataFilterCondition, Program
 import { parseISO, isValid, format, addDays } from 'date-fns';
 import { map as map$1 } from 'rxjs/operators';
 import * as XLSX from 'xlsx';
-import * as i1$1 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormControl, Validators, UntypedFormControl, UntypedFormGroup, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { toObservable } from '@angular/core/rxjs-interop';
-import { useMapEvents, useMap, MapContainer, TileLayer, Marker } from 'react-leaflet';
+import { useMapEvents, useMap, MapContainer, TileLayer, GeoJSON, Marker } from 'react-leaflet';
 import moment from 'moment';
 
 class SharedDhis2UiModule {
@@ -5328,6 +5328,1121 @@ const useFieldValidation = (props) => {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+/** Default focus: Zanzibar (Unguja) */
+const DEFAULT_CENTER = [-6.1659, 39.2026];
+const DEFAULT_ZOOM = 8;
+/** ---------------- Coordinate parsing/format ---------------- */
+function normalizeCoordinate(lat, lng) {
+    if (Number.isNaN(lat) || Number.isNaN(lng))
+        return null;
+    if (lat < -90 || lat > 90 || lng < -180 || lng > 180)
+        return null;
+    if (lat === 0 && lng === 0)
+        return null;
+    return { lat, lng };
+}
+function parseCoordinate(value) {
+    if (!value || typeof value !== 'string')
+        return null;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    let lat;
+    let lng;
+    if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+        try {
+            const arr = JSON.parse(trimmed);
+            if (!Array.isArray(arr) || arr.length < 2)
+                return null;
+            lng = Number(arr[0]);
+            lat = Number(arr[1]);
+        }
+        catch {
+            return null;
+        }
+    }
+    else {
+        const parts = trimmed.split(',').map((p) => p.trim());
+        if (parts.length !== 2)
+            return null;
+        lat = Number(parts[0]);
+        lng = Number(parts[1]);
+    }
+    return normalizeCoordinate(lat, lng);
+}
+function formatCoordinate(coordinate) {
+    if (!coordinate)
+        return null;
+    return `[${coordinate.lng.toFixed(6)},${coordinate.lat.toFixed(6)}]`;
+}
+function toNumber(v) {
+    const n = typeof v === 'string' ? Number(v) : typeof v === 'number' ? v : Number.NaN;
+    return Number.isFinite(n) ? n : null;
+}
+function looksLikeLatLngPair(a, b) {
+    return a >= -90 && a <= 90 && b >= -180 && b <= 180;
+}
+function looksLikeLngLatPair(a, b) {
+    return a >= -180 && a <= 180 && b >= -90 && b <= 90;
+}
+function normalizeLngLatPair(pair) {
+    if (!Array.isArray(pair) || pair.length < 2)
+        return null;
+    const a = toNumber(pair[0]);
+    const b = toNumber(pair[1]);
+    if (a == null || b == null)
+        return null;
+    // GeoJSON expected: [lng, lat]
+    if (looksLikeLngLatPair(a, b))
+        return [a, b];
+    // If provided as [lat, lng], swap
+    if (looksLikeLatLngPair(a, b))
+        return [b, a];
+    return null;
+}
+function ensureClosedRing(ring) {
+    if (ring.length < 3)
+        return ring;
+    const first = ring[0];
+    const last = ring[ring.length - 1];
+    if (first[0] === last[0] && first[1] === last[1])
+        return ring;
+    return [...ring, [first[0], first[1]]];
+}
+/**
+ * ✅ FIXED: supports BOTH shapes:
+ *  - proper GeoJSON Polygon coords: [ [ [lng,lat], ... ] , [hole], ... ]
+ *  - single-ring coords (your payload): [ [lng,lat], [lng,lat], ... ]
+ */
+function sanitizePolygonCoordinates(coords) {
+    if (!Array.isArray(coords) || coords.length === 0)
+        return null;
+    const isSingleRing = Array.isArray(coords[0]) &&
+        typeof coords[0][0] === 'number' &&
+        typeof coords[0][1] === 'number';
+    const ringsCandidate = isSingleRing ? [coords] : coords;
+    const cleanRings = [];
+    for (const ring of ringsCandidate) {
+        if (!Array.isArray(ring) || ring.length < 3)
+            continue;
+        const cleanRing = [];
+        for (const pt of ring) {
+            const pair = normalizeLngLatPair(pt);
+            if (pair)
+                cleanRing.push(pair);
+        }
+        if (cleanRing.length < 3)
+            continue;
+        cleanRings.push(ensureClosedRing(cleanRing));
+    }
+    return cleanRings.length ? cleanRings : null;
+}
+function sanitizeMultiPolygonCoordinates(coords) {
+    if (!Array.isArray(coords) || coords.length === 0)
+        return null;
+    const polys = [];
+    for (const poly of coords) {
+        const cleaned = sanitizePolygonCoordinates(poly);
+        if (cleaned)
+            polys.push(cleaned);
+    }
+    return polys.length ? polys : null;
+}
+/**
+ * ✅ FIXED: strict unwrap so we only return real GeoJSON geometry objects.
+ */
+function unwrapToGeometry(input) {
+    if (!input)
+        return null;
+    if (typeof input === 'string') {
+        try {
+            return unwrapToGeometry(JSON.parse(input));
+        }
+        catch {
+            return null;
+        }
+    }
+    if (input.type === 'FeatureCollection') {
+        const fc = input;
+        const first = fc.features?.find((f) => !!f?.geometry);
+        return first?.geometry ?? null;
+    }
+    if (input.type === 'Feature') {
+        return input.geometry ?? null;
+    }
+    const maybeType = input.type;
+    const maybeCoords = input.coordinates;
+    const isGeometryLike = (maybeType === 'Polygon' || maybeType === 'MultiPolygon') &&
+        Array.isArray(maybeCoords);
+    if (isGeometryLike)
+        return input;
+    return null;
+}
+function sanitizeAllowedArea(input) {
+    const geom = unwrapToGeometry(input);
+    if (!geom)
+        return null;
+    if (geom.type === 'Polygon') {
+        const coordsRaw = geom.coordinates;
+        // Optional debug (safe to remove):
+        // console.log('Polygon coords shape:', {
+        //   isArray0: Array.isArray(coordsRaw),
+        //   isArray1: Array.isArray(coordsRaw?.[0]),
+        //   isArray2: Array.isArray(coordsRaw?.[0]?.[0]),
+        //   sample0: coordsRaw?.[0],
+        // });
+        const coords = sanitizePolygonCoordinates(coordsRaw);
+        if (!coords)
+            return null;
+        return { type: 'Polygon', coordinates: coords };
+    }
+    if (geom.type === 'MultiPolygon') {
+        const coords = sanitizeMultiPolygonCoordinates(geom.coordinates);
+        if (!coords)
+            return null;
+        return {
+            type: 'MultiPolygon',
+            coordinates: coords,
+        };
+    }
+    return null;
+}
+/**
+ * Point-in-polygon (ray casting).
+ * Works with [lng, lat] coordinates.
+ */
+function isPointInsideGeoJsonArea(point, area) {
+    if (!area)
+        return true;
+    const pt = [point.lng, point.lat];
+    const inRing = (ring, p) => {
+        let inside = false;
+        for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+            const xi = ring[i][0], yi = ring[i][1];
+            const xj = ring[j][0], yj = ring[j][1];
+            const intersect = yi > p[1] !== yj > p[1] &&
+                p[0] < ((xj - xi) * (p[1] - yi)) / (yj - yi + 0.0) + xi;
+            if (intersect)
+                inside = !inside;
+        }
+        return inside;
+    };
+    const inPolygon = (polyCoords) => {
+        const [outer, ...holes] = polyCoords;
+        if (!outer || outer.length < 3)
+            return false;
+        if (!inRing(outer, pt))
+            return false;
+        for (const hole of holes) {
+            if (hole && hole.length >= 3 && inRing(hole, pt))
+                return false;
+        }
+        return true;
+    };
+    if (area.type === 'Polygon')
+        return inPolygon(area.coordinates);
+    for (const poly of area.coordinates) {
+        if (inPolygon(poly))
+            return true;
+    }
+    return false;
+}
+function metersToKmRadius(m) {
+    if (typeof m !== 'number' || Number.isNaN(m) || m <= 0)
+        return null;
+    return Math.max(0.01, m / 1000);
+}
+const MapClickListener = ({ disabled, onCoordinateSelected, }) => {
+    useMapEvents({
+        click(event) {
+            if (disabled)
+                return;
+            const { lat, lng } = event.latlng;
+            onCoordinateSelected({ lat, lng });
+        },
+    });
+    return null;
+};
+const RecenterOnCoordinate = ({ coordinate }) => {
+    const map = useMap();
+    React__default.useEffect(() => {
+        if (coordinate) {
+            map.flyTo([coordinate.lat, coordinate.lng], map.getZoom(), {
+                duration: 0.4,
+            });
+        }
+    }, [coordinate, map]);
+    return null;
+};
+/** Auto-fits the map to the polygon bounds when loaded */
+const AutoFitToBoundary = ({ boundary }) => {
+    const map = useMap();
+    React__default.useEffect(() => {
+        if (boundary) {
+            try {
+                const layer = window.L?.geoJSON?.(boundary);
+                if (layer) {
+                    map.fitBounds(layer.getBounds(), { padding: [20, 20] });
+                }
+            }
+            catch (e) {
+                console.warn('Auto-fit failed:', e);
+            }
+        }
+    }, [boundary, map]);
+    return null;
+};
+const CoordinateMapContainer = MapContainer;
+/** ---------------- Component ---------------- */
+const CoordinatePickerField = ({ label, name, value, required, disabled, error, validationText, onChange, onBlur, geoConfig, }) => {
+    const parsedCoordinate = React__default.useMemo(() => parseCoordinate(value), [value]);
+    const rawAllowedArea = geoConfig?.allowedAreaGeoJson ?? null;
+    // ✅ never pass raw geojson to Leaflet
+    const safeAllowedAreaGeoJson = React__default.useMemo(() => sanitizeAllowedArea(rawAllowedArea), [rawAllowedArea]);
+    const allowedAreaName = geoConfig?.allowedAreaName;
+    const requireWithinArea = geoConfig?.requireWithinArea ?? false;
+    const captureAccuracy = geoConfig?.captureAccuracy ?? true;
+    const accuracyKmValue = geoConfig?.accuracyKmValue ?? null;
+    const onAccuracyKmChange = geoConfig?.onAccuracyKmChange;
+    const accuracySource = geoConfig?.accuracySource ?? 'UNKNOWN';
+    const onAccuracySourceChange = geoConfig?.onAccuracySourceChange;
+    const maxAccuracyKm = geoConfig?.maxAccuracyKm ?? 50;
+    const outsideAreaPolicyText = geoConfig?.outsideAreaPolicyText;
+    const onOutsideAreaSelected = geoConfig?.onOutsideAreaSelected;
+    const [latitudeInput, setLatitudeInput] = React__default.useState(parsedCoordinate ? String(parsedCoordinate.lat) : '');
+    const [longitudeInput, setLongitudeInput] = React__default.useState(parsedCoordinate ? String(parsedCoordinate.lng) : '');
+    const [validationMessage, setValidationMessage] = React__default.useState(null);
+    const [isMapDialogOpen, setIsMapDialogOpen] = React__default.useState(false);
+    const [pendingCoordinate, setPendingCoordinate] = React__default.useState(parsedCoordinate ?? null);
+    const [mapCenterPosition, setMapCenterPosition] = React__default.useState(parsedCoordinate
+        ? [parsedCoordinate.lat, parsedCoordinate.lng]
+        : DEFAULT_CENTER);
+    const [outsideAreaAcknowledged, setOutsideAreaAcknowledged] = React__default.useState(false);
+    React__default.useEffect(() => {
+        const updated = parseCoordinate(value);
+        if (updated) {
+            setLatitudeInput(String(updated.lat));
+            setLongitudeInput(String(updated.lng));
+            setPendingCoordinate(updated);
+            setMapCenterPosition([updated.lat, updated.lng]);
+        }
+        else {
+            setLatitudeInput('');
+            setLongitudeInput('');
+            setPendingCoordinate(null);
+            setMapCenterPosition(DEFAULT_CENTER);
+        }
+        setOutsideAreaAcknowledged(false);
+    }, [value]);
+    const currentCoordinate = React__default.useMemo(() => {
+        const lat = Number(latitudeInput);
+        const lng = Number(longitudeInput);
+        return normalizeCoordinate(lat, lng);
+    }, [latitudeInput, longitudeInput]);
+    const markerCoordinate = pendingCoordinate || currentCoordinate || null;
+    const allowedAreaDisplayName = allowedAreaName ?? 'the required boundary area';
+    const policyText = outsideAreaPolicyText ??
+        `The selected point is outside ${allowedAreaDisplayName}. 
+Saving an out-of-area location can lead to incorrect case assignment, wrong administrative-unit reporting, and unreliable spatial analysis (maps, coverage, response targeting). 
+Only proceed if you are certain this is intentional and acceptable according to your reporting guidelines.`;
+    const isOutsideAllowedArea = React__default.useMemo(() => {
+        if (!markerCoordinate)
+            return false;
+        if (!safeAllowedAreaGeoJson)
+            return false;
+        return !isPointInsideGeoJsonArea(markerCoordinate, safeAllowedAreaGeoJson);
+    }, [markerCoordinate, safeAllowedAreaGeoJson]);
+    const applyCoordinateChange = React__default.useCallback((coordinate) => {
+        if (!coordinate) {
+            setLatitudeInput('');
+            setLongitudeInput('');
+            setValidationMessage(null);
+            onChange(null);
+            return;
+        }
+        const normalized = normalizeCoordinate(coordinate.lat, coordinate.lng);
+        if (!normalized) {
+            setValidationMessage('Please enter a valid coordinate within the allowed latitude/longitude range.');
+            onChange(null);
+            return;
+        }
+        setLatitudeInput(String(normalized.lat));
+        setLongitudeInput(String(normalized.lng));
+        setValidationMessage(null);
+        onChange(formatCoordinate(normalized));
+    }, [onChange]);
+    const validateLat = (raw) => {
+        if (raw === '')
+            return null;
+        const n = Number(raw);
+        if (Number.isNaN(n))
+            return 'Latitude must be a number.';
+        if (n < -90 || n > 90)
+            return 'Latitude must be between -90 and 90.';
+        return null;
+    };
+    const validateLng = (raw) => {
+        if (raw === '')
+            return null;
+        const n = Number(raw);
+        if (Number.isNaN(n))
+            return 'Longitude must be a number.';
+        if (n < -180 || n > 180)
+            return 'Longitude must be between -180 and 180.';
+        return null;
+    };
+    const handleLatitudeChange = (event) => {
+        const raw = event.value;
+        setLatitudeInput(raw);
+        setOutsideAreaAcknowledged(false);
+        const latErr = validateLat(raw);
+        if (latErr) {
+            setValidationMessage(latErr);
+            return;
+        }
+        if (raw === '' || longitudeInput === '') {
+            applyCoordinateChange(null);
+            return;
+        }
+        const lngErr = validateLng(longitudeInput);
+        if (lngErr) {
+            setValidationMessage(lngErr);
+            return;
+        }
+        const updated = { lat: Number(raw), lng: Number(longitudeInput) };
+        setPendingCoordinate(updated);
+        applyCoordinateChange(updated);
+    };
+    const handleLongitudeChange = (event) => {
+        const raw = event.value;
+        setLongitudeInput(raw);
+        setOutsideAreaAcknowledged(false);
+        const lngErr = validateLng(raw);
+        if (lngErr) {
+            setValidationMessage(lngErr);
+            return;
+        }
+        if (latitudeInput === '' || raw === '') {
+            applyCoordinateChange(null);
+            return;
+        }
+        const latErr = validateLat(latitudeInput);
+        if (latErr) {
+            setValidationMessage(latErr);
+            return;
+        }
+        const updated = { lat: Number(latitudeInput), lng: Number(raw) };
+        setPendingCoordinate(updated);
+        applyCoordinateChange(updated);
+    };
+    const handleAccuracyChange = (event) => {
+        const raw = event.value.trim();
+        if (!onAccuracyKmChange)
+            return;
+        if (raw === '') {
+            onAccuracyKmChange(null);
+            onAccuracySourceChange?.('MANUAL');
+            return;
+        }
+        const n = Number(raw);
+        if (Number.isNaN(n) || n <= 0) {
+            setValidationMessage('Accuracy radius must be a positive number (KM).');
+            return;
+        }
+        if (n > maxAccuracyKm) {
+            setValidationMessage(`Accuracy radius should not exceed ${maxAccuracyKm} km.`);
+            return;
+        }
+        setValidationMessage(null);
+        onAccuracyKmChange(n);
+        onAccuracySourceChange?.('MANUAL');
+    };
+    const handleOpenMapDialog = () => {
+        if (disabled)
+            return;
+        const base = currentCoordinate ?? pendingCoordinate ?? null;
+        if (base) {
+            setPendingCoordinate(base);
+            setMapCenterPosition([base.lat, base.lng]);
+        }
+        else {
+            setMapCenterPosition(DEFAULT_CENTER);
+        }
+        setIsMapDialogOpen(true);
+        setOutsideAreaAcknowledged(false);
+        if (!base && navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition((position) => {
+                const coordinate = normalizeCoordinate(position.coords.latitude, position.coords.longitude);
+                const km = metersToKmRadius(position.coords.accuracy);
+                if (captureAccuracy && km != null && onAccuracyKmChange) {
+                    const boundedKm = Math.min(km, maxAccuracyKm);
+                    onAccuracyKmChange(boundedKm);
+                    onAccuracySourceChange?.('DEVICE');
+                }
+                if (coordinate) {
+                    setPendingCoordinate(coordinate);
+                    setMapCenterPosition([coordinate.lat, coordinate.lng]);
+                }
+                else {
+                    setMapCenterPosition(DEFAULT_CENTER);
+                }
+            }, () => {
+                setValidationMessage((prev) => prev ??
+                    'We could not detect your location. Please move the map and click on the correct place.');
+            }, { enableHighAccuracy: true, timeout: 12000, maximumAge: 30000 });
+        }
+    };
+    const handleCloseMapDialog = () => {
+        setIsMapDialogOpen(false);
+        setOutsideAreaAcknowledged(false);
+    };
+    const handleMapClick = (coordinate) => {
+        const normalized = normalizeCoordinate(coordinate.lat, coordinate.lng);
+        if (!normalized)
+            return;
+        setPendingCoordinate(normalized);
+        setMapCenterPosition([normalized.lat, normalized.lng]);
+        setOutsideAreaAcknowledged(false);
+    };
+    const canConfirm = !!pendingCoordinate &&
+        (!isOutsideAllowedArea || outsideAreaAcknowledged) &&
+        (!requireWithinArea || !isOutsideAllowedArea);
+    const handleConfirmFromMap = () => {
+        if (!pendingCoordinate)
+            return;
+        const boundary = safeAllowedAreaGeoJson;
+        const outside = boundary
+            ? !isPointInsideGeoJsonArea(pendingCoordinate, boundary)
+            : false;
+        if (outside) {
+            onOutsideAreaSelected?.({
+                lat: pendingCoordinate.lat,
+                lng: pendingCoordinate.lng,
+                allowedAreaName,
+                requireWithinArea,
+                accuracyKm: accuracyKmValue,
+            });
+            if (requireWithinArea) {
+                setValidationMessage(`Selected point is outside ${allowedAreaDisplayName}. Please pick a location within the boundary.`);
+                return;
+            }
+            if (!outsideAreaAcknowledged) {
+                setOutsideAreaAcknowledged(true);
+                return;
+            }
+        }
+        applyCoordinateChange(pendingCoordinate);
+        setIsMapDialogOpen(false);
+        setOutsideAreaAcknowledged(false);
+    };
+    const combinedErrorMessage = validationMessage || (error ? validationText : null);
+    const selectedLocationText = markerCoordinate
+        ? `Selected location: Lat ${markerCoordinate.lat.toFixed(5)}, Lon ${markerCoordinate.lng.toFixed(5)}`
+        : 'No location selected yet. Click on the street map to drop a marker.';
+    const outsideNoticeTitle = requireWithinArea
+        ? `Location outside allowed area (not permitted)`
+        : `Location outside allowed area (review required)`;
+    // Optional debug logs (keep outside JSX)
+    console.log('rawAllowedArea:', rawAllowedArea);
+    console.log('safeAllowedAreaGeoJson:', safeAllowedAreaGeoJson);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Field, { label: label, name: name, required: required, error: Boolean(combinedErrorMessage), validationText: combinedErrorMessage ?? undefined },
+            React__default.createElement("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: captureAccuracy
+                        ? 'minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'
+                        : 'minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr)',
+                    gap: 8,
+                    alignItems: 'flex-end',
+                } },
+                React__default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 } },
+                    React__default.createElement(Button$1, { name: `${name}-open-map`, disabled: disabled, onClick: handleOpenMapDialog, secondary: true }, currentCoordinate
+                        ? 'Update location on map'
+                        : 'Pick location on map')),
+                React__default.createElement(InputField$1, { label: "Latitude (\u00B0)", name: `${name}-lat`, type: "number", step: "0.000001", 
+                    // disabled={disabled}
+                    disabled: true, value: latitudeInput, onChange: handleLatitudeChange, onBlur: onBlur, placeholder: "-6.814527" }),
+                React__default.createElement(InputField$1, { label: "Longitude (\u00B0)", name: `${name}-lng`, type: "number", step: "0.000001", 
+                    // disabled={disabled}
+                    disabled: true, value: longitudeInput, onChange: handleLongitudeChange, onBlur: onBlur, placeholder: "39.279557" }),
+                captureAccuracy && (React__default.createElement(InputField$1, { label: "Accuracy radius (km)", name: `${name}-accuracy-km`, type: "number", step: "0.1", min: "0", 
+                    // disabled={disabled}
+                    disabled: true, value: accuracyKmValue == null ? '' : String(accuracyKmValue), onChange: handleAccuracyChange, onBlur: onBlur, placeholder: "e.g. 0.1" })))),
+        isMapDialogOpen && (
+        // <Modal
+        //   onClose={handleCloseMapDialog}
+        //   position="middle"
+        //   className="coordinate-modal"
+        // >
+        //   <ModalTitle>Select location on street map</ModalTitle>
+        //   <ModalContent>
+        //     <div
+        //       style={{
+        //         display: 'flex',
+        //         flexDirection: 'row',
+        //         flexWrap: 'wrap',
+        //         width: '100%',
+        //         height: '70vh',
+        //         gap: 16,
+        //         overflow: 'hidden',
+        //       }}
+        //     >
+        //       {/* ------------------ MAP AREA (flex: 3) ------------------ */}
+        //       <div
+        //         style={{
+        //           flex: '3 1 60%',
+        //           borderRadius: 8,
+        //           overflow: 'hidden',
+        //           boxShadow: '0 1px 4px rgba(0,0,0,0.15)',
+        //           minWidth: '320px',
+        //         }}
+        //       >
+        //         <CoordinateMapContainer
+        //           center={mapCenterPosition}
+        //           zoom={markerCoordinate ? 12 : DEFAULT_ZOOM}
+        //           style={{ width: '100%', height: '100%' }}
+        //           scrollWheelZoom={!disabled}
+        //         >
+        //           <TileLayer
+        //             attribution="© OpenStreetMap contributors"
+        //             url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        //           />
+        //           {safeAllowedAreaGeoJson && (
+        //             <>
+        //               <LeafletGeoJSON
+        //                 data={safeAllowedAreaGeoJson as any}
+        //                 style={(feature: any) => {
+        //                   const isMulti =
+        //                     feature?.geometry?.type === 'MultiPolygon' ||
+        //                     safeAllowedAreaGeoJson.type === 'MultiPolygon';
+        //                   // Consistent DHIS2-like palette
+        //                   const strokeColor = isMulti ? '#E67E22' : '#1976D2';
+        //                   const fillColor = isMulti ? '#FAD7A0' : '#BBDEFB';
+        //                   return {
+        //                     color: strokeColor,
+        //                     weight: 2,
+        //                     opacity: 0.9,
+        //                     fillColor,
+        //                     fillOpacity: 0.3,
+        //                     dashArray: '4 4',
+        //                   };
+        //                 }}
+        //               />
+        //               <AutoFitToBoundary boundary={safeAllowedAreaGeoJson} />
+        //             </>
+        //           )}
+        //           <RecenterOnCoordinate coordinate={markerCoordinate} />
+        //           {markerCoordinate && (
+        //             <Marker
+        //               position={[markerCoordinate.lat, markerCoordinate.lng]}
+        //             />
+        //           )}
+        //           <MapClickListener
+        //             disabled={disabled}
+        //             onCoordinateSelected={handleMapClick}
+        //           />
+        //         </CoordinateMapContainer>
+        //       </div>
+        //       {/* ------------------ INFO PANEL (flex: 1) ------------------ */}
+        //       <div
+        //         style={{
+        //           flex: '1 1 30%',
+        //           display: 'flex',
+        //           flexDirection: 'column',
+        //           gap: 12,
+        //           minWidth: '280px',
+        //           overflowY: 'auto',
+        //           maxHeight: '70vh',
+        //         }}
+        //       >
+        //         {markerCoordinate && (
+        //           <>
+        //             {safeAllowedAreaGeoJson ? (
+        //               isOutsideAllowedArea ? (
+        //                 requireWithinArea ? (
+        //                   // 🟥 ERROR: Outside & not permitted
+        //                   <NoticeBox
+        //                     error
+        //                     title="Outside Allowed Area (Not Permitted)"
+        //                   >
+        //                     <p>
+        //                       The selected location is outside{' '}
+        //                       <b>{allowedAreaDisplayName}</b>. You must pick a
+        //                       point <b>within</b> the boundary to continue.
+        //                     </p>
+        //                   </NoticeBox>
+        //                 ) : (
+        //                   // 🟧 WARNING: Outside but allowed
+        //                   <NoticeBox title="Outside Allowed Area (Review Required)">
+        //                     <p>
+        //                       The selected point is outside{' '}
+        //                       <b>{allowedAreaDisplayName}</b>. Click{' '}
+        //                       <b>Use Selected Location</b> again to confirm this
+        //                       is intentional.
+        //                     </p>
+        //                     <p>
+        //                       Saving out-of-boundary data may cause reporting
+        //                       inconsistencies.
+        //                     </p>
+        //                   </NoticeBox>
+        //                 )
+        //               ) : (
+        //                 // 🟩 VALID: Inside allowed area
+        //                 <NoticeBox valid title="Valid Location within Boundary">
+        //                   <p>
+        //                     <strong>Selected Location:</strong>
+        //                     <br />
+        //                     Lat {markerCoordinate.lat.toFixed(5)}, Lon{' '}
+        //                     {markerCoordinate.lng.toFixed(5)}
+        //                   </p>
+        //                   {captureAccuracy && (
+        //                     <p>
+        //                       <strong>Accuracy Info:</strong>
+        //                       <br />
+        //                       Radius: {accuracyKmValue ?? 'N/A'} km (
+        //                       {accuracySource === 'DEVICE'
+        //                         ? 'device-derived'
+        //                         : accuracySource === 'MANUAL'
+        //                         ? 'manual'
+        //                         : 'unknown'}
+        //                       )<br />
+        //                       Max allowed: {maxAccuracyKm} km
+        //                     </p>
+        //                   )}
+        //                   <p>
+        //                     Pan or zoom to find the correct point. Click once to
+        //                     drop the marker. Ensure it's within{' '}
+        //                     {allowedAreaDisplayName}.
+        //                   </p>
+        //                 </NoticeBox>
+        //               )
+        //             ) : (
+        //               // ℹ️ INFO: When no boundary provided
+        //               <NoticeBox title="Selected Location">
+        //                 <p>
+        //                   <strong>Selected Location:</strong>
+        //                   <br />
+        //                   Lat {markerCoordinate.lat.toFixed(5)}, Lon{' '}
+        //                   {markerCoordinate.lng.toFixed(5)}
+        //                 </p>
+        //                 {captureAccuracy && (
+        //                   <p>
+        //                     <strong>Accuracy Info:</strong>
+        //                     <br />
+        //                     Radius: {accuracyKmValue ?? 'N/A'} km (
+        //                     {accuracySource === 'DEVICE'
+        //                       ? 'device-derived'
+        //                       : accuracySource === 'MANUAL'
+        //                       ? 'manual'
+        //                       : 'unknown'}
+        //                     )<br />
+        //                     Max allowed: {maxAccuracyKm} km
+        //                   </p>
+        //                 )}
+        //                 <p>
+        //                   Pan or zoom to find the correct point. Click once to
+        //                   drop the marker.
+        //                 </p>
+        //               </NoticeBox>
+        //             )}
+        //           </>
+        //         )}
+        //       </div>
+        //     </div>
+        //   </ModalContent>
+        //   <ModalActions>
+        //     <div style={{ display: 'flex', gap: 12 }}>
+        //       <Button onClick={handleCloseMapDialog} secondary>
+        //         Cancel
+        //       </Button>
+        //       <Button
+        //         primary
+        //         onClick={handleConfirmFromMap}
+        //         disabled={!pendingCoordinate || disabled || !canConfirm}
+        //       >
+        //         {requireWithinArea && isOutsideAllowedArea
+        //           ? 'Pick a point inside boundary'
+        //           : !requireWithinArea &&
+        //             isOutsideAllowedArea &&
+        //             !outsideAreaAcknowledged
+        //           ? 'Review & Acknowledge'
+        //           : 'Use Selected Location'}
+        //       </Button>
+        //     </div>
+        //   </ModalActions>
+        // </Modal>
+        // <Modal
+        //   onClose={handleCloseMapDialog}
+        //   position="middle"
+        //   className="coordinate-modal"
+        // >
+        //   <ModalTitle>
+        //     <div
+        //       style={{
+        //         display: 'flex',
+        //         justifyContent: 'space-between',
+        //         alignItems: 'center',
+        //         padding: '0 8px',
+        //       }}
+        //     >
+        //       <span style={{ fontWeight: 600, fontSize: 16 }}>
+        //         🗺️ Select Location on Street Map
+        //       </span>
+        //       <span style={{ fontSize: 12, color: '#555' }}>
+        //         Click or tap on the map to choose coordinates
+        //       </span>
+        //     </div>
+        //   </ModalTitle>
+        //   <ModalContent>
+        //     <div
+        //       style={{
+        //         display: 'flex',
+        //         flexDirection: 'row',
+        //         flexWrap: 'wrap',
+        //         width: '100%',
+        //         height: '70vh',
+        //         gap: 16,
+        //         overflow: 'hidden',
+        //       }}
+        //     >
+        //       {/* ------------------ MAP AREA ------------------ */}
+        //       <div
+        //         style={{
+        //           flex: '3 1 60%',
+        //           borderRadius: 8,
+        //           overflow: 'hidden',
+        //           boxShadow: '0 1px 4px rgba(0,0,0,0.15)',
+        //           minWidth: '320px',
+        //         }}
+        //       >
+        //         <CoordinateMapContainer
+        //           center={mapCenterPosition}
+        //           zoom={markerCoordinate ? 12 : DEFAULT_ZOOM}
+        //           style={{ width: '100%', height: '100%' }}
+        //           scrollWheelZoom={!disabled}
+        //         >
+        //           <TileLayer
+        //             attribution="© OpenStreetMap contributors"
+        //             url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        //           />
+        //           {safeAllowedAreaGeoJson && (
+        //             <>
+        //               <LeafletGeoJSON
+        //                 data={safeAllowedAreaGeoJson as any}
+        //                 style={(feature: any) => {
+        //                   const isMulti =
+        //                     feature?.geometry?.type === 'MultiPolygon' ||
+        //                     safeAllowedAreaGeoJson.type === 'MultiPolygon';
+        //                   const strokeColor = isMulti ? '#E67E22' : '#1976D2';
+        //                   const fillColor = isMulti ? '#FAD7A0' : '#BBDEFB';
+        //                   return {
+        //                     color: strokeColor,
+        //                     weight: 2,
+        //                     opacity: 0.9,
+        //                     fillColor,
+        //                     fillOpacity: 0.3,
+        //                     dashArray: '4 4',
+        //                   };
+        //                 }}
+        //               />
+        //               <AutoFitToBoundary boundary={safeAllowedAreaGeoJson} />
+        //             </>
+        //           )}
+        //           <RecenterOnCoordinate coordinate={markerCoordinate} />
+        //           {markerCoordinate && (
+        //             <Marker
+        //               position={[markerCoordinate.lat, markerCoordinate.lng]}
+        //             />
+        //           )}
+        //           <MapClickListener
+        //             disabled={disabled}
+        //             onCoordinateSelected={handleMapClick}
+        //           />
+        //         </CoordinateMapContainer>
+        //       </div>
+        //       {/* ------------------ SIDE INFO PANEL ------------------ */}
+        //       <div
+        //         style={{
+        //           flex: '1 1 30%',
+        //           display: 'flex',
+        //           flexDirection: 'column',
+        //           gap: 12,
+        //           minWidth: '280px',
+        //           overflowY: 'auto',
+        //           maxHeight: '70vh',
+        //         }}
+        //       >
+        //         {/* 🟦 Top Info Box (always visible) */}
+        //         <NoticeBox title="Selected Location Info">
+        //           {markerCoordinate ? (
+        //             <div
+        //               style={{
+        //                 display: 'flex',
+        //                 flexDirection: 'column',
+        //                 gap: 6,
+        //               }}
+        //             >
+        //               <div>
+        //                 <strong>Selected Location:</strong>
+        //                 <br />
+        //                 Lat {markerCoordinate.lat.toFixed(5)}, Lon{' '}
+        //                 {markerCoordinate.lng.toFixed(5)}
+        //               </div>
+        //               {captureAccuracy && (
+        //                 <div>
+        //                   <strong>Accuracy Info:</strong>
+        //                   <br />
+        //                   Radius: {accuracyKmValue ?? 'N/A'} km (
+        //                   {accuracySource === 'DEVICE'
+        //                     ? 'device-derived'
+        //                     : accuracySource === 'MANUAL'
+        //                     ? 'manual'
+        //                     : 'unknown'}
+        //                   )<br />
+        //                   Max allowed: {maxAccuracyKm} km
+        //                 </div>
+        //               )}
+        //             </div>
+        //           ) : (
+        //             <p>
+        //               No location selected yet. Click on the map to drop a
+        //               marker.
+        //             </p>
+        //           )}
+        //         </NoticeBox>
+        //         {/* ✅ Valid or ❌ Error */}
+        //         {markerCoordinate &&
+        //           safeAllowedAreaGeoJson &&
+        //           (isOutsideAllowedArea ? (
+        //             <NoticeBox
+        //               error
+        //               title="Outside Allowed Area (Not Permitted)"
+        //             >
+        //               <p>
+        //                 The selected location is <strong>outside</strong> the
+        //                 required boundary (<b>{allowedAreaDisplayName}</b>).
+        //               </p>
+        //               <p>
+        //                 Please pick a point <b>within</b> the Shehia boundary.
+        //               </p>
+        //             </NoticeBox>
+        //           ) : (
+        //             <NoticeBox valid title="Valid Location within Boundary">
+        //               <p>
+        //                 ✅ You have successfully selected a valid location
+        //                 inside {allowedAreaDisplayName}.
+        //               </p>
+        //             </NoticeBox>
+        //           ))}
+        //         {/* 🟦 Bottom Instructions (always visible) */}
+        //         <NoticeBox title="Instructions">
+        //           <p style={{ marginBottom: 0, lineHeight: 1.5 }}>
+        //             Pan or zoom to find the correct point. Click once to drop
+        //             the marker. Ensure it's within <b>Shehia boundary</b>.
+        //           </p>
+        //         </NoticeBox>
+        //       </div>
+        //     </div>
+        //   </ModalContent>
+        //   <ModalActions>
+        //     <div
+        //       style={{
+        //         display: 'flex',
+        //         justifyContent: 'space-between',
+        //         alignItems: 'center',
+        //         width: '100%',
+        //       }}
+        //     >
+        //       <div style={{ fontSize: 13, color: '#666' }}>
+        //         <span>💡 Tip:</span> You can click again to reposition your
+        //         marker.
+        //       </div>
+        //       <div style={{ display: 'flex', gap: 12 }}>
+        //         <Button onClick={handleCloseMapDialog} secondary>
+        //           Cancel
+        //         </Button>
+        //         <Button
+        //           primary
+        //           onClick={handleConfirmFromMap}
+        //           disabled={!pendingCoordinate || disabled || !canConfirm}
+        //         >
+        //           {requireWithinArea && isOutsideAllowedArea
+        //             ? 'Pick a point inside boundary'
+        //             : !requireWithinArea &&
+        //               isOutsideAllowedArea &&
+        //               !outsideAreaAcknowledged
+        //             ? 'Review & Acknowledge'
+        //             : 'Use Selected Location'}
+        //         </Button>
+        //       </div>
+        //     </div>
+        //   </ModalActions>
+        // </Modal>
+        React__default.createElement(Modal$1, { onClose: handleCloseMapDialog, position: "middle", className: "coordinate-modal" },
+            React__default.createElement(ModalTitle$1, null,
+                React__default.createElement("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        padding: '0.25rem 0.5rem',
+                    } },
+                    React__default.createElement("span", { style: {
+                            fontWeight: 600,
+                            fontSize: 16,
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 6,
+                        } }, "\uD83D\uDDFA\uFE0F Select Location on Map"),
+                    React__default.createElement("span", { style: { fontSize: 12, color: '#666' } }, "Click or tap on the map to choose coordinates"))),
+            React__default.createElement(ModalContent$1, null,
+                React__default.createElement("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        width: '100%',
+                        height: '72vh',
+                        overflow: 'hidden',
+                        gap: 16,
+                    } },
+                    React__default.createElement("div", { style: {
+                            flex: '0 0 75%',
+                            position: 'relative',
+                            borderRadius: 10,
+                            overflow: 'hidden',
+                            boxShadow: '0 2px 6px rgba(0,0,0,0.1)',
+                        } },
+                        React__default.createElement(CoordinateMapContainer, { center: mapCenterPosition, zoom: markerCoordinate ? 12 : DEFAULT_ZOOM, style: { width: '100%', height: '100%' }, scrollWheelZoom: !disabled },
+                            React__default.createElement(TileLayer, { attribution: "\u00A9 OpenStreetMap contributors", url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }),
+                            safeAllowedAreaGeoJson && (React__default.createElement(React__default.Fragment, null,
+                                React__default.createElement(GeoJSON, { data: safeAllowedAreaGeoJson, style: (feature) => {
+                                        const isMulti = feature?.geometry?.type === 'MultiPolygon' ||
+                                            safeAllowedAreaGeoJson.type === 'MultiPolygon';
+                                        const strokeColor = isMulti ? '#F39C12' : '#1565C0';
+                                        const fillColor = isMulti ? '#FDEBD0' : '#E3F2FD';
+                                        return {
+                                            color: strokeColor,
+                                            weight: 3,
+                                            opacity: 0.95,
+                                            fillColor,
+                                            fillOpacity: 0.35,
+                                            dashArray: '6 4',
+                                            lineJoin: 'round',
+                                            lineCap: 'round',
+                                        };
+                                    } }),
+                                React__default.createElement(AutoFitToBoundary, { boundary: safeAllowedAreaGeoJson }))),
+                            React__default.createElement(RecenterOnCoordinate, { coordinate: markerCoordinate }),
+                            markerCoordinate && (React__default.createElement(Marker, { position: [markerCoordinate.lat, markerCoordinate.lng] })),
+                            React__default.createElement(MapClickListener, { disabled: disabled, onCoordinateSelected: handleMapClick })),
+                        React__default.createElement("div", { style: {
+                                position: 'absolute',
+                                top: 12,
+                                right: 12,
+                                background: !markerCoordinate
+                                    ? '#0288D1'
+                                    : isOutsideAllowedArea
+                                        ? '#C62828'
+                                        : '#2E7D32',
+                                color: '#fff',
+                                borderRadius: 6,
+                                padding: '5px 12px',
+                                fontSize: 13,
+                                fontWeight: 600,
+                                boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
+                                transition: 'background 0.3s ease',
+                                zIndex: 999,
+                                letterSpacing: 0.3,
+                            } }, !markerCoordinate
+                            ? 'No location selected'
+                            : isOutsideAllowedArea
+                                ? 'Outside boundary'
+                                : 'Valid location')),
+                    React__default.createElement("div", { style: {
+                            flex: '0 0 25%',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'space-between',
+                            height: '100%',
+                            overflowY: 'auto',
+                            borderLeft: '1px solid #e0e0e0',
+                            padding: '0 12px',
+                        } },
+                        React__default.createElement("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 12,
+                                paddingTop: 2,
+                                paddingRight: 6,
+                            } },
+                            React__default.createElement(NoticeBox, { title: "Selected Location Info" }, markerCoordinate ? (React__default.createElement("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 6,
+                                } },
+                                React__default.createElement("div", null,
+                                    React__default.createElement("strong", null, "Selected Location:"),
+                                    React__default.createElement("br", null),
+                                    "Lat ",
+                                    markerCoordinate.lat.toFixed(5),
+                                    ", Lon",
+                                    ' ',
+                                    markerCoordinate.lng.toFixed(5)),
+                                captureAccuracy && (React__default.createElement("div", null,
+                                    React__default.createElement("strong", null, "Accuracy Info:"),
+                                    React__default.createElement("br", null),
+                                    "Radius: ",
+                                    accuracyKmValue ?? 'N/A',
+                                    " km (",
+                                    accuracySource === 'DEVICE'
+                                        ? 'device-derived'
+                                        : accuracySource === 'MANUAL'
+                                            ? 'manual'
+                                            : 'unknown',
+                                    ")",
+                                    React__default.createElement("br", null),
+                                    "Max allowed: ",
+                                    maxAccuracyKm,
+                                    " km")))) : (React__default.createElement("p", null, "No location selected yet. Click on the map to drop a marker."))),
+                            markerCoordinate &&
+                                safeAllowedAreaGeoJson &&
+                                (isOutsideAllowedArea ? (React__default.createElement(NoticeBox, { error: true, title: "Outside Allowed Area (Not Permitted)" },
+                                    React__default.createElement("p", null,
+                                        "The selected location is ",
+                                        React__default.createElement("strong", null, "outside"),
+                                        " the required boundary (",
+                                        React__default.createElement("b", null, allowedAreaDisplayName),
+                                        ")."),
+                                    React__default.createElement("p", null,
+                                        "Please pick a point ",
+                                        React__default.createElement("b", null, "within"),
+                                        " the Shehia boundary."))) : (React__default.createElement(NoticeBox, { valid: true, title: "Valid Location within Boundary" },
+                                    React__default.createElement("p", null,
+                                        "\u2705 You have successfully selected a valid location inside ",
+                                        allowedAreaDisplayName,
+                                        "."))))),
+                        React__default.createElement("div", { style: { paddingBottom: 8 } },
+                            React__default.createElement(NoticeBox, { title: "Instructions" },
+                                React__default.createElement("p", { style: { margin: 0, lineHeight: 1.6 } },
+                                    "Pan or zoom to find the correct point. Click once to drop the marker. Ensure it's within ",
+                                    React__default.createElement("b", null, "Shehia boundary"),
+                                    ".")))))),
+            React__default.createElement(ModalActions$1, null,
+                React__default.createElement("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        alignItems: 'center',
+                        width: '100%',
+                        gap: 12,
+                    } },
+                    React__default.createElement(Button$1, { onClick: handleCloseMapDialog, secondary: true }, "Cancel"),
+                    React__default.createElement(Button$1, { primary: true, onClick: handleConfirmFromMap, disabled: !pendingCoordinate || disabled || !canConfirm }, requireWithinArea && isOutsideAllowedArea
+                        ? 'Pick a point inside boundary'
+                        : !requireWithinArea &&
+                            isOutsideAllowedArea &&
+                            !outsideAreaAcknowledged
+                            ? 'Review & Acknowledge'
+                            : 'Use Selected Location')))))));
+};
+
 // Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
@@ -5410,6 +6525,157 @@ const FileUploadField = (props) => {
             } })))));
 };
 
+const ALL_COUNTRIES = [
+    // East Africa first (for convenience)
+    { isoCode: 'TZ', dialCode: '+255', name: 'Tanzania', flag: '🇹🇿' },
+    { isoCode: 'KE', dialCode: '+254', name: 'Kenya', flag: '🇰🇪' },
+    { isoCode: 'UG', dialCode: '+256', name: 'Uganda', flag: '🇺🇬' },
+    { isoCode: 'RW', dialCode: '+250', name: 'Rwanda', flag: '🇷🇼' },
+    { isoCode: 'BI', dialCode: '+257', name: 'Burundi', flag: '🇧🇮' },
+    { isoCode: 'SS', dialCode: '+211', name: 'South Sudan', flag: '🇸🇸' },
+    { isoCode: 'ET', dialCode: '+251', name: 'Ethiopia', flag: '🇪🇹' },
+    // A few examples from other regions:
+    { isoCode: 'GB', dialCode: '+44', name: 'United Kingdom', flag: '🇬🇧' },
+    { isoCode: 'US', dialCode: '+1', name: 'United States', flag: '🇺🇸' },
+    { isoCode: 'CA', dialCode: '+1', name: 'Canada', flag: '🇨🇦' },
+    { isoCode: 'DE', dialCode: '+49', name: 'Germany', flag: '🇩🇪' },
+    { isoCode: 'IN', dialCode: '+91', name: 'India', flag: '🇮🇳' },
+    { isoCode: 'CN', dialCode: '+86', name: 'China', flag: '🇨🇳' },
+    { isoCode: 'BR', dialCode: '+55', name: 'Brazil', flag: '🇧🇷' },
+    // 👉 Here you add the rest of the world.
+    // You can load a standard JSON of all countries (isoCode, dialCode, name, flag)
+    // and generate this array at build time if you prefer.
+];
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+const DEFAULT_COUNTRY_ISO = 'TZ';
+const FilterableSingleSelectField = SingleSelectField;
+function normalizeTanzaniaLocal(raw) {
+    const digits = (raw || '').replace(/\D/g, '');
+    if (!digits)
+        return '';
+    if (digits.startsWith('255')) {
+        let sub = digits.slice(3);
+        if (sub.startsWith('0'))
+            sub = sub.slice(1);
+        return ('0' + sub).slice(0, 10);
+    }
+    if (digits.startsWith('0')) {
+        return digits.slice(0, 10);
+    }
+    if (/^[67]\d{7,9}$/.test(digits)) {
+        return ('0' + digits).slice(0, 10);
+    }
+    if (digits.length >= 9 && !digits.startsWith('0')) {
+        return ('0' + digits.slice(0, 9)).slice(0, 10);
+    }
+    return digits.slice(0, 10);
+}
+const InternationalPhoneField = ({ name, label, placeholder, value, required, disabled, error, validationText, inputWidth, defaultCountryIsoCode = DEFAULT_COUNTRY_ISO, onChange, onBlur, }) => {
+    const [selectedIsoCode, setSelectedIsoCode] = React__default.useState(defaultCountryIsoCode);
+    const [filterText, setFilterText] = React__default.useState('');
+    const [leadingZeroWarning, setLeadingZeroWarning] = React__default.useState(null);
+    const selectedCountry = ALL_COUNTRIES.find((c) => c.isoCode === selectedIsoCode) ??
+        ALL_COUNTRIES.find((c) => c.isoCode === DEFAULT_COUNTRY_ISO);
+    const [localNumber, setLocalNumber] = React__default.useState('');
+    React__default.useEffect(() => {
+        const raw = value ?? '';
+        if (selectedCountry.isoCode === 'TZ') {
+            const normalizedStored = normalizeTanzaniaLocal(raw);
+            if (!normalizedStored) {
+                setLocalNumber('');
+                return;
+            }
+            const digits = normalizedStored.replace(/\D/g, '');
+            const ui = digits.startsWith('0') ? digits.slice(1) : digits;
+            setLocalNumber(ui);
+        }
+        else {
+            const digits = raw.replace(/\D/g, '').slice(0, 15);
+            setLocalNumber(digits);
+        }
+        setLeadingZeroWarning(null);
+    }, [value, selectedCountry.isoCode]);
+    const filteredCountries = React__default.useMemo(() => {
+        const term = filterText.trim().toLowerCase();
+        if (!term)
+            return ALL_COUNTRIES;
+        return ALL_COUNTRIES.filter((c) => {
+            const haystack = `${c.name} ${c.dialCode} ${c.isoCode}`.toLowerCase();
+            return haystack.includes(term);
+        });
+    }, [filterText]);
+    const handleCountryChange = ({ selected }) => {
+        setSelectedIsoCode(selected);
+    };
+    const handleLocalChange = ({ value }) => {
+        const digitsOnly = (value || '').replace(/\D/g, '');
+        if (selectedCountry.isoCode === 'TZ') {
+            let ui = digitsOnly;
+            if (ui.startsWith('0')) {
+                setLeadingZeroWarning('For Tanzania, do not start the number with 0. Enter it without the leading 0 (e.g. 767000000).');
+                ui = ui.slice(1);
+            }
+            else {
+                setLeadingZeroWarning(null);
+            }
+            ui = ui.slice(0, 9);
+            const stored = ui ? '0' + ui : '';
+            setLocalNumber(ui);
+            onChange(stored);
+        }
+        else {
+            const ui = digitsOnly.slice(0, 15);
+            setLocalNumber(ui);
+            onChange(ui);
+            setLeadingZeroWarning(null);
+        }
+    };
+    const effectiveValidationText = leadingZeroWarning ??
+        validationText ??
+        'Enter the phone number without the leading 0 (e.g. 767000000). The country code is already applied, and the system will store it as 0767000000 for Tanzania.';
+    const hasError = Boolean(error || leadingZeroWarning);
+    const wrapperStyle = {
+        maxWidth: typeof inputWidth === 'number' ? inputWidth : inputWidth || 480,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5rem',
+    };
+    return (React__default.createElement("div", { style: wrapperStyle },
+        label && (React__default.createElement("label", { htmlFor: name, style: {
+                fontSize: '0.875rem',
+                fontWeight: 500,
+                color: '#1f2933',
+            } },
+            label,
+            required ? (React__default.createElement("span", { style: { color: '#e53935', marginLeft: 4 } }, "*")) : null)),
+        React__default.createElement("div", { style: {
+                display: 'flex',
+                width: '100%',
+                gap: '0.75rem',
+                alignItems: 'stretch',
+            } },
+            React__default.createElement("div", { style: {
+                    flex: '0 0 auto',
+                    width: 260,
+                } },
+                React__default.createElement(FilterableSingleSelectField, { selected: selectedIsoCode, onChange: handleCountryChange, disabled: disabled, dense: true, filterable: true, onFilterChange: ({ value }) => setFilterText(value), noMatchText: "No matching country" }, filteredCountries.map((country) => (React__default.createElement(SingleSelectOption, { disabled: disabled, key: country.isoCode, value: country.isoCode, label: `${country.flag} ${country.name} (${country.dialCode})` }))))),
+            React__default.createElement("div", { style: { flex: '1 1 0', minWidth: 0 } },
+                React__default.createElement(InputField$1, { type: "tel", name: name, placeholder: placeholder ?? '767000000', value: localNumber, required: required, disabled: disabled, error: hasError, validationText: effectiveValidationText, autoComplete: "tel", max: selectedCountry.isoCode === 'TZ' ? '9' : '15', onChange: handleLocalChange, onBlur: () => {
+                        if (selectedCountry.isoCode === 'TZ') {
+                            const digits = (localNumber || '')
+                                .replace(/\D/g, '')
+                                .slice(0, 9);
+                            const stored = digits ? '0' + digits : '';
+                            if (digits !== localNumber) {
+                                setLocalNumber(digits);
+                                onChange(stored);
+                            }
+                        }
+                        onBlur?.();
+                    } })))));
+};
+
 var OrgUnitLevel;
 (function (OrgUnitLevel) {
     OrgUnitLevel["SHEHIA"] = "SHEHIA";
@@ -6155,6 +7421,7 @@ const OrgUnitFormField = (props) => {
     const [selectedOrgUnit, setSelectedOrgUnit] = useState();
     const [expanded, setExpanded] = useState(initiallyExpanded);
     const [showOrgUnitTree, setShowOrgUnitTree] = useState(!selected);
+    const [showRequiredNotice, setShowRequiredNotice] = useState(false);
     useEffect(() => {
         setLoading(true);
         if (selected) {
@@ -6195,498 +7462,944 @@ const OrgUnitFormField = (props) => {
             setExpanded([...expanded, path]);
         }
     };
-    const handleCollapse = ({ path }) => {
-        const pathIndex = expanded?.indexOf(path);
-        if (pathIndex && pathIndex !== -1 && expanded) {
-            const updatedExpanded = pathIndex === 0
-                ? expanded.slice(1)
-                : [...expanded.slice(0, pathIndex), ...expanded.slice(pathIndex + 1)];
-            setExpanded(updatedExpanded);
-        }
-    };
-    const handleOrgUnitSearch = async (query) => {
-        setSearchLoading(true);
-        try {
-            const searchResponse = await d2.httpInstance.get(`organisationUnits.json?fields=id,displayName,path,publicAccess,access,lastUpdated,children[id,displayName,publicAccess,access,path,children::isNotEmpty]&paging=true&query=${query}&withinUserSearchHierarchy=true&pageSize=15`);
-            setSearchData((searchResponse.data || {})['organisationUnits']);
-            setSearchLoading(false);
-        }
-        catch (e) {
-            setSearchLoading(false);
-        }
-    };
-    const debouncedSearch = useCallback(debounce((value) => {
-        handleOrgUnitSearch(value);
-    }, 500), []);
-    const handleFilterChange = (event) => {
-        setSearchText(event.value);
-        debouncedSearch(event.value);
-    };
-    const ready = useMemo(() => {
-        return searchText?.length ? !searchLoading : !loading;
-    }, [searchText, searchLoading, loading]);
-    const renderOrgUnitTree = () => {
-        if (searchText && searchText?.length > 0) {
-            if (searchLoading) {
-                return (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
-                    React__default.createElement(CircularLoader$1, { small: true })));
-            }
-            return (ready && (React__default.createElement(OrganisationUnitTree, { key: `${key}-search`, roots: searchData?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
-                    setSelectedOrgUnit(event);
-                    setShowOrgUnitTree(false);
-                    onSelectOrgUnit(event.id);
-                } })));
-        }
-        return (rootOrgUnits.length > 0 && (React__default.createElement(OrganisationUnitTree, { key: key, roots: rootOrgUnits?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
-                setSelectedOrgUnit(event);
-                setShowOrgUnitTree(false);
-                onSelectOrgUnit(event.id);
-            } })));
-    };
-    return (config && (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false },
-        React__default.createElement("div", null,
-            label && (React__default.createElement("div", { className: classes.orgUnitFieldLabel },
-                React__default.createElement("span", null, label),
-                required ? (React__default.createElement("span", { className: classes.orgUnitFieldRequiredLabel }, "*")) : (React__default.createElement(React__default.Fragment, null)))),
-            !showOrgUnitTree ? (selectedOrgUnit ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Tooltip, { content: selectedOrgUnitLabel }, disabled ? (React__default.createElement(Chip, null, selectedOrgUnit.displayName)) : (React__default.createElement(Chip, { onRemove: () => {
-                        setShowOrgUnitTree(true);
-                    } }, selectedOrgUnit.displayName))))) : (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
-                React__default.createElement(CircularLoader$1, { small: true })))) : (React__default.createElement("div", { className: classes.container },
-                React__default.createElement("div", { className: classes.debounceFieldContainer },
-                    React__default.createElement(InputField$1, { placeholder: "Search", value: searchText, disabled: disabled, onChange: handleFilterChange })),
-                loading ? (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
-                    React__default.createElement(CircularLoader$1, { small: true }))) : (React__default.createElement("div", { className: classes.orgUnitTreeContainer, style: { maxHeight: '200px', overflowY: 'auto' } }, renderOrgUnitTree()))))))));
-};
-
-// Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-class FieldConfig {
-    constructor(config) {
-        this.hideLabel = config?.hideLabel ?? false;
-        this.inputWidth = config?.inputWidth || '100%';
-    }
-}
-
-// Default focus: Zanzibar (Unguja) and nearby coastline
-const DEFAULT_CENTER = [-6.1659, 39.2026];
-const DEFAULT_ZOOM = 8;
-function normalizeCoordinate(lat, lng) {
-    if (Number.isNaN(lat) || Number.isNaN(lng))
-        return null;
-    if (lat < -90 || lat > 90 || lng < -180 || lng > 180)
-        return null;
-    // Treat Null Island as "no coordinate"
-    if (lat === 0 && lng === 0)
-        return null;
-    return { lat, lng };
-}
-/**
- * Accepts either:
- *  - "[lon,lat]" (JSON-style array)
- *  - "lat, lon" (string)
- */
-function parseCoordinate(value) {
-    if (!value || typeof value !== 'string')
-        return null;
-    const trimmed = value.trim();
-    let lat;
-    let lng;
-    if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
-        try {
-            const arr = JSON.parse(trimmed);
-            if (!Array.isArray(arr) || arr.length < 2)
-                return null;
-            lng = Number(arr[0]);
-            lat = Number(arr[1]);
-        }
-        catch {
-            return null;
-        }
-    }
-    else {
-        const parts = trimmed.split(',').map((part) => part.trim());
-        if (parts.length !== 2)
-            return null;
-        lat = Number(parts[0]);
-        lng = Number(parts[1]);
-    }
-    return normalizeCoordinate(lat, lng);
-}
-function formatCoordinate(coordinate) {
-    if (!coordinate)
-        return null;
-    return `[${coordinate.lng.toFixed(6)},${coordinate.lat.toFixed(6)}]`;
-}
-const MapClickListener = ({ disabled, onCoordinateSelected, }) => {
-    useMapEvents({
-        click(event) {
-            if (disabled)
-                return;
-            const { lat, lng } = event.latlng;
-            onCoordinateSelected({ lat, lng });
-        },
-    });
-    return null;
-};
-const RecenterOnCoordinate = ({ coordinate }) => {
-    const map = useMap();
-    React__default.useEffect(() => {
-        if (coordinate) {
-            map.flyTo([coordinate.lat, coordinate.lng], map.getZoom(), {
-                duration: 0.4,
-            });
-        }
-    }, [coordinate, map]);
-    return null;
-};
-// DHIS2 / react-leaflet typing workaround
-const CoordinateMapContainer = MapContainer;
-const CoordinatePickerField = ({ label, name, value, required, disabled, error, validationText, onChange, onBlur, }) => {
-    const parsedCoordinate = React__default.useMemo(() => parseCoordinate(value), [value]);
-    const [latitudeInput, setLatitudeInput] = React__default.useState(parsedCoordinate ? String(parsedCoordinate.lat) : '');
-    const [longitudeInput, setLongitudeInput] = React__default.useState(parsedCoordinate ? String(parsedCoordinate.lng) : '');
-    const [validationMessage, setValidationMessage] = React__default.useState(null);
-    const [isMapDialogOpen, setIsMapDialogOpen] = React__default.useState(false);
-    const [pendingCoordinate, setPendingCoordinate] = React__default.useState(parsedCoordinate ?? null);
-    const [mapCenterPosition, setMapCenterPosition] = React__default.useState(parsedCoordinate
-        ? [parsedCoordinate.lat, parsedCoordinate.lng]
-        : DEFAULT_CENTER);
-    React__default.useEffect(() => {
-        const updatedCoordinate = parseCoordinate(value);
-        if (updatedCoordinate) {
-            setLatitudeInput(String(updatedCoordinate.lat));
-            setLongitudeInput(String(updatedCoordinate.lng));
-            setPendingCoordinate(updatedCoordinate);
-            setMapCenterPosition([updatedCoordinate.lat, updatedCoordinate.lng]);
-        }
-        else {
-            setLatitudeInput('');
-            setLongitudeInput('');
-            setPendingCoordinate(null);
-            setMapCenterPosition(DEFAULT_CENTER);
-        }
-    }, [value]);
-    const currentCoordinate = React__default.useMemo(() => {
-        const lat = Number(latitudeInput);
-        const lng = Number(longitudeInput);
-        return normalizeCoordinate(lat, lng);
-    }, [latitudeInput, longitudeInput]);
-    const applyCoordinateChange = React__default.useCallback((coordinate) => {
-        if (!coordinate) {
-            setLatitudeInput('');
-            setLongitudeInput('');
-            setValidationMessage(null);
-            onChange(null);
-            return;
-        }
-        const normalized = normalizeCoordinate(coordinate.lat, coordinate.lng);
-        if (!normalized) {
-            setValidationMessage('Please enter a valid coordinate within the allowed range.');
-            onChange(null);
-            return;
-        }
-        setLatitudeInput(String(normalized.lat));
-        setLongitudeInput(String(normalized.lng));
-        setValidationMessage(null);
-        const formattedValue = formatCoordinate(normalized);
-        onChange(formattedValue);
-    }, [onChange]);
-    const handleLatitudeChange = (event) => {
-        const rawValue = event.value;
-        setLatitudeInput(rawValue);
-        const numericLatitude = Number(rawValue);
-        if (rawValue !== '' &&
-            (Number.isNaN(numericLatitude) ||
-                numericLatitude < -90 ||
-                numericLatitude > 90)) {
-            setValidationMessage('Latitude must be between -90 and 90.');
-            return;
-        }
-        if (rawValue === '' || longitudeInput === '') {
-            applyCoordinateChange(null);
-            return;
-        }
-        const numericLongitude = Number(longitudeInput);
-        if (Number.isNaN(numericLongitude) ||
-            numericLongitude < -180 ||
-            numericLongitude > 180) {
-            setValidationMessage('Longitude must be between -180 and 180.');
-            return;
-        }
-        const updatedCoordinate = {
-            lat: numericLatitude,
-            lng: numericLongitude,
-        };
-        setPendingCoordinate(updatedCoordinate);
-        applyCoordinateChange(updatedCoordinate);
-    };
-    const handleLongitudeChange = (event) => {
-        const rawValue = event.value;
-        setLongitudeInput(rawValue);
-        const numericLongitude = Number(rawValue);
-        if (rawValue !== '' &&
-            (Number.isNaN(numericLongitude) ||
-                numericLongitude < -180 ||
-                numericLongitude > 180)) {
-            setValidationMessage('Longitude must be between -180 and 180.');
-            return;
-        }
-        if (latitudeInput === '' || rawValue === '') {
-            applyCoordinateChange(null);
-            return;
-        }
-        const numericLatitude = Number(latitudeInput);
-        if (Number.isNaN(numericLatitude) ||
-            numericLatitude < -90 ||
-            numericLatitude > 90) {
-            setValidationMessage('Latitude must be between -90 and 90.');
-            return;
-        }
-        const updatedCoordinate = {
-            lat: numericLatitude,
-            lng: numericLongitude,
-        };
-        setPendingCoordinate(updatedCoordinate);
-        applyCoordinateChange(updatedCoordinate);
-    };
-    const handleOpenMapDialog = () => {
-        if (disabled)
-            return;
-        const baseCoordinate = currentCoordinate ?? pendingCoordinate ?? null;
-        if (baseCoordinate) {
-            setPendingCoordinate(baseCoordinate);
-            setMapCenterPosition([baseCoordinate.lat, baseCoordinate.lng]);
-        }
-        else {
-            setMapCenterPosition(DEFAULT_CENTER);
-        }
-        setIsMapDialogOpen(true);
-        if (!baseCoordinate && navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition((position) => {
-                const coordinate = normalizeCoordinate(position.coords.latitude, position.coords.longitude);
-                if (coordinate) {
-                    setPendingCoordinate(coordinate);
-                    setMapCenterPosition([coordinate.lat, coordinate.lng]);
-                }
-                else {
-                    setMapCenterPosition(DEFAULT_CENTER);
-                }
-            }, () => {
-                setValidationMessage((previous) => previous ??
-                    'We could not detect your location. Please move the map and click on the correct place.');
-            });
+    const handleCollapse = ({ path }) => {
+        const pathIndex = expanded?.indexOf(path);
+        if (pathIndex && pathIndex !== -1 && expanded) {
+            const updatedExpanded = pathIndex === 0
+                ? expanded.slice(1)
+                : [...expanded.slice(0, pathIndex), ...expanded.slice(pathIndex + 1)];
+            setExpanded(updatedExpanded);
         }
     };
-    const handleCloseMapDialog = () => {
-        setIsMapDialogOpen(false);
+    const handleOrgUnitSearch = async (query) => {
+        setSearchLoading(true);
+        try {
+            const searchResponse = await d2.httpInstance.get(`organisationUnits.json?fields=id,displayName,path,publicAccess,access,lastUpdated,children[id,displayName,publicAccess,access,path,children::isNotEmpty]&paging=true&query=${query}&withinUserSearchHierarchy=true&pageSize=15`);
+            setSearchData((searchResponse.data || {})['organisationUnits']);
+            setSearchLoading(false);
+        }
+        catch (e) {
+            setSearchLoading(false);
+        }
     };
-    const handleMapClick = (coordinate) => {
-        const normalized = normalizeCoordinate(coordinate.lat, coordinate.lng);
-        if (!normalized)
-            return;
-        setPendingCoordinate(normalized);
-        setMapCenterPosition([normalized.lat, normalized.lng]);
+    const debouncedSearch = useCallback(debounce((value) => {
+        handleOrgUnitSearch(value);
+    }, 500), []);
+    const handleFilterChange = (event) => {
+        setSearchText(event.value);
+        debouncedSearch(event.value);
     };
-    const handleConfirmFromMap = () => {
-        if (!pendingCoordinate)
-            return;
-        applyCoordinateChange(pendingCoordinate);
-        setIsMapDialogOpen(false);
+    const ready = useMemo(() => {
+        return searchText?.length ? !searchLoading : !loading;
+    }, [searchText, searchLoading, loading]);
+    const renderOrgUnitTree = () => {
+        if (searchText && searchText?.length > 0) {
+            if (searchLoading) {
+                return (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
+                    React__default.createElement(CircularLoader$1, { small: true })));
+            }
+            return (ready && (React__default.createElement(OrganisationUnitTree, { key: `${key}-search`, roots: searchData?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
+                    setSelectedOrgUnit(event);
+                    setShowOrgUnitTree(false);
+                    onSelectOrgUnit(event.id);
+                } })));
+        }
+        return (rootOrgUnits.length > 0 && (React__default.createElement(OrganisationUnitTree, { key: key, roots: rootOrgUnits?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
+                setSelectedOrgUnit(event);
+                setShowOrgUnitTree(false);
+                onSelectOrgUnit(event.id);
+            } })));
     };
-    const combinedErrorMessage = validationMessage || (error ? validationText : null);
-    const markerCoordinate = pendingCoordinate || currentCoordinate || null;
-    const selectedLocationText = markerCoordinate
-        ? `Selected location: Lat ${markerCoordinate.lat.toFixed(5)}, Lon ${markerCoordinate.lng.toFixed(5)}`
-        : 'No location selected yet. Click on the street map to drop a marker.';
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Field, { label: label, name: name, required: required, error: Boolean(combinedErrorMessage), validationText: combinedErrorMessage ?? undefined },
-            React__default.createElement("div", { style: {
-                    display: 'grid',
-                    gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr)',
-                    gap: 8,
-                    alignItems: 'flex-end',
-                } },
-                React__default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 } },
-                    React__default.createElement(Button$1, { name: `${name}-open-map`, disabled: disabled, onClick: handleOpenMapDialog, secondary: true }, currentCoordinate
-                        ? 'Update location on map'
-                        : 'Pick location on map')),
-                React__default.createElement(InputField$1, { label: "Latitude (\u00B0)", name: `${name}-lat`, type: "number", step: "0.000001", disabled: disabled, value: latitudeInput, onChange: handleLatitudeChange, onBlur: onBlur, placeholder: "-6.814527" }),
-                React__default.createElement(InputField$1, { label: "Longitude (\u00B0)", name: `${name}-lng`, type: "number", step: "0.000001", disabled: disabled, value: longitudeInput, onChange: handleLongitudeChange, onBlur: onBlur, placeholder: "39.279557" }))),
-        isMapDialogOpen && (React__default.createElement(Modal$1, { onClose: handleCloseMapDialog, position: "middle", className: "coordinate-modal" },
-            React__default.createElement(ModalTitle$1, null, "Select location on street map"),
-            React__default.createElement(ModalContent$1, null,
-                React__default.createElement("div", { style: {
-                        width: '80vw',
-                        height: '70vh',
-                        maxWidth: '100%',
-                        maxHeight: '80vh',
-                    } },
-                    React__default.createElement(CoordinateMapContainer, { center: mapCenterPosition, zoom: markerCoordinate ? 12 : DEFAULT_ZOOM, style: { width: '100%', height: '100%', borderRadius: 8 }, scrollWheelZoom: !disabled },
-                        React__default.createElement(TileLayer, { attribution: "\u00A9 OpenStreetMap contributors", url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }),
-                        React__default.createElement(RecenterOnCoordinate, { coordinate: markerCoordinate }),
-                        markerCoordinate && (React__default.createElement(Marker, { position: [markerCoordinate.lat, markerCoordinate.lng] })),
-                        React__default.createElement(MapClickListener, { disabled: disabled, onCoordinateSelected: handleMapClick }))),
-                React__default.createElement("p", { style: { marginTop: 8, fontSize: 13 } }, selectedLocationText),
-                React__default.createElement(Help, null, "Use the street map to find the correct facility, building or area. Pan (drag), zoom in/out, then click once to place or move the marker. Click Use Selected Location to save the coordinates.")),
-            React__default.createElement(ModalActions$1, null,
-                React__default.createElement("div", { style: { display: 'flex', gap: 12 } },
-                    React__default.createElement(Button$1, { onClick: handleCloseMapDialog, secondary: true }, "Cancel"),
-                    React__default.createElement(Button$1, { primary: true, onClick: handleConfirmFromMap, disabled: !pendingCoordinate }, "Use Selected Location")))))));
+    return (config && (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false },
+        React__default.createElement("div", null,
+            label && (React__default.createElement("div", { className: classes.orgUnitFieldLabel },
+                React__default.createElement("span", null, label),
+                required ? (React__default.createElement("span", { className: classes.orgUnitFieldRequiredLabel }, "*")) : (React__default.createElement(React__default.Fragment, null)))),
+            !showOrgUnitTree ? (selectedOrgUnit ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Tooltip, { content: selectedOrgUnitLabel }, disabled ? (React__default.createElement(Chip, null, selectedOrgUnit.displayName)) : (React__default.createElement(Chip, { onRemove: () => {
+                        // setShowOrgUnitTree(true);
+                        // Clear internal state
+                        setSelectedOrgUnit(undefined);
+                        setSearchText(undefined);
+                        setSearchData(undefined);
+                        setSearchLoading(false);
+                        setExpanded(initiallyExpanded);
+                        // Emit cleared value
+                        onSelectOrgUnit('');
+                        // Show required warning if applicable
+                        if (required) {
+                            setShowRequiredNotice(true);
+                        }
+                        setShowOrgUnitTree(true);
+                    } }, selectedOrgUnit.displayName))))) : (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
+                React__default.createElement(CircularLoader$1, { small: true })))) : (React__default.createElement("div", { className: classes.container },
+                React__default.createElement("div", { className: classes.debounceFieldContainer },
+                    React__default.createElement(InputField$1, { placeholder: "Search", value: searchText, disabled: disabled, onChange: handleFilterChange })),
+                loading ? (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
+                    React__default.createElement(CircularLoader$1, { small: true }))) : (React__default.createElement("div", { className: classes.orgUnitTreeContainer, style: { maxHeight: '200px', overflowY: 'auto' } }, renderOrgUnitTree())),
+                showRequiredNotice && required && (React__default.createElement("div", { style: { margin: '8px' } },
+                    React__default.createElement(NoticeBox, { error: true }, "This field is required. Please select an organisation unit.")))))))));
 };
 
-const ALL_COUNTRIES = [
-    // East Africa first (for convenience)
-    { isoCode: 'TZ', dialCode: '+255', name: 'Tanzania', flag: '🇹🇿' },
-    { isoCode: 'KE', dialCode: '+254', name: 'Kenya', flag: '🇰🇪' },
-    { isoCode: 'UG', dialCode: '+256', name: 'Uganda', flag: '🇺🇬' },
-    { isoCode: 'RW', dialCode: '+250', name: 'Rwanda', flag: '🇷🇼' },
-    { isoCode: 'BI', dialCode: '+257', name: 'Burundi', flag: '🇧🇮' },
-    { isoCode: 'SS', dialCode: '+211', name: 'South Sudan', flag: '🇸🇸' },
-    { isoCode: 'ET', dialCode: '+251', name: 'Ethiopia', flag: '🇪🇹' },
-    // A few examples from other regions:
-    { isoCode: 'GB', dialCode: '+44', name: 'United Kingdom', flag: '🇬🇧' },
-    { isoCode: 'US', dialCode: '+1', name: 'United States', flag: '🇺🇸' },
-    { isoCode: 'CA', dialCode: '+1', name: 'Canada', flag: '🇨🇦' },
-    { isoCode: 'DE', dialCode: '+49', name: 'Germany', flag: '🇩🇪' },
-    { isoCode: 'IN', dialCode: '+91', name: 'India', flag: '🇮🇳' },
-    { isoCode: 'CN', dialCode: '+86', name: 'China', flag: '🇨🇳' },
-    { isoCode: 'BR', dialCode: '+55', name: 'Brazil', flag: '🇧🇷' },
-    // 👉 Here you add the rest of the world.
-    // You can load a standard JSON of all countries (isoCode, dialCode, name, flag)
-    // and generate this array at build time if you prefer.
-];
-
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-const DEFAULT_COUNTRY_ISO = 'TZ';
-const FilterableSingleSelectField = SingleSelectField;
-function normalizeTanzaniaLocal(raw) {
-    const digits = (raw || '').replace(/\D/g, '');
-    if (!digits)
-        return '';
-    if (digits.startsWith('255')) {
-        let sub = digits.slice(3);
-        if (sub.startsWith('0'))
-            sub = sub.slice(1);
-        return ('0' + sub).slice(0, 10);
-    }
-    if (digits.startsWith('0')) {
-        return digits.slice(0, 10);
-    }
-    if (/^[67]\d{7,9}$/.test(digits)) {
-        return ('0' + digits).slice(0, 10);
-    }
-    if (digits.length >= 9 && !digits.startsWith('0')) {
-        return ('0' + digits.slice(0, 9)).slice(0, 10);
+// Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+class FieldConfig {
+    constructor(config) {
+        this.hideLabel = config?.hideLabel ?? false;
+        this.inputWidth = config?.inputWidth || '100%';
     }
-    return digits.slice(0, 10);
 }
-const InternationalPhoneField = ({ name, label, placeholder, value, required, disabled, error, validationText, inputWidth, defaultCountryIsoCode = DEFAULT_COUNTRY_ISO, onChange, onBlur, }) => {
-    const [selectedIsoCode, setSelectedIsoCode] = React__default.useState(defaultCountryIsoCode);
-    const [filterText, setFilterText] = React__default.useState('');
-    const [leadingZeroWarning, setLeadingZeroWarning] = React__default.useState(null);
-    const selectedCountry = ALL_COUNTRIES.find((c) => c.isoCode === selectedIsoCode) ??
-        ALL_COUNTRIES.find((c) => c.isoCode === DEFAULT_COUNTRY_ISO);
-    const [localNumber, setLocalNumber] = React__default.useState('');
-    React__default.useEffect(() => {
-        const raw = value ?? '';
-        if (selectedCountry.isoCode === 'TZ') {
-            const normalizedStored = normalizeTanzaniaLocal(raw);
-            if (!normalizedStored) {
-                setLocalNumber('');
-                return;
-            }
-            const digits = normalizedStored.replace(/\D/g, '');
-            const ui = digits.startsWith('0') ? digits.slice(1) : digits;
-            setLocalNumber(ui);
-        }
-        else {
-            const digits = raw.replace(/\D/g, '').slice(0, 15);
-            setLocalNumber(digits);
+
+// field-cascade.types.ts
+/**
+ * Cascade types for form fields.
+ *
+ * Supports configuration-driven "cascading" behaviors such as:
+ * - Filtering dropdown options based on the selected value of another field
+ *   (e.g., path codes like "/Zanzibar/Unguja/...").
+ *
+ * This file intentionally contains:
+ * - enums
+ * - interfaces / types
+ * - defaults
+ *
+ * Runtime logic belongs in: field-cascade.util.ts
+ */
+/** Discriminator for all cascade configuration kinds */
+var CascadeKind;
+(function (CascadeKind) {
+    CascadeKind["OPTIONS_PATH"] = "OPTIONS_PATH";
+    // Future:
+    // ORG_UNIT_PATH = 'ORG_UNIT_PATH',
+    // OPTIONS_MAPPING = 'OPTIONS_MAPPING',
+})(CascadeKind || (CascadeKind = {}));
+/**
+ * Strategy used to match the parent value against child option "path".
+ *
+ * Notes:
+ * - PREFIX: true "under this parent path" match. Best when parent value is a full path prefix.
+ * - LEAF_TOKEN: token-safe "includes" match (recommended for DHIS2-ish paths). Matches:
+ *      child endsWith("/<leaf>") OR child contains("/<leaf>/")
+ * - CONTAINS: raw substring match anywhere (least strict; can produce false positives).
+ * - EXACT: exact path match.
+ */
+var ParentMatchMode;
+(function (ParentMatchMode) {
+    ParentMatchMode["PREFIX"] = "PREFIX";
+    ParentMatchMode["LEAF_TOKEN"] = "LEAF_TOKEN";
+    ParentMatchMode["CONTAINS"] = "CONTAINS";
+    ParentMatchMode["EXACT"] = "EXACT";
+})(ParentMatchMode || (ParentMatchMode = {}));
+/** Where to read the child option path from */
+var OptionPathField;
+(function (OptionPathField) {
+    OptionPathField["CODE"] = "code";
+    OptionPathField["ID"] = "id";
+    OptionPathField["VALUE"] = "value";
+})(OptionPathField || (OptionPathField = {}));
+/** What is stored in the parent field control value */
+var ParentValueType;
+(function (ParentValueType) {
+    ParentValueType["CODE"] = "CODE";
+    ParentValueType["ID"] = "ID";
+})(ParentValueType || (ParentValueType = {}));
+/**
+ * Centralized defaults for OPTIONS_PATH
+ * (keep defaults here, merge in util).
+ */
+const DEFAULT_OPTIONS_PATH_CASCADE = {
+    optionPathSeparator: '/',
+    parentMatchMode: ParentMatchMode.LEAF_TOKEN, // ✅ token-safe "includes"
+    childPathField: OptionPathField.CODE,
+    parentValueType: ParentValueType.CODE,
+    disableUntilParentSelected: true,
+    clearOnParentChange: true,
+    allowAllIfParentMissing: false,
+};
+
+// field-cascade.util.ts
+class FieldCascadeUtil {
+    static buildConfigByChildFieldId(configs) {
+        const map = Object.create(null);
+        for (let i = 0; i < (configs?.length ?? 0); i += 1) {
+            const cfg = configs[i];
+            if (!cfg?.fieldId)
+                continue;
+            map[cfg.fieldId] = cfg;
         }
-        setLeadingZeroWarning(null);
-    }, [value, selectedCountry.isoCode]);
-    const filteredCountries = React__default.useMemo(() => {
-        const term = filterText.trim().toLowerCase();
-        if (!term)
-            return ALL_COUNTRIES;
-        return ALL_COUNTRIES.filter((c) => {
-            const haystack = `${c.name} ${c.dialCode} ${c.isoCode}`.toLowerCase();
-            return haystack.includes(term);
-        });
-    }, [filterText]);
-    const handleCountryChange = ({ selected }) => {
-        setSelectedIsoCode(selected);
-    };
-    const handleLocalChange = ({ value }) => {
-        const digitsOnly = (value || '').replace(/\D/g, '');
-        if (selectedCountry.isoCode === 'TZ') {
-            let ui = digitsOnly;
-            if (ui.startsWith('0')) {
-                setLeadingZeroWarning('For Tanzania, do not start the number with 0. Enter it without the leading 0 (e.g. 767000000).');
-                ui = ui.slice(1);
+        return Object.freeze(map);
+    }
+    static normalizePath(raw, separator = '/') {
+        const input = String(raw ?? '').trim();
+        if (!input)
+            return '';
+        if (!input.includes(separator + separator) && !input.endsWith(separator)) {
+            return input;
+        }
+        let out = '';
+        let prevWasSep = false;
+        for (let i = 0; i < input.length; i += 1) {
+            const ch = input[i];
+            const isSep = ch === separator;
+            if (isSep) {
+                if (!prevWasSep)
+                    out += ch;
+                prevWasSep = true;
             }
             else {
-                setLeadingZeroWarning(null);
+                out += ch;
+                prevWasSep = false;
             }
-            ui = ui.slice(0, 9);
-            const stored = ui ? '0' + ui : '';
-            setLocalNumber(ui);
-            onChange(stored);
         }
-        else {
-            const ui = digitsOnly.slice(0, 15);
-            setLocalNumber(ui);
-            onChange(ui);
-            setLeadingZeroWarning(null);
-        }
-    };
-    const effectiveValidationText = leadingZeroWarning ??
-        validationText ??
-        'Enter the phone number without the leading 0 (e.g. 767000000). The country code is already applied, and the system will store it as 0767000000 for Tanzania.';
-    const hasError = Boolean(error || leadingZeroWarning);
-    const wrapperStyle = {
-        maxWidth: typeof inputWidth === 'number' ? inputWidth : inputWidth || 480,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.5rem',
-    };
-    return (React__default.createElement("div", { style: wrapperStyle },
-        label && (React__default.createElement("label", { htmlFor: name, style: {
-                fontSize: '0.875rem',
-                fontWeight: 500,
-                color: '#1f2933',
-            } },
-            label,
-            required ? (React__default.createElement("span", { style: { color: '#e53935', marginLeft: 4 } }, "*")) : null)),
-        React__default.createElement("div", { style: {
-                display: 'flex',
-                width: '100%',
-                gap: '0.75rem',
-                alignItems: 'stretch',
-            } },
-            React__default.createElement("div", { style: {
-                    flex: '0 0 auto',
-                    width: 260,
-                } },
-                React__default.createElement(FilterableSingleSelectField, { selected: selectedIsoCode, onChange: handleCountryChange, disabled: disabled, dense: true, filterable: true, onFilterChange: ({ value }) => setFilterText(value), noMatchText: "No matching country" }, filteredCountries.map((country) => (React__default.createElement(SingleSelectOption, { disabled: disabled, key: country.isoCode, value: country.isoCode, label: `${country.flag} ${country.name} (${country.dialCode})` }))))),
-            React__default.createElement("div", { style: { flex: '1 1 0', minWidth: 0 } },
-                React__default.createElement(InputField$1, { type: "tel", name: name, placeholder: placeholder ?? '767000000', value: localNumber, required: required, disabled: disabled, error: hasError, validationText: effectiveValidationText, autoComplete: "tel", max: selectedCountry.isoCode === 'TZ' ? '9' : '15', onChange: handleLocalChange, onBlur: () => {
-                        if (selectedCountry.isoCode === 'TZ') {
-                            const digits = (localNumber || '')
-                                .replace(/\D/g, '')
-                                .slice(0, 9);
-                            const stored = digits ? '0' + digits : '';
-                            if (digits !== localNumber) {
-                                setLocalNumber(digits);
-                                onChange(stored);
-                            }
-                        }
-                        onBlur?.();
-                    } })))));
-};
+        if (out === separator)
+            return separator;
+        return out.endsWith(separator) ? out.slice(0, -1) : out;
+    }
+    static getPathLeaf(raw, separator = '/') {
+        const normalized = FieldCascadeUtil.normalizePath(raw, separator);
+        if (!normalized)
+            return '';
+        const parts = normalized.split(separator).filter(Boolean);
+        return parts.length ? parts[parts.length - 1] : normalized;
+    }
+    static containsLeafToken(childPath, parentLeaf, separator = '/') {
+        if (!childPath || !parentLeaf)
+            return false;
+        const token = `${separator}${parentLeaf}`;
+        return (childPath.endsWith(token) || childPath.includes(token + separator));
+    }
+    /**
+     * Safe property getter for "unknown object shapes" (keeps TS happy).
+     */
+    static getProp(obj, key) {
+        return obj[key];
+    }
+    /**
+     * Reads the child option path from configured field (code/id) and normalizes it.
+     * Works with any option object type (including interfaces without index signatures).
+     */
+    static getChildOptionPath(option, pathField, separator = '/') {
+        const raw = FieldCascadeUtil.getProp(option, pathField);
+        return FieldCascadeUtil.normalizePath(raw, separator);
+    }
+    static getParentEffectiveValue(merged, parentValue) {
+        const raw = String(parentValue ?? '').trim();
+        if (!raw)
+            return '';
+        if (merged.parentValueType === ParentValueType.ID) {
+            return raw;
+        }
+        return FieldCascadeUtil.normalizePath(raw, merged.optionPathSeparator);
+    }
+    static matchesChildToParent(childPathRaw, parentEffectiveRaw, mode, separator = '/') {
+        const childPath = FieldCascadeUtil.normalizePath(childPathRaw, separator);
+        const parentEffective = FieldCascadeUtil.normalizePath(parentEffectiveRaw, separator);
+        if (!childPath || !parentEffective)
+            return false;
+        switch (mode) {
+            case ParentMatchMode.PREFIX: {
+                // Allow exact node match and boundary-safe prefix
+                if (childPath === parentEffective)
+                    return true;
+                const prefix = parentEffective.endsWith(separator)
+                    ? parentEffective
+                    : parentEffective + separator;
+                return childPath.startsWith(prefix);
+            }
+            default: {
+                const leaf = FieldCascadeUtil.getPathLeaf(parentEffective, separator);
+                return FieldCascadeUtil.containsLeafToken(childPath, leaf, separator);
+            }
+        }
+    }
+    static shouldDisableChildField(cascade, parentValue) {
+        if (!cascade || cascade.kind !== CascadeKind.OPTIONS_PATH)
+            return false;
+        const merged = { ...DEFAULT_OPTIONS_PATH_CASCADE, ...cascade };
+        if (!merged.disableUntilParentSelected)
+            return false;
+        const parentEffective = FieldCascadeUtil.getParentEffectiveValue(merged, parentValue);
+        if (!parentEffective)
+            return true;
+        if (merged.parentValueType === ParentValueType.CODE) {
+            return (FieldCascadeUtil.getPathLeaf(parentEffective, merged.optionPathSeparator)
+                .length === 0);
+        }
+        return false;
+    }
+    static filterChildOptionsByParentPath(childOptions, cascade, parentValue) {
+        if (!cascade || cascade.kind !== CascadeKind.OPTIONS_PATH) {
+            return (childOptions ?? []);
+        }
+        const merged = { ...DEFAULT_OPTIONS_PATH_CASCADE, ...cascade };
+        const parentEffective = FieldCascadeUtil.getParentEffectiveValue(merged, parentValue);
+        if (!parentEffective) {
+            return merged.allowAllIfParentMissing
+                ? (childOptions ?? [])
+                : [];
+        }
+        const out = [];
+        const sep = merged.optionPathSeparator;
+        const mode = merged.parentMatchMode;
+        const pathField = merged.childPathField;
+        for (let i = 0; i < (childOptions?.length ?? 0); i += 1) {
+            const opt = childOptions[i];
+            const childPath = FieldCascadeUtil.getChildOptionPath(opt, pathField, sep);
+            if (!childPath)
+                continue;
+            if (FieldCascadeUtil.matchesChildToParent(childPath, parentEffective, mode, sep)) {
+                out.push(opt);
+            }
+        }
+        return out;
+    }
+    static filterOptionsByCascade(options, config, parentValue) {
+        if (!config || config.kind !== CascadeKind.OPTIONS_PATH) {
+            return [...(options ?? [])];
+        }
+        const merged = { ...DEFAULT_OPTIONS_PATH_CASCADE, ...config };
+        const parentEffective = FieldCascadeUtil.getParentEffectiveValue(merged, parentValue);
+        if (!parentEffective) {
+            return merged.allowAllIfParentMissing ? [...(options ?? [])] : [];
+        }
+        const sep = merged.optionPathSeparator;
+        return (options ?? []).filter((opt) => {
+            const childPath = FieldCascadeUtil.getChildOptionPath((opt ?? {}), merged.childPathField, sep);
+            return (!!childPath &&
+                FieldCascadeUtil.matchesChildToParent(childPath, parentEffective, merged.parentMatchMode, sep));
+        });
+    }
+}
 
+// Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+// import {
+//   computed,
+//   Directive,
+//   EventEmitter,
+//   inject,
+//   input,
+//   model,
+//   NgZone,
+//   Output,
+//   Signal,
+// } from '@angular/core';
+// import { toObservable } from '@angular/core/rxjs-interop';
+// import { FormGroup } from '@angular/forms';
+// import {
+//   Checkbox,
+//   CircularLoader,
+//   colors,
+//   InputField,
+//   MultiSelectField,
+//   MultiSelectOption,
+//   SingleSelectField,
+//   SingleSelectOption,
+//   TextAreaField,
+//   Transfer,
+// } from '@dhis2/ui';
+// import {
+//   D2Window,
+//   DataFilterCondition,
+//   DataQueryFilter,
+//   DHIS2Event,
+//   TrackedEntityInstance,
+// } from '@iapps/d2-web-sdk';
+// import React, { useEffect, useMemo, useState } from 'react';
+// import * as ReactDOM from 'react-dom/client';
+// import { filter, take } from 'rxjs';
+// import { ReactWrapperModule } from '../../react-wrapper/react-wrapper.component';
+// import { useFieldValidation } from '../hooks';
+// // import { IFormField } from '../interfaces';
+// // import { FieldConfig } from '../models';
+// import { FileUploadField } from './file-upload-field.component';
+// import { OrgUnitFormField } from './org-unit-form-field.component';
+// import { CustomOrgUnitConfig } from '../models/org-unit.model';
+// import { IFormField } from '../interfaces/form-field.interface';
+// import { FieldConfig } from '../models/field-config.model';
+// import { CoordinatePickerField } from './coordinate-field-component';
+// import { NoticeBox } from '@dhis2/ui';
+// import { InternationalPhoneField } from './phone-number-field.component';
+// import {
+//   DEFAULT_OPTIONS_PATH_CASCADE,
+//   OptionsPathCascadeConfig,
+//   OptionsPathCascadeConfigMap,
+// } from '../types/field-cascade.types';
+// import { FieldCascadeUtil } from '../utils/field-cascade.util';
+// @Directive()
+// export class BaseFormFieldComponent extends ReactWrapperModule {
+//   ngZone = inject(NgZone);
+//   fieldType = 'textbox';
+//   field = input.required<IFormField<string>>();
+//   fieldError = input<string | undefined>();
+//   fieldConfig = input<FieldConfig>(new FieldConfig());
+//   form = model.required<FormGroup>();
+//   isValid = input<boolean>();
+//   isValueAssigned = input<boolean>();
+//   dataId = input<string>();
+//   customOrgUnitRoots = input<CustomOrgUnitConfig[]>();
+//   optionCascadeConfigs = input<OptionsPathCascadeConfig[]>();
+//   optionCascadeConfigMap = input<OptionsPathCascadeConfigMap>(
+//     {} as OptionsPathCascadeConfigMap
+//   );
+//   //TODO: FIND BETTER WAY TO PASS PROGRAM TO FIELDS i.e field extensions
+//   program = input<string>();
+//   value = model<string>();
+//   protected value$ = toObservable(this.value);
+//   protected isValueAssigned$ = toObservable(this.isValueAssigned);
+//   protected fieldError$ = toObservable(this.fieldError);
+//   label: Signal<string | undefined> = computed(() => {
+//     return !this.fieldConfig()?.hideLabel ? this.field().label : undefined;
+//   });
+//   placeholder: Signal<string> = computed(() => {
+//     return (
+//       this.field()?.placeholder || `Enter ${this.field()?.label || 'value'}`
+//     );
+//   });
+//   InputField = this.#getInputField();
+//   @Output() update = new EventEmitter<{ form: FormGroup; value: any }>();
+//   @Output() immediateUpdate = new EventEmitter<{
+//     form: FormGroup;
+//     value: any;
+//   }>();
+//   override async ngAfterViewInit() {
+//     if (!this.elementRef) throw new Error('No element ref');
+//     this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+//     this.component = this.InputField;
+//     this.render();
+//   }
+//   #getInputField() {
+//     return (): React.JSX.Element => {
+//       const [value, setValue] = useState(
+//         this.form().get(this.field().id)?.value ||
+//           this.form().get(this.field().key)?.value
+//       );
+//       const [selected, setSelected] = useState();
+//       const [touched, setTouched] = useState(false);
+//       const [disabled, setDisabled] = useState<boolean>(
+//         this.field()?.disabled ?? this.field()?.generated ?? false
+//       );
+//       const [initialError, setInitialError] = useState<string>();
+//       const [recordExistError, setRecordExistError] = useState<
+//         string | undefined
+//       >();
+//       const [checkingUniqueness, setCheckingUniqueness] = useState<boolean>();
+//       useEffect(() => {
+//         const isAssignedSubscription = this.isValueAssigned$
+//           .pipe(filter((isValueAssigned) => isValueAssigned === true))
+//           .subscribe({
+//             next: () => {
+//               const value =
+//                 this.form().get(this.field().id)?.value ||
+//                 this.form().get(this.field().key)?.value;
+//               setValue(value);
+//               setDisabled(true);
+//               checkValueUniqueness();
+//             },
+//           });
+//         return () => {
+//           isAssignedSubscription.unsubscribe();
+//         };
+//       }, []);
+//       // TODO: Review error handling as take() has potential to missed any other updated error information
+//       useEffect(() => {
+//         const fieldErrorSubscription = this.fieldError$
+//           .pipe(
+//             filter((error) => error !== initialError),
+//             take(1)
+//           )
+//           .subscribe({
+//             next: (error: string | undefined) => {
+//               setInitialError(error);
+//             },
+//           });
+//         return () => {
+//           fieldErrorSubscription.unsubscribe();
+//         };
+//       }, [initialError]); // Add initialError as a dependency to avoid stale closures
+//       const arrayValue = useMemo(() => {
+//         if (value && value.length > 0) {
+//           return value.split(',');
+//         }
+//         return [];
+//       }, [value]);
+//       const inputWidth = useMemo(() => {
+//         if (
+//           this.field().controlType === 'date' ||
+//           this.field().controlType === 'date-time'
+//         ) {
+//           return '360px';
+//         }
+//         return this.fieldConfig()?.inputWidth;
+//       }, []);
+//       const { validationError, hasError } = useFieldValidation({
+//         field: this.field(),
+//         form: this.form(),
+//         initialError,
+//         recordExistError,
+//         value,
+//         touched,
+//       });
+//       const onValueChange = (value: unknown) => {
+//         this.ngZone.run(() => {
+//           (
+//             this.form().get(this.field().id) ||
+//             this.form().get(this.field().key)
+//           )?.setValue(value);
+//           this.update.emit({
+//             form: this.form(),
+//             value,
+//           });
+//         });
+//         setValue(value);
+//         setTouched(true);
+//       };
+//       const generateUUID = (): string => {
+//         return (
+//           globalThis.crypto?.randomUUID?.() ??
+//           'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+//             const r = (Math.random() * 16) | 0;
+//             const v = c === 'x' ? r : (r & 0x3) | 0x8;
+//             return v.toString(16);
+//           })
+//         );
+//       };
+//       const checkValueUniqueness = async () => {
+//         if (
+//           this.field().unique ||
+//           ((this.field().extension?.isDataElementUnique ?? false) &&
+//             value &&
+//             value.length > 0 &&
+//             touched)
+//         ) {
+//           setCheckingUniqueness(true);
+//           setRecordExistError(undefined);
+//           try {
+//             const isDuplicate = await this.searchForDuplicates(value);
+//             setCheckingUniqueness(false);
+//             if (isDuplicate) {
+//               const customError = `Record with this ${this.label()} is already registered`;
+//               (
+//                 this.form().controls[this.field().id] ||
+//                 this.form().controls[this.field().key]
+//               )?.setErrors({
+//                 customError,
+//               });
+//               setRecordExistError(customError);
+//             }
+//           } catch (e) {
+//             setCheckingUniqueness(false);
+//             setRecordExistError(undefined);
+//           }
+//         }
+//       };
+//       const formFieldContent = () => {
+//         switch (this.field().controlType) {
+//           case 'number':
+//             return (
+//               <InputField
+//                 error={hasError}
+//                 validationText={validationError}
+//                 type={this.field().type as any}
+//                 inputWidth={inputWidth}
+//                 required={this.field().required}
+//                 name={this.field().id}
+//                 label={this.label()}
+//                 min={this.field().min?.toString()}
+//                 max={this.field().max?.toString()}
+//                 placeholder={this.placeholder()}
+//                 value={value}
+//                 readOnly={disabled}
+//                 onChange={(event: any) => {
+//                   onValueChange(event.value);
+//                 }}
+//                 onBlur={() => {
+//                   checkValueUniqueness();
+//                 }}
+//               />
+//             );
+//           case 'tel':
+//             return (
+//               <InternationalPhoneField
+//                 name={this.field().id}
+//                 label={this.label()}
+//                 placeholder={this.placeholder()}
+//                 value={value ?? ''}
+//                 required={this.field().required}
+//                 disabled={disabled}
+//                 error={hasError}
+//                 validationText={validationError}
+//                 inputWidth={this.fieldConfig()?.inputWidth}
+//                 defaultCountryIsoCode="TZ"
+//                 onChange={(localNumber: string) => {
+//                   onValueChange(localNumber);
+//                 }}
+//                 onBlur={() => {
+//                   checkValueUniqueness();
+//                 }}
+//               />
+//             );
+//           case 'coordinate':
+//             return (
+//               <div
+//                 style={{ display: 'flex', flexDirection: 'column', gap: 12 }}
+//               >
+//                 <NoticeBox title="Location capture required">
+//                   <p style={{ margin: 0 }}>
+//                     This field requires selecting the exact geographic location
+//                     on the map.
+//                   </p>
+//                   <ul
+//                     style={{ margin: '6px 0 0 18px', padding: 0, fontSize: 13 }}
+//                   >
+//                     <li>
+//                       Click <strong>“Pick location on map”</strong> to open the
+//                       street map.
+//                     </li>
+//                     <li>
+//                       Pan and zoom until you locate the correct facility,
+//                       building, house or area.
+//                     </li>
+//                     <li>
+//                       Click once on the map to place or move the marker
+//                       accurately.
+//                     </li>
+//                     <li>
+//                       Click <strong>“Use Selected Location”</strong> to save the
+//                       coordinates.
+//                     </li>
+//                   </ul>
+//                 </NoticeBox>
+//                 <CoordinatePickerField
+//                   error={hasError}
+//                   validationText={validationError}
+//                   required={this.field().required}
+//                   name={this.field().id}
+//                   disabled={disabled}
+//                   label={this.label()}
+//                   value={value}
+//                   onChange={(newValue: string | null) => {
+//                     onValueChange(newValue);
+//                   }}
+//                   onBlur={() => {
+//                     checkValueUniqueness();
+//                   }}
+//                 />
+//               </div>
+//             );
+//           case 'textarea':
+//             return (
+//               <TextAreaField
+//                 error={hasError}
+//                 validationText={validationError}
+//                 inputWidth={this.fieldConfig()?.inputWidth}
+//                 required={this.field().required}
+//                 name={this.field().id}
+//                 disabled={disabled}
+//                 label={this.label()}
+//                 rows={5}
+//                 placeholder={this.placeholder()}
+//                 value={value}
+//                 onChange={(event: any) => {
+//                   onValueChange(event.value);
+//                 }}
+//                 onBlur={() => {
+//                   checkValueUniqueness();
+//                 }}
+//               />
+//             );
+//           case 'org-unit': {
+//             return (
+//               <OrgUnitFormField
+//                 label={this.label()}
+//                 key={this.field().id}
+//                 field={this.field().id}
+//                 required={this.field().required}
+//                 disabled={disabled}
+//                 customOrgUnitRoots={this.customOrgUnitRoots()}
+//                 onSelectOrgUnit={(selectedOrgUnit: string) => {
+//                   onValueChange(selectedOrgUnit);
+//                 }}
+//                 selected={value}
+//               />
+//             );
+//           }
+//           case 'transfer':
+//             return (
+//               <Transfer
+//                 filterable
+//                 filterPlaceholder="Search"
+//                 selected={selected}
+//                 leftHeader={
+//                   <div
+//                     style={{
+//                       fontSize: 14,
+//                       padding: '8px 4px',
+//                     }}
+//                   >
+//                     {this.field().availableOptionsLabel}
+//                   </div>
+//                 }
+//                 rightHeader={
+//                   <div
+//                     style={{
+//                       fontSize: 14,
+//                       padding: '8px 4px',
+//                     }}
+//                   >
+//                     {this.field().selectedOptionsLabel}
+//                   </div>
+//                 }
+//                 options={this.field().options}
+//                 onChange={(event: any) => {
+//                   onValueChange(event.selected);
+//                 }}
+//               />
+//             );
+//           case 'checkbox':
+//             return (
+//               <Checkbox
+//                 checked={Boolean(value)}
+//                 error={hasError}
+//                 label={this.label()}
+//                 name={this.field().id}
+//                 disabled={disabled}
+//                 onChange={(event: any) => {
+//                   onValueChange(event.checked);
+//                 }}
+//                 onBlur={() => {
+//                   checkValueUniqueness();
+//                 }}
+//               />
+//             );
+//           case 'dropdown':
+//             return (
+//               <SingleSelectField
+//                 filterable={(this.field().options || []).length > 5}
+//                 clearable
+//                 error={hasError}
+//                 validationText={validationError}
+//                 inputWidth={this.fieldConfig()?.inputWidth}
+//                 disabled={disabled}
+//                 required={this.field().required}
+//                 className="select"
+//                 label={this.label()}
+//                 selected={value}
+//                 onChange={(event: any) => {
+//                   onValueChange(event.selected);
+//                 }}
+//                 onBlur={() => {
+//                   checkValueUniqueness();
+//                 }}
+//               >
+//                 {(this.field().options || []).map((option) => (
+//                   <SingleSelectOption
+//                     key={generateUUID()}
+//                     label={option.label}
+//                     value={option.value}
+//                   />
+//                 ))}
+//               </SingleSelectField>
+//             );
+//           case 'multi-dropdown':
+//             return (
+//               <MultiSelectField
+//                 clearText="Clear"
+//                 clearable
+//                 empty="No data found"
+//                 filterable={(this.field().options || []).length > 5}
+//                 filterPlaceholder="Type to filter options"
+//                 error={hasError}
+//                 validationText={validationError}
+//                 inputWidth={this.fieldConfig()?.inputWidth}
+//                 disabled={disabled}
+//                 label={this.label()}
+//                 required={this.field().required}
+//                 loadingText="Loading options"
+//                 noMatchText="No options found"
+//                 onChange={(event: { selected: string[] }) => {
+//                   const selectedValue = (event.selected || []).join(',');
+//                   onValueChange(selectedValue);
+//                 }}
+//                 onBlur={() => {
+//                   checkValueUniqueness();
+//                 }}
+//                 selected={arrayValue}
+//               >
+//                 {(this.field().options || []).map((option) => (
+//                   <MultiSelectOption
+//                     key={generateUUID()}
+//                     label={option.label}
+//                     value={option.value}
+//                   />
+//                 ))}
+//               </MultiSelectField>
+//             );
+//           // case 'date':
+//           // case 'date-time':
+//           //   return (
+//           //     <InputField
+//           //       error={hasError}
+//           //       validationText={validationError}
+//           //       type={this.field().type as any}
+//           //       inputWidth={inputWidth}
+//           //       required={this.field().required}
+//           //       name={this.field().id}
+//           //       label={this.label()}
+//           //       min={this.field().min?.toString()}
+//           //       max={this.field().max?.toString()}
+//           //       placeholder={this.placeholder()}
+//           //       value={value}
+//           //       readOnly={disabled}
+//           //       onChange={(event: any) => {
+//           //         onValueChange(event.value);
+//           //       }}
+//           //       onBlur={() => {
+//           //         checkValueUniqueness();
+//           //       }}
+//           //     />
+//           //   );
+//           case 'date':
+//           case 'date-time': {
+//             const field = this.field();
+//             const isDateTimeField = field.type === 'date-time';
+//             const inputType: any = isDateTimeField ? 'datetime-local' : 'date';
+//             // Value coming from DHIS2 store
+//             const htmlValue = this.formatValueForHtmlInputFromDhis(
+//               value,
+//               isDateTimeField
+//             );
+//             const htmlMin = field.min
+//               ? this.formatValueForHtmlInputFromDhis(
+//                   String(field.min),
+//                   isDateTimeField
+//                 )
+//               : undefined;
+//             // Max defined in metadata (if any)
+//             const metadataMax = field.max
+//               ? this.formatValueForHtmlInputFromDhis(
+//                   String(field.max),
+//                   isDateTimeField
+//                 )
+//               : undefined;
+//             // System max = “now” (no future allowed)
+//             const systemMax = this.getNowForHtmlDateInput(isDateTimeField);
+//             // Effective max = earliest of metadataMax and systemMax
+//             const htmlMax = this.pickEarlierDateLimit(metadataMax, systemMax);
+//             return (
+//               <InputField
+//                 error={hasError}
+//                 validationText={validationError}
+//                 type={inputType}
+//                 inputWidth={inputWidth}
+//                 required={field.required}
+//                 name={field.id}
+//                 label={this.label()}
+//                 min={htmlMin}
+//                 max={htmlMax}
+//                 placeholder={this.placeholder()}
+//                 value={htmlValue}
+//                 readOnly={disabled}
+//                 onChange={({ value: newValue }: { value: string }) => {
+//                   const normalized = this.normalizeDateValueFromHtmlInput(
+//                     newValue,
+//                     isDateTimeField,
+//                     true
+//                   );
+//                   onValueChange(normalized);
+//                 }}
+//                 onBlur={() => {
+//                   checkValueUniqueness();
+//                 }}
+//               />
+//             );
+//           }
+//           case 'file':
+//             return (
+//               <>
+//                 <FileUploadField
+//                   label={this.label()}
+//                   id={this.field().id}
+//                   hasError={hasError}
+//                   required={this.field().required}
+//                   validationText={validationError}
+//                   performUpload={true}
+//                   uploadUrl={'fileResources'}
+//                   onUploadSuccess={(fileId: string) => {
+//                     onValueChange(fileId);
+//                   }}
+//                   onRemoveFile={() => {
+//                     onValueChange('');
+//                   }}
+//                   extension={this.field()?.extension}
+//                   value={value}
+//                   metaType={this.field().metaType}
+//                   dataId={this.dataId()}
+//                   program={this.program()}
+//                 />
+//               </>
+//             );
+//           default:
+//             return (
+//               <InputField
+//                 error={hasError}
+//                 validationText={validationError}
+//                 type={this.field().type as any}
+//                 inputWidth={inputWidth}
+//                 required={this.field().required}
+//                 name={this.field().id}
+//                 label={this.label()}
+//                 min={this.field().min?.toString()}
+//                 max={this.field().max?.toString()}
+//                 placeholder={this.placeholder()}
+//                 value={value}
+//                 readOnly={disabled}
+//                 onChange={(event: any) => {
+//                   onValueChange(event.value);
+//                 }}
+//                 onBlur={() => {
+//                   checkValueUniqueness();
+//                 }}
+//               />
+//             );
+//         }
+//       };
+//       {
+//         return (
+//           <React.Fragment>
+//             {formFieldContent()}
+//             {checkingUniqueness && (
+//               <div
+//                 style={{
+//                   display: 'flex',
+//                   alignItems: 'center',
+//                   gap: 8,
+//                   paddingTop: 8,
+//                 }}
+//               >
+//                 <CircularLoader small />
+//                 <div style={{ color: colors.grey800, fontSize: 14 }}>
+//                   Checking...
+//                 </div>
+//               </div>
+//             )}
+//           </React.Fragment>
+//         );
+//       }
+//     };
+//   }
+// ✅ DROP-IN REPLACEMENT: BaseFormFieldComponent (only the relevant changed parts)
+// You can comment your existing #getInputField() implementation and paste this one.
+//
+// Notes:
+// - Implements OPTIONS_PATH cascading using optionCascadeConfigMap (preferred) and falls back to optionCascadeConfigs.
+// - Filters dropdown + multi-dropdown options using FieldCascadeUtil.
+// - Disables child until parent selected (if configured).
+// - Clears child value when parent changes (if configured) ONLY when current value is no longer valid.
+// - Avoids generateUUID() for option keys (uses stable keys).
+// - Keeps your existing “generated/disabled/isAssigned” semantics.
 // Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
@@ -6699,21 +8412,30 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         this.fieldError = input(...(ngDevMode ? [undefined, { debugName: "fieldError" }] : []));
         this.fieldConfig = input(new FieldConfig(), ...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
         this.form = model.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+        // kept for compatibility (even if not used directly here)
         this.isValid = input(...(ngDevMode ? [undefined, { debugName: "isValid" }] : []));
         this.isValueAssigned = input(...(ngDevMode ? [undefined, { debugName: "isValueAssigned" }] : []));
         this.dataId = input(...(ngDevMode ? [undefined, { debugName: "dataId" }] : []));
         this.customOrgUnitRoots = input(...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : []));
-        //TODO: FIND BETTER WAY TO PASS PROGRAM TO FIELDS i.e field extensions
+        // Cascade
+        this.optionCascadeConfigs = input([], ...(ngDevMode ? [{ debugName: "optionCascadeConfigs" }] : []));
+        this.optionCascadeConfigMap = input({}, ...(ngDevMode ? [{ debugName: "optionCascadeConfigMap" }] : []));
+        this.coordinatePickerGeoConfig = input(...(ngDevMode ? [undefined, { debugName: "coordinatePickerGeoConfig" }] : []));
+        this.fieldControlKeyById = input({}, ...(ngDevMode ? [{ debugName: "fieldControlKeyById" }] : []));
+        // kept for compatibility (used by FileUploadField)
         this.program = input(...(ngDevMode ? [undefined, { debugName: "program" }] : []));
         this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
         this.value$ = toObservable(this.value);
         this.isValueAssigned$ = toObservable(this.isValueAssigned);
         this.fieldError$ = toObservable(this.fieldError);
         this.label = computed(() => {
-            return !this.fieldConfig()?.hideLabel ? this.field().label : undefined;
+            const cfg = this.fieldConfig();
+            const f = this.field();
+            return cfg?.hideLabel ? undefined : f.label;
         }, ...(ngDevMode ? [{ debugName: "label" }] : []));
         this.placeholder = computed(() => {
-            return (this.field()?.placeholder || `Enter ${this.field()?.label || 'value'}`);
+            const f = this.field();
+            return f?.placeholder || `Enter ${f?.label || 'value'}`;
         }, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.InputField = this.#getInputField();
         this.update = new EventEmitter();
@@ -6726,126 +8448,209 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         this.component = this.InputField;
         this.render();
     }
+    // -------------------------------
+    // Cascade helpers (UID -> control)
+    // -------------------------------
+    #resolveCascadeForCurrentField() {
+        const f = this.field();
+        const map = this.optionCascadeConfigMap?.() ?? {};
+        const byId = f?.id ? map?.[f.id] : undefined;
+        const byKey = f?.key ? map?.[f.key] : undefined;
+        if (byId || byKey)
+            return (byId || byKey);
+        const list = this.optionCascadeConfigs?.() ?? [];
+        const id = f?.id;
+        const key = f?.key;
+        return list.find((c) => c?.fieldId === id || c?.fieldId === key);
+    }
+    #resolveControlName(fieldIdOrKey) {
+        if (!fieldIdOrKey)
+            return null;
+        const mapped = this.fieldControlKeyById?.()?.[fieldIdOrKey];
+        return mapped ?? fieldIdOrKey;
+    }
+    #getControl(fg, fieldIdOrKey) {
+        const name = this.#resolveControlName(fieldIdOrKey);
+        return name ? fg.get(name) : null;
+    }
+    #getCurrentFieldControl(fg) {
+        const f = this.field();
+        return this.#getControl(fg, f?.id) || this.#getControl(fg, f?.key);
+    }
+    #getOptionKey(option) {
+        // Stable React key, avoids generateUUID re-mounting.
+        return String(option?.value ?? option?.id ?? option?.code ?? option?.label ?? '');
+    }
     #getInputField() {
         return () => {
-            const [value, setValue] = useState(this.form().get(this.field().id)?.value ||
-                this.form().get(this.field().key)?.value);
+            const fg = this.form();
+            const field = this.field();
+            // Refs prevent stale closures in subscriptions
+            const valueRef = useRef('');
+            const touchedRef = useRef(false);
+            // State
+            const [value, setValue] = useState(() => {
+                const ctrl = this.#getCurrentFieldControl(fg);
+                const v = ctrl?.value;
+                const s = v == null ? '' : String(v);
+                valueRef.current = s;
+                return s;
+            });
+            const [filteredOptions, setFilteredOptions] = useState(() => field.options ?? []);
             const [selected, setSelected] = useState();
             const [touched, setTouched] = useState(false);
-            const [disabled, setDisabled] = useState(this.field()?.disabled ?? this.field()?.generated ?? false);
+            const baseDisabled = !!(field?.disabled ?? false) || !!(field?.generated ?? false);
+            const [disabled, setDisabled] = useState(baseDisabled);
             const [initialError, setInitialError] = useState();
             const [recordExistError, setRecordExistError] = useState();
-            const [checkingUniqueness, setCheckingUniqueness] = useState();
+            const [checkingUniqueness, setCheckingUniqueness] = useState(false);
+            // Keep refs synced
             useEffect(() => {
-                const isAssignedSubscription = this.isValueAssigned$
-                    .pipe(filter((isValueAssigned) => isValueAssigned === true))
+                valueRef.current = value;
+            }, [value]);
+            useEffect(() => {
+                touchedRef.current = touched;
+            }, [touched]);
+            // ----------------------------
+            // Error stream: keep first new error
+            // ----------------------------
+            useEffect(() => {
+                const sub = this.fieldError$
+                    .pipe(filter((error) => error !== initialError), take(1))
+                    .subscribe({ next: (error) => setInitialError(error) });
+                return () => sub.unsubscribe();
+            }, [initialError]);
+            // ----------------------------
+            // Uniqueness checker (stable)
+            // ----------------------------
+            const checkValueUniqueness = async (rawValue) => {
+                const currentValue = (rawValue ?? valueRef.current ?? '').trim();
+                const f = this.field();
+                const isEligible = f.unique ||
+                    ((f.extension?.isDataElementUnique ?? false) &&
+                        currentValue.length > 0 &&
+                        touchedRef.current);
+                if (!isEligible)
+                    return;
+                setCheckingUniqueness(true);
+                setRecordExistError(undefined);
+                try {
+                    const isDuplicate = await this.searchForDuplicates(currentValue);
+                    setCheckingUniqueness(false);
+                    if (!isDuplicate)
+                        return;
+                    const customError = `Record with this ${this.label()} is already registered`;
+                    const ctrl = fg.controls[f.id] || (f.key ? fg.controls[f.key] : undefined);
+                    ctrl?.setErrors({ customError });
+                    setRecordExistError(customError);
+                }
+                catch {
+                    setCheckingUniqueness(false);
+                    setRecordExistError(undefined);
+                }
+            };
+            // ----------------------------
+            // Auto-assigned -> lock field + uniqueness check
+            // ----------------------------
+            useEffect(() => {
+                const sub = this.isValueAssigned$
+                    .pipe(filter((v) => v === true))
                     .subscribe({
                     next: () => {
-                        const value = this.form().get(this.field().id)?.value ||
-                            this.form().get(this.field().key)?.value;
-                        setValue(value);
+                        const ctrl = this.#getCurrentFieldControl(fg);
+                        const v = ctrl?.value == null ? '' : String(ctrl.value);
+                        setValue(v);
                         setDisabled(true);
-                        checkValueUniqueness();
+                        checkValueUniqueness(v);
                     },
                 });
-                return () => {
-                    isAssignedSubscription.unsubscribe();
-                };
+                return () => sub.unsubscribe();
             }, []);
-            // TODO: Review error handling as take() has potential to missed any other updated error information
+            // ----------------------------
+            // Cascade wiring (parent -> child)
+            // ----------------------------
             useEffect(() => {
-                const fieldErrorSubscription = this.fieldError$
-                    .pipe(filter((error) => error !== initialError), take(1))
-                    .subscribe({
-                    next: (error) => {
-                        setInitialError(error);
-                    },
-                });
-                return () => {
-                    fieldErrorSubscription.unsubscribe();
+                const cascade = this.#resolveCascadeForCurrentField();
+                if (!cascade || cascade.kind !== 'OPTIONS_PATH') {
+                    setFilteredOptions(field.options ?? []);
+                    setDisabled(baseDisabled);
+                    // return null;
+                    return undefined;
+                }
+                const parentCtrl = this.#getControl(fg, cascade.parentFieldId);
+                const childCtrl = this.#getCurrentFieldControl(fg);
+                if (!parentCtrl || !childCtrl) {
+                    setFilteredOptions(field.options ?? []);
+                    setDisabled(baseDisabled);
+                    // return null;
+                    return undefined;
+                }
+                const merged = { ...DEFAULT_OPTIONS_PATH_CASCADE, ...cascade };
+                const applyCascade = (parentValue, reason) => {
+                    const parentStr = String(parentValue ?? '');
+                    // disable logic
+                    const cascadeDisable = FieldCascadeUtil.shouldDisableChildField(cascade, parentStr);
+                    setDisabled(baseDisabled || cascadeDisable);
+                    // filter options
+                    const nextOptions = FieldCascadeUtil.filterChildOptionsByParentPath(field.options ?? [], cascade, parentStr);
+                    setFilteredOptions(nextOptions);
+                    // clear invalid child on parent change if configured
+                    if (merged.clearOnParentChange && reason === 'parentChange') {
+                        const currentChildValue = String(childCtrl.value ?? '').trim();
+                        if (currentChildValue) {
+                            const stillValid = nextOptions.some((o) => {
+                                const ov = String(o?.value ?? o?.id ?? '');
+                                return ov === currentChildValue;
+                            });
+                            if (!stillValid) {
+                                childCtrl.setValue(null, { emitEvent: true });
+                                setValue('');
+                            }
+                        }
+                    }
                 };
-            }, [initialError]); // Add initialError as a dependency to avoid stale closures
+                applyCascade(parentCtrl.value, 'init');
+                const sub = parentCtrl.valueChanges.subscribe((v) => applyCascade(v, 'parentChange'));
+                return () => sub.unsubscribe();
+            }, []);
+            // Derived
             const arrayValue = useMemo(() => {
-                if (value && value.length > 0) {
-                    return value.split(',');
-                }
-                return [];
+                const str = String(value ?? '');
+                return str.length > 0 ? str.split(',') : [];
             }, [value]);
             const inputWidth = useMemo(() => {
-                if (this.field().controlType === 'date' ||
-                    this.field().controlType === 'date-time') {
+                const f = this.field();
+                if (f.controlType === 'date' || f.controlType === 'date-time') {
                     return '360px';
                 }
                 return this.fieldConfig()?.inputWidth;
             }, []);
             const { validationError, hasError } = useFieldValidation({
-                field: this.field(),
-                form: this.form(),
+                field,
+                form: fg,
                 initialError,
                 recordExistError,
                 value,
                 touched,
             });
-            const onValueChange = (value) => {
+            const onValueChange = (newValue) => {
                 this.ngZone.run(() => {
-                    (this.form().get(this.field().id) ||
-                        this.form().get(this.field().key))?.setValue(value);
-                    this.update.emit({
-                        form: this.form(),
-                        value,
-                    });
+                    const ctrl = this.#getCurrentFieldControl(fg);
+                    ctrl?.setValue(newValue);
+                    this.update.emit({ form: fg, value: newValue });
                 });
-                setValue(value);
+                const s = newValue == null ? '' : String(newValue);
+                setValue(s);
                 setTouched(true);
             };
-            const generateUUID = () => {
-                return (globalThis.crypto?.randomUUID?.() ??
-                    'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-                        const r = (Math.random() * 16) | 0;
-                        const v = c === 'x' ? r : (r & 0x3) | 0x8;
-                        return v.toString(16);
-                    }));
-            };
-            const checkValueUniqueness = async () => {
-                if (this.field().unique ||
-                    ((this.field().extension?.isDataElementUnique ?? false) &&
-                        value &&
-                        value.length > 0 &&
-                        touched)) {
-                    setCheckingUniqueness(true);
-                    setRecordExistError(undefined);
-                    try {
-                        const isDuplicate = await this.searchForDuplicates(value);
-                        setCheckingUniqueness(false);
-                        if (isDuplicate) {
-                            const customError = `Record with this ${this.label()} is already registered`;
-                            (this.form().controls[this.field().id] ||
-                                this.form().controls[this.field().key])?.setErrors({
-                                customError,
-                            });
-                            setRecordExistError(customError);
-                        }
-                    }
-                    catch (e) {
-                        setCheckingUniqueness(false);
-                        setRecordExistError(undefined);
-                    }
-                }
-            };
+            // UI renderer
             const formFieldContent = () => {
-                switch (this.field().controlType) {
+                const f = this.field();
+                switch (f.controlType) {
                     case 'number':
-                        return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, readOnly: disabled, onChange: (event) => {
-                                onValueChange(event.value);
-                            }, onBlur: () => {
-                                checkValueUniqueness();
-                            } }));
+                        return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: f.type, inputWidth: inputWidth, required: f.required, name: f.id, label: this.label(), min: f.min?.toString(), max: f.max?.toString(), placeholder: this.placeholder(), value: value, readOnly: disabled, onChange: (event) => onValueChange(event.value), onBlur: () => checkValueUniqueness() }));
                     case 'tel':
-                        return (React__default.createElement(InternationalPhoneField, { name: this.field().id, label: this.label(), placeholder: this.placeholder(), value: value ?? '', required: this.field().required, disabled: disabled, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, defaultCountryIsoCode: "TZ", onChange: (localNumber) => {
-                                onValueChange(localNumber);
-                            }, onBlur: () => {
-                                checkValueUniqueness();
-                            } }));
+                        return (React__default.createElement(InternationalPhoneField, { name: f.id, label: this.label(), placeholder: this.placeholder(), value: value ?? '', required: f.required, disabled: disabled, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, defaultCountryIsoCode: "TZ", onChange: (localNumber) => onValueChange(localNumber), onBlur: () => checkValueUniqueness() }));
                     case 'coordinate':
                         return (React__default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
                             React__default.createElement(NoticeBox, { title: "Location capture required" },
@@ -6861,127 +8666,56 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                                         "Click ",
                                         React__default.createElement("strong", null, "\u201CUse Selected Location\u201D"),
                                         " to save the coordinates."))),
-                            React__default.createElement(CoordinatePickerField, { error: hasError, validationText: validationError, required: this.field().required, name: this.field().id, disabled: disabled, label: this.label(), value: value, onChange: (newValue) => {
-                                    onValueChange(newValue);
-                                }, onBlur: () => {
-                                    checkValueUniqueness();
-                                } })));
+                            React__default.createElement(CoordinatePickerField, { error: hasError, validationText: validationError, required: f.required, name: f.id, disabled: disabled, label: this.label(), value: value, geoConfig: this.coordinatePickerGeoConfig(), onChange: (newValue) => onValueChange(newValue), onBlur: () => checkValueUniqueness() })));
                     case 'textarea':
-                        return (React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: this.field().required, name: this.field().id, disabled: disabled, label: this.label(), rows: 5, placeholder: this.placeholder(), value: value, onChange: (event) => {
-                                onValueChange(event.value);
-                            }, onBlur: () => {
-                                checkValueUniqueness();
-                            } }));
-                    case 'org-unit': {
-                        return (React__default.createElement(OrgUnitFormField, { label: this.label(), key: this.field().id, field: this.field().id, required: this.field().required, disabled: disabled, customOrgUnitRoots: this.customOrgUnitRoots(), onSelectOrgUnit: (selectedOrgUnit) => {
-                                onValueChange(selectedOrgUnit);
-                            }, selected: value }));
-                    }
+                        return (React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: f.required, name: f.id, disabled: disabled, label: this.label(), rows: 5, placeholder: this.placeholder(), value: value, onChange: (event) => onValueChange(event.value), onBlur: () => checkValueUniqueness() }));
+                    case 'org-unit':
+                        return (React__default.createElement(OrgUnitFormField, { label: this.label(), key: f.id, field: f.id, required: f.required, disabled: disabled, customOrgUnitRoots: this.customOrgUnitRoots(), onSelectOrgUnit: (selectedOrgUnit) => onValueChange(selectedOrgUnit), selected: value }));
                     case 'transfer':
-                        return (React__default.createElement(Transfer, { filterable: true, filterPlaceholder: "Search", selected: selected, leftHeader: React__default.createElement("div", { style: {
-                                    fontSize: 14,
-                                    padding: '8px 4px',
-                                } }, this.field().availableOptionsLabel), rightHeader: React__default.createElement("div", { style: {
-                                    fontSize: 14,
-                                    padding: '8px 4px',
-                                } }, this.field().selectedOptionsLabel), options: this.field().options, onChange: (event) => {
-                                onValueChange(event.selected);
-                            } }));
+                        return (React__default.createElement(Transfer, { filterable: true, filterPlaceholder: "Search", selected: selected, leftHeader: React__default.createElement("div", { style: { fontSize: 14, padding: '8px 4px' } }, f.availableOptionsLabel), rightHeader: React__default.createElement("div", { style: { fontSize: 14, padding: '8px 4px' } }, f.selectedOptionsLabel), options: f.options, onChange: (event) => onValueChange(event.selected) }));
                     case 'checkbox':
-                        return (React__default.createElement(Checkbox, { checked: Boolean(value), error: hasError, label: this.label(), name: this.field().id, disabled: disabled, onChange: (event) => {
-                                onValueChange(event.checked);
-                            }, onBlur: () => {
-                                checkValueUniqueness();
-                            } }));
+                        return (React__default.createElement(Checkbox, { checked: Boolean(value), error: hasError, label: this.label(), name: f.id, disabled: disabled, onChange: (event) => onValueChange(event.checked), onBlur: () => checkValueUniqueness() }));
                     case 'dropdown':
-                        return (React__default.createElement(SingleSelectField, { filterable: (this.field().options || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, required: this.field().required, className: "select", label: this.label(), selected: value, onChange: (event) => {
-                                onValueChange(event.selected);
-                            }, onBlur: () => {
-                                checkValueUniqueness();
-                            } }, (this.field().options || []).map((option) => (React__default.createElement(SingleSelectOption, { key: generateUUID(), label: option.label, value: option.value })))));
+                        return (React__default.createElement(SingleSelectField, { filterable: (filteredOptions || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, required: f.required, className: "select", label: this.label(), selected: value, onChange: (event) => onValueChange(event.selected), onBlur: () => checkValueUniqueness() }, (filteredOptions || []).map((option) => (React__default.createElement(SingleSelectOption, { key: this.#getOptionKey(option), label: option.label ?? option.name ?? option.displayName, value: option.value ?? option.id })))));
                     case 'multi-dropdown':
-                        return (React__default.createElement(MultiSelectField, { clearText: "Clear", clearable: true, empty: "No data found", filterable: (this.field().options || []).length > 5, filterPlaceholder: "Type to filter options", error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, label: this.label(), required: this.field().required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
+                        return (React__default.createElement(MultiSelectField, { clearText: "Clear", clearable: true, empty: "No data found", filterable: (filteredOptions || []).length > 5, filterPlaceholder: "Type to filter options", error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, label: this.label(), required: f.required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
                                 const selectedValue = (event.selected || []).join(',');
                                 onValueChange(selectedValue);
-                            }, onBlur: () => {
-                                checkValueUniqueness();
-                            }, selected: arrayValue }, (this.field().options || []).map((option) => (React__default.createElement(MultiSelectOption, { key: generateUUID(), label: option.label, value: option.value })))));
-                    // case 'date':
-                    // case 'date-time':
-                    //   return (
-                    //     <InputField
-                    //       error={hasError}
-                    //       validationText={validationError}
-                    //       type={this.field().type as any}
-                    //       inputWidth={inputWidth}
-                    //       required={this.field().required}
-                    //       name={this.field().id}
-                    //       label={this.label()}
-                    //       min={this.field().min?.toString()}
-                    //       max={this.field().max?.toString()}
-                    //       placeholder={this.placeholder()}
-                    //       value={value}
-                    //       readOnly={disabled}
-                    //       onChange={(event: any) => {
-                    //         onValueChange(event.value);
-                    //       }}
-                    //       onBlur={() => {
-                    //         checkValueUniqueness();
-                    //       }}
-                    //     />
-                    //   );
+                            }, onBlur: () => checkValueUniqueness(), selected: arrayValue }, (filteredOptions || []).map((option) => (React__default.createElement(MultiSelectOption, { key: this.#getOptionKey(option), label: option.label ?? option.name ?? option.displayName, value: option.value ?? option.id })))));
                     case 'date':
                     case 'date-time': {
-                        const field = this.field();
-                        const isDateTimeField = field.type === 'date-time';
+                        const isDateTimeField = f.type === 'date-time';
                         const inputType = isDateTimeField ? 'datetime-local' : 'date';
-                        // Value coming from DHIS2 store
                         const htmlValue = this.formatValueForHtmlInputFromDhis(value, isDateTimeField);
-                        const htmlMin = field.min
-                            ? this.formatValueForHtmlInputFromDhis(String(field.min), isDateTimeField)
+                        const htmlMin = f.min
+                            ? this.formatValueForHtmlInputFromDhis(String(f.min), isDateTimeField)
                             : undefined;
-                        // Max defined in metadata (if any)
-                        const metadataMax = field.max
-                            ? this.formatValueForHtmlInputFromDhis(String(field.max), isDateTimeField)
+                        const metadataMax = f.max
+                            ? this.formatValueForHtmlInputFromDhis(String(f.max), isDateTimeField)
                             : undefined;
-                        // System max = “now” (no future allowed)
                         const systemMax = this.getNowForHtmlDateInput(isDateTimeField);
-                        // Effective max = earliest of metadataMax and systemMax
                         const htmlMax = this.pickEarlierDateLimit(metadataMax, systemMax);
-                        return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: inputType, inputWidth: inputWidth, required: field.required, name: field.id, label: this.label(), min: htmlMin, max: htmlMax, placeholder: this.placeholder(), value: htmlValue, readOnly: disabled, onChange: ({ value: newValue }) => {
+                        return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: inputType, inputWidth: inputWidth, required: f.required, name: f.id, label: this.label(), min: htmlMin, max: htmlMax, placeholder: this.placeholder(), value: htmlValue, readOnly: disabled, onChange: ({ value: newValue }) => {
                                 const normalized = this.normalizeDateValueFromHtmlInput(newValue, isDateTimeField, true);
                                 onValueChange(normalized);
-                            }, onBlur: () => {
-                                checkValueUniqueness();
-                            } }));
+                            }, onBlur: () => checkValueUniqueness() }));
                     }
                     case 'file':
-                        return (React__default.createElement(React__default.Fragment, null,
-                            React__default.createElement(FileUploadField, { label: this.label(), id: this.field().id, hasError: hasError, required: this.field().required, validationText: validationError, performUpload: true, uploadUrl: 'fileResources', onUploadSuccess: (fileId) => {
-                                    onValueChange(fileId);
-                                }, onRemoveFile: () => {
-                                    onValueChange('');
-                                }, extension: this.field()?.extension, value: value, metaType: this.field().metaType, dataId: this.dataId(), program: this.program() })));
+                        return (React__default.createElement(FileUploadField, { label: this.label(), id: f.id, hasError: hasError, required: f.required, validationText: validationError, performUpload: true, uploadUrl: 'fileResources', onUploadSuccess: (fileId) => onValueChange(fileId), onRemoveFile: () => onValueChange(''), extension: f?.extension, value: value, metaType: f.metaType, dataId: this.dataId(), program: this.program() }));
                     default:
-                        return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, readOnly: disabled, onChange: (event) => {
-                                onValueChange(event.value);
-                            }, onBlur: () => {
-                                checkValueUniqueness();
-                            } }));
+                        return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: f.type, inputWidth: inputWidth, required: f.required, name: f.id, label: this.label(), min: f.min?.toString(), max: f.max?.toString(), placeholder: this.placeholder(), value: value, readOnly: disabled, onChange: (event) => onValueChange(event.value), onBlur: () => checkValueUniqueness() }));
                 }
             };
-            {
-                return (React__default.createElement(React__default.Fragment, null,
-                    formFieldContent(),
-                    checkingUniqueness && (React__default.createElement("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 8,
-                            paddingTop: 8,
-                        } },
-                        React__default.createElement(CircularLoader$1, { small: true }),
-                        React__default.createElement("div", { style: { color: colors$1.grey800, fontSize: 14 } }, "Checking...")))));
-            }
+            return (React__default.createElement(React__default.Fragment, null,
+                formFieldContent(),
+                checkingUniqueness && (React__default.createElement("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 8,
+                        paddingTop: 8,
+                    } },
+                    React__default.createElement(CircularLoader$1, { small: true }),
+                    React__default.createElement("div", { style: { color: colors$1.grey800, fontSize: 14 } }, "Checking...")))));
         };
     }
     onChange(event) {
@@ -7150,7 +8884,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: BaseFormFieldComponent, isStandalone: true, inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldError: { classPropertyName: "fieldError", publicName: "fieldError", isSignal: true, isRequired: false, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isValueAssigned: { classPropertyName: "isValueAssigned", publicName: "isValueAssigned", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", value: "valueChange", update: "update", immediateUpdate: "immediateUpdate" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: BaseFormFieldComponent, isStandalone: true, inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldError: { classPropertyName: "fieldError", publicName: "fieldError", isSignal: true, isRequired: false, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isValueAssigned: { classPropertyName: "isValueAssigned", publicName: "isValueAssigned", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, optionCascadeConfigs: { classPropertyName: "optionCascadeConfigs", publicName: "optionCascadeConfigs", isSignal: true, isRequired: false, transformFunction: null }, optionCascadeConfigMap: { classPropertyName: "optionCascadeConfigMap", publicName: "optionCascadeConfigMap", isSignal: true, isRequired: false, transformFunction: null }, coordinatePickerGeoConfig: { classPropertyName: "coordinatePickerGeoConfig", publicName: "coordinatePickerGeoConfig", isSignal: true, isRequired: false, transformFunction: null }, fieldControlKeyById: { classPropertyName: "fieldControlKeyById", publicName: "fieldControlKeyById", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", value: "valueChange", update: "update", immediateUpdate: "immediateUpdate" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseFormFieldComponent, decorators: [{
             type: Directive
@@ -7187,6 +8921,10 @@ class FormFieldComponent {
         this.customOrgUnitRoots = input(...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : []));
         //TODO: FIND BETTER WAY TO PASS PROGRAM TO FIELDS i.e field extensions
         this.program = input(...(ngDevMode ? [undefined, { debugName: "program" }] : []));
+        this.optionCascadeConfigs = input([], ...(ngDevMode ? [{ debugName: "optionCascadeConfigs" }] : []));
+        this.optionCascadeConfigMap = input({}, ...(ngDevMode ? [{ debugName: "optionCascadeConfigMap" }] : []));
+        this.coordinatePickerGeoConfig = input(...(ngDevMode ? [undefined, { debugName: "coordinatePickerGeoConfig" }] : []));
+        this.fieldControlKeyById = input({}, ...(ngDevMode ? [{ debugName: "fieldControlKeyById" }] : []));
         this.color = 'primary';
         this.fieldUpdate = new EventEmitter();
         this.immediateFieldUpdate = new EventEmitter();
@@ -7365,11 +9103,11 @@ class FormFieldComponent {
         this._runtimeOptions = [...options];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: FormFieldComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isCheckBoxButton: { classPropertyName: "isCheckBoxButton", publicName: "isCheckBoxButton", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldUpdate: "fieldUpdate", immediateFieldUpdate: "immediateFieldUpdate", runtimeOptionChange: "runtimeOptionChange" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [fieldError]=\"runtimeError()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig()\"\n    [(form)]=\"form\"\n    [dataId]=\"dataId()\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [program]=\"program()\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormFieldItemComponent, selector: "ng-dhis2-ui-form-field-item" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: FormFieldComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isCheckBoxButton: { classPropertyName: "isCheckBoxButton", publicName: "isCheckBoxButton", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, optionCascadeConfigs: { classPropertyName: "optionCascadeConfigs", publicName: "optionCascadeConfigs", isSignal: true, isRequired: false, transformFunction: null }, optionCascadeConfigMap: { classPropertyName: "optionCascadeConfigMap", publicName: "optionCascadeConfigMap", isSignal: true, isRequired: false, transformFunction: null }, coordinatePickerGeoConfig: { classPropertyName: "coordinatePickerGeoConfig", publicName: "coordinatePickerGeoConfig", isSignal: true, isRequired: false, transformFunction: null }, fieldControlKeyById: { classPropertyName: "fieldControlKeyById", publicName: "fieldControlKeyById", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldUpdate: "fieldUpdate", immediateFieldUpdate: "immediateFieldUpdate", runtimeOptionChange: "runtimeOptionChange" }, usesOnChanges: true, ngImport: i0, template: "@if (field(); as formField) {\n  @let fieldError = runtimeError();\n  @let isAssigned = isValueAssigned();\n  @let fieldConfigValue = fieldConfig();\n  @let cascadeConfigs = optionCascadeConfigs();\n  @let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n\n  <div class=\"form-field-item\">\n    <ng-dhis2-ui-form-field-item\n      [field]=\"formField\"\n      [fieldError]=\"fieldError\"\n      [isValueAssigned]=\"isAssigned\"\n      [fieldConfig]=\"fieldConfigValue\"\n      [(form)]=\"form\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigs]=\"cascadeConfigs\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [fieldControlKeyById]=\"fieldControlKeyById()\"\n      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n      [program]=\"program()\"\n      [value]=\"value()\"\n      (update)=\"onValueChange()\"\n      (immediateUpdate)=\"onImmediateChange($event)\"\n    />\n  </div>\n}\n", styles: [".form-field-item{margin-bottom:16px}\n"], dependencies: [{ kind: "component", type: FormFieldItemComponent, selector: "ng-dhis2-ui-form-field-item" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-form-field', standalone: false, template: "<div *ngIf=\"field()\" class=\"form-field-item\">\n  <ng-dhis2-ui-form-field-item\n    [field]=\"field()\"\n    [fieldError]=\"runtimeError()\"\n    [isValueAssigned]=\"isValueAssigned()\"\n    [fieldConfig]=\"fieldConfig()\"\n    [(form)]=\"form\"\n    [dataId]=\"dataId()\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [program]=\"program()\"\n    [value]=\"value()\"\n    (update)=\"onValueChange()\"\n    (immediateUpdate)=\"onImmediateChange($event)\"\n  />\n</div>\n", styles: [".form-field-item{margin-bottom:16px}\n"] }]
+            args: [{ selector: 'ng-dhis2-ui-form-field', standalone: false, template: "@if (field(); as formField) {\n  @let fieldError = runtimeError();\n  @let isAssigned = isValueAssigned();\n  @let fieldConfigValue = fieldConfig();\n  @let cascadeConfigs = optionCascadeConfigs();\n  @let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n\n  <div class=\"form-field-item\">\n    <ng-dhis2-ui-form-field-item\n      [field]=\"formField\"\n      [fieldError]=\"fieldError\"\n      [isValueAssigned]=\"isAssigned\"\n      [fieldConfig]=\"fieldConfigValue\"\n      [(form)]=\"form\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigs]=\"cascadeConfigs\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [fieldControlKeyById]=\"fieldControlKeyById()\"\n      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n      [program]=\"program()\"\n      [value]=\"value()\"\n      (update)=\"onValueChange()\"\n      (immediateUpdate)=\"onImmediateChange($event)\"\n    />\n  </div>\n}\n", styles: [".form-field-item{margin-bottom:16px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { form: [{
                 type: Input
             }], fieldUpdate: [{
@@ -7424,32 +9162,6 @@ class FormValue {
 }
 
 class FormComponent {
-    // get sanitizedFields(): IFormField<string>[] {
-    //   return (this.fields() || []).filter((field: any) => {
-    //     if (field.hidden) {
-    //       return false;
-    //     }
-    //     const type = field.isDataElement
-    //       ? 'dataElement'
-    //       : 'trackedEntityAttribute';
-    //     const elementItem = field[type] || field;
-    //     if (!elementItem) {
-    //       return true;
-    //     }
-    //     const availableRule = head(
-    //       (this.programRuleActions() || []).filter((ruleAction) => {
-    //         return (
-    //           ruleAction.field === elementItem.id &&
-    //           ruleAction.actionType === 'HIDEFIELD'
-    //         );
-    //       })
-    //     );
-    //     if (!availableRule) {
-    //       return true;
-    //     }
-    //     return availableRule.actionType !== 'HIDEFIELD';
-    //   });
-    // }
     get layoutCssClass() {
         if (!this.isFormHorizontal()) {
             return 'col-12';
@@ -7479,6 +9191,16 @@ class FormComponent {
         this.dataEntities = input(undefined, ...(ngDevMode ? [{ debugName: "dataEntities" }] : []));
         this.dataId = input(...(ngDevMode ? [undefined, { debugName: "dataId" }] : []));
         this.customOrgUnitRoots = input(...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : []));
+        this.optionCascadeConfigs = input([], ...(ngDevMode ? [{ debugName: "optionCascadeConfigs" }] : []));
+        this.coordinatePickerGeoConfig = input(...(ngDevMode ? [undefined, { debugName: "coordinatePickerGeoConfig" }] : []));
+        /** ✅ Build map once when configs change */
+        this.optionCascadeConfigMap = computed(() => {
+            const configs = this.optionCascadeConfigs() ?? [];
+            // (optional) guard if you later widen union types
+            const optionPathConfigs = configs.filter((c) => c?.kind === CascadeKind.OPTIONS_PATH);
+            // util returns: Readonly<Record<string, OptionsPathCascadeConfig>>
+            return FieldCascadeUtil.buildConfigByChildFieldId(optionPathConfigs);
+        }, ...(ngDevMode ? [{ debugName: "optionCascadeConfigMap" }] : []));
         //TODO: FIND BETTER WAY TO PASS PROGRAM TO FIELDS i.e field extensions
         this.program = input(...(ngDevMode ? [undefined, { debugName: "program" }] : []));
         this.collapsibleSections = input(false, ...(ngDevMode ? [{ debugName: "collapsibleSections" }] : []));
@@ -7494,6 +9216,43 @@ class FormComponent {
         this.formUpdate = new EventEmitter();
         this.formValidityUpdate = new EventEmitter();
         // get sanitizedFields(): IFormField<string>[] {
+        //   return (this.fields() || []).filter((field: any) => {
+        //     if (field.hidden) {
+        //       return false;
+        //     }
+        //     const type = field.isDataElement
+        //       ? 'dataElement'
+        //       : 'trackedEntityAttribute';
+        //     const elementItem = field[type] || field;
+        //     if (!elementItem) {
+        //       return true;
+        //     }
+        //     const availableRule = head(
+        //       (this.programRuleActions() || []).filter((ruleAction) => {
+        //         return (
+        //           ruleAction.field === elementItem.id &&
+        //           ruleAction.actionType === 'HIDEFIELD'
+        //         );
+        //       })
+        //     );
+        //     if (!availableRule) {
+        //       return true;
+        //     }
+        //     return availableRule.actionType !== 'HIDEFIELD';
+        //   });
+        // }
+        this.fieldControlKeyById = computed(() => {
+            const list = this.fields() ?? []; // or sanitizedFields
+            const map = Object.create(null);
+            for (const f of list) {
+                if (!f?.id)
+                    continue;
+                // Prefer explicit key if present, else fall back to id.
+                map[f.id] = f.key || f.id;
+            }
+            return map;
+        }, ...(ngDevMode ? [{ debugName: "fieldControlKeyById" }] : []));
+        // get sanitizedFields(): IFormField<string>[] {
         //   return (this.fields() || []).filter(
         //     (field) => !this.isFieldHiddenByRules(field)
         //   );
@@ -7615,7 +9374,6 @@ class FormComponent {
         // TODO: This is uneccesary emit at this stage of execution, since nothing has changes at initiation and potentially break some of implementation that depends formUpdate, which also is triggered when there is actual change in the form apart form initial values that came with it
         this.formUpdate.emit(new FormValue(this.form(), this.fields()));
         this.formValidityUpdate.emit(new FormValue(this.form(), this.fields()).isValid);
-        console.log();
     }
     // ngOnChanges(changes: SimpleChanges): void {
     //   this.values = this.form.getRawValue();
@@ -7692,11 +9450,11 @@ class FormComponent {
         return this.hiddenFieldIds().has(elementItem.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { programEntryFormConfig: { classPropertyName: "programEntryFormConfig", publicName: "programEntryFormConfig", isSignal: true, isRequired: false, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: true, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: true, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormMetaData: { classPropertyName: "programEntryFormMetaData", publicName: "programEntryFormMetaData", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n\n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <div>\n          {{ sanitizedFields | json }}\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div *ngFor=\"let field of sanitizedFields\" class=\"form-field-{{ configuration().direction }}\">\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form> -->\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate", "dataId", "customOrgUnitRoots", "program"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { programEntryFormConfig: { classPropertyName: "programEntryFormConfig", publicName: "programEntryFormConfig", isSignal: true, isRequired: false, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: true, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: true, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormMetaData: { classPropertyName: "programEntryFormMetaData", publicName: "programEntryFormMetaData", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, optionCascadeConfigs: { classPropertyName: "optionCascadeConfigs", publicName: "optionCascadeConfigs", isSignal: true, isRequired: false, transformFunction: null }, coordinatePickerGeoConfig: { classPropertyName: "coordinatePickerGeoConfig", publicName: "coordinatePickerGeoConfig", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n<!-- \n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n                \n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [optionCascadeConfigs]=\"optionCascadeConfigs()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n} -->\n\n@let entryFormConfig = programEntryFormConfig();\n@let entryFormMeta = programEntryFormMetaData();\n@let uiConfig = configuration();\n@let formGroupValue = form();\n\n@let isSectionsCollapsible = collapsibleSections();\n\n@let dataEntitiesValue = dataEntities();\n@let dataEntityId = dataId();\n@let orgUnitRootIds = customOrgUnitRoots();\n\n@let cascadeConfigMap = optionCascadeConfigMap();\n@let cascadeConfigs = optionCascadeConfigs();\n\n@let ruleActionList = programRuleActions();\n@let renderAsCheckboxButtons = shouldRenderAsCheckBoxesButton();\n\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n@let entryFormFieldControlKeyById = fieldControlKeyById();\n\n@if (entryFormConfig?.formType === 'EVENT') {\n  <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n    </div>\n\n    @if (entryFormMeta?.programStageSections?.length) {\n      @for (stageSection of entryFormMeta.programStageSections; track stageSection?.id ?? $index) {\n        @let sectionKey = stageSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = stageSection?.description;\n        @let hasDescription = !!sectionDescription;\n\n        <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n          @if (stageSection?.name) {\n            @if (isSectionsCollapsible) {\n              @let isOpen = isSectionOpen(stageSection, $index);\n\n              <button\n                type=\"button\"\n                class=\"form__section-toggle\"\n                (click)=\"openSection(stageSection, $index)\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-controls]=\"sectionDomId\"\n                [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n              >\n                <span class=\"form__section-title\">{{ stageSection.name }}</span>\n                <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n              </button>\n            } @else {\n              <div class=\"form__field-group-name\">{{ stageSection.name }}</div>\n              @if (hasDescription) {\n                <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                  {{ sectionDescription }}\n                </p>\n              }\n            }\n          }\n\n          @let isOpen = !isSectionsCollapsible || isSectionOpen(stageSection, $index);\n          @if (isOpen) {\n            @if (isSectionsCollapsible && hasDescription) {\n              <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                {{ sectionDescription }}\n              </p>\n            }\n\n            <div class=\"form__section-content\" [id]=\"sectionDomId\">\n              @if (stageSection?.formFields?.length) {\n                @for (visibleField of getVisibleSectionFields(stageSection); track visibleField?.id ?? $index) {\n                  <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n                    <ng-dhis2-ui-form-field\n                      [field]=\"visibleField\"\n                      [fieldConfig]=\"uiConfig.fieldConfig\"\n                      [form]=\"formGroupValue\"\n                      [fieldClass]=\"fieldClass()\"\n                      [dataEntities]=\"dataEntitiesValue\"\n                      [dataId]=\"dataEntityId\"\n                      [customOrgUnitRoots]=\"orgUnitRootIds\"\n                      [optionCascadeConfigMap]=\"cascadeConfigMap\"\n                      [optionCascadeConfigs]=\"cascadeConfigs\"\n                      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n                      [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n                      [programRuleActions]=\"ruleActionList\"\n                      [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n                      (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n                      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                    />\n                  </div>\n                } @empty {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              } @else {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            </div>\n          }\n        </section>\n      } @empty {\n        @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n          <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"fallbackField\"\n              [fieldConfig]=\"uiConfig.fieldConfig\"\n              [form]=\"formGroupValue\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntitiesValue\"\n              [dataId]=\"dataEntityId\"\n              [customOrgUnitRoots]=\"orgUnitRootIds\"\n              [optionCascadeConfigMap]=\"cascadeConfigMap\"\n              [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n              [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n              [programRuleActions]=\"ruleActionList\"\n              [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n              (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n\n} @else if (entryFormConfig?.formType === 'TRACKER') {\n\n  <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n    </div>\n\n    @if (entryFormMeta?.sections?.length) {\n      @for (teiSection of entryFormMeta.sections; track teiSection?.id ?? $index) {\n        @let sectionKey = teiSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = teiSection?.description;\n        @let hasDescription = !!sectionDescription;\n\n        <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n          @if (teiSection?.name) {\n            @if (isSectionsCollapsible) {\n              @let isOpen = isSectionOpen(teiSection, $index);\n\n              <button\n                type=\"button\"\n                class=\"form__section-toggle\"\n                (click)=\"openSection(teiSection, $index)\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-controls]=\"sectionDomId\"\n                [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n              >\n                <span class=\"form__section-title\">{{ teiSection.name }}</span>\n                <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n              </button>\n            } @else {\n              <div class=\"form__field-group-name\">{{ teiSection.name }}</div>\n              @if (hasDescription) {\n                <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                  {{ sectionDescription }}\n                </p>\n              }\n            }\n          }\n\n          @let isOpen = !isSectionsCollapsible || isSectionOpen(teiSection, $index);\n          @if (isOpen) {\n            @if (isSectionsCollapsible && hasDescription) {\n              <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                {{ sectionDescription }}\n              </p>\n            }\n\n            <div class=\"form__section-content\" [id]=\"sectionDomId\">\n              @if (teiSection?.formFields?.length) {\n                @for (visibleField of getVisibleSectionFields(teiSection); track visibleField?.id ?? $index) {\n                  <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n                    <ng-dhis2-ui-form-field\n                      [field]=\"visibleField\"\n                      [fieldConfig]=\"uiConfig.fieldConfig\"\n                      [form]=\"formGroupValue\"\n                      [fieldClass]=\"fieldClass()\"\n                      [dataEntities]=\"dataEntitiesValue\"\n                      [dataId]=\"dataEntityId\"\n                      [customOrgUnitRoots]=\"orgUnitRootIds\"\n                      [optionCascadeConfigMap]=\"cascadeConfigMap\"\n                      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n                      [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n                      [programRuleActions]=\"ruleActionList\"\n                      [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n                      (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n                      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                    />\n                  </div>\n                } @empty {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              } @else {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            </div>\n          }\n        </section>\n      } @empty {\n        @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n          <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"fallbackField\"\n              [fieldConfig]=\"uiConfig.fieldConfig\"\n              [form]=\"formGroupValue\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntitiesValue\"\n              [dataId]=\"dataEntityId\"\n              [customOrgUnitRoots]=\"orgUnitRootIds\"\n              [optionCascadeConfigMap]=\"cascadeConfigMap\"\n              [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n              [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n              [programRuleActions]=\"ruleActionList\"\n              [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n              (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n\n} @else {\n\n  <form [formGroup]=\"formGroupValue\" [class]=\"uiConfig.directionClassName\">\n    @if (uiConfig?.formName) {\n      <div class=\"form-name\">\n        <h2>{{ uiConfig.formName }}</h2>\n      </div>\n    }\n\n    @if (sanitizedFields?.length) {\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      }\n    } @else {\n      <div class=\"text-sm text-gray-500\">No fields to display.</div>\n    }\n  </form>\n\n}\n\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate", "dataId", "customOrgUnitRoots", "program", "optionCascadeConfigs", "optionCascadeConfigMap", "coordinatePickerGeoConfig", "fieldControlKeyById"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-form', standalone: false, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n\n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <div>\n          {{ sanitizedFields | json }}\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div *ngFor=\"let field of sanitizedFields\" class=\"form-field-{{ configuration().direction }}\">\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form> -->\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"] }]
+            args: [{ selector: 'ng-dhis2-ui-form', standalone: false, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n<!-- \n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n                \n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [optionCascadeConfigs]=\"optionCascadeConfigs()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n} -->\n\n@let entryFormConfig = programEntryFormConfig();\n@let entryFormMeta = programEntryFormMetaData();\n@let uiConfig = configuration();\n@let formGroupValue = form();\n\n@let isSectionsCollapsible = collapsibleSections();\n\n@let dataEntitiesValue = dataEntities();\n@let dataEntityId = dataId();\n@let orgUnitRootIds = customOrgUnitRoots();\n\n@let cascadeConfigMap = optionCascadeConfigMap();\n@let cascadeConfigs = optionCascadeConfigs();\n\n@let ruleActionList = programRuleActions();\n@let renderAsCheckboxButtons = shouldRenderAsCheckBoxesButton();\n\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n@let entryFormFieldControlKeyById = fieldControlKeyById();\n\n@if (entryFormConfig?.formType === 'EVENT') {\n  <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n    </div>\n\n    @if (entryFormMeta?.programStageSections?.length) {\n      @for (stageSection of entryFormMeta.programStageSections; track stageSection?.id ?? $index) {\n        @let sectionKey = stageSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = stageSection?.description;\n        @let hasDescription = !!sectionDescription;\n\n        <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n          @if (stageSection?.name) {\n            @if (isSectionsCollapsible) {\n              @let isOpen = isSectionOpen(stageSection, $index);\n\n              <button\n                type=\"button\"\n                class=\"form__section-toggle\"\n                (click)=\"openSection(stageSection, $index)\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-controls]=\"sectionDomId\"\n                [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n              >\n                <span class=\"form__section-title\">{{ stageSection.name }}</span>\n                <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n              </button>\n            } @else {\n              <div class=\"form__field-group-name\">{{ stageSection.name }}</div>\n              @if (hasDescription) {\n                <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                  {{ sectionDescription }}\n                </p>\n              }\n            }\n          }\n\n          @let isOpen = !isSectionsCollapsible || isSectionOpen(stageSection, $index);\n          @if (isOpen) {\n            @if (isSectionsCollapsible && hasDescription) {\n              <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                {{ sectionDescription }}\n              </p>\n            }\n\n            <div class=\"form__section-content\" [id]=\"sectionDomId\">\n              @if (stageSection?.formFields?.length) {\n                @for (visibleField of getVisibleSectionFields(stageSection); track visibleField?.id ?? $index) {\n                  <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n                    <ng-dhis2-ui-form-field\n                      [field]=\"visibleField\"\n                      [fieldConfig]=\"uiConfig.fieldConfig\"\n                      [form]=\"formGroupValue\"\n                      [fieldClass]=\"fieldClass()\"\n                      [dataEntities]=\"dataEntitiesValue\"\n                      [dataId]=\"dataEntityId\"\n                      [customOrgUnitRoots]=\"orgUnitRootIds\"\n                      [optionCascadeConfigMap]=\"cascadeConfigMap\"\n                      [optionCascadeConfigs]=\"cascadeConfigs\"\n                      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n                      [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n                      [programRuleActions]=\"ruleActionList\"\n                      [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n                      (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n                      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                    />\n                  </div>\n                } @empty {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              } @else {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            </div>\n          }\n        </section>\n      } @empty {\n        @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n          <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"fallbackField\"\n              [fieldConfig]=\"uiConfig.fieldConfig\"\n              [form]=\"formGroupValue\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntitiesValue\"\n              [dataId]=\"dataEntityId\"\n              [customOrgUnitRoots]=\"orgUnitRootIds\"\n              [optionCascadeConfigMap]=\"cascadeConfigMap\"\n              [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n              [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n              [programRuleActions]=\"ruleActionList\"\n              [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n              (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n\n} @else if (entryFormConfig?.formType === 'TRACKER') {\n\n  <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n    </div>\n\n    @if (entryFormMeta?.sections?.length) {\n      @for (teiSection of entryFormMeta.sections; track teiSection?.id ?? $index) {\n        @let sectionKey = teiSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = teiSection?.description;\n        @let hasDescription = !!sectionDescription;\n\n        <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n          @if (teiSection?.name) {\n            @if (isSectionsCollapsible) {\n              @let isOpen = isSectionOpen(teiSection, $index);\n\n              <button\n                type=\"button\"\n                class=\"form__section-toggle\"\n                (click)=\"openSection(teiSection, $index)\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-controls]=\"sectionDomId\"\n                [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n              >\n                <span class=\"form__section-title\">{{ teiSection.name }}</span>\n                <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n              </button>\n            } @else {\n              <div class=\"form__field-group-name\">{{ teiSection.name }}</div>\n              @if (hasDescription) {\n                <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                  {{ sectionDescription }}\n                </p>\n              }\n            }\n          }\n\n          @let isOpen = !isSectionsCollapsible || isSectionOpen(teiSection, $index);\n          @if (isOpen) {\n            @if (isSectionsCollapsible && hasDescription) {\n              <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                {{ sectionDescription }}\n              </p>\n            }\n\n            <div class=\"form__section-content\" [id]=\"sectionDomId\">\n              @if (teiSection?.formFields?.length) {\n                @for (visibleField of getVisibleSectionFields(teiSection); track visibleField?.id ?? $index) {\n                  <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n                    <ng-dhis2-ui-form-field\n                      [field]=\"visibleField\"\n                      [fieldConfig]=\"uiConfig.fieldConfig\"\n                      [form]=\"formGroupValue\"\n                      [fieldClass]=\"fieldClass()\"\n                      [dataEntities]=\"dataEntitiesValue\"\n                      [dataId]=\"dataEntityId\"\n                      [customOrgUnitRoots]=\"orgUnitRootIds\"\n                      [optionCascadeConfigMap]=\"cascadeConfigMap\"\n                      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n                      [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n                      [programRuleActions]=\"ruleActionList\"\n                      [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n                      (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n                      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                    />\n                  </div>\n                } @empty {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              } @else {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            </div>\n          }\n        </section>\n      } @empty {\n        @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n          <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"fallbackField\"\n              [fieldConfig]=\"uiConfig.fieldConfig\"\n              [form]=\"formGroupValue\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntitiesValue\"\n              [dataId]=\"dataEntityId\"\n              [customOrgUnitRoots]=\"orgUnitRootIds\"\n              [optionCascadeConfigMap]=\"cascadeConfigMap\"\n              [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n              [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n              [programRuleActions]=\"ruleActionList\"\n              [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n              (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n\n} @else {\n\n  <form [formGroup]=\"formGroupValue\" [class]=\"uiConfig.directionClassName\">\n    @if (uiConfig?.formName) {\n      <div class=\"form-name\">\n        <h2>{{ uiConfig.formName }}</h2>\n      </div>\n    }\n\n    @if (sanitizedFields?.length) {\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      }\n    } @else {\n      <div class=\"text-sm text-gray-500\">No fields to display.</div>\n    }\n  </form>\n\n}\n\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formUpdate: [{
                 type: Output
             }], formValidityUpdate: [{
@@ -8139,39 +9897,67 @@ class FormFieldGroup {
     }
 }
 
+// import {
+//   Option,
+//   ProgramRule,
+//   ProgramRuleAction,
+//   ProgramRuleVariable,
+// } from '@iapps/d2-web-sdk';
+// import { camelCase } from 'lodash';
+const RULE_VAR_REGEX = /(A|#|V)\{([^}]+)\}/g;
+function buildRuleVariableMap(ruleVariables) {
+    const map = new Map();
+    for (const v of ruleVariables ?? []) {
+        if (!v?.name)
+            continue;
+        const code = camelCase(v?.dataElement?.code) ||
+            v?.dataElement?.id ||
+            camelCase(v?.trackedEntityAttribute?.code) ||
+            v?.trackedEntityAttribute?.id;
+        if (code)
+            map.set(v.name, code);
+    }
+    return map;
+}
+function replaceRuleVariables(input, variableMap) {
+    if (!input)
+        return input;
+    return input.replace(RULE_VAR_REGEX, (_match, _prefix, varName) => {
+        const code = variableMap.get(varName);
+        return code ? `{${code}}` : `{${varName}}`;
+    });
+}
 class MetadataRuleAction {
     constructor(ruleAction, ruleVariables) {
         this.ruleAction = ruleAction;
-        this.ruleVariables = ruleVariables;
+        this.variableMap = buildRuleVariableMap(ruleVariables);
     }
     get field() {
-        return (this.ruleAction.dataElement?.id ||
-            this.ruleAction.trackedEntityAttribute?.id);
+        const fieldId = this.ruleAction?.dataElement?.id ||
+            this.ruleAction?.trackedEntityAttribute?.id;
+        if (!fieldId) {
+            console.warn(`ProgramRuleAction is missing both dataElement.id and trackedEntityAttribute.id (action id: ${this.ruleAction?.id ?? 'unknown'})`);
+        }
+        return fieldId;
+    }
+    get programRule() {
+        return { id: this.ruleAction.programRule?.id };
+    }
+    get evaluationTime() {
+        return this.ruleAction?.evaluationTime ?? 'ALWAYS';
     }
     get actionType() {
         return this.ruleAction.programRuleActionType;
     }
     get assignedData() {
-        const regex = /(A|#|V)\{([^}]+)\}/g;
-        return this.ruleAction?.data?.replace(regex, (match, _, dataVariable) => {
-            const ruleVariableObject = this.ruleVariables?.find((variable) => variable.name === dataVariable);
-            if (!ruleVariableObject) {
-                return `{${dataVariable}}`;
-            }
-            const code = camelCase(ruleVariableObject?.dataElement?.code) ||
-                ruleVariableObject?.dataElement?.id ||
-                camelCase(ruleVariableObject?.trackedEntityAttribute?.code) ||
-                ruleVariableObject?.trackedEntityAttribute?.id;
-            return `{${code}}`;
-        });
+        return replaceRuleVariables(this.ruleAction?.data, this.variableMap);
     }
     get displayedContent() {
         return this.ruleAction.displayContent;
     }
     get options() {
-        if (this.ruleAction.option) {
+        if (this.ruleAction.option)
             return [this.ruleAction.option];
-        }
         return this.ruleAction.optionGroup?.options || [];
     }
     toJson() {
@@ -8179,37 +9965,36 @@ class MetadataRuleAction {
             field: this.field,
             actionType: this.actionType,
             assignedData: this.assignedData,
-            displayedContent: this.ruleAction.displayContent,
+            displayedContent: this.displayedContent,
             options: this.options,
+            evaluationTime: this.evaluationTime,
+            programRule: this.programRule,
         };
     }
 }
 class MetadataRule {
     constructor(rule, ruleVariables) {
         this.rule = rule;
-        this.ruleVariables = ruleVariables;
+        this.variableMap = buildRuleVariableMap(ruleVariables);
     }
     get actions() {
-        return (this.rule?.programRuleActions || []).map((action) => new MetadataRuleAction(action, this.ruleVariables));
+        return (this.rule?.programRuleActions || [])
+            .map((action) => new MetadataRuleAction(action, []))
+            .map((a) => a.toJson());
+    }
+    get programRule() {
+        return { id: this.rule.id };
     }
     get condition() {
-        const regex = /(A|#|V)\{([^}]+)\}/g;
-        return this.rule?.condition?.replace(regex, (match, _, ruleVariable) => {
-            const ruleVariableObject = this.ruleVariables?.find((variable) => variable.name === ruleVariable);
-            if (!ruleVariableObject) {
-                return `{${ruleVariable}}`;
-            }
-            const code = camelCase(ruleVariableObject?.dataElement?.code) ||
-                ruleVariableObject?.dataElement?.id ||
-                camelCase(ruleVariableObject?.trackedEntityAttribute?.code) ||
-                ruleVariableObject?.trackedEntityAttribute?.id;
-            return `{${code}}`;
-        });
+        return (replaceRuleVariables(this.rule?.condition ?? '', this.variableMap) ?? '');
     }
     toJson() {
         return {
-            actions: this.actions.map((action) => action.toJson()),
+            actions: (this.rule?.programRuleActions || [])
+                .map((action) => new MetadataRuleAction(action, []))
+                .map((a) => a.toJson()),
             condition: this.condition,
+            programRule: { id: this.programRule.id ?? this.rule.id },
         };
     }
 }
@@ -8748,7 +10533,7 @@ class RepeatableFormComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RepeatableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: RepeatableFormComponent, isStandalone: false, selector: "ng-dhis2-ui-repeatable-form", inputs: { formObject: { classPropertyName: "formObject", publicName: "formObject", isSignal: false, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: false, isRequired: false, transformFunction: null }, fieldGroup: { classPropertyName: "fieldGroup", publicName: "fieldGroup", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, numberOfRows: { classPropertyName: "numberOfRows", publicName: "numberOfRows", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: false, isRequired: false, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: false, isRequired: false, transformFunction: null }, repeatDependentField: { classPropertyName: "repeatDependentField", publicName: "repeatDependentField", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { events: "eventsChange", repeatableStageUpdate: "repeatableStageUpdate" }, ngImport: i0, template: "<div class=\"form__repeatable-stage-container\">\n  <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n  @if(showForm()) {\n  <div class=\"form__repeatable-stage-form\">\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"eventForm\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"{}\"\n      [isFormHorizontal]=\"false\"\n      (formUpdate)=\"onFormUpdate($event)\"\n    >\n    </ng-dhis2-ui-form>\n\n    <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n  </div>\n  }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"], dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["programEntryFormConfig", "formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "formMetaData", "programEntryFormMetaData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId", "customOrgUnitRoots", "program", "collapsibleSections"], outputs: ["formUpdate", "formValidityUpdate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: RepeatableFormComponent, isStandalone: false, selector: "ng-dhis2-ui-repeatable-form", inputs: { formObject: { classPropertyName: "formObject", publicName: "formObject", isSignal: false, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: false, isRequired: false, transformFunction: null }, fieldGroup: { classPropertyName: "fieldGroup", publicName: "fieldGroup", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, numberOfRows: { classPropertyName: "numberOfRows", publicName: "numberOfRows", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: false, isRequired: false, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: false, isRequired: false, transformFunction: null }, repeatDependentField: { classPropertyName: "repeatDependentField", publicName: "repeatDependentField", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { events: "eventsChange", repeatableStageUpdate: "repeatableStageUpdate" }, ngImport: i0, template: "<div class=\"form__repeatable-stage-container\">\n  <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n  @if(showForm()) {\n  <div class=\"form__repeatable-stage-form\">\n    <ng-dhis2-ui-form\n      [fields]=\"fieldGroup().fields || []\"\n      [form]=\"eventForm\"\n      [programRuleActions]=\"programRuleActions\"\n      [dataEntities]=\"{}\"\n      [isFormHorizontal]=\"false\"\n      (formUpdate)=\"onFormUpdate($event)\"\n    >\n    </ng-dhis2-ui-form>\n\n    <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n  </div>\n  }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"], dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["programEntryFormConfig", "formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "formMetaData", "programEntryFormMetaData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId", "customOrgUnitRoots", "optionCascadeConfigs", "coordinatePickerGeoConfig", "program", "collapsibleSections"], outputs: ["formUpdate", "formValidityUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RepeatableFormComponent, decorators: [{
             type: Component,
@@ -8876,7 +10661,7 @@ class SectionFormComponent {
         return valueValidity || repeatableDataValidity;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SectionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: SectionFormComponent, isStandalone: false, selector: "ng-dhis2-ui-section-form", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: true, transformFunction: null }, dataValueEntities: { classPropertyName: "dataValueEntities", publicName: "dataValueEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { save: "save", formUpdate: "formUpdate", cancel: "cancel", formValidityUpdate: "formValidityUpdate" }, ngImport: i0, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"form__section-name\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"form__section-content\">\n      <ng-container *ngIf=\"formSection\">\n        <div *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"form__field-group-name\"\n            >\n              {{ fieldGroup?.name }}\n            </div>\n            <div *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions()\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                ></ng-dhis2-ui-form>\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions()\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                    ></ng-dhis2-ui-repeatable-form\n                  ></ng-container>\n                </ng-container>\n                } @else {\n                <ng-dhis2-ui-repeatable-form\n                  [fieldGroup]=\"fieldGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [form]=\"formGroup\"\n                  [program]=\"formSection.program || ''\"\n                  [programStage]=\"fieldGroup.repeatableStage\"\n                  [programRuleActions]=\"ruleActions()\"\n                  [numberOfRows]=\"1\"\n                  [repeatDependentField]=\"fieldGroup.repeatDependentField || ''\"\n                  [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                  (repeatableStageUpdate)=\"\n                    onUpdateRepeatableStage($event, fieldGroup)\n                  \"\n                ></ng-dhis2-ui-repeatable-form>\n                }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".form__section-name{font-size:16px;font-weight:600;margin-bottom:16px}.form__section-content{margin-bottom:24px}.form__field-group-name{font-size:14px;font-weight:500;padding-bottom:8px;border-bottom:solid 1px rgb(232,237,242);margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["programEntryFormConfig", "formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "formMetaData", "programEntryFormMetaData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId", "customOrgUnitRoots", "program", "collapsibleSections"], outputs: ["formUpdate", "formValidityUpdate"] }, { kind: "component", type: RepeatableFormComponent, selector: "ng-dhis2-ui-repeatable-form", inputs: ["formObject", "formData", "fieldGroup", "form", "numberOfRows", "programRuleActions", "events", "program", "programStage", "repeatDependentField", "dataEntities"], outputs: ["eventsChange", "repeatableStageUpdate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: SectionFormComponent, isStandalone: false, selector: "ng-dhis2-ui-section-form", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: true, transformFunction: null }, dataValueEntities: { classPropertyName: "dataValueEntities", publicName: "dataValueEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { save: "save", formUpdate: "formUpdate", cancel: "cancel", formValidityUpdate: "formValidityUpdate" }, ngImport: i0, template: "<ng-container *ngIf=\"formMetaData()\">\n  <ng-container *ngFor=\"let formSection of formMetaData().sections\">\n    @if(formSection?.name; as sectionName) {\n    <div class=\"form__section-name\">\n      {{ sectionName }}\n    </div>\n    }\n    <div class=\"form__section-content\">\n      <ng-container *ngIf=\"formSection\">\n        <div *ngFor=\"let fieldGroup of formSection?.fieldGroups\">\n          <ng-container *ngIf=\"formGroups[fieldGroup.id] as formGroup\">\n            <div\n              *ngIf=\"fieldGroup.name && !fieldGroup.repeatableStage\"\n              class=\"form__field-group-name\"\n            >\n              {{ fieldGroup?.name }}\n            </div>\n            <div *ngIf=\"fieldGroup.fields\">\n              <!-- Single stage form section -->\n              <ng-container *ngIf=\"!fieldGroup.repeatableStage\">\n                <ng-dhis2-ui-form\n                  *ngIf=\"fieldGroup.fields.length > 0\"\n                  [fields]=\"fieldGroup.fields\"\n                  [form]=\"formGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [programRuleActions]=\"ruleActions()\"\n                  [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n                  (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n                ></ng-dhis2-ui-form>\n              </ng-container>\n\n              <!-- Repeatable stage form section -->\n              <ng-container *ngIf=\"fieldGroup.repeatableStage\">\n                @if(fieldGroup.repeatDependentField) {\n\n                <ng-container *ngIf=\"fieldGroup.repeatDependentField\">\n                  <ng-container\n                    *ngIf=\"{\n                      numberOfRows:\n                        dataValueEntities()[fieldGroup.repeatDependentField]\n                    } as dataParams\"\n                  >\n                    <ng-dhis2-ui-repeatable-form\n                      *ngIf=\"\n                        dataParams.numberOfRows &&\n                        dataParams.numberOfRows !== '0'\n                      \"\n                      [fieldGroup]=\"fieldGroup\"\n                      [dataEntities]=\"dataValueEntities()\"\n                      [form]=\"formGroup\"\n                      [program]=\"formSection.program || ''\"\n                      [programStage]=\"fieldGroup.repeatableStage\"\n                      [programRuleActions]=\"ruleActions()\"\n                      [numberOfRows]=\"+dataParams.numberOfRows\"\n                      [repeatDependentField]=\"\n                        fieldGroup.repeatDependentField || ''\n                      \"\n                      [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                      (repeatableStageUpdate)=\"\n                        onUpdateRepeatableStage($event, fieldGroup)\n                      \"\n                    ></ng-dhis2-ui-repeatable-form\n                  ></ng-container>\n                </ng-container>\n                } @else {\n                <ng-dhis2-ui-repeatable-form\n                  [fieldGroup]=\"fieldGroup\"\n                  [dataEntities]=\"dataValueEntities()\"\n                  [form]=\"formGroup\"\n                  [program]=\"formSection.program || ''\"\n                  [programStage]=\"fieldGroup.repeatableStage\"\n                  [programRuleActions]=\"ruleActions()\"\n                  [numberOfRows]=\"1\"\n                  [repeatDependentField]=\"fieldGroup.repeatDependentField || ''\"\n                  [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n                  (repeatableStageUpdate)=\"\n                    onUpdateRepeatableStage($event, fieldGroup)\n                  \"\n                ></ng-dhis2-ui-repeatable-form>\n                }\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".form__section-name{font-size:16px;font-weight:600;margin-bottom:16px}.form__section-content{margin-bottom:24px}.form__field-group-name{font-size:14px;font-weight:500;padding-bottom:8px;border-bottom:solid 1px rgb(232,237,242);margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["programEntryFormConfig", "formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "formMetaData", "programEntryFormMetaData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId", "customOrgUnitRoots", "optionCascadeConfigs", "coordinatePickerGeoConfig", "program", "collapsibleSections"], outputs: ["formUpdate", "formValidityUpdate"] }, { kind: "component", type: RepeatableFormComponent, selector: "ng-dhis2-ui-repeatable-form", inputs: ["formObject", "formData", "fieldGroup", "form", "numberOfRows", "programRuleActions", "events", "program", "programStage", "repeatDependentField", "dataEntities"], outputs: ["eventsChange", "repeatableStageUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SectionFormComponent, decorators: [{
             type: Component,
@@ -8904,6 +10689,7 @@ class BaseFormWrapperComponent {
         this.dataValues = input({}, ...(ngDevMode ? [{ debugName: "dataValues" }] : []));
         this.dataId = input(...(ngDevMode ? [undefined, { debugName: "dataId" }] : []));
         this.customOrgUnitRoots = input(...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : []));
+        this.coordinatePickerGeoConfig = input(...(ngDevMode ? [undefined, { debugName: "coordinatePickerGeoConfig" }] : []));
         this.formMetaData = input(...(ngDevMode ? [undefined, { debugName: "formMetaData" }] : []));
         this.programEntryFormMetaData = input(...(ngDevMode ? [undefined, { debugName: "programEntryFormMetaData" }] : []));
         this.programStage = input(...(ngDevMode ? [undefined, { debugName: "programStage" }] : []));
@@ -8940,7 +10726,7 @@ class BaseFormWrapperComponent {
         this.ruleProcessor.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: BaseFormWrapperComponent, isStandalone: true, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, rules: { classPropertyName: "rules", publicName: "rules", isSignal: true, isRequired: false, transformFunction: null }, dataValues: { classPropertyName: "dataValues", publicName: "dataValues", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormMetaData: { classPropertyName: "programEntryFormMetaData", publicName: "programEntryFormMetaData", isSignal: true, isRequired: false, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSave: "formSave", formUpdate: "formUpdate", formCancel: "formCancel", formValidityUpdate: "formValidityUpdate" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: BaseFormWrapperComponent, isStandalone: true, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, rules: { classPropertyName: "rules", publicName: "rules", isSignal: true, isRequired: false, transformFunction: null }, dataValues: { classPropertyName: "dataValues", publicName: "dataValues", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, coordinatePickerGeoConfig: { classPropertyName: "coordinatePickerGeoConfig", publicName: "coordinatePickerGeoConfig", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormMetaData: { classPropertyName: "programEntryFormMetaData", publicName: "programEntryFormMetaData", isSignal: true, isRequired: false, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSave: "formSave", formUpdate: "formUpdate", formCancel: "formCancel", formValidityUpdate: "formValidityUpdate" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseFormWrapperComponent, decorators: [{
             type: Directive
@@ -8959,6 +10745,7 @@ class FlatFormComponent extends BaseFormWrapperComponent {
         super(...arguments);
         this.collapsibleSections = input(false, ...(ngDevMode ? [{ debugName: "collapsibleSections" }] : []));
         this.programEntryFormConfig = input.required(...(ngDevMode ? [{ debugName: "programEntryFormConfig" }] : []));
+        this.optionCascadeConfigs = input([], ...(ngDevMode ? [{ debugName: "optionCascadeConfigs" }] : []));
     }
     ngOnInit() {
         this.formGroup = FormUtil.getFormGroup(this.fields(), this.dataValues());
@@ -8969,11 +10756,11 @@ class FlatFormComponent extends BaseFormWrapperComponent {
         this.updateFormValidity(this.formGroup.valid);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FlatFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: FlatFormComponent, isStandalone: false, selector: "ng-dhis2-ui-flat-form", inputs: { collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormConfig: { classPropertyName: "programEntryFormConfig", publicName: "programEntryFormConfig", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-dhis2-ui-form\n  [programEntryFormConfig]=\"programEntryFormConfig()\"\n  [collapsibleSections]=\"collapsibleSections()\"\n  [programEntryFormMetaData]=\"programEntryFormMetaData()\"\n  [fields]=\"fields()\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"dataValues()\"\n  [dataId]=\"dataId()\"\n  [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n  [programRuleActions]=\"ruleActions()\"\n  (formUpdate)=\"onFormUpdate()\"\n  [program]=\"program()\"\n/>\n", dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["programEntryFormConfig", "formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "formMetaData", "programEntryFormMetaData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId", "customOrgUnitRoots", "program", "collapsibleSections"], outputs: ["formUpdate", "formValidityUpdate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: FlatFormComponent, isStandalone: false, selector: "ng-dhis2-ui-flat-form", inputs: { collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormConfig: { classPropertyName: "programEntryFormConfig", publicName: "programEntryFormConfig", isSignal: true, isRequired: true, transformFunction: null }, optionCascadeConfigs: { classPropertyName: "optionCascadeConfigs", publicName: "optionCascadeConfigs", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@let entryFormConfig = programEntryFormConfig();\n@let collapsibleSectionConfig = collapsibleSections();\n@let optionCascadeConfigMap = optionCascadeConfigs();\n@let entryFormMetaData = programEntryFormMetaData();\n@let entryFormFields = fields();\n@let formDataValues = dataValues();\n@let dataEntityId = dataId();\n@let customOrgUnitRootIds = customOrgUnitRoots();\n@let programRuleActionList = ruleActions();\n@let activeProgram = program();\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n\n<ng-dhis2-ui-form\n  [programEntryFormConfig]=\"entryFormConfig\"\n  [collapsibleSections]=\"collapsibleSectionConfig\"\n  [optionCascadeConfigs]=\"optionCascadeConfigMap\"\n  [programEntryFormMetaData]=\"entryFormMetaData\"\n  [fields]=\"entryFormFields\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"formDataValues\"\n  [dataId]=\"dataEntityId\"\n  [customOrgUnitRoots]=\"customOrgUnitRootIds\"\n  [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n  [programRuleActions]=\"programRuleActionList\"\n  [program]=\"activeProgram\"\n  (formUpdate)=\"onFormUpdate()\"\n/>\n", dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["programEntryFormConfig", "formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "formMetaData", "programEntryFormMetaData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId", "customOrgUnitRoots", "optionCascadeConfigs", "coordinatePickerGeoConfig", "program", "collapsibleSections"], outputs: ["formUpdate", "formValidityUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FlatFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-flat-form', standalone: false, template: "<ng-dhis2-ui-form\n  [programEntryFormConfig]=\"programEntryFormConfig()\"\n  [collapsibleSections]=\"collapsibleSections()\"\n  [programEntryFormMetaData]=\"programEntryFormMetaData()\"\n  [fields]=\"fields()\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"dataValues()\"\n  [dataId]=\"dataId()\"\n  [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n  [programRuleActions]=\"ruleActions()\"\n  (formUpdate)=\"onFormUpdate()\"\n  [program]=\"program()\"\n/>\n" }]
+            args: [{ selector: 'ng-dhis2-ui-flat-form', standalone: false, template: "@let entryFormConfig = programEntryFormConfig();\n@let collapsibleSectionConfig = collapsibleSections();\n@let optionCascadeConfigMap = optionCascadeConfigs();\n@let entryFormMetaData = programEntryFormMetaData();\n@let entryFormFields = fields();\n@let formDataValues = dataValues();\n@let dataEntityId = dataId();\n@let customOrgUnitRootIds = customOrgUnitRoots();\n@let programRuleActionList = ruleActions();\n@let activeProgram = program();\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n\n<ng-dhis2-ui-form\n  [programEntryFormConfig]=\"entryFormConfig\"\n  [collapsibleSections]=\"collapsibleSectionConfig\"\n  [optionCascadeConfigs]=\"optionCascadeConfigMap\"\n  [programEntryFormMetaData]=\"entryFormMetaData\"\n  [fields]=\"entryFormFields\"\n  [form]=\"formGroup\"\n  [dataEntities]=\"formDataValues\"\n  [dataId]=\"dataEntityId\"\n  [customOrgUnitRoots]=\"customOrgUnitRootIds\"\n  [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n  [programRuleActions]=\"programRuleActionList\"\n  [program]=\"activeProgram\"\n  (formUpdate)=\"onFormUpdate()\"\n/>\n" }]
         }] });
 
 class D2FormModule {
@@ -9591,33 +11378,80 @@ class ProgramEntryFormFieldUtil {
             isOrgUnit: true,
         });
     }
+    // #getGeometryField(): IFormField<string> | null {
+    //   const rawFeatureType = this.program?.featureType ?? '';
+    //   console.log(
+    //     'REACHED HERE AND FEATURE TYPE ACTIVATED::: ',
+    //     JSON.stringify(rawFeatureType)
+    //   );
+    //   const featureType = rawFeatureType.toUpperCase() as
+    //     | 'NONE'
+    //     | 'POINT'
+    //     | 'POLYGON'
+    //     | 'MULTI_POLYGON'
+    //     | '';
+    //   const isGeometryProgram =
+    //     featureType === 'POINT' ||
+    //     featureType === 'POLYGON' ||
+    //     featureType === 'MULTI_POLYGON';
+    //   if (!isGeometryProgram) {
+    //     if (this.config?.hideGeometryField) {
+    //       return null;
+    //     }
+    //     return null;
+    //   }
+    //   const sharedOptions = {
+    //     required: true,
+    //     disabled: this.config?.disableRegistrationUnit ?? false,
+    //     isGeometryField: true as const,
+    //   };
+    //   const label =
+    //     featureType === 'POINT' ? 'Location (coordinates)' : 'Boundary (polygon)';
+    //   return new FormField<string>({
+    //     id: 'geometry',
+    //     key: 'geometry',
+    //     label,
+    //     code: 'geometry',
+    //     controlType: 'coordinate',
+    //     ...sharedOptions,
+    //   });
+    // }
     #getGeometryField() {
-        const rawFeatureType = this.program?.featureType ?? '';
-        const featureType = rawFeatureType.toUpperCase();
-        const isGeometryProgram = featureType === 'POINT' ||
-            featureType === 'POLYGON' ||
-            featureType === 'MULTI_POLYGON';
-        if (!isGeometryProgram) {
-            if (this.config?.hideGeometryField) {
-                return null;
-            }
+        if (this.config?.hideGeometryField)
             return null;
-        }
-        const sharedOptions = {
-            required: true,
-            disabled: this.config?.disableRegistrationUnit ?? false,
-            isGeometryField: true,
-        };
-        const label = featureType === 'POINT' ? 'Location (coordinates)' : 'Boundary (polygon)';
+        const effectiveFeatureTypeRaw = this.#resolveEffectiveFeatureType();
+        const normalizedFeatureType = effectiveFeatureTypeRaw.toUpperCase();
+        const supportsGeometry = normalizedFeatureType === 'POINT' ||
+            normalizedFeatureType === 'POLYGON' ||
+            normalizedFeatureType === 'MULTI_POLYGON';
+        if (!supportsGeometry)
+            return null;
+        const geometryFieldLabel = normalizedFeatureType === 'POINT'
+            ? 'Location (coordinates)'
+            : 'Boundary (polygon)';
         return new FormField({
             id: 'geometry',
             key: 'geometry',
-            label,
             code: 'geometry',
+            label: geometryFieldLabel,
             controlType: 'coordinate',
-            ...sharedOptions,
+            required: true,
+            disabled: this.config?.disableRegistrationUnit ?? false,
+            isGeometryField: true,
         });
     }
+    #resolveEffectiveFeatureType() {
+        const programMeta = this.program;
+        const configuredProgramStageId = this.config?.programStage;
+        if (configuredProgramStageId && programMeta?.programStages?.length) {
+            const configuredStage = programMeta.programStages.find((stage) => stage?.id === configuredProgramStageId);
+            const stageFeatureTypeRaw = configuredStage?.featureType ?? '';
+            if (stageFeatureTypeRaw)
+                return String(stageFeatureTypeRaw);
+        }
+        const programFeatureTypeRaw = programMeta?.featureType ?? '';
+        return String(programFeatureTypeRaw);
+    }
     #getEnrollmentDateField() {
         if (this.config.hideEnrollmentDate || this.config.programStage) {
             return null;
@@ -9700,8 +11534,8 @@ class ProgramEntryFormFieldUtil {
     get eventReportFields() {
         const fields = [
             this.#getOrgUniField(),
-            this.#getGeometryField(),
             this.#getEventDateField(),
+            this.#getGeometryField(),
         ];
         return fields.filter((field) => field !== null);
     }
@@ -10688,6 +12522,7 @@ class ProgramEntryFormMetaData {
                 'id',
                 'programRuleActionType',
                 'data',
+                'programRule',
                 'displayContent',
                 'content',
             ])
@@ -10713,6 +12548,7 @@ class ProgramEntryFormMetaData {
                 'code',
                 'displayName',
             ]), 'ToOne'))
+                .paginate(new Pager({ paging: false }))
                 .get(),
         ]);
         const [programResponse, programRuleResponse] = metaDataResponse;
@@ -11212,11 +13048,11 @@ class ProgramEntryFormModule {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ProgramEntryFormModule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ProgramEntryFormModule, isStandalone: true, selector: "ng-dhis2-ui-program-entry-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: false, transformFunction: null }, orgUnit: { classPropertyName: "orgUnit", publicName: "orgUnit", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null }, preprocess: { classPropertyName: "preprocess", publicName: "preprocess", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { instanceSave: "instanceSave", instanceSaveCompleted: "instanceSaveCompleted", instanceUpdate: "instanceUpdate", formValidityUpdate: "formValidityUpdate", formCancel: "formCancel" }, ngImport: i0, template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n    <ng-dhis2-ui-flat-form\n      [programEntryFormConfig]=\"config()\"\n      [collapsibleSections]=\"collapsibleSections()\"\n      [programEntryFormMetaData]=\"metaData()!\"\n      [name]=\"metaData()!.name\"\n      [dataValues]=\"instance() || {}\"\n      [dataId]=\"dataId()\"\n      [rules]=\"metaData()!.rules\"\n      [fields]=\"metaData()!.formFields\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      (formUpdate)=\"onFormUpdate($event)\"\n      (formValidityUpdate)=\"onValidityUpdate($event)\"\n    />\n\n  <!-- <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [program]=\"config().program\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  /> -->\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: D2FormModule }, { kind: "component", type: FlatFormComponent, selector: "ng-dhis2-ui-flat-form", inputs: ["collapsibleSections", "programEntryFormConfig"] }, { kind: "directive", type: ReactWrapperModule, selector: "ng-dhis2-ui-wrapper", inputs: ["props", "component"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ProgramEntryFormModule, isStandalone: true, selector: "ng-dhis2-ui-program-entry-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: false, transformFunction: null }, orgUnit: { classPropertyName: "orgUnit", publicName: "orgUnit", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null }, preprocess: { classPropertyName: "preprocess", publicName: "preprocess", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { instanceSave: "instanceSave", instanceSaveCompleted: "instanceSaveCompleted", instanceUpdate: "instanceUpdate", formValidityUpdate: "formValidityUpdate", formCancel: "formCancel" }, ngImport: i0, template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n    <ng-dhis2-ui-flat-form\n      [programEntryFormConfig]=\"config()\"\n      [optionCascadeConfigs]=\"config().optionCascadeConfigs || []\"\n      [collapsibleSections]=\"collapsibleSections()\"\n      [programEntryFormMetaData]=\"metaData()!\"\n      [name]=\"metaData()!.name\"\n      [dataValues]=\"instance() || {}\"\n      [dataId]=\"dataId()\"\n      [rules]=\"metaData()!.rules\"\n      [fields]=\"metaData()!.formFields\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [coordinatePickerGeoConfig]=\"config().coordinatePickerGeoConfig\"\n      (formUpdate)=\"onFormUpdate($event)\"\n      (formValidityUpdate)=\"onValidityUpdate($event)\"\n    />\n\n  <!-- <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [program]=\"config().program\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  /> -->\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: D2FormModule }, { kind: "component", type: FlatFormComponent, selector: "ng-dhis2-ui-flat-form", inputs: ["collapsibleSections", "programEntryFormConfig", "optionCascadeConfigs"] }, { kind: "directive", type: ReactWrapperModule, selector: "ng-dhis2-ui-wrapper", inputs: ["props", "component"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ProgramEntryFormModule, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-program-entry-form', imports: [CommonModule, D2FormModule, ReactWrapperModule], template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n    <ng-dhis2-ui-flat-form\n      [programEntryFormConfig]=\"config()\"\n      [collapsibleSections]=\"collapsibleSections()\"\n      [programEntryFormMetaData]=\"metaData()!\"\n      [name]=\"metaData()!.name\"\n      [dataValues]=\"instance() || {}\"\n      [dataId]=\"dataId()\"\n      [rules]=\"metaData()!.rules\"\n      [fields]=\"metaData()!.formFields\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      (formUpdate)=\"onFormUpdate($event)\"\n      (formValidityUpdate)=\"onValidityUpdate($event)\"\n    />\n\n  <!-- <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [program]=\"config().program\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  /> -->\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"] }]
+            args: [{ selector: 'ng-dhis2-ui-program-entry-form', imports: [CommonModule, D2FormModule, ReactWrapperModule], template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n    <ng-dhis2-ui-flat-form\n      [programEntryFormConfig]=\"config()\"\n      [optionCascadeConfigs]=\"config().optionCascadeConfigs || []\"\n      [collapsibleSections]=\"collapsibleSections()\"\n      [programEntryFormMetaData]=\"metaData()!\"\n      [name]=\"metaData()!.name\"\n      [dataValues]=\"instance() || {}\"\n      [dataId]=\"dataId()\"\n      [rules]=\"metaData()!.rules\"\n      [fields]=\"metaData()!.formFields\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [coordinatePickerGeoConfig]=\"config().coordinatePickerGeoConfig\"\n      (formUpdate)=\"onFormUpdate($event)\"\n      (formValidityUpdate)=\"onValidityUpdate($event)\"\n    />\n\n  <!-- <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [program]=\"config().program\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  /> -->\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"] }]
         }], propDecorators: { instanceSave: [{
                 type: Output
             }], instanceSaveCompleted: [{