@iapps/ng-dhis2-ui 1.2.171 → 1.3.1

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

@@ -22,8 +22,8 @@ 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, Field, NoticeBox, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
-import { isObject, isString, debounce, isUndefined, find, sortBy, camelCase, flatten, isArray, isEmpty } from 'lodash';
+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, Legend, IconInfo16, Popover, FieldSet, MultiSelectField, TextAreaField } from '@dhis2/ui';
+import { isObject, isString, debounce, isUndefined, find, sortBy, isArray, camelCase, flatten, isEmpty } from 'lodash';
 import cx from 'classnames';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
 import { Pager, DataOrderCriteria, DataQueryFilter, DataFilterCondition, ProgramRuleEngine } from '@iapps/d2-web-sdk';
@@ -7642,6 +7642,7 @@ class FieldConfig {
     constructor(config) {
         this.hideLabel = config?.hideLabel ?? false;
         this.inputWidth = config?.inputWidth || '100%';
+        this.fieldDescriptionLabel = config?.fieldDescriptionLabel ?? 'Description';
     }
 }
 
@@ -7960,6 +7961,45 @@ class FieldCascadeUtil {
     }
 }
 
+const FormFieldLabel = (props) => {
+    const { field, fieldConfig } = props;
+    if (fieldConfig?.hideLabel) {
+        return React__default.createElement(React__default.Fragment, null);
+    }
+    const [backgroundColor, setBackgroundColor] = useState('transparent');
+    const [open, setOpen] = useState(false);
+    const buttonRef = useRef(null);
+    return (React__default.createElement("div", null,
+        React__default.createElement("div", { style: {
+                display: 'flex',
+                alignContent: 'center',
+                gap: 12,
+                marginBottom: 4,
+            } },
+            React__default.createElement(Legend, { required: field.required }, field.label),
+            field.description && (React__default.createElement("div", { ref: buttonRef, style: {
+                    cursor: 'pointer',
+                    backgroundColor,
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: 1,
+                    borderRadius: 2,
+                    marginBottom: 2,
+                }, onMouseEnter: () => setBackgroundColor(colors$1.grey200), onMouseLeave: () => setBackgroundColor('transparent'), onClick: () => setOpen(!open) },
+                React__default.createElement(IconInfo16, null)))),
+        open && (React__default.createElement(Popover, { arrow: true, reference: buttonRef, elevation: "0px 0px 1px rgba(33,41,52,0.1), 0px 4px 6px -1px rgba(33,41,52,0.1), 0px 2px 4px -1px rgba(33,41,52,0.06)", maxWidth: 400, placement: "top", onClickOutside: () => setOpen(false) },
+            React__default.createElement("div", { style: {
+                    padding: 8,
+                } },
+                React__default.createElement("div", { style: {
+                        fontSize: 14,
+                        marginBottom: 4,
+                    } }, fieldConfig?.fieldDescriptionLabel ?? 'Description'),
+                React__default.createElement("small", { style: {
+                        color: colors$1.grey700,
+                    } }, field.description))))));
+};
+
 // 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.
@@ -9042,6 +9082,31 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 setTouched(true);
             };
             // UI renderer
+            const formFieldLabel = (props) => {
+                const { field, fieldConfig } = props;
+                if (fieldConfig?.hideLabel) {
+                    return null;
+                }
+                const [backgroundColor, setBackgroundColor] = useState('transparent');
+                return (React__default.createElement("div", { style: {
+                        display: 'flex',
+                        alignContent: 'center',
+                        gap: '12px',
+                    } },
+                    React__default.createElement(Legend, { required: this.field().required }, this.label()),
+                    React__default.createElement("div", { style: {
+                            cursor: 'pointer',
+                            backgroundColor,
+                            display: 'flex',
+                            alignItems: 'center',
+                            padding: 1,
+                            borderRadius: 2,
+                            marginBottom: 2,
+                        }, onMouseEnter: () => setBackgroundColor(colors$1.grey200), onMouseLeave: () => setBackgroundColor('transparent'), onClick: () => {
+                            console.log('Clicked here');
+                        } },
+                        React__default.createElement(IconInfo16, null))));
+            };
             const formFieldContent = () => {
                 const f = this.field();
                 switch (f.controlType) {
@@ -9066,7 +9131,9 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                                         " to save the coordinates."))),
                             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: f.required, name: f.id, disabled: disabled, label: this.label(), rows: 5, placeholder: this.placeholder(), value: value, onChange: (event) => onValueChange(event.value), onBlur: () => checkValueUniqueness() }));
+                        return (React__default.createElement(FieldSet, null,
+                            React__default.createElement(FormFieldLabel, { field: this.field(), fieldConfig: this.fieldConfig() }),
+                            React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: f.required, name: f.id, disabled: disabled, 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(), orgUnitRoots: f.extension?.orgUnitRoots, onSelectOrgUnit: (selectedOrgUnit) => onValueChange(selectedOrgUnit), selected: value }));
                     case 'transfer':
@@ -9074,12 +9141,16 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                     case 'checkbox':
                         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: (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 })))));
+                        return (React__default.createElement(FieldSet, null,
+                            React__default.createElement(FormFieldLabel, { field: this.field(), fieldConfig: this.fieldConfig() }),
+                            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", 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: (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 }, (filteredOptions || []).map((option) => (React__default.createElement(MultiSelectOption, { key: this.#getOptionKey(option), label: option.label ?? option.name ?? option.displayName, value: option.value ?? option.id })))));
+                        return (React__default.createElement(FieldSet, null,
+                            React__default.createElement(FormFieldLabel, { field: this.field(), fieldConfig: this.fieldConfig() }),
+                            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, required: f.required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
+                                    const selectedValue = (event.selected || []).join(',');
+                                    onValueChange(selectedValue);
+                                }, 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 isDateTimeField = f.type === 'date-time';
@@ -9098,15 +9169,19 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             : f.max
                                 ? this.pickEarlierDateLimit(this.formatValueForHtmlInputFromDhis(String(f.max), isDateTimeField), this.getNowForHtmlDateInput(isDateTimeField))
                                 : this.getNowForHtmlDateInput(isDateTimeField);
-                        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, allowFutureDate);
-                                onValueChange(normalized);
-                            }, onBlur: () => checkValueUniqueness() }));
+                        return (React__default.createElement(FieldSet, null,
+                            React__default.createElement(FormFieldLabel, { field: this.field(), fieldConfig: this.fieldConfig() }),
+                            React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: inputType, inputWidth: inputWidth, required: f.required, name: f.id, min: htmlMin, max: htmlMax, placeholder: this.placeholder(), value: htmlValue, readOnly: disabled, onChange: ({ value: newValue }) => {
+                                    const normalized = this.normalizeDateValueFromHtmlInput(newValue, isDateTimeField, allowFutureDate);
+                                    onValueChange(normalized);
+                                }, onBlur: () => checkValueUniqueness() })));
                     }
                     case 'file':
                         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: 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(FieldSet, null,
+                            React__default.createElement(FormFieldLabel, { field: this.field(), fieldConfig: this.fieldConfig() }),
+                            React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: f.type, inputWidth: inputWidth, required: f.required, name: f.id, 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,
@@ -9583,417 +9658,69 @@ class FormValue {
     }
 }
 
-class FormComponent {
-    get layoutCssClass() {
-        if (!this.isFormHorizontal()) {
-            return 'col-12';
-        }
-        const numberOfFields = this.sanitizedFields.length;
-        if (numberOfFields === 2) {
-            return 'col-sm-6';
+class FormField {
+    constructor(options = {}) {
+        this.value = options.value || '';
+        this.key = options.key || '';
+        this.referenceKey = options.referenceKey || '';
+        this.id = options.id || '';
+        this.code = options.code || '';
+        this.label = options.label || '';
+        this.description = options.description;
+        this.required = !!options.required;
+        this.order = options.order === undefined ? 1 : options.order;
+        this.controlType = options.controlType;
+        this.type = options.type || '';
+        this.options = options.options || [];
+        this.disabled = options.disabled ?? false;
+        this.placeholder = options.placeholder || '';
+        this.min = options.min;
+        this.max = this.setMax(options);
+        this.maxLength = options.maxLength;
+        this.hidden = options.hidden || false;
+        this.unique = options.unique || false;
+        this.generated = options.generated || false;
+        this.isDataElement = options.isDataElement;
+        this.isAttribute = options.isAttribute;
+        this.isOrgUnit = options.isOrgUnit;
+        this.isGeometryField = options.isGeometryField;
+        this.isEnrollmentDate = options.isEnrollmentDate;
+        this.event = options.event;
+        this.programStage = options.programStage;
+        this.program = options.program;
+        this.trackedEntityInstance = options.trackedEntityInstance;
+        this.trackedEntityType = options.trackedEntityType;
+        this.hasOptions = options.hasOptions;
+        this.dependentField = options.dependentField;
+        this.fieldOptionsDependsOn = options.fieldOptionsDependsOn;
+        this.displayInList = options.displayInList;
+        this.displayInReports = options.displayInReports;
+        this.searchable = options.searchable;
+        this.unique = options.unique;
+        this.metaType = options.metaType;
+        this.stepId = options.stepId;
+        this.availableOptionsLabel =
+            options.availableOptionsLabel ?? 'Available options';
+        this.selectedOptionsLabel =
+            options.availableOptionsLabel ?? 'Selected options';
+        this.allowFutureDate = options.allowFutureDate;
+        this.extension = options.extension;
+    }
+    setMax(field) {
+        if (field.controlType !== 'date') {
+            return field.max;
         }
-        if (numberOfFields === 1) {
-            return 'col-12';
+        if (field.allowFutureDate) {
+            return undefined;
         }
-        return 'col-sm-4';
+        return format(new Date(), 'yyyy-MM-dd');
     }
+}
+
+let Boolean$1 = class Boolean extends FormField {
     constructor() {
-        this.programEntryFormConfig = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "programEntryFormConfig" }] : /* istanbul ignore next */ []));
-        this.formConfig = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "formConfig" }] : /* istanbul ignore next */ []));
-        this.fields = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
-        this.form = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
-        this.isFormHorizontal = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isFormHorizontal" }] : /* istanbul ignore next */ []));
-        this.showSaveButton = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showSaveButton" }] : /* istanbul ignore next */ []));
-        this.fieldsData = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "fieldsData" }] : /* istanbul ignore next */ []));
-        this.formMetaData = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "formMetaData" }] : /* istanbul ignore next */ []));
-        this.programEntryFormMetaData = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "programEntryFormMetaData" }] : /* istanbul ignore next */ []));
-        this.fieldClass = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fieldClass" }] : /* istanbul ignore next */ []));
-        this.shouldRenderAsCheckBoxesButton = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "shouldRenderAsCheckBoxesButton" }] : /* istanbul ignore next */ []));
-        this.programRuleActions = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "programRuleActions" }] : /* istanbul ignore next */ []));
-        this.dataEntities = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dataEntities" }] : /* istanbul ignore next */ []));
-        this.dataId = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "dataId" }] : /* istanbul ignore next */ []));
-        this.customOrgUnitRoots = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : /* istanbul ignore next */ []));
-        this.optionCascadeConfigs = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "optionCascadeConfigs" }] : /* istanbul ignore next */ []));
-        this.coordinatePickerGeoConfig = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "coordinatePickerGeoConfig" }] : /* istanbul ignore next */ []));
-        /** ✅ 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);
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "optionCascadeConfigMap" }] : /* istanbul ignore next */ []));
-        //TODO: FIND BETTER WAY TO PASS PROGRAM TO FIELDS i.e field extensions
-        this.program = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "program" }] : /* istanbul ignore next */ []));
-        this.collapsibleSections = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "collapsibleSections" }] : /* istanbul ignore next */ []));
-        this.openSectionId = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "openSectionId" }] : /* istanbul ignore next */ []));
-        this.configuration = computed(() => {
-            if (!this.formConfig()) {
-                return new FormConfig({
-                    direction: this.isFormHorizontal() ? 'horizontal' : 'vertical',
-                });
-            }
-            return this.formConfig();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "configuration" }] : /* istanbul ignore next */ []));
-        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;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fieldControlKeyById" }] : /* istanbul ignore next */ []));
-        // get sanitizedFields(): IFormField<string>[] {
-        //   return (this.fields() || []).filter(
-        //     (field) => !this.isFieldHiddenByRules(field)
-        //   );
-        // }
-        // getVisibleSectionFields(section: any): IFormField<string>[] {
-        //   const rawFields: IFormField<string>[] = section?.formFields ?? [];
-        //   return rawFields.filter((field) => !this.isFieldHiddenByRules(field));
-        // }
-        // private isFieldHiddenByRules(field: IFormField<string>): boolean {
-        //   if (field.hidden) {
-        //     return true;
-        //   }
-        //   const type = (field as any).isDataElement
-        //     ? 'dataElement'
-        //     : 'trackedEntityAttribute';
-        //   const elementItem = (field as any)[type] || field;
-        //   if (!elementItem) return false;
-        //   const rule = (this.programRuleActions() || []).find(
-        //     (ruleAction) =>
-        //       ruleAction.field === elementItem.id &&
-        //       ruleAction.actionType === 'HIDEFIELD'
-        //   );
-        //   return !!rule;
-        // }
-        // 1) Precompute the hidden field ids from programRuleActions()
-        this.hiddenFieldIds = computed(() => {
-            const actions = this.programRuleActions() || [];
-            return new Set(actions
-                .filter((ruleAction) => ruleAction.actionType === 'HIDEFIELD')
-                .map((ruleAction) => ruleAction.field)
-                .filter((id) => !!id));
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hiddenFieldIds" }] : /* istanbul ignore next */ []));
-        this.ruleProcessor = effect(() => {
-            this.#processRules(this.programRuleActions());
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "ruleProcessor" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            if (!this.collapsibleSections())
-                return;
-            const meta = this.programEntryFormMetaData?.();
-            const sections = Array.isArray(meta?.programStageSections) &&
-                meta.programStageSections.length > 0
-                ? meta.programStageSections
-                : Array.isArray(meta?.sections) && meta.sections.length > 0
-                    ? meta.sections
-                    : [];
-            if (!sections.length)
-                return;
-            if (this.openSectionId() == null) {
-                const firstId = sections[0]?.id ?? 0;
-                this.openSectionId.set(firstId);
-            }
-        });
-    }
-    resolveSections(meta) {
-        if (!meta)
-            return [];
-        const stageSections = meta.programStageSections ?? [];
-        const genericSections = meta.sections ?? [];
-        const sections = (stageSections?.length ? stageSections : genericSections) ?? [];
-        return sections.map((s) => ({
-            id: s?.id ?? s?.uid ?? crypto?.randomUUID?.() ?? String(Math.random()),
-            name: s?.name ?? s?.displayName ?? 'Section',
-            description: s?.description ?? '',
-            formFields: s?.formFields ?? [],
-        }));
-    }
-    // // NEW: open a section; keep at least one open at all times
-    // openSection(section: { id?: string | number }, index: number): void {
-    //   if (!this.collapsibleSections()) return;
-    //   const id = section?.id ?? index;
-    //   // if clicking the already-open section, do nothing (always keep one open)
-    //   if (this.openSectionId() === id) return;
-    //   this.openSectionId.set(id);
-    // }
-    getSections() {
-        const meta = this.programEntryFormMetaData?.();
-        if (!meta)
-            return [];
-        // Normalize to array only if it's valid and non-empty
-        if (Array.isArray(meta.programStageSections) &&
-            meta.programStageSections.length > 0) {
-            return meta.programStageSections;
-        }
-        if (Array.isArray(meta.sections) && meta.sections.length > 0) {
-            return meta.sections;
-        }
-        return [];
-    }
-    openSection(section, index) {
-        if (!this.collapsibleSections())
-            return;
-        const sections = this.getSections();
-        if (!sections.length)
-            return;
-        const clickedId = section?.id ?? index;
-        const currentId = this.openSectionId();
-        if (currentId === clickedId) {
-            // clicked the currently open section → open the next one (wrap to first)
-            const nextIndex = (index + 1) % sections.length;
-            // ToDo: Get Backward | Un-comment Below
-            // const nextIndex = index === sections.length - 1 ? 0 : index + 1;
-            const nextId = sections[nextIndex]?.id ?? nextIndex;
-            this.openSectionId.set(nextId);
-        }
-        else {
-            // clicked a different section → open it
-            this.openSectionId.set(clickedId);
-        }
-    }
-    // NEW: helper used in template
-    isSectionOpen(section, index) {
-        if (!this.collapsibleSections())
-            return true;
-        const id = section?.id ?? index;
-        return this.openSectionId() === id;
-    }
-    //TODO: To move the section visible check to a custom rule implementation for program sections
-    isSectionVisible(section, expectedSectionType) {
-        const sectionId = section?.id;
-        if (!sectionId)
-            return true;
-        if (expectedSectionType === 'PROGRAM_SECTION') {
-            return this.getVisibleSectionFields(section).length > 0;
-        }
-        const sectionActions = (this.programRuleActions() || []).filter((action) => action.section === sectionId &&
-            action.sectionType === expectedSectionType);
-        const hasShowSectionAction = sectionActions.some((action) => action.actionType === 'SHOWSECTION');
-        const hasHideSectionAction = sectionActions.some((action) => action.actionType === 'HIDESECTION');
-        return hasShowSectionAction || !hasHideSectionAction;
-    }
-    ngOnInit() {
-        this.values = this.form().getRawValue();
-        // 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);
-    }
-    // ngOnChanges(changes: SimpleChanges): void {
-    //   this.values = this.form.getRawValue();
-    // }
-    ngOnChanges(changes) {
-        this.values = this.form().getRawValue();
-    }
-    #processRules(ruleActions) {
-        ruleActions.forEach((ruleAction) => {
-            switch (ruleAction.actionType) {
-                case 'HIDEFIELD': {
-                    const fieldToRemove = this.fields().find((field) => field.id === ruleAction.field);
-                    if (fieldToRemove) {
-                        const form = this.form();
-                        const currentValue = form.get(fieldToRemove.key)?.value;
-                        const shouldPreserveValue = fieldToRemove.disabled || fieldToRemove.generated;
-                        if (currentValue != null && !shouldPreserveValue) {
-                            form.get(fieldToRemove.key)?.setValue(null);
-                            this.onFieldUpdate(form, fieldToRemove);
-                        }
-                    }
-                    break;
-                }
-                default:
-                    break;
-            }
-        });
-    }
-    onSubmit() {
-        this.formUpdate.emit(this.form().getRawValue());
-        this.formValidityUpdate.emit(this.form().valid);
-        this.formValidityUpdate.emit(new FormValue(this.form(), this.fields()).isValid);
-    }
-    onFieldUpdate(form, field) {
-        if (!this.showSaveButton() && form) {
-            this.formUpdate.emit(new FormValue(this.form(), this.fields(), field));
-            this.formValidityUpdate.emit(this.form().valid);
-            this.values = form.getRawValue();
-        }
-    }
-    onClear() {
-        this.form().reset();
-    }
-    isFormInValid() {
-        return this.form().invalid;
-    }
-    getOptionValue(option) {
-        return String(option?.value ?? option?.code ?? option?.key ?? option?.id ?? '');
-    }
-    onRunTimeOptionUpdate(result) {
-        if (this.fieldComponents) {
-            const fieldToUpdate = this.fieldComponents.find((fieldComponent) => fieldComponent?.field()?.dependentField?.id === result?.field?.id);
-            const selectedValue = String(this.form()?.value[result?.field?.id] ??
-                this.form()?.value[result?.field?.key] ??
-                '');
-            const parentOption = result?.options.find((option) => this.getOptionValue(option) === selectedValue);
-            fieldToUpdate?.onUpdateRuntimeOptions(parentOption?.options || []);
-        }
-    }
-    ngOnDestroy() {
-        this.ruleProcessor.destroy();
-    }
-    get sanitizedFields() {
-        return (this.fields() || []).filter((field) => !this.isFieldHiddenByRules(field));
-    }
-    getVisibleSectionFields(section) {
-        const rawFields = section?.formFields ?? [];
-        return rawFields.filter((field) => !this.isFieldHiddenByRules(field));
-    }
-    isFieldHiddenByRules(field) {
-        if (field.hidden) {
-            return true;
-        }
-        const type = field.isDataElement
-            ? 'dataElement'
-            : 'trackedEntityAttribute';
-        const elementItem = field || field;
-        if (!elementItem || !elementItem.id) {
-            return false;
-        }
-        return this.hiddenFieldIds().has(elementItem.id);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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        @if (isSectionVisible(stageSection, 'PROGRAM_STAGE_SECTION')) {\n        @let sectionKey = stageSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(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        }\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        @if (isSectionVisible(teiSection, 'PROGRAM_SECTION')) {\n        @let sectionKey = teiSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(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        }\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", 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],[formArray],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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng-dhis2-ui-form', changeDetection: ChangeDetectionStrategy.Eager, 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        @if (isSectionVisible(stageSection, 'PROGRAM_STAGE_SECTION')) {\n        @let sectionKey = stageSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(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        }\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        @if (isSectionVisible(teiSection, 'PROGRAM_SECTION')) {\n        @let sectionKey = teiSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(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        }\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", 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: { programEntryFormConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "programEntryFormConfig", required: false }] }], formConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "formConfig", required: false }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], isFormHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFormHorizontal", required: false }] }], showSaveButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSaveButton", required: false }] }], fieldsData: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsData", required: false }] }], formMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMetaData", required: false }] }], programEntryFormMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "programEntryFormMetaData", required: false }] }], fieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClass", required: false }] }], shouldRenderAsCheckBoxesButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldRenderAsCheckBoxesButton", required: false }] }], programRuleActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "programRuleActions", required: false }] }], dataEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataEntities", required: false }] }], dataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataId", required: false }] }], customOrgUnitRoots: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOrgUnitRoots", required: false }] }], optionCascadeConfigs: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionCascadeConfigs", required: false }] }], coordinatePickerGeoConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordinatePickerGeoConfig", required: false }] }], program: [{ type: i0.Input, args: [{ isSignal: true, alias: "program", required: false }] }], collapsibleSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsibleSections", required: false }] }], formUpdate: [{
-                type: Output
-            }], formValidityUpdate: [{
-                type: Output
-            }], fieldComponents: [{
-                type: ViewChildren,
-                args: [FormFieldComponent]
-            }] } });
-
-class FormField {
-    constructor(options = {}) {
-        this.value = options.value || '';
-        this.key = options.key || '';
-        this.referenceKey = options.referenceKey || '';
-        this.id = options.id || '';
-        this.code = options.code || '';
-        this.label = options.label || '';
-        this.required = !!options.required;
-        this.order = options.order === undefined ? 1 : options.order;
-        this.controlType = options.controlType;
-        this.type = options.type || '';
-        this.options = options.options || [];
-        this.disabled = options.disabled ?? false;
-        this.placeholder = options.placeholder || '';
-        this.min = options.min;
-        this.max = this.setMax(options);
-        this.maxLength = options.maxLength;
-        this.hidden = options.hidden || false;
-        this.unique = options.unique || false;
-        this.generated = options.generated || false;
-        this.isDataElement = options.isDataElement;
-        this.isAttribute = options.isAttribute;
-        this.isOrgUnit = options.isOrgUnit;
-        this.isGeometryField = options.isGeometryField;
-        this.isEnrollmentDate = options.isEnrollmentDate;
-        this.event = options.event;
-        this.programStage = options.programStage;
-        this.program = options.program;
-        this.trackedEntityInstance = options.trackedEntityInstance;
-        this.trackedEntityType = options.trackedEntityType;
-        this.hasOptions = options.hasOptions;
-        this.dependentField = options.dependentField;
-        this.fieldOptionsDependsOn = options.fieldOptionsDependsOn;
-        this.displayInList = options.displayInList;
-        this.displayInReports = options.displayInReports;
-        this.searchable = options.searchable;
-        this.unique = options.unique;
-        this.metaType = options.metaType;
-        this.stepId = options.stepId;
-        this.availableOptionsLabel =
-            options.availableOptionsLabel ?? 'Available options';
-        this.selectedOptionsLabel =
-            options.availableOptionsLabel ?? 'Selected options';
-        this.allowFutureDate = options.allowFutureDate;
-        this.extension = options.extension;
-    }
-    setMax(field) {
-        if (field.controlType !== 'date') {
-            return field.max;
-        }
-        if (field.allowFutureDate) {
-            return undefined;
-        }
-        return format(new Date(), 'yyyy-MM-dd');
-    }
-}
-
-let Boolean$1 = class Boolean extends FormField {
-    constructor() {
-        super(...arguments);
-        this.controlType = 'boolean';
+        super(...arguments);
+        this.controlType = 'boolean';
     }
 };
 
@@ -10269,6 +9996,126 @@ class FormFieldTypeUtil {
     }
 }
 
+class FormUtil {
+    static getFormGroup(fields, dataEntities) {
+        const group = {};
+        (fields || []).forEach((field) => {
+            if (field) {
+                const value = FormUtil.getFieldValue(field, dataEntities);
+                const minValidators = field.min
+                    ? [Validators.min(field.min)]
+                    : [];
+                const maxValidators = field.max
+                    ? [Validators.max(field.max)]
+                    : [];
+                const phoneNumberValidator = field.type === 'tel' ? [] : [];
+                const emailValidator = field.type === 'email'
+                    ? [
+                        Validators.pattern('^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$'),
+                    ]
+                    : [];
+                group[field.key] = field.required
+                    ? new UntypedFormControl({ value, disabled: field.disabled }, {
+                        validators: [
+                            Validators.required,
+                            ...minValidators,
+                            ...maxValidators,
+                            ...phoneNumberValidator,
+                            ...emailValidator,
+                        ],
+                        updateOn: 'change',
+                    })
+                    : new UntypedFormControl({ value, disabled: field.disabled }, {
+                        validators: [
+                            ...minValidators,
+                            ...maxValidators,
+                            ...phoneNumberValidator,
+                            ...emailValidator,
+                        ],
+                    });
+                if (field.referenceKey) {
+                    const value = dataEntities
+                        ? dataEntities[field.referenceKey] || ''
+                        : '';
+                    group[field.referenceKey] = field.required
+                        ? new UntypedFormControl({ value, disabled: field.disabled }, {
+                            validators: [
+                                Validators.required,
+                                ...minValidators,
+                                ...maxValidators,
+                                ...phoneNumberValidator,
+                                ...emailValidator,
+                            ],
+                            updateOn: 'change',
+                        })
+                        : new UntypedFormControl({ value, disabled: field.disabled }, {
+                            validators: [
+                                ...minValidators,
+                                ...maxValidators,
+                                ...phoneNumberValidator,
+                                ...emailValidator,
+                            ],
+                        });
+                }
+            }
+        });
+        return new UntypedFormGroup(group);
+    }
+    static getFieldValue(field, dataEntities) {
+        const fieldValue = dataEntities
+            ? dataEntities[field.id] || dataEntities[field.key] || ''
+            : '';
+        return isArray(fieldValue) ? JSON.stringify(fieldValue) : fieldValue;
+    }
+    static getFormFields(fields) {
+        return (fields || []).map((field) => {
+            const options = FieldUtil.getFieldDropdownOptions(field);
+            const dependentField = find(fields, ['id', field.fieldOptionsDependsOn]);
+            const label = field.formName || field.name || field.displayName;
+            return new FormField({
+                id: field.id,
+                label,
+                code: field.code,
+                key: camelCase(field.code) || field.id,
+                referenceKey: field.referenceKey,
+                required: field.mandatory && !field.generated,
+                displayInList: field.displayInList,
+                type: FieldUtil.getFieldType(field.valueType),
+                controlType: FieldUtil.getFieldControlType(field.valueType, options?.length > 0 || field.hasOptions),
+                options,
+                isDataElement: field.isDataElement,
+                isAttribute: field.isAttribute,
+                isOrgUnit: field.isOrgUnit,
+                isGeometryField: field.isGeometryField,
+                isEnrollmentDate: field.isEnrollmentDate,
+                programStage: field.stageId,
+                event: field.event,
+                trackedEntityInstance: field.trackedEntityInstance,
+                disabled: field.disabled || field.generated,
+                dependentField: dependentField,
+                min: field.min,
+                max: field.max,
+                maxLength: field.maxLength,
+                allowFutureDate: field.allowFutureDate,
+            });
+        });
+    }
+    static createField(id, label, required, controlType, disabled, placeholder, options) {
+        return new FormField({
+            id,
+            code: id,
+            key: id,
+            label,
+            required,
+            controlType,
+            type: 'text',
+            options: options ?? [],
+            disabled: disabled ?? false,
+            placeholder: placeholder,
+        });
+    }
+}
+
 class FormValueUtil {
     static getFormDataEntities(formValueEntities) {
         const formValueKeys = Object.keys(formValueEntities);
@@ -10844,141 +10691,371 @@ class FormMetaData {
             formFieldExtensions: this.params.formFieldExtensions,
         }).toJson();
     }
-    toJson() {
-        return {
-            id: this.params.customFormMetaData?.id,
-            name: TranslationUtil.getTranslatedFormName(this.params.customFormMetaData || {}, this.params.locale),
-            fields: this.fields,
-            sections: this.sections,
-            programStageSections: this.programStageSections,
-            rules: this.rules,
-        };
+    toJson() {
+        return {
+            id: this.params.customFormMetaData?.id,
+            name: TranslationUtil.getTranslatedFormName(this.params.customFormMetaData || {}, this.params.locale),
+            fields: this.fields,
+            sections: this.sections,
+            programStageSections: this.programStageSections,
+            rules: this.rules,
+        };
+    }
+}
+
+// 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.
+
+class FormComponent {
+    get layoutCssClass() {
+        if (!this.isFormHorizontal()) {
+            return 'col-12';
+        }
+        const numberOfFields = this.sanitizedFields.length;
+        if (numberOfFields === 2) {
+            return 'col-sm-6';
+        }
+        if (numberOfFields === 1) {
+            return 'col-12';
+        }
+        return 'col-sm-4';
+    }
+    constructor() {
+        this.programEntryFormConfig = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "programEntryFormConfig" }] : /* istanbul ignore next */ []));
+        this.formConfig = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "formConfig" }] : /* istanbul ignore next */ []));
+        this.fields = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+        this.form = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+        this.isFormHorizontal = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFormHorizontal" }] : /* istanbul ignore next */ []));
+        this.showSaveButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSaveButton" }] : /* istanbul ignore next */ []));
+        this.fieldsData = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "fieldsData" }] : /* istanbul ignore next */ []));
+        this.formMetaData = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "formMetaData" }] : /* istanbul ignore next */ []));
+        this.programEntryFormMetaData = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "programEntryFormMetaData" }] : /* istanbul ignore next */ []));
+        this.fieldClass = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldClass" }] : /* istanbul ignore next */ []));
+        this.shouldRenderAsCheckBoxesButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shouldRenderAsCheckBoxesButton" }] : /* istanbul ignore next */ []));
+        this.programRuleActions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "programRuleActions" }] : /* istanbul ignore next */ []));
+        this.dataEntities = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataEntities" }] : /* istanbul ignore next */ []));
+        this.dataId = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dataId" }] : /* istanbul ignore next */ []));
+        this.customOrgUnitRoots = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : /* istanbul ignore next */ []));
+        this.optionCascadeConfigs = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionCascadeConfigs" }] : /* istanbul ignore next */ []));
+        this.coordinatePickerGeoConfig = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "coordinatePickerGeoConfig" }] : /* istanbul ignore next */ []));
+        /** ✅ 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);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionCascadeConfigMap" }] : /* istanbul ignore next */ []));
+        //TODO: FIND BETTER WAY TO PASS PROGRAM TO FIELDS i.e field extensions
+        this.program = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "program" }] : /* istanbul ignore next */ []));
+        this.collapsibleSections = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsibleSections" }] : /* istanbul ignore next */ []));
+        this.openSectionId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openSectionId" }] : /* istanbul ignore next */ []));
+        this.configuration = computed(() => {
+            if (!this.formConfig()) {
+                const fieldConfig = new FieldConfig({
+                    fieldDescriptionLabel: this.programEntryFormConfig()?.fieldDescriptionLabel,
+                });
+                return new FormConfig({
+                    direction: this.isFormHorizontal() ? 'horizontal' : 'vertical',
+                    fieldConfig,
+                });
+            }
+            return this.formConfig();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "configuration" }] : /* istanbul ignore next */ []));
+        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;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldControlKeyById" }] : /* istanbul ignore next */ []));
+        // get sanitizedFields(): IFormField<string>[] {
+        //   return (this.fields() || []).filter(
+        //     (field) => !this.isFieldHiddenByRules(field)
+        //   );
+        // }
+        // getVisibleSectionFields(section: any): IFormField<string>[] {
+        //   const rawFields: IFormField<string>[] = section?.formFields ?? [];
+        //   return rawFields.filter((field) => !this.isFieldHiddenByRules(field));
+        // }
+        // private isFieldHiddenByRules(field: IFormField<string>): boolean {
+        //   if (field.hidden) {
+        //     return true;
+        //   }
+        //   const type = (field as any).isDataElement
+        //     ? 'dataElement'
+        //     : 'trackedEntityAttribute';
+        //   const elementItem = (field as any)[type] || field;
+        //   if (!elementItem) return false;
+        //   const rule = (this.programRuleActions() || []).find(
+        //     (ruleAction) =>
+        //       ruleAction.field === elementItem.id &&
+        //       ruleAction.actionType === 'HIDEFIELD'
+        //   );
+        //   return !!rule;
+        // }
+        // 1) Precompute the hidden field ids from programRuleActions()
+        this.hiddenFieldIds = computed(() => {
+            const actions = this.programRuleActions() || [];
+            return new Set(actions
+                .filter((ruleAction) => ruleAction.actionType === 'HIDEFIELD')
+                .map((ruleAction) => ruleAction.field)
+                .filter((id) => !!id));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hiddenFieldIds" }] : /* istanbul ignore next */ []));
+        this.ruleProcessor = effect(() => {
+            this.#processRules(this.programRuleActions());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ruleProcessor" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            if (!this.collapsibleSections())
+                return;
+            const meta = this.programEntryFormMetaData?.();
+            const sections = Array.isArray(meta?.programStageSections) &&
+                meta.programStageSections.length > 0
+                ? meta.programStageSections
+                : Array.isArray(meta?.sections) && meta.sections.length > 0
+                    ? meta.sections
+                    : [];
+            if (!sections.length)
+                return;
+            if (this.openSectionId() == null) {
+                const firstId = sections[0]?.id ?? 0;
+                this.openSectionId.set(firstId);
+            }
+        });
+    }
+    resolveSections(meta) {
+        if (!meta)
+            return [];
+        const stageSections = meta.programStageSections ?? [];
+        const genericSections = meta.sections ?? [];
+        const sections = (stageSections?.length ? stageSections : genericSections) ?? [];
+        return sections.map((s) => ({
+            id: s?.id ?? s?.uid ?? crypto?.randomUUID?.() ?? String(Math.random()),
+            name: s?.name ?? s?.displayName ?? 'Section',
+            description: s?.description ?? '',
+            formFields: s?.formFields ?? [],
+        }));
+    }
+    // // NEW: open a section; keep at least one open at all times
+    // openSection(section: { id?: string | number }, index: number): void {
+    //   if (!this.collapsibleSections()) return;
+    //   const id = section?.id ?? index;
+    //   // if clicking the already-open section, do nothing (always keep one open)
+    //   if (this.openSectionId() === id) return;
+    //   this.openSectionId.set(id);
+    // }
+    getSections() {
+        const meta = this.programEntryFormMetaData?.();
+        if (!meta)
+            return [];
+        // Normalize to array only if it's valid and non-empty
+        if (Array.isArray(meta.programStageSections) &&
+            meta.programStageSections.length > 0) {
+            return meta.programStageSections;
+        }
+        if (Array.isArray(meta.sections) && meta.sections.length > 0) {
+            return meta.sections;
+        }
+        return [];
+    }
+    openSection(section, index) {
+        if (!this.collapsibleSections())
+            return;
+        const sections = this.getSections();
+        if (!sections.length)
+            return;
+        const clickedId = section?.id ?? index;
+        const currentId = this.openSectionId();
+        if (currentId === clickedId) {
+            // clicked the currently open section → open the next one (wrap to first)
+            const nextIndex = (index + 1) % sections.length;
+            // ToDo: Get Backward | Un-comment Below
+            // const nextIndex = index === sections.length - 1 ? 0 : index + 1;
+            const nextId = sections[nextIndex]?.id ?? nextIndex;
+            this.openSectionId.set(nextId);
+        }
+        else {
+            // clicked a different section → open it
+            this.openSectionId.set(clickedId);
+        }
+    }
+    // NEW: helper used in template
+    isSectionOpen(section, index) {
+        if (!this.collapsibleSections())
+            return true;
+        const id = section?.id ?? index;
+        return this.openSectionId() === id;
     }
-}
-
-// 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.
-
-class FormUtil {
-    static getFormGroup(fields, dataEntities) {
-        const group = {};
-        (fields || []).forEach((field) => {
-            if (field) {
-                const value = FormUtil.getFieldValue(field, dataEntities);
-                const minValidators = field.min
-                    ? [Validators.min(field.min)]
-                    : [];
-                const maxValidators = field.max
-                    ? [Validators.max(field.max)]
-                    : [];
-                const phoneNumberValidator = field.type === 'tel' ? [] : [];
-                const emailValidator = field.type === 'email'
-                    ? [
-                        Validators.pattern('^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$'),
-                    ]
-                    : [];
-                group[field.key] = field.required
-                    ? new UntypedFormControl({ value, disabled: field.disabled }, {
-                        validators: [
-                            Validators.required,
-                            ...minValidators,
-                            ...maxValidators,
-                            ...phoneNumberValidator,
-                            ...emailValidator,
-                        ],
-                        updateOn: 'change',
-                    })
-                    : new UntypedFormControl({ value, disabled: field.disabled }, {
-                        validators: [
-                            ...minValidators,
-                            ...maxValidators,
-                            ...phoneNumberValidator,
-                            ...emailValidator,
-                        ],
-                    });
-                if (field.referenceKey) {
-                    const value = dataEntities
-                        ? dataEntities[field.referenceKey] || ''
-                        : '';
-                    group[field.referenceKey] = field.required
-                        ? new UntypedFormControl({ value, disabled: field.disabled }, {
-                            validators: [
-                                Validators.required,
-                                ...minValidators,
-                                ...maxValidators,
-                                ...phoneNumberValidator,
-                                ...emailValidator,
-                            ],
-                            updateOn: 'change',
-                        })
-                        : new UntypedFormControl({ value, disabled: field.disabled }, {
-                            validators: [
-                                ...minValidators,
-                                ...maxValidators,
-                                ...phoneNumberValidator,
-                                ...emailValidator,
-                            ],
-                        });
+    //TODO: To move the section visible check to a custom rule implementation for program sections
+    isSectionVisible(section, expectedSectionType) {
+        const sectionId = section?.id;
+        if (!sectionId)
+            return true;
+        if (expectedSectionType === 'PROGRAM_SECTION') {
+            return this.getVisibleSectionFields(section).length > 0;
+        }
+        const sectionActions = (this.programRuleActions() || []).filter((action) => action.section === sectionId &&
+            action.sectionType === expectedSectionType);
+        const hasShowSectionAction = sectionActions.some((action) => action.actionType === 'SHOWSECTION');
+        const hasHideSectionAction = sectionActions.some((action) => action.actionType === 'HIDESECTION');
+        return hasShowSectionAction || !hasHideSectionAction;
+    }
+    ngOnInit() {
+        this.values = this.form().getRawValue();
+        // 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);
+    }
+    ngOnChanges(changes) {
+        this.values = this.form().getRawValue();
+    }
+    #processRules(ruleActions) {
+        ruleActions.forEach((ruleAction) => {
+            switch (ruleAction.actionType) {
+                case 'HIDEFIELD': {
+                    const fieldToRemove = this.fields().find((field) => field.id === ruleAction.field);
+                    if (fieldToRemove) {
+                        const form = this.form();
+                        const currentValue = form.get(fieldToRemove.key)?.value;
+                        const shouldPreserveValue = fieldToRemove.disabled || fieldToRemove.generated;
+                        if (currentValue != null && !shouldPreserveValue) {
+                            form.get(fieldToRemove.key)?.setValue(null);
+                            this.onFieldUpdate(form, fieldToRemove);
+                        }
+                    }
+                    break;
                 }
+                default:
+                    break;
             }
         });
-        return new UntypedFormGroup(group);
     }
-    static getFieldValue(field, dataEntities) {
-        const fieldValue = dataEntities
-            ? dataEntities[field.id] || dataEntities[field.key] || ''
-            : '';
-        return isArray(fieldValue) ? JSON.stringify(fieldValue) : fieldValue;
+    onSubmit() {
+        this.formUpdate.emit(this.form().getRawValue());
+        this.formValidityUpdate.emit(this.form().valid);
+        this.formValidityUpdate.emit(new FormValue(this.form(), this.fields()).isValid);
     }
-    static getFormFields(fields) {
-        return (fields || []).map((field) => {
-            const options = FieldUtil.getFieldDropdownOptions(field);
-            const dependentField = find(fields, ['id', field.fieldOptionsDependsOn]);
-            const label = field.formName || field.name || field.displayName;
-            return new FormField({
-                id: field.id,
-                label,
-                code: field.code,
-                key: camelCase(field.code) || field.id,
-                referenceKey: field.referenceKey,
-                required: field.mandatory && !field.generated,
-                displayInList: field.displayInList,
-                type: FieldUtil.getFieldType(field.valueType),
-                controlType: FieldUtil.getFieldControlType(field.valueType, options?.length > 0 || field.hasOptions),
-                options,
-                isDataElement: field.isDataElement,
-                isAttribute: field.isAttribute,
-                isOrgUnit: field.isOrgUnit,
-                isGeometryField: field.isGeometryField,
-                isEnrollmentDate: field.isEnrollmentDate,
-                programStage: field.stageId,
-                event: field.event,
-                trackedEntityInstance: field.trackedEntityInstance,
-                disabled: field.disabled || field.generated,
-                dependentField: dependentField,
-                min: field.min,
-                max: field.max,
-                maxLength: field.maxLength,
-                allowFutureDate: field.allowFutureDate,
-            });
-        });
+    onFieldUpdate(form, field) {
+        if (!this.showSaveButton() && form) {
+            this.formUpdate.emit(new FormValue(this.form(), this.fields(), field));
+            this.formValidityUpdate.emit(this.form().valid);
+            this.values = form.getRawValue();
+        }
     }
-    static createField(id, label, required, controlType, disabled, placeholder, options) {
-        return new FormField({
-            id,
-            code: id,
-            key: id,
-            label,
-            required,
-            controlType,
-            type: 'text',
-            options: options ?? [],
-            disabled: disabled ?? false,
-            placeholder: placeholder,
-        });
+    onClear() {
+        this.form().reset();
+    }
+    isFormInValid() {
+        return this.form().invalid;
+    }
+    getOptionValue(option) {
+        return String(option?.value ?? option?.code ?? option?.key ?? option?.id ?? '');
+    }
+    onRunTimeOptionUpdate(result) {
+        if (this.fieldComponents) {
+            const fieldToUpdate = this.fieldComponents.find((fieldComponent) => fieldComponent?.field()?.dependentField?.id === result?.field?.id);
+            const selectedValue = String(this.form()?.value[result?.field?.id] ??
+                this.form()?.value[result?.field?.key] ??
+                '');
+            const parentOption = result?.options.find((option) => this.getOptionValue(option) === selectedValue);
+            fieldToUpdate?.onUpdateRuntimeOptions(parentOption?.options || []);
+        }
+    }
+    ngOnDestroy() {
+        this.ruleProcessor.destroy();
+    }
+    get sanitizedFields() {
+        return (this.fields() || []).filter((field) => !this.isFieldHiddenByRules(field));
+    }
+    getVisibleSectionFields(section) {
+        const rawFields = section?.formFields ?? [];
+        return rawFields.filter((field) => !this.isFieldHiddenByRules(field));
+    }
+    isFieldHiddenByRules(field) {
+        if (field.hidden) {
+            return true;
+        }
+        const type = field.isDataElement
+            ? 'dataElement'
+            : 'trackedEntityAttribute';
+        const elementItem = field || field;
+        if (!elementItem || !elementItem.id) {
+            return false;
+        }
+        return this.hiddenFieldIds().has(elementItem.id);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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        @if (isSectionVisible(stageSection, 'PROGRAM_STAGE_SECTION')) {\n        @let sectionKey = stageSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(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        }\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        @if (isSectionVisible(teiSection, 'PROGRAM_SECTION')) {\n        @let sectionKey = teiSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(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        }\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", 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],[formArray],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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-form', changeDetection: ChangeDetectionStrategy.Eager, 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        @if (isSectionVisible(stageSection, 'PROGRAM_STAGE_SECTION')) {\n        @let sectionKey = stageSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(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        }\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        @if (isSectionVisible(teiSection, 'PROGRAM_SECTION')) {\n        @let sectionKey = teiSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(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        }\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", 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: { programEntryFormConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "programEntryFormConfig", required: false }] }], formConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "formConfig", required: false }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], isFormHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFormHorizontal", required: false }] }], showSaveButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSaveButton", required: false }] }], fieldsData: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsData", required: false }] }], formMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMetaData", required: false }] }], programEntryFormMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "programEntryFormMetaData", required: false }] }], fieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClass", required: false }] }], shouldRenderAsCheckBoxesButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldRenderAsCheckBoxesButton", required: false }] }], programRuleActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "programRuleActions", required: false }] }], dataEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataEntities", required: false }] }], dataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataId", required: false }] }], customOrgUnitRoots: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOrgUnitRoots", required: false }] }], optionCascadeConfigs: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionCascadeConfigs", required: false }] }], coordinatePickerGeoConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordinatePickerGeoConfig", required: false }] }], program: [{ type: i0.Input, args: [{ isSignal: true, alias: "program", required: false }] }], collapsibleSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsibleSections", required: false }] }], formUpdate: [{
+                type: Output
+            }], formValidityUpdate: [{
+                type: Output
+            }], fieldComponents: [{
+                type: ViewChildren,
+                args: [FormFieldComponent]
+            }] } });
 
 class RepeatableFormComponent {
     #eventFormValue$;
@@ -11816,6 +11893,7 @@ class ProgramEntryFormConfig {
         this.displayType = 'FLAT';
         this.submitButtonLabel = 'Submit';
         this.cancelButtonLabel = 'Cancel';
+        this.fieldDescriptionLabel = 'Description';
         this.updateTeiOrgUnit = false;
         Object.assign(this, config);
     }
@@ -11884,6 +11962,7 @@ class ProgramEntryFormFieldUtil {
                     formName: eventDateName,
                     name: eventDateName,
                     shortName: eventDateName,
+                    description: eventDateName,
                     displayName: eventDateName,
                     sortOrder: 1,
                     mandatory: true,
@@ -12107,6 +12186,7 @@ class ProgramEntryFormFieldUtil {
                 id: field.id,
                 code: field.code,
                 label: field.formName || field.name,
+                description: field.description,
                 key: field.code ? camelCase(field.code) : field.id,
                 required: field.mandatory,
                 type: FieldUtil.getFieldType(field.valueType),
@@ -12175,7 +12255,7 @@ class ProgramStageEntryFormSectionUtil {
             sections.push(new ProgramStageEntryFormSection({
                 id: `${programStage.id}_basic_information`,
                 name: 'Basic Information',
-                description: '',
+                description: programStage.description ?? '',
                 formFields: basicDetailsFields,
                 orientation: 'VERTICAL',
             }));
@@ -12263,6 +12343,7 @@ class ProgramStageEntryFormSectionUtil {
             code: dataElementDefinition.code,
             formName: dataElementDefinition.formName,
             name: dataElementDefinition.displayName ?? dataElementDefinition.name ?? '',
+            description: dataElementDefinition.description,
             mandatory: !!programStageDataElement.compulsory,
             valueType: dataElementDefinition.valueType,
             sortOrder: programStageDataElement.sortOrder,
@@ -12566,6 +12647,7 @@ class ProgramEntryFormSectionUtil {
             code: tea.code,
             formName: tea.formName,
             name: tea.displayName ?? tea.name,
+            description: tea.description,
             mandatory: !!programTrackedEntityAttribute.mandatory,
             valueType: tea.valueType,
             sortOrder: programTrackedEntityAttribute.sortOrder,
@@ -12589,6 +12671,7 @@ class ProgramEntryFormSectionUtil {
             code: fieldWithCustomConfiguration.code,
             label: fieldWithCustomConfiguration.formName ||
                 fieldWithCustomConfiguration.name,
+            description: fieldWithCustomConfiguration.description,
             key: fieldWithCustomConfiguration.code
                 ? camelCase(fieldWithCustomConfiguration.code)
                 : fieldWithCustomConfiguration.id,
@@ -12596,8 +12679,7 @@ class ProgramEntryFormSectionUtil {
             type: FieldUtil.getFieldType(fieldWithCustomConfiguration.valueType),
             options,
             hasOptions,
-            disabled: this.#getDisabledStatus(iTrackedEntityFormFieldBase) ||
-                !!tea.generated,
+            disabled: this.#getDisabledStatus(iTrackedEntityFormFieldBase) || !!tea.generated,
             order: fieldWithCustomConfiguration.sortOrder,
             controlType: FieldUtil.getFieldControlType(fieldWithCustomConfiguration.valueType, hasOptions),
             allowFutureDate: programTrackedEntityAttribute.allowFutureDate === true,
@@ -12702,6 +12784,7 @@ class ProgramEntryFormMetaData {
             'id',
             'code',
             'name',
+            'description',
             'captureCoordinates',
             'featureType',
             'enrollmentDateLabel',
@@ -12742,7 +12825,7 @@ class ProgramEntryFormMetaData {
                 .with(this.d2.programModule.programStageDataElement.with(this.d2.dataElementModule.dataElement.with(this.d2.optionSetModule.optionSet.with(this.d2.optionSetModule.option), 'ToOne'), 'ToOne'));
             programQuery.with(programStageQuery);
         }
-        return programQuery.get();
+        return programQuery.get({ useIndexDb: true });
     }
     async #getProgramMetaData() {
         const program = this.config.program;
@@ -12769,14 +12852,26 @@ class ProgramEntryFormMetaData {
                 'id',
                 'code',
                 'name',
+                'description',
             ]), 'ToOne')
                 .with(this.d2.programModule.trackedEntityAttribute.select([
                 'id',
                 'code',
                 'name',
+                'description',
+            ]), 'ToOne')
+                .with(this.d2.programModule.programSection.select([
+                'id',
+                'code',
+                'name',
+                'description',
+            ]), 'ToOne')
+                .with(this.d2.programModule.programStageSection.select([
+                'id',
+                'code',
+                'name',
+                'description',
             ]), 'ToOne')
-                .with(this.d2.programModule.programSection.select(['id', 'code', 'name']), 'ToOne')
-                .with(this.d2.programModule.programStageSection.select(['id', 'code', 'name']), 'ToOne')
                 .with(this.d2.optionSetModule.optionGroup
                 .select(['id'])
                 .with(this.d2.optionSetModule.option.select([
@@ -12790,7 +12885,7 @@ class ProgramEntryFormMetaData {
                 'displayName',
             ]), 'ToOne'))
                 .paginate(new Pager({ paging: false }))
-                .get(),
+                .get({ useIndexDb: true }),
         ]);
         const [programResponse, programRuleResponse] = metaDataResponse;
         const metaData = programResponse.data;
@@ -12966,7 +13061,7 @@ class ProgramEntryFormMetaData {
                 if (this.config?.formFieldExtensions &&
                     this.config.formFieldExtensions.length > 0 &&
                     this.config.formFieldExtensions[0]?.optionsSourceCode) {
-                    const orgUnitResponse = await this.d2.httpInstance.get(`organisationUnits.json?fields=id,name,code&paging=false&filter=organisationUnitGroups.code:eq:${this.config.formFieldExtensions[0].optionsSourceCode}`);
+                    const orgUnitResponse = await this.d2.httpInstance.get(`organisationUnits.json?fields=id,name,code&paging=false&filter=organisationUnitGroups.code:eq:${this.config.formFieldExtensions[0].optionsSourceCode}`, { useIndexDb: true });
                     const orgUnitsResponse = orgUnitResponse?.data?.['organisationUnits'];
                     const organisationUnits = Array.isArray(orgUnitsResponse)
                         ? orgUnitsResponse
@@ -13311,8 +13406,7 @@ class ProgramEntryFormModule {
             const instance = await this.instanceQuery.create();
             return await this.#setReservedValuesForCodeGeneration(instance);
         }
-        this.instanceQuery
-            .setInstanceFields(this.metaData()?.program);
+        this.instanceQuery.setInstanceFields(this.metaData()?.program);
         const instance = await this.#setReservedValuesForCodeGeneration(this.instanceQuery.instance);
         if (this.orgUnit()) {
             instance.setOrgUnit(this.orgUnit());