@iapps/ng-dhis2-ui 1.4.2 → 1.4.5

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

@@ -12326,7 +12326,7 @@ class FormUtil {
                     });
                 if (field.referenceKey) {
                     const value = dataEntities
-                        ? dataEntities[field.referenceKey] || ''
+                        ? dataEntities[field.referenceKey] ?? ''
                         : '';
                     group[field.referenceKey] = field.required
                         ? new UntypedFormControl({ value, disabled: field.disabled }, {
@@ -12354,7 +12354,7 @@ class FormUtil {
     }
     static getFieldValue(field, dataEntities) {
         const fieldValue = dataEntities
-            ? dataEntities[field.id] || dataEntities[field.key] || ''
+            ? dataEntities[field.id] ?? dataEntities[field.key] ?? ''
             : '';
         return isArray(fieldValue) ? JSON.stringify(fieldValue) : fieldValue;
     }
@@ -13334,11 +13334,11 @@ class FormComponent {
         return this.hiddenFieldIds().has(elementItem.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { programEntryFormConfig: { classPropertyName: "programEntryFormConfig", publicName: "programEntryFormConfig", isSignal: true, isRequired: false, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: true, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: true, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormMetaData: { classPropertyName: "programEntryFormMetaData", publicName: "programEntryFormMetaData", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, optionCascadeConfigs: { classPropertyName: "optionCascadeConfigs", publicName: "optionCascadeConfigs", isSignal: true, isRequired: false, transformFunction: null }, coordinatePickerGeoConfig: { classPropertyName: "coordinatePickerGeoConfig", publicName: "coordinatePickerGeoConfig", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n<!-- \n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n                \n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [optionCascadeConfigs]=\"optionCascadeConfigs()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n} -->\n\n@let entryFormConfig = programEntryFormConfig();\n@let entryFormMeta = programEntryFormMetaData();\n@let uiConfig = configuration();\n@let formGroupValue = form();\n\n@let isSectionsCollapsible = collapsibleSections();\n\n@let dataEntitiesValue = dataEntities();\n@let dataEntityId = dataId();\n@let orgUnitRootIds = customOrgUnitRoots();\n\n@let cascadeConfigMap = optionCascadeConfigMap();\n@let cascadeConfigs = optionCascadeConfigs();\n\n@let ruleActionList = programRuleActions();\n@let renderAsCheckboxButtons = shouldRenderAsCheckBoxesButton();\n\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n@let entryFormFieldControlKeyById = fieldControlKeyById();\n\n@if (entryFormConfig?.formType === 'EVENT') {\n  <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n    </div>\n\n    @if (entryFormMeta?.programStageSections?.length) {\n      @for (stageSection of entryFormMeta.programStageSections; track stageSection?.id ?? $index) {\n        @if (isSectionVisible(stageSection, 'PROGRAM_STAGE_SECTION')) {\n        @let sectionKey = stageSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(stageSection?.description);\n        @let hasDescription = !!sectionDescription;\n\n        <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n          @if (stageSection?.name) {\n            @if (isSectionsCollapsible) {\n              @let isOpen = isSectionOpen(stageSection, $index);\n\n              <button\n                type=\"button\"\n                class=\"form__section-toggle\"\n                (click)=\"openSection(stageSection, $index)\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-controls]=\"sectionDomId\"\n                [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n              >\n                <span class=\"form__section-title\">{{ stageSection.name }}</span>\n                <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n              </button>\n            } @else {\n              <div class=\"form__field-group-name\">{{ stageSection.name }}</div>\n              @if (hasDescription) {\n                <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                  {{ sectionDescription }}\n                </p>\n              }\n            }\n          }\n\n          @let isOpen = !isSectionsCollapsible || isSectionOpen(stageSection, $index);\n          @if (isOpen) {\n            @if (isSectionsCollapsible && hasDescription) {\n              <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                {{ sectionDescription }}\n              </p>\n            }\n\n            <div class=\"form__section-content\" [id]=\"sectionDomId\">\n              @if (stageSection?.formFields?.length) {\n                @for (visibleField of getVisibleSectionFields(stageSection); track visibleField?.id ?? $index) {\n                  <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n                    <ng-dhis2-ui-form-field\n                      [field]=\"visibleField\"\n                      [fieldConfig]=\"uiConfig.fieldConfig\"\n                      [form]=\"formGroupValue\"\n                      [fieldClass]=\"fieldClass()\"\n                      [dataEntities]=\"dataEntitiesValue\"\n                      [dataId]=\"dataEntityId\"\n                      [customOrgUnitRoots]=\"orgUnitRootIds\"\n                      [optionCascadeConfigMap]=\"cascadeConfigMap\"\n                      [optionCascadeConfigs]=\"cascadeConfigs\"\n                      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n                      [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n                      [programRuleActions]=\"ruleActionList\"\n                      [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n                      (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n                      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                    />\n                  </div>\n                } @empty {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              } @else {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            </div>\n          }\n        </section>\n        }\n      } @empty {\n        @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n          <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"fallbackField\"\n              [fieldConfig]=\"uiConfig.fieldConfig\"\n              [form]=\"formGroupValue\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntitiesValue\"\n              [dataId]=\"dataEntityId\"\n              [customOrgUnitRoots]=\"orgUnitRootIds\"\n              [optionCascadeConfigMap]=\"cascadeConfigMap\"\n              [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n              [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n              [programRuleActions]=\"ruleActionList\"\n              [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n              (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n\n} @else if (entryFormConfig?.formType === 'TRACKER') {\n\n  <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n    </div>\n\n    @if (entryFormMeta?.sections?.length) {\n      @for (teiSection of entryFormMeta.sections; track teiSection?.id ?? $index) {\n        @if (isSectionVisible(teiSection, 'PROGRAM_SECTION')) {\n        @let sectionKey = teiSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(teiSection?.description);\n        @let hasDescription = !!sectionDescription;\n\n        <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n          @if (teiSection?.name) {\n            @if (isSectionsCollapsible) {\n              @let isOpen = isSectionOpen(teiSection, $index);\n\n              <button\n                type=\"button\"\n                class=\"form__section-toggle\"\n                (click)=\"openSection(teiSection, $index)\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-controls]=\"sectionDomId\"\n                [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n              >\n                <span class=\"form__section-title\">{{ teiSection.name }}</span>\n                <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n              </button>\n            } @else {\n              <div class=\"form__field-group-name\">{{ teiSection.name }}</div>\n              @if (hasDescription) {\n                <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                  {{ sectionDescription }}\n                </p>\n              }\n            }\n          }\n\n          @let isOpen = !isSectionsCollapsible || isSectionOpen(teiSection, $index);\n          @if (isOpen) {\n            @if (isSectionsCollapsible && hasDescription) {\n              <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                {{ sectionDescription }}\n              </p>\n            }\n\n            <div class=\"form__section-content\" [id]=\"sectionDomId\">\n              @if (teiSection?.formFields?.length) {\n                @for (visibleField of getVisibleSectionFields(teiSection); track visibleField?.id ?? $index) {\n                  <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n                    <ng-dhis2-ui-form-field\n                      [field]=\"visibleField\"\n                      [fieldConfig]=\"uiConfig.fieldConfig\"\n                      [form]=\"formGroupValue\"\n                      [fieldClass]=\"fieldClass()\"\n                      [dataEntities]=\"dataEntitiesValue\"\n                      [dataId]=\"dataEntityId\"\n                      [customOrgUnitRoots]=\"orgUnitRootIds\"\n                      [optionCascadeConfigMap]=\"cascadeConfigMap\"\n                      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n                      [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n                      [programRuleActions]=\"ruleActionList\"\n                      [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n                      (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n                      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                    />\n                  </div>\n                } @empty {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              } @else {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            </div>\n          }\n        </section>\n        }\n      } @empty {\n        @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n          <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"fallbackField\"\n              [fieldConfig]=\"uiConfig.fieldConfig\"\n              [form]=\"formGroupValue\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntitiesValue\"\n              [dataId]=\"dataEntityId\"\n              [customOrgUnitRoots]=\"orgUnitRootIds\"\n              [optionCascadeConfigMap]=\"cascadeConfigMap\"\n              [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n              [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n              [programRuleActions]=\"ruleActionList\"\n              [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n              (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n\n} @else {\n\n  <form [formGroup]=\"formGroupValue\" [class]=\"uiConfig.directionClassName\">\n    @if (uiConfig?.formName) {\n      <div class=\"form-name\">\n        <h2>{{ uiConfig.formName }}</h2>\n      </div>\n    }\n\n    @if (sanitizedFields?.length) {\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      }\n    } @else {\n      <div class=\"text-sm text-gray-500\">No fields to display.</div>\n    }\n  </form>\n\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate", "dataId", "customOrgUnitRoots", "program", "optionCascadeConfigs", "optionCascadeConfigMap", "coordinatePickerGeoConfig", "fieldControlKeyById"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n<!-- \n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n                \n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [optionCascadeConfigs]=\"optionCascadeConfigs()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n} -->\n\n@let entryFormConfig = programEntryFormConfig();\n@let entryFormMeta = programEntryFormMetaData();\n@let uiConfig = configuration();\n@let formGroupValue = form();\n\n@let isSectionsCollapsible = collapsibleSections();\n\n@let dataEntitiesValue = dataEntities();\n@let dataEntityId = dataId();\n@let orgUnitRootIds = customOrgUnitRoots();\n\n@let cascadeConfigMap = optionCascadeConfigMap();\n@let cascadeConfigs = optionCascadeConfigs();\n\n@let ruleActionList = programRuleActions();\n@let renderAsCheckboxButtons = shouldRenderAsCheckBoxesButton();\n\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n@let entryFormFieldControlKeyById = fieldControlKeyById();\n\n@if (entryFormConfig?.formType === 'EVENT') {\n  <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n    </div>\n\n    @if (entryFormMeta?.programStageSections?.length) {\n      @for (stageSection of entryFormMeta.programStageSections; track stageSection?.id ?? $index) {\n        @if (isSectionVisible(stageSection, 'PROGRAM_STAGE_SECTION')) {\n        @let sectionKey = stageSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(stageSection?.description);\n        @let hasDescription = !!sectionDescription;\n\n        <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n          @if (stageSection?.name) {\n            @if (isSectionsCollapsible) {\n              @let isOpen = isSectionOpen(stageSection, $index);\n\n              <button\n                type=\"button\"\n                class=\"form__section-toggle\"\n                (click)=\"openSection(stageSection, $index)\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-controls]=\"sectionDomId\"\n                [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n              >\n                <span class=\"form__section-title\">{{ stageSection.name }}</span>\n                <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n              </button>\n            } @else {\n              <div class=\"form__field-group-name\">{{ stageSection.name }}</div>\n              @if (hasDescription) {\n                <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                  {{ sectionDescription }}\n                </p>\n              }\n            }\n          }\n\n          @let isOpen = !isSectionsCollapsible || isSectionOpen(stageSection, $index);\n          @if (isOpen) {\n            @if (isSectionsCollapsible && hasDescription) {\n              <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                {{ sectionDescription }}\n              </p>\n            }\n\n            <div class=\"form__section-content\" [id]=\"sectionDomId\">\n              @if (stageSection?.formFields?.length) {\n                @for (visibleField of getVisibleSectionFields(stageSection); track visibleField?.id ?? $index) {\n                  <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n                    <ng-dhis2-ui-form-field\n                      [field]=\"visibleField\"\n                      [fieldConfig]=\"uiConfig.fieldConfig\"\n                      [form]=\"formGroupValue\"\n                      [fieldClass]=\"fieldClass()\"\n                      [dataEntities]=\"dataEntitiesValue\"\n                      [dataId]=\"dataEntityId\"\n                      [customOrgUnitRoots]=\"orgUnitRootIds\"\n                      [optionCascadeConfigMap]=\"cascadeConfigMap\"\n                      [optionCascadeConfigs]=\"cascadeConfigs\"\n                      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n                      [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n                      [programRuleActions]=\"ruleActionList\"\n                      [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n                      (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n                      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                    />\n                  </div>\n                } @empty {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              } @else {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            </div>\n          }\n        </section>\n        }\n      } @empty {\n        @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n          <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"fallbackField\"\n              [fieldConfig]=\"uiConfig.fieldConfig\"\n              [form]=\"formGroupValue\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntitiesValue\"\n              [dataId]=\"dataEntityId\"\n              [customOrgUnitRoots]=\"orgUnitRootIds\"\n              [optionCascadeConfigMap]=\"cascadeConfigMap\"\n              [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n              [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n              [programRuleActions]=\"ruleActionList\"\n              [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n              (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n\n} @else if (entryFormConfig?.formType === 'TRACKER') {\n\n  <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n    </div>\n\n    @if (entryFormMeta?.sections?.length) {\n      @for (teiSection of entryFormMeta.sections; track teiSection?.id ?? $index) {\n        @if (isSectionVisible(teiSection, 'PROGRAM_SECTION')) {\n        @let sectionKey = teiSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        @let sectionDescription = $safeNavigationMigration(teiSection?.description);\n        @let hasDescription = !!sectionDescription;\n\n        <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n          @if (teiSection?.name) {\n            @if (isSectionsCollapsible) {\n              @let isOpen = isSectionOpen(teiSection, $index);\n\n              <button\n                type=\"button\"\n                class=\"form__section-toggle\"\n                (click)=\"openSection(teiSection, $index)\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-controls]=\"sectionDomId\"\n                [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n              >\n                <span class=\"form__section-title\">{{ teiSection.name }}</span>\n                <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n              </button>\n            } @else {\n              <div class=\"form__field-group-name\">{{ teiSection.name }}</div>\n              @if (hasDescription) {\n                <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                  {{ sectionDescription }}\n                </p>\n              }\n            }\n          }\n\n          @let isOpen = !isSectionsCollapsible || isSectionOpen(teiSection, $index);\n          @if (isOpen) {\n            @if (isSectionsCollapsible && hasDescription) {\n              <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n                {{ sectionDescription }}\n              </p>\n            }\n\n            <div class=\"form__section-content\" [id]=\"sectionDomId\">\n              @if (teiSection?.formFields?.length) {\n                @for (visibleField of getVisibleSectionFields(teiSection); track visibleField?.id ?? $index) {\n                  <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n                    <ng-dhis2-ui-form-field\n                      [field]=\"visibleField\"\n                      [fieldConfig]=\"uiConfig.fieldConfig\"\n                      [form]=\"formGroupValue\"\n                      [fieldClass]=\"fieldClass()\"\n                      [dataEntities]=\"dataEntitiesValue\"\n                      [dataId]=\"dataEntityId\"\n                      [customOrgUnitRoots]=\"orgUnitRootIds\"\n                      [optionCascadeConfigMap]=\"cascadeConfigMap\"\n                      [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n                      [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n                      [programRuleActions]=\"ruleActionList\"\n                      [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n                      (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n                      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                    />\n                  </div>\n                } @empty {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              } @else {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            </div>\n          }\n        </section>\n        }\n      } @empty {\n        @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n          <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"fallbackField\"\n              [fieldConfig]=\"uiConfig.fieldConfig\"\n              [form]=\"formGroupValue\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntitiesValue\"\n              [dataId]=\"dataEntityId\"\n              [customOrgUnitRoots]=\"orgUnitRootIds\"\n              [optionCascadeConfigMap]=\"cascadeConfigMap\"\n              [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n              [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n              [programRuleActions]=\"ruleActionList\"\n              [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n              (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n\n} @else {\n\n  <form [formGroup]=\"formGroupValue\" [class]=\"uiConfig.directionClassName\">\n    @if (uiConfig?.formName) {\n      <div class=\"form-name\">\n        <h2>{{ uiConfig.formName }}</h2>\n      </div>\n    }\n\n    @if (sanitizedFields?.length) {\n      @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n        <div class=\"form-field-{{ uiConfig.direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"fallbackField\"\n            [fieldConfig]=\"uiConfig.fieldConfig\"\n            [form]=\"formGroupValue\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntitiesValue\"\n            [dataId]=\"dataEntityId\"\n            [customOrgUnitRoots]=\"orgUnitRootIds\"\n            [optionCascadeConfigMap]=\"cascadeConfigMap\"\n            [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n            [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n            [programRuleActions]=\"ruleActionList\"\n            [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n            (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      }\n    } @else {\n      <div class=\"text-sm text-gray-500\">No fields to display.</div>\n    }\n  </form>\n\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"] }]
+            args: [{ selector: 'ng-dhis2-ui-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n<!-- \n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n                \n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [optionCascadeConfigs]=\"optionCascadeConfigs()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n} -->\n\n@let entryFormConfig = programEntryFormConfig();\n@let entryFormMeta = programEntryFormMetaData();\n@let uiConfig = configuration();\n@let formGroupValue = form();\n\n@let isSectionsCollapsible = collapsibleSections();\n\n@let dataEntitiesValue = dataEntities();\n@let dataEntityId = dataId();\n@let orgUnitRootIds = customOrgUnitRoots();\n\n@let cascadeConfigMap = optionCascadeConfigMap();\n@let cascadeConfigs = optionCascadeConfigs();\n\n@let ruleActionList = programRuleActions();\n@let renderAsCheckboxButtons = shouldRenderAsCheckBoxesButton();\n\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n@let entryFormFieldControlKeyById = fieldControlKeyById();\n\n@if (entryFormConfig?.formType === 'EVENT') {\n  <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n    </div>\n\n    @if (entryFormMeta?.programStageSections?.length) {\n      @for (stageSection of entryFormMeta.programStageSections; track stageSection?.id ?? $index) {\n        @if (isSectionVisible(stageSection, 'PROGRAM_STAGE_SECTION')) {\n        @let sectionKey = stageSection?.id ?? $index;\n        @let sectionDomId = 'section-' + sectionKey;\n        @let descriptionDomId = sectionDomId + '-desc';\n        <!-- @let sectionDescription = $safeNavigationMigration(stageSection?.description); -->\n        @let 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"] }]
         }], ctorParameters: () => [], propDecorators: { programEntryFormConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "programEntryFormConfig", required: false }] }], formConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "formConfig", required: false }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], isFormHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFormHorizontal", required: false }] }], showSaveButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSaveButton", required: false }] }], fieldsData: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsData", required: false }] }], formMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMetaData", required: false }] }], programEntryFormMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "programEntryFormMetaData", required: false }] }], fieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClass", required: false }] }], shouldRenderAsCheckBoxesButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldRenderAsCheckBoxesButton", required: false }] }], programRuleActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "programRuleActions", required: false }] }], dataEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataEntities", required: false }] }], dataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataId", required: false }] }], customOrgUnitRoots: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOrgUnitRoots", required: false }] }], optionCascadeConfigs: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionCascadeConfigs", required: false }] }], coordinatePickerGeoConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordinatePickerGeoConfig", required: false }] }], program: [{ type: i0.Input, args: [{ isSignal: true, alias: "program", required: false }] }], collapsibleSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsibleSections", required: false }] }], formUpdate: [{
                 type: Output
             }], formValidityUpdate: [{
@@ -13646,7 +13646,14 @@ class FlatFormComponent extends BaseFormWrapperComponent {
         this.onFormUpdate(this.dataValues());
     }
     onFormUpdate(dataValues) {
-        this.updateDataValues(dataValues ?? this.formGroup.getRawValue());
+        // Controls can be omitted from a FLAT form when their fields are hidden.
+        // Keep their initial values while letting rendered controls override them,
+        // including intentional clears (null or empty string).
+        const updatedValues = dataValues ?? this.formGroup.getRawValue();
+        this.updateDataValues({
+            ...this.dataValues(),
+            ...updatedValues,
+        });
         this.updateFormValidity(this.formGroup.valid);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FlatFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -15300,9 +15307,23 @@ class ProgramEntryFormMetaData {
     }
     async get() {
         try {
-            const program = await window?.d2Web?.trackerModule?.trackedEntity
-                ?.setProgram(this.config?.program)
-                ?.getMetaData();
+            // const program = await (
+            //   window as unknown as D2Window
+            // )?.d2Web?.trackerModule?.trackedEntity
+            //   ?.setProgram(this.config?.program)
+            //   ?.getMetaData();
+            const programId = this.config?.program;
+            if (!programId) {
+                console.error('ProgramEntryFormMetaData: Program ID is missing.');
+                return null;
+            }
+            const trackedEntityQuery = this.d2?.trackerModule?.trackedEntity;
+            if (!trackedEntityQuery) {
+                console.error('ProgramEntryFormMetaData: Tracker query is unavailable.');
+                return null;
+            }
+            const configuredQuery = trackedEntityQuery.setProgram(programId);
+            const program = await configuredQuery.getMetaData();
             if (program) {
                 this.program = program;
                 // TODO FIND ANOTHER WAY TO PASS IN CUSTOM FIELD CONFIGURATIONS, AVOID TIGHT COUPLING HERE
@@ -15334,7 +15355,6 @@ class ProgramEntryFormMetaData {
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-// eslint-disable-next-line @angular-eslint/component-class-suffix
 class ProgramEntryFormModule {
     constructor() {
         this.config = input.required(/* @ts-ignore */
@@ -15368,6 +15388,14 @@ class ProgramEntryFormModule {
         ...(ngDevMode ? [{ debugName: "instance" }] : /* istanbul ignore next */ []));
         this.trackedEntityInstance = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackedEntityInstance" }] : /* istanbul ignore next */ []));
+        // SDK instances are mutable class objects. A revision signal ensures that
+        // dependent computed values refresh after updateDataValues() mutates one.
+        this.instanceRevision = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "instanceRevision" }] : /* istanbul ignore next */ []));
+        // Maintain configured defaults independently of the rendered field list.
+        // hideCustomAssignedFields can remove their controls from the FormGroup.
+        this.initialAutoAssignedValues = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initialAutoAssignedValues" }] : /* istanbul ignore next */ []));
         this.preprocess = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "preprocess" }] : /* istanbul ignore next */ []));
         this.instanceSave = new EventEmitter();
@@ -15389,6 +15417,7 @@ class ProgramEntryFormModule {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dataId" }] : /* istanbul ignore next */ []));
         this.dataEntities = computed(() => {
+            this.instanceRevision();
             if (!this.instance()) {
                 return {};
             }
@@ -15400,6 +15429,9 @@ class ProgramEntryFormModule {
                 ? this.#getTrackedEntityDataValues(this.instance())
                 : this.instance();
             return {
+                // Fallback for assignments hidden from the rendered form metadata.
+                // Values held by the SDK instance take precedence when present.
+                ...this.initialAutoAssignedValues(),
                 ...attributeDataValues,
                 ...(currentInstanceDataValues || {}),
             };
@@ -15466,11 +15498,13 @@ class ProgramEntryFormModule {
                 console.error('Failed to create or load instance for program entry form');
                 return;
             }
-            this.instance.set(instance);
+            // Apply assignments BEFORE publishing the instance to the form. This
+            // prevents a child form from initializing with pre-assignment values.
             const autoAssigned = config.autoAssignedValues;
             if (autoAssigned?.length) {
-                this.#updateInstanceWithAutoAssignedValues(autoAssigned);
+                this.#updateInstanceWithAutoAssignedValues(instance, autoAssigned);
             }
+            this.instance.set(instance);
         }
         catch (error) {
             console.error('Error during ProgramEntryForm initialization', error);
@@ -15480,7 +15514,35 @@ class ProgramEntryFormModule {
         }
     }
     onFormUpdate(dataValues) {
-        this.#updateInstance(dataValues);
+        // Hidden auto-assigned fields may be absent from the FormGroup. Preserve
+        // their CURRENT values (not repeatedly their initial defaults), so later
+        // programmatic updates are not accidentally rolled back by another field.
+        const preservedAssignedValues = {};
+        if (this.config().hideCustomAssignedFields) {
+            // Read the mutable SDK instance directly: a cached computed signal may
+            // not yet reflect values modified by external SDK/preprocess code.
+            const currentInstance = this.instance();
+            const attributeValues = this.trackedEntityInstance()
+                ? this.#getTrackedEntityDataValues(this.trackedEntityInstance())
+                : {};
+            const currentInstanceValues = this.config().formType === 'TRACKER' && currentInstance
+                ? this.#getTrackedEntityDataValues(currentInstance)
+                : currentInstance ?? {};
+            const currentValues = {
+                ...attributeValues,
+                ...currentInstanceValues,
+            };
+            for (const [key, initialValue] of Object.entries(this.initialAutoAssignedValues())) {
+                // orgUnit has its own registration control and precedence rules.
+                if (key === 'orgUnit')
+                    continue;
+                preservedAssignedValues[key] = Object.prototype.hasOwnProperty.call(currentValues, key)
+                    ? currentValues[key]
+                    : initialValue;
+            }
+        }
+        // Explicit user edits and clears (including null/empty string) win.
+        this.#updateInstance({ ...preservedAssignedValues, ...dataValues });
         if (this.instance()) {
             this.instanceUpdate.emit(this.instance());
         }
@@ -15512,10 +15574,11 @@ class ProgramEntryFormModule {
         }
         return configuredKey;
     }
-    #updateInstanceWithAutoAssignedValues(autoAssignedValues) {
+    #updateInstanceWithAutoAssignedValues(instance, autoAssignedValues) {
         const trackedEntityId = this.trackedEntity?.();
         if (
-        // Event forms also receive a trackedEntity ID checking the ID alone prevented their auto-assigned fields from being populated since its passed even in creation of the events. 
+        // Existing TRACKER records must not have their stored attributes replaced.
+        // EVENT forms may legitimately have an existing tracked entity ID.
         this.config().formType === 'TRACKER' &&
             typeof trackedEntityId === 'string' &&
             trackedEntityId.trim().length > 0) {
@@ -15529,6 +15592,14 @@ class ProgramEntryFormModule {
         const aggregatedValues = {};
         for (let index = 0; index < valueCount; index++) {
             const { field: configuredKey, value } = autoAssignedValues[index];
+            if (!configuredKey)
+                continue;
+            // An explicit orgUnit input takes precedence over the optional
+            // auto-assignment fallback used for new TRACKER registration.
+            if (configuredKey === 'orgUnit' && this.orgUnit()?.trim()) {
+                aggregatedValues['orgUnit'] = this.orgUnit().trim();
+                continue;
+            }
             const semanticKey = metaData
                 ? this.#resolveFieldRuntimeId(configuredKey, metaData)
                 : configuredKey;
@@ -15540,26 +15611,30 @@ class ProgramEntryFormModule {
         if (Object.keys(aggregatedValues).length === 0) {
             return;
         }
-        this.#updateInstance(aggregatedValues);
+        this.initialAutoAssignedValues.set(aggregatedValues);
+        this.#applyDataValues(instance, aggregatedValues);
+    }
+    #applyDataValues(instance, dataValues) {
+        for (const key in dataValues) {
+            if (Object.prototype.hasOwnProperty.call(dataValues, key)) {
+                // Keep the existing SDK integration behavior for other consumers.
+                instance[key] = dataValues[key];
+            }
+        }
+        instance.updateDataValues(dataValues, this.config().updateTeiOrgUnit);
     }
     #updateInstance(dataValues) {
         if (!dataValues || Object.keys(dataValues).length === 0) {
             return;
         }
-        const shouldUpdateOrgUnit = this.config().updateTeiOrgUnit;
-        this.instance.update((instance) => {
-            if (!instance) {
-                return instance;
-            }
-            for (const key in dataValues) {
-                if (Object.prototype.hasOwnProperty.call(dataValues, key)) {
-                    instance[key] =
-                        dataValues[key];
-                }
-            }
-            instance.updateDataValues(dataValues, shouldUpdateOrgUnit);
-            return instance;
-        });
+        const instance = this.instance();
+        if (!instance) {
+            return;
+        }
+        this.#applyDataValues(instance, dataValues);
+        // The SDK model is a class, so do not spread/clone it just to change the
+        // signal reference (that would discard its prototype methods).
+        this.instanceRevision.update((revision) => revision + 1);
     }
     async #saveInstance() {
         if (this.preprocess() && this.instance()) {
@@ -15589,7 +15664,7 @@ class ProgramEntryFormModule {
         }
     }
     async #setReservedValuesForCodeGeneration(instance) {
-        const orgUnitForCodeGeneration = this.codeGeneratorOrgUnit() || this.orgUnit();
+        const orgUnitForCodeGeneration = this.codeGeneratorOrgUnit() || this.#resolveTrackerOrgUnit();
         const reservedValueQuery = this.d2.trackerModule.trackedEntity.setProgram(this.config().program);
         if (orgUnitForCodeGeneration) {
             reservedValueQuery.setOrgUnit(orgUnitForCodeGeneration);
@@ -15600,13 +15675,28 @@ class ProgramEntryFormModule {
         });
         return instance;
     }
+    #resolveTrackerOrgUnit() {
+        const explicitOrgUnit = this.orgUnit()?.trim();
+        if (explicitOrgUnit) {
+            return explicitOrgUnit;
+        }
+        // For new TRACKER records, an orgUnit auto-assignment must also be used
+        // when creating the instance/query, not only after it has been created.
+        if (this.config().formType !== 'TRACKER' || this.trackedEntity()?.trim()) {
+            return undefined;
+        }
+        const assignedOrgUnit = this.config().autoAssignedValues?.find((item) => item.field === 'orgUnit')?.value;
+        return typeof assignedOrgUnit === 'string' && assignedOrgUnit.trim()
+            ? assignedOrgUnit.trim()
+            : undefined;
+    }
     #getQuery(instanceType) {
         const d2 = window.d2Web;
         switch (instanceType) {
             case 'TRACKER':
                 return d2.trackerModule.trackedEntity
                     .setProgram(this.config().program)
-                    .setOrgUnit(this.orgUnit());
+                    .setOrgUnit(this.#resolveTrackerOrgUnit());
             case 'EVENT':
                 return d2.eventModule.event
                     .setProgram(this.config().program)