@iapps/ng-dhis2-ui 1.4.5 → 1.4.6

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

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, ContentChild, Input, Directive, inject, ElementRef, ChangeDetectionStrategy, Component, EventEmitter, Output, NgZone, input, Injectable, model, computed, signal, effect, ViewChildren } from '@angular/core';
+import { NgModule, ContentChild, Input, Directive, inject, ElementRef, ChangeDetectionStrategy, Component, EventEmitter, Output, NgZone, input, Injectable, model, computed, signal, effect, DestroyRef, ViewChildren } from '@angular/core';
 import { useDataQuery, useConfig, useAlert, clearSensitiveCaches, DataProvider, useDataEngine, Provider } from '@dhis2/app-runtime';
 import * as React from 'react';
 import React__default, { useState, useCallback, useRef, useEffect, createContext, useContext, useMemo, memo } from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { from, map, catchError, of, zip, firstValueFrom, filter, take, Subject, takeUntil } from 'rxjs';
+import { from, map, catchError, of, zip, firstValueFrom, filter, take, Subject, takeUntil, startWith, distinctUntilChanged } from 'rxjs';
 import parse from 'html-react-parser';
 import i18n from '@dhis2/d2-i18n';
 import { colors, theme, spacers } from '@dhis2/ui-constants';
@@ -32,7 +32,7 @@ import { isValid, format, addDays } from 'date-fns';
 import * as XLSX from 'xlsx';
 import * as i1 from '@angular/forms';
 import { FormControl, Validators, UntypedFormControl, UntypedFormGroup, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { toObservable } from '@angular/core/rxjs-interop';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { useMapEvents, useMap, MapContainer, TileLayer, GeoJSON, Marker } from 'react-leaflet';
 import moment from 'moment';
 
@@ -12998,6 +12998,31 @@ class FormMetaData {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+class FormValidationScopeUtil {
+    static resolve(field, config, sections, actions) {
+        const keys = [field.id, field.key, field.code].filter((key) => typeof key === 'string' && key.length > 0);
+        const isMatch = (key) => typeof key === 'string' && keys.includes(key);
+        const hiddenByMetadata = !!field.hidden;
+        const hiddenByRule = (actions ?? []).some((action) => action.actionType === 'HIDEFIELD' && isMatch(action.field));
+        const hiddenByAssignment = !!config?.hideCustomAssignedFields &&
+            (config.autoAssignedValues ?? []).some((assignment) => isMatch(assignment.field));
+        // Section membership is relevant only if the TRACKER form actually uses
+        // configured sections. The fallback template renders all sanitized fields.
+        const hasTrackerSections = config?.formType === 'TRACKER' &&
+            Array.isArray(sections) &&
+            sections.length > 0;
+        const absentFromTrackerSections = !!hasTrackerSections &&
+            !sections.some((section) => (section?.formFields ?? []).some((sectionField) => [sectionField?.id, sectionField?.key, sectionField?.code].some(isMatch)));
+        return {
+            excluded: hiddenByMetadata || hiddenByRule || hiddenByAssignment || absentFromTrackerSections,
+            hiddenByMetadata,
+            hiddenByRule,
+            hiddenByAssignment,
+            absentFromTrackerSections,
+        };
+    }
+}
+
 class FormComponent {
     get layoutCssClass() {
         if (!this.isFormHorizontal()) {
@@ -13078,6 +13103,7 @@ class FormComponent {
         ...(ngDevMode ? [{ debugName: "configuration" }] : /* istanbul ignore next */ []));
         this.formUpdate = new EventEmitter();
         this.formValidityUpdate = new EventEmitter();
+        this.destroyRef = inject(DestroyRef);
         // get sanitizedFields(): IFormField<string>[] {
         //   return (this.fields() || []).filter((field: any) => {
         //     if (field.hidden) {
@@ -13116,40 +13142,11 @@ class FormComponent {
             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 */ []));
+        // Track only controls disabled by this component's visibility handling.
+        // Do not re-enable controls disabled by metadata or other components.
+        this.visibilityDisabledKeys = new Set();
+        this.unrenderedViewDisabledKeys = new Set();
+        this.previousShowErrorIds = new Set();
         this.ruleProcessor = effect(() => {
             this.#processRules(this.programRuleActions());
         }, /* @ts-ignore */
@@ -13250,6 +13247,9 @@ class FormComponent {
         return hasShowSectionAction || !hasHideSectionAction;
     }
     ngOnInit() {
+        // A field can be hidden directly by metadata before program rules run.
+        // Exclude such fields from validation without discarding their values.
+        this.#processRules(this.programRuleActions(), true);
         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()));
@@ -13258,26 +13258,152 @@ class FormComponent {
     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);
-                        }
+    ngAfterViewInit() {
+        // For expanded, non-collapsible TRACKER forms, the instantiated field
+        // components are the final authority on what the user can actually edit.
+        // Avoid this policy for collapsible sections: collapsing must never waive
+        // mandatory fields that the user can reveal by expanding a section.
+        if (this.programEntryFormConfig()?.formType !== 'TRACKER' ||
+            this.collapsibleSections())
+            return;
+        queueMicrotask(() => this.syncActuallyRenderedFields());
+        this.fieldComponents.changes
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => queueMicrotask(() => this.syncActuallyRenderedFields()));
+    }
+    syncActuallyRenderedFields() {
+        if (this.destroyRef.destroyed)
+            return;
+        if (this.programEntryFormConfig()?.formType !== 'TRACKER' ||
+            this.collapsibleSections())
+            return;
+        const renderedIds = new Set(this.fieldComponents.toArray()
+            .map((component) => component.field()?.id)
+            .filter((id) => typeof id === 'string'));
+        // An empty view may be a loading/teardown transition, not an intentionally
+        // empty form. Never disable the entire form based on this transient state.
+        if (renderedIds.size === 0)
+            return;
+        const form = this.form();
+        let changed = false;
+        for (const field of this.fields() ?? []) {
+            if (!field?.id)
+                continue;
+            const key = field.key || field.id;
+            const controlKeys = [key, field.referenceKey].filter((item) => typeof item === 'string' && item.length > 0);
+            const scope = FormValidationScopeUtil.resolve(field, this.programEntryFormConfig(), this.programEntryFormMetaData()?.sections, this.programRuleActions());
+            const actuallyUnrendered = !renderedIds.has(field.id);
+            for (const controlKey of controlKeys) {
+                const control = form.get(controlKey);
+                if (!control)
+                    continue;
+                if (actuallyUnrendered) {
+                    if (control.enabled) {
+                        control.disable({ emitEvent: false });
+                        this.unrenderedViewDisabledKeys.add(controlKey);
+                        changed = true;
                     }
-                    break;
                 }
-                default:
-                    break;
+                else if (this.unrenderedViewDisabledKeys.delete(controlKey) &&
+                    !scope.excluded && !field.disabled && !field.generated &&
+                    control.disabled) {
+                    control.enable({ emitEvent: false });
+                    changed = true;
+                }
             }
-        });
+        }
+        if (changed)
+            form.updateValueAndValidity({ emitEvent: true });
+    }
+    #processRules(ruleActions, force = false) {
+        // Share the same visibility/validation policy as FlatFormComponent.
+        const config = this.programEntryFormConfig();
+        const sections = this.programEntryFormMetaData()?.sections;
+        const hasTrackerSections = config?.formType === 'TRACKER' && Array.isArray(sections) && sections.length > 0;
+        // This effect can run before required inputs are set. An empty action set
+        // needs no work until ngOnInit synchronizes metadata-hidden controls.
+        if (!ruleActions.length &&
+            !this.visibilityDisabledKeys.size &&
+            !this.previousShowErrorIds.size &&
+            !hasTrackerSections &&
+            !config?.hideCustomAssignedFields &&
+            !force) {
+            return;
+        }
+        const form = this.form();
+        const showErrorIds = new Set(ruleActions
+            .filter((action) => action.actionType === 'SHOWERROR')
+            .map((action) => action.field)
+            .filter((id) => !!id));
+        let statusChanged = false;
+        let clearedField;
+        for (const field of this.fields() ?? []) {
+            if (!field)
+                continue;
+            const controlKey = field.key || field.id;
+            const control = form.get(controlKey);
+            if (!control)
+                continue;
+            const scope = FormValidationScopeUtil.resolve(field, config, sections, ruleActions);
+            const hiddenByRule = scope.hiddenByRule;
+            const omittedFromSections = scope.absentFromTrackerSections;
+            const hidden = scope.excluded;
+            const originallyDisabled = !!field.disabled || !!field.generated;
+            if (hidden) {
+                // Retain prior HIDEFIELD clearing semantics for editable fields.
+                // Metadata-hidden values (e.g. auto-assigned attributes) are preserved.
+                if (hiddenByRule &&
+                    !omittedFromSections &&
+                    !originallyDisabled &&
+                    control.value != null) {
+                    control.setValue(null, { emitEvent: false });
+                    clearedField = field;
+                    statusChanged = true;
+                }
+            }
+            // Keep both the field's control and any generated reference control in
+            // the same validation scope; preserve their raw values when hidden.
+            const keys = [controlKey, field.referenceKey].filter((key) => typeof key === 'string' && key.length > 0);
+            for (const key of keys) {
+                const target = form.get(key);
+                if (!target)
+                    continue;
+                if (hidden) {
+                    if (target.enabled) {
+                        target.disable({ emitEvent: false });
+                        statusChanged = true;
+                    }
+                    // Also track initial exclusions already disabled by FlatFormComponent,
+                    // so visibility changes can restore them without touching metadata locks.
+                    this.visibilityDisabledKeys.add(key);
+                }
+                else if (this.visibilityDisabledKeys.delete(key)) {
+                    if (!originallyDisabled && target.disabled) {
+                        target.enable({ emitEvent: false });
+                        statusChanged = true;
+                    }
+                }
+            }
+            // A SHOWERROR action may cease to apply without any control value change.
+            // Remove only its custom error; keep required/pattern/min/max errors.
+            if (this.previousShowErrorIds.has(field.id) &&
+                !showErrorIds.has(field.id) &&
+                control.hasError('customError')) {
+                const remainingErrors = { ...(control.errors ?? {}) };
+                delete remainingErrors['customError'];
+                control.setErrors(Object.keys(remainingErrors).length ? remainingErrors : null, { emitEvent: false });
+                statusChanged = true;
+            }
+        }
+        this.previousShowErrorIds.clear();
+        showErrorIds.forEach((id) => this.previousShowErrorIds.add(id));
+        if (statusChanged) {
+            // Emit a single aggregate validity change for the parent flat form.
+            form.updateValueAndValidity({ emitEvent: true });
+        }
+        if (clearedField) {
+            this.onFieldUpdate(form, clearedField);
+        }
     }
     onSubmit() {
         this.formUpdate.emit(this.form().getRawValue());
@@ -13302,7 +13428,7 @@ class FormComponent {
     }
     onRunTimeOptionUpdate(result) {
         if (this.fieldComponents) {
-            const fieldToUpdate = this.fieldComponents.find((fieldComponent) => fieldComponent?.field()?.dependentField?.id === result?.field?.id);
+            const fieldToUpdate = this.fieldComponents.toArray().find((fieldComponent) => fieldComponent?.field()?.dependentField?.id === result?.field?.id);
             const selectedValue = String(this.form()?.value[result?.field?.id] ??
                 this.form()?.value[result?.field?.key] ??
                 '');
@@ -13313,6 +13439,31 @@ class FormComponent {
     ngOnDestroy() {
         this.ruleProcessor.destroy();
     }
+    // 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;
+    // }
     get sanitizedFields() {
         return (this.fields() || []).filter((field) => !this.isFieldHiddenByRules(field));
     }
@@ -13321,17 +13472,7 @@ class FormComponent {
         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);
+        return FormValidationScopeUtil.resolve(field, this.programEntryFormConfig(), this.programEntryFormMetaData()?.sections, this.programRuleActions()).excluded;
     }
     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 sectionDescription = stageSection?.description;\n        @let hasDescription = !!sectionDescription;\n\n        <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n          @if (stageSection?.name) {\n            @if (isSectionsCollapsible) {\n              @let isOpen = isSectionOpen(stageSection, $index);\n\n              <button\n                type=\"button\"\n                class=\"form__section-toggle\"\n                (click)=\"openSection(stageSection, $index)\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-controls]=\"sectionDomId\"\n                [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n              >\n                <span class=\"form__section-title\">{{ stageSection.name }}</span>\n                <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n              </button>\n            } @else {\n              <div class=\"form__field-group-name\">{{ stageSection.name }}</div>\n              @if (hasDescription) {\n                <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                  {{ sectionDescription }}\n                </p>\n              }\n            }\n          }\n\n          @let isOpen = !isSectionsCollapsible || isSectionOpen(stageSection, $index);\n          @if (isOpen) {\n            @if (isSectionsCollapsible && hasDescription) {\n              <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                {{ sectionDescription }}\n              </p>\n            }\n\n            <div class=\"form__section-content\" [id]=\"sectionDomId\">\n              @if (stageSection?.formFields?.length) {\n                @for (visibleField of getVisibleSectionFields(stageSection); track visibleField?.id ?? $index) {\n                  <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n                    <ng-dhis2-ui-form-field\n                      [field]=\"visibleField\"\n                      [fieldConfig]=\"uiConfig.fieldConfig\"\n                      [form]=\"formGroupValue\"\n                      [fieldClass]=\"fieldClass()\"\n                      [dataEntities]=\"dataEntitiesValue\"\n                      [dataId]=\"dataEntityId\"\n                      [customOrgUnitRoots]=\"orgUnitRootIds\"\n                      [optionCascadeConfigMap]=\"cascadeConfigMap\"\n                      [optionCascadeConfigs]=\"cascadeConfigs\"\n                      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n                      [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n                      [programRuleActions]=\"ruleActionList\"\n                      [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n                      (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n                      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                    />\n                  </div>\n                } @empty {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              } @else {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            </div>\n          }\n        </section>\n        }\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 sectionDescription = teiSection?.description;\n        @let hasDescription = !!sectionDescription;\n\n        <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n          @if (teiSection?.name) {\n            @if (isSectionsCollapsible) {\n              @let isOpen = isSectionOpen(teiSection, $index);\n\n              <button\n                type=\"button\"\n                class=\"form__section-toggle\"\n                (click)=\"openSection(teiSection, $index)\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-controls]=\"sectionDomId\"\n                [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n              >\n                <span class=\"form__section-title\">{{ teiSection.name }}</span>\n                <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n              </button>\n            } @else {\n              <div class=\"form__field-group-name\">{{ teiSection.name }}</div>\n              @if (hasDescription) {\n                <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                  {{ sectionDescription }}\n                </p>\n              }\n            }\n          }\n\n          @let isOpen = !isSectionsCollapsible || isSectionOpen(teiSection, $index);\n          @if (isOpen) {\n            @if (isSectionsCollapsible && hasDescription) {\n              <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                {{ sectionDescription }}\n              </p>\n            }\n\n            <div class=\"form__section-content\" [id]=\"sectionDomId\">\n              @if (teiSection?.formFields?.length) {\n                @for (visibleField of getVisibleSectionFields(teiSection); track visibleField?.id ?? $index) {\n                  <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n                    <ng-dhis2-ui-form-field\n                      [field]=\"visibleField\"\n                      [fieldConfig]=\"uiConfig.fieldConfig\"\n                      [form]=\"formGroupValue\"\n                      [fieldClass]=\"fieldClass()\"\n                      [dataEntities]=\"dataEntitiesValue\"\n                      [dataId]=\"dataEntityId\"\n                      [customOrgUnitRoots]=\"orgUnitRootIds\"\n                      [optionCascadeConfigMap]=\"cascadeConfigMap\"\n                      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n                      [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n                      [programRuleActions]=\"ruleActionList\"\n                      [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n                      (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n                      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                    />\n                  </div>\n                } @empty {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              } @else {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            </div>\n          }\n        </section>\n        }\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.OnPush }); }
@@ -13634,6 +13775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 class FlatFormComponent extends BaseFormWrapperComponent {
     constructor() {
         super(...arguments);
+        this.destroyRef = inject(DestroyRef);
         this.collapsibleSections = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "collapsibleSections" }] : /* istanbul ignore next */ []));
         this.programEntryFormConfig = input.required(/* @ts-ignore */
@@ -13643,8 +13785,50 @@ class FlatFormComponent extends BaseFormWrapperComponent {
     }
     ngOnInit() {
         this.formGroup = FormUtil.getFormGroup(this.fields(), this.dataValues());
+        // Build the interactive validation scope before the first validity event.
+        // A TRACKER with sections renders only fields belonging to those sections,
+        // while FormUtil creates controls for the complete metadata field list.
+        this.excludeUnrenderedTrackerControls();
+        // Form controls can change validity without going through a fieldUpdate
+        // callback (e.g. conditional validators, program rules, or async changes).
+        // Keep the form validity output in sync with the actual FormGroup status.
+        this.formGroup.statusChanges
+            .pipe(startWith(this.formGroup.status), map((status) => status === 'VALID'), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe((isValid) => this.updateFormValidity(isValid));
         this.onFormUpdate(this.dataValues());
     }
+    /**
+     * Exclude only controls that cannot be edited in this form: metadata-hidden,
+     * HIDEFIELD, hidden auto-assigned, or absent from TRACKER sections.
+     * Controls keep their raw values for the existing SDK save flow.
+     */
+    excludeUnrenderedTrackerControls() {
+        const config = this.programEntryFormConfig();
+        const sections = this.programEntryFormMetaData()?.sections;
+        const actions = this.ruleActions() ?? [];
+        let changed = false;
+        for (const field of this.fields() ?? []) {
+            if (!field)
+                continue;
+            const scope = FormValidationScopeUtil.resolve(field, config, sections, actions);
+            const control = this.formGroup.get(field.key || field.id);
+            if (scope.excluded && control?.enabled) {
+                control.disable({ emitEvent: false });
+                changed = true;
+            }
+            // A referenceKey is a separate generated control and must share its
+            // source field's visibility; it must not remain an invisible requirement.
+            if (scope.excluded && field.referenceKey) {
+                const reference = this.formGroup.get(field.referenceKey);
+                if (reference?.enabled) {
+                    reference.disable({ emitEvent: false });
+                    changed = true;
+                }
+            }
+        }
+        if (changed)
+            this.formGroup.updateValueAndValidity({ emitEvent: false });
+    }
     onFormUpdate(dataValues) {
         // Controls can be omitted from a FLAT form when their fields are hidden.
         // Keep their initial values while letting rendered controls override them,
@@ -15355,6 +15539,201 @@ class ProgramEntryFormMetaData {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+function idOf(value) {
+    if (typeof value === 'string')
+        return value;
+    if (value && typeof value === 'object' && 'id' in value) {
+        const id = value.id;
+        if (typeof id === 'string')
+            return id;
+    }
+    return undefined;
+}
+function isEventContextField(field, config) {
+    const name = field.id || field.key;
+    const names = [name, field.key];
+    if (names.some((n) => n === 'occurredAt' || n === 'eventDate')) {
+        return config.hideEventDate !== true;
+    }
+    if (field.isOrgUnit || names.includes('orgUnit')) {
+        return config.hideRegistrationUnit !== true;
+    }
+    return false;
+}
+function fieldIds(field) {
+    return [field.id, idOf(field.dataElement), field.dataElementId]
+        .filter((id) => typeof id === 'string' && id.length > 0);
+}
+function isTrackedEntityAttribute(field) {
+    // Form metadata may use typed flags, or SDK-style attribute references.
+    return field.isAttribute === true ||
+        !!idOf(field.trackedEntityAttribute) ||
+        !!idOf(field.attribute);
+}
+function belongsTo(field, stage) {
+    return (idOf(field.programStage) ?? field.stageId ?? field.programStageId) === stage;
+}
+function matchingSectionFields(sections, stage) {
+    return sections.filter((section) => {
+        const owner = idOf(section.programStage) ?? section.stageId ?? section.programStageId;
+        return !owner || owner === stage;
+    });
+}
+class ProgramEntryFormScopeUtil {
+    static resolve(metadata, config) {
+        // Preserve the existing TRACKER-with-stage implementation. It can have
+        // separate registration/stage workflows and must not be silently changed.
+        if (config.formType !== 'EVENT' && config.formType !== 'TRACKER') {
+            return { metadata, error: null };
+        }
+        if (config.formType === 'TRACKER') {
+            if (config.programStage) {
+                return { metadata, error: null };
+            }
+            // Registration without a stage has attributes and its existing special
+            // registration fields; data elements are never required in this mode.
+            const fields = metadata.formFields.filter((field) => field.isDataElement !== true &&
+                !['occurredAt', 'eventDate'].includes(field.id) &&
+                !['occurredAt', 'eventDate'].includes(field.key ?? ''));
+            const allowed = new Set(fields.map((field) => field.id));
+            const sections = metadata.sections?.map((section) => ({
+                ...section,
+                formFields: (section.formFields ?? []).filter((field) => allowed.has(field.id)),
+            })).filter((section) => section.formFields.length > 0);
+            return {
+                metadata: { ...metadata, formFields: fields, sections },
+                error: null,
+            };
+        }
+        const stageId = config.programStage?.trim();
+        if (!stageId) {
+            return { metadata: null, error: 'EVENT form requires config.programStage.' };
+        }
+        const stageCandidates = [
+            ...(Array.isArray(metadata.program?.programStages) ? metadata.program.programStages : []),
+            ...(Array.isArray(metadata.programStages) ? metadata.programStages : []),
+        ];
+        if (metadata.programStage && typeof metadata.programStage !== 'string') {
+            stageCandidates.push(metadata.programStage);
+        }
+        const stage = stageCandidates.find((item) => item.id === stageId);
+        if (stageCandidates.length > 0 && !stage) {
+            return {
+                metadata: null,
+                error: `Program stage ${stageId} is not part of the supplied program metadata.`,
+            };
+        }
+        const stageElementIds = new Set((stage?.programStageDataElements ?? [])
+            .map((item) => idOf(item.dataElement) ?? item.dataElementId)
+            .filter((id) => !!id));
+        // Sections supplied by the selected ProgramStage take precedence. The
+        // top-level programStageSections is used when metadata is already scoped
+        // to a stage, as is customary in entry-form metadata builders.
+        const stageSectionsWithFields = stage?.programStageSections?.some((section) => (section.formFields ?? []).length > 0);
+        const sectionSource = stageSectionsWithFields
+            ? stage.programStageSections
+            : metadata.programStageSections?.length
+                ? metadata.programStageSections
+                : stage?.programStageSections ?? [];
+        const candidateSections = matchingSectionFields(sectionSource, stageId);
+        const sectionFieldIds = new Set(candidateSections.flatMap((section) => (section.formFields ?? []).flatMap((field) => fieldIds(field))));
+        // Stage sections sometimes contain complete field definitions even when
+        // ProgramEntryFormMetaData.formFields contains registration attributes only.
+        // Prefer the richer top-level definition where both are available.
+        const candidates = [...metadata.formFields];
+        const knownFieldIds = new Set(candidates.flatMap((field) => fieldIds(field)));
+        for (const section of candidateSections) {
+            for (const sectionField of section.formFields ?? []) {
+                if (fieldIds(sectionField).some((id) => knownFieldIds.has(id)))
+                    continue;
+                candidates.push(sectionField);
+                fieldIds(sectionField).forEach((id) => knownFieldIds.add(id));
+            }
+        }
+        // The metadata builder may not attach isDataElement=true. A stage's
+        // programStageDataElements, its stage sections, or an explicit stage ID
+        // is authoritative evidence of EVENT field membership. Do not allow
+        // tracked-entity attributes through even when IDs overlap unexpectedly.
+        const hasStageMembership = stageElementIds.size > 0 ||
+            candidateSections.length > 0 ||
+            candidates.some((field) => belongsTo(field, stageId));
+        if (!hasStageMembership) {
+            return {
+                metadata: null,
+                error: `No form metadata could be resolved for program stage ${stageId}.`,
+            };
+        }
+        const fields = candidates.filter((field) => {
+            if (isEventContextField(field, config))
+                return true;
+            if (isTrackedEntityAttribute(field))
+                return false;
+            const fieldStage = idOf(field.programStage) ?? field.stageId ?? field.programStageId;
+            if (fieldStage && fieldStage !== stageId)
+                return false;
+            const refs = fieldIds(field);
+            // An explicit stage DE list is the strongest source of truth.
+            if (stageElementIds.size > 0) {
+                return refs.some((id) => stageElementIds.has(id));
+            }
+            // Use selected-stage sections or explicit field ownership. Do not
+            // require the optional isDataElement boolean from the metadata builder.
+            return fieldStage === stageId || refs.some((id) => sectionFieldIds.has(id));
+        });
+        const allowed = new Set(fields.flatMap((field) => fieldIds(field)));
+        const resolvedFieldById = new Map();
+        for (const field of fields) {
+            fieldIds(field).forEach((id) => resolvedFieldById.set(id, field));
+        }
+        const sections = candidateSections.map((section) => ({
+            ...section,
+            formFields: (section.formFields ?? [])
+                .filter((field) => fieldIds(field).some((id) => allowed.has(id)))
+                .map((field) => fieldIds(field)
+                .map((id) => resolvedFieldById.get(id))
+                .find((resolved) => !!resolved) ?? field),
+        })).filter((section) => section.formFields.length > 0);
+        // Fail closed only when there really are no stage fields. Do not reject
+        // verified stage fields just because isDataElement was not supplied.
+        const hasStageFields = fields.some((field) => !isEventContextField(field, config));
+        const stageExplicitlyEmpty = !!stage &&
+            Array.isArray(stage.programStageDataElements) &&
+            stage.programStageDataElements.length === 0 &&
+            sectionFieldIds.size === 0;
+        if (!stageExplicitlyEmpty && !hasStageFields) {
+            return {
+                metadata: null,
+                error: `Stage ${stageId} has no resolvable data-element field definitions. Check ProgramEntryFormMetaData stage sections and field IDs.`,
+            };
+        }
+        // In section-based EVENT forms, ensure selected-stage fields not assigned
+        // to a named section still render and are not invisible required controls.
+        // This also keeps occurredAt editable when hideEventDate is false.
+        if (sections.length > 0) {
+            const sectioned = new Set(sections.flatMap((section) => (section.formFields ?? []).map((field) => field.id)));
+            const extraFields = fields.filter((field) => !sectioned.has(field.id));
+            if (extraFields.length > 0) {
+                sections.push({
+                    id: `__event_additional_${stageId}`,
+                    name: 'Additional event fields',
+                    formFields: extraFields,
+                });
+            }
+        }
+        // Keep stage sections only; never pass registration sections to the EVENT
+        // renderer. The renderer's fallback displays 'fields' when none exist.
+        return {
+            metadata: {
+                ...metadata,
+                formFields: fields,
+                sections: [],
+                programStageSections: sections,
+            },
+            error: null,
+        };
+    }
+}
+
 class ProgramEntryFormModule {
     constructor() {
         this.config = input.required(/* @ts-ignore */
@@ -15381,8 +15760,21 @@ class ProgramEntryFormModule {
         ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.metaData = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "metaData" }] : /* istanbul ignore next */ []));
-        this.isFormValid = signal(true, /* @ts-ignore */
+        // Select exactly the configured EVENT program stage (or TRACKER registration)
+        // before the FLAT form builds its FormGroup. Keep raw metadata for the SDK.
+        this.activeFormScope = computed(() => {
+            const metadata = this.metaData();
+            if (!metadata)
+                return null;
+            return ProgramEntryFormScopeUtil.resolve(metadata, this.config());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeFormScope" }] : /* istanbul ignore next */ []));
+        // Do not enable submit before the child form has reported its validity.
+        this.isFormValid = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
+        // Keep submission state in Angular so React component remounts cannot reset it.
+        this.isSubmitting = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSubmitting" }] : /* istanbul ignore next */ []));
         this.isFormValid$ = toObservable(this.isFormValid);
         this.instance = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "instance" }] : /* istanbul ignore next */ []));
@@ -15438,35 +15830,51 @@ class ProgramEntryFormModule {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dataEntities" }] : /* istanbul ignore next */ []));
         this.FormActionButtons = computed(() => {
-            if (this.config().hideActionButtons) {
+            const config = this.config();
+            if (config.hideActionButtons) {
                 return React__default.createElement(React__default.Fragment, null);
             }
             return () => {
-                const [isValid, setIsValid] = useState();
-                const [submitting, setSubmitting] = useState(false);
-                useEffect(() => {
-                    const isValidSubscription = this.isFormValid$.subscribe((isValid) => {
-                        setIsValid(isValid);
+                // ReactWrapper may mount the supplied function only once. Angular's
+                // computed() changing its return value does not guarantee that the
+                // already-mounted React component will be rendered again.
+                const [isValid, setIsValid] = React__default.useState(() => this.isFormValid());
+                const [submitting, setSubmitting] = React__default.useState(() => this.isSubmitting());
+                React__default.useEffect(() => {
+                    // Subscribe to the same event that Angular consumers receive.
+                    // It is emitted synchronously by onValidityUpdate(), so the mounted
+                    // React button can respond without a ReactWrapper input refresh.
+                    const subscription = this.formValidityUpdate.subscribe((valid) => {
+                        setIsValid(valid);
                     });
-                    return () => {
-                        isValidSubscription.unsubscribe();
-                    };
+                    // Catch an update that arrived before React mounted its effect.
+                    setIsValid(this.isFormValid());
+                    return () => subscription.unsubscribe();
                 }, []);
                 const onSave = () => {
+                    // Do not trust a possibly stale React callback for validation.
+                    if (!this.isFormValid() || this.isSubmitting())
+                        return;
                     setSubmitting(true);
                     this.ngZone.run(async () => {
-                        const saveResponse = await this.#saveInstance();
-                        this.instanceSaveCompleted.emit(saveResponse);
-                        setSubmitting(false);
+                        this.isSubmitting.set(true);
+                        try {
+                            const saveResponse = await this.#saveInstance();
+                            this.instanceSaveCompleted.emit(saveResponse);
+                        }
+                        finally {
+                            this.isSubmitting.set(false);
+                            setSubmitting(false);
+                        }
                     });
                 };
                 return (React__default.createElement(ButtonStrip$1, null,
-                    !(this.config().hideSubmitButton || this.config().disableForm) && (React__default.createElement(Button$1, { primary: true, disabled: !isValid, loading: submitting, onClick: onSave }, this.config().submitButtonLabel)),
-                    !this.config().hideCancelButton && (React__default.createElement(Button$1, { onClick: () => {
+                    !(config.hideSubmitButton || config.disableForm) && (React__default.createElement(Button$1, { primary: true, disabled: !isValid || submitting, loading: submitting, onClick: onSave }, config.submitButtonLabel)),
+                    !config.hideCancelButton && (React__default.createElement(Button$1, { onClick: () => {
                             this.ngZone.run(() => {
                                 this.onCancel();
                             });
-                        } }, this.config().cancelButtonLabel))));
+                        } }, config.cancelButtonLabel))));
             };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "FormActionButtons" }] : /* istanbul ignore next */ []));
@@ -15765,11 +16173,11 @@ class ProgramEntryFormModule {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ProgramEntryFormModule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ProgramEntryFormModule, isStandalone: true, selector: "ng-dhis2-ui-program-entry-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: false, transformFunction: null }, orgUnit: { classPropertyName: "orgUnit", publicName: "orgUnit", isSignal: true, isRequired: false, transformFunction: null }, codeGeneratorOrgUnit: { classPropertyName: "codeGeneratorOrgUnit", publicName: "codeGeneratorOrgUnit", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null }, preprocess: { classPropertyName: "preprocess", publicName: "preprocess", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { instanceSave: "instanceSave", instanceSaveCompleted: "instanceSaveCompleted", instanceUpdate: "instanceUpdate", formValidityUpdate: "formValidityUpdate", formCancel: "formCancel" }, ngImport: i0, template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n  <ng-dhis2-ui-flat-form\n    [programEntryFormConfig]=\"config()\"\n    [optionCascadeConfigs]=\"config().optionCascadeConfigs || []\"\n    [collapsibleSections]=\"collapsibleSections()\"\n    [programEntryFormMetaData]=\"metaData()!\"\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"dataEntities()\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [coordinatePickerGeoConfig]=\"config().coordinatePickerGeoConfig\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n\n  <!-- <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [program]=\"config().program\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  /> -->\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: D2FormModule }, { kind: "component", type: FlatFormComponent, selector: "ng-dhis2-ui-flat-form", inputs: ["collapsibleSections", "programEntryFormConfig", "optionCascadeConfigs"] }, { kind: "directive", type: ReactWrapperModule, selector: "ng-dhis2-ui-wrapper", inputs: ["props", "component"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ProgramEntryFormModule, isStandalone: true, selector: "ng-dhis2-ui-program-entry-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: false, transformFunction: null }, orgUnit: { classPropertyName: "orgUnit", publicName: "orgUnit", isSignal: true, isRequired: false, transformFunction: null }, codeGeneratorOrgUnit: { classPropertyName: "codeGeneratorOrgUnit", publicName: "codeGeneratorOrgUnit", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null }, preprocess: { classPropertyName: "preprocess", publicName: "preprocess", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { instanceSave: "instanceSave", instanceSaveCompleted: "instanceSaveCompleted", instanceUpdate: "instanceUpdate", formValidityUpdate: "formValidityUpdate", formCancel: "formCancel" }, ngImport: i0, template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if (activeFormScope()?.error) {\n<div role=\"alert\" class=\"program-entry__form-error\">\n  {{ activeFormScope()?.error }}\n</div>\n} @else if (activeFormScope()?.metadata) {\n@let activeMetaData = activeFormScope()!.metadata!;\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n  <ng-dhis2-ui-flat-form\n    [programEntryFormConfig]=\"config()\"\n    [optionCascadeConfigs]=\"config().optionCascadeConfigs || []\"\n    [collapsibleSections]=\"collapsibleSections()\"\n    [programEntryFormMetaData]=\"activeMetaData\"\n    [name]=\"activeMetaData.name\"\n    [dataValues]=\"dataEntities()\"\n    [dataId]=\"dataId()\"\n    [rules]=\"activeMetaData.rules\"\n    [fields]=\"activeMetaData.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [coordinatePickerGeoConfig]=\"config().coordinatePickerGeoConfig\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n\n  <!-- <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [program]=\"config().program\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  /> -->\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: D2FormModule }, { kind: "component", type: FlatFormComponent, selector: "ng-dhis2-ui-flat-form", inputs: ["collapsibleSections", "programEntryFormConfig", "optionCascadeConfigs"] }, { kind: "directive", type: ReactWrapperModule, selector: "ng-dhis2-ui-wrapper", inputs: ["props", "component"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ProgramEntryFormModule, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-program-entry-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [D2FormModule, ReactWrapperModule], template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n  <ng-dhis2-ui-flat-form\n    [programEntryFormConfig]=\"config()\"\n    [optionCascadeConfigs]=\"config().optionCascadeConfigs || []\"\n    [collapsibleSections]=\"collapsibleSections()\"\n    [programEntryFormMetaData]=\"metaData()!\"\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"dataEntities()\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [coordinatePickerGeoConfig]=\"config().coordinatePickerGeoConfig\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n\n  <!-- <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [program]=\"config().program\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  /> -->\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"] }]
+            args: [{ selector: 'ng-dhis2-ui-program-entry-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [D2FormModule, ReactWrapperModule], template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n  <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if (activeFormScope()?.error) {\n<div role=\"alert\" class=\"program-entry__form-error\">\n  {{ activeFormScope()?.error }}\n</div>\n} @else if (activeFormScope()?.metadata) {\n@let activeMetaData = activeFormScope()!.metadata!;\n\n<div>\n  <!-- Form content -->\n  @switch (config().displayType) {\n\n  <!-- Flat display -->\n  @case ('FLAT') {\n  <ng-dhis2-ui-flat-form\n    [programEntryFormConfig]=\"config()\"\n    [optionCascadeConfigs]=\"config().optionCascadeConfigs || []\"\n    [collapsibleSections]=\"collapsibleSections()\"\n    [programEntryFormMetaData]=\"activeMetaData\"\n    [name]=\"activeMetaData.name\"\n    [dataValues]=\"dataEntities()\"\n    [dataId]=\"dataId()\"\n    [rules]=\"activeMetaData.rules\"\n    [fields]=\"activeMetaData.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [coordinatePickerGeoConfig]=\"config().coordinatePickerGeoConfig\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  />\n\n  <!-- <ng-dhis2-ui-flat-form\n    [name]=\"metaData()!.name\"\n    [dataValues]=\"instance() || {}\"\n    [dataId]=\"dataId()\"\n    [rules]=\"metaData()!.rules\"\n    [fields]=\"metaData()!.formFields\"\n    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n    [program]=\"config().program\"\n    (formUpdate)=\"onFormUpdate($event)\"\n    (formValidityUpdate)=\"onValidityUpdate($event)\"\n  /> -->\n  }\n\n  <!-- SECTION display -->\n  @case ('SECTION') { Section form }\n\n  <!-- CUSTOM FORM -->\n  @case ('CUSTOM') { } }\n\n  <!-- Action buttons -->\n\n  @if(!config().hideActionButtons) {\n  <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n  }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"] }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], trackedEntity: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackedEntity", required: false }] }], event: [{ type: i0.Input, args: [{ isSignal: true, alias: "event", required: false }] }], enrollment: [{ type: i0.Input, args: [{ isSignal: true, alias: "enrollment", required: false }] }], orgUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "orgUnit", required: false }] }], codeGeneratorOrgUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeGeneratorOrgUnit", required: false }] }], customOrgUnitRoots: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOrgUnitRoots", required: false }] }], formMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMetaData", required: false }] }], collapsibleSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsibleSections", required: false }] }], preprocess: [{ type: i0.Input, args: [{ isSignal: true, alias: "preprocess", required: false }] }], instanceSave: [{
                 type: Output
             }], instanceSaveCompleted: [{