@iapps/ng-dhis2-ui 1.2.132 → 1.2.133

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

@@ -7532,11 +7532,11 @@ class FormComponent {
         return this.hiddenFieldIds().has(elementItem.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { programEntryFormConfig: { classPropertyName: "programEntryFormConfig", publicName: "programEntryFormConfig", isSignal: true, isRequired: false, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: true, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: true, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormMetaData: { classPropertyName: "programEntryFormMetaData", publicName: "programEntryFormMetaData", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n\n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div *ngFor=\"let field of sanitizedFields\" class=\"form-field-{{ configuration().direction }}\">\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form> -->\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate", "dataId", "customOrgUnitRoots", "program"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { programEntryFormConfig: { classPropertyName: "programEntryFormConfig", publicName: "programEntryFormConfig", isSignal: true, isRequired: false, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: true, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: true, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormMetaData: { classPropertyName: "programEntryFormMetaData", publicName: "programEntryFormMetaData", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n\n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <div>\n          {{ sanitizedFields | json }}\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <div>\n      0099 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit corporis animi, voluptatem sunt praesentium et voluptates perferendis magni velit architecto eius repudiandae repellat impedit accusamus beatae ipsam cupiditate possimus dignissimos.\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <div>\n      1111 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit corporis animi, voluptatem sunt praesentium et voluptates perferendis magni velit architecto eius repudiandae repellat impedit accusamus beatae ipsam cupiditate possimus dignissimos.\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div *ngFor=\"let field of sanitizedFields\" class=\"form-field-{{ configuration().direction }}\">\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form> -->\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate", "dataId", "customOrgUnitRoots", "program"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-form', standalone: false, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n\n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div *ngFor=\"let field of sanitizedFields\" class=\"form-field-{{ configuration().direction }}\">\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form> -->\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"] }]
+            args: [{ selector: 'ng-dhis2-ui-form', standalone: false, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n\n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <div>\n          {{ sanitizedFields | json }}\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <div>\n      0099 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit corporis animi, voluptatem sunt praesentium et voluptates perferendis magni velit architecto eius repudiandae repellat impedit accusamus beatae ipsam cupiditate possimus dignissimos.\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <div>\n      1111 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit corporis animi, voluptatem sunt praesentium et voluptates perferendis magni velit architecto eius repudiandae repellat impedit accusamus beatae ipsam cupiditate possimus dignissimos.\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div *ngFor=\"let field of sanitizedFields\" class=\"form-field-{{ configuration().direction }}\">\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form> -->\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formUpdate: [{
                 type: Output
             }], formValidityUpdate: [{
@@ -7570,6 +7570,7 @@ class FormField {
         this.isDataElement = options.isDataElement;
         this.isAttribute = options.isAttribute;
         this.isOrgUnit = options.isOrgUnit;
+        this.isGeometryField = options.isGeometryField;
         this.isEnrollmentDate = options.isEnrollmentDate;
         this.event = options.event;
         this.programStage = options.programStage;
@@ -8504,6 +8505,7 @@ class FormUtil {
                 isDataElement: field.isDataElement,
                 isAttribute: field.isAttribute,
                 isOrgUnit: field.isOrgUnit,
+                isGeometryField: field.isGeometryField,
                 isEnrollmentDate: field.isEnrollmentDate,
                 programStage: field.stageId,
                 event: field.event,
@@ -9332,6 +9334,17 @@ class ProgramEntryFormConfig {
     }
 }
 
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+class ProgramEntryFormSection {
+    constructor(props) {
+        this.formFields = [];
+        this.orientation = 'HORIZONTAL';
+        Object.assign(this, props);
+    }
+}
+
 // Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
@@ -9414,6 +9427,33 @@ class ProgramEntryFormFieldUtil {
             isOrgUnit: true,
         });
     }
+    #getGeometryField() {
+        const rawFeatureType = this.program?.featureType ?? '';
+        const featureType = rawFeatureType.toUpperCase();
+        const isGeometryProgram = featureType === 'POINT' ||
+            featureType === 'POLYGON' ||
+            featureType === 'MULTI_POLYGON';
+        if (!isGeometryProgram) {
+            if (this.config?.hideGeometryField) {
+                return null;
+            }
+            return null;
+        }
+        const sharedOptions = {
+            required: true,
+            disabled: this.config?.disableRegistrationUnit ?? false,
+            isGeometryField: true,
+        };
+        const label = featureType === 'POINT' ? 'Location (coordinates)' : 'Boundary (polygon)';
+        return new FormField({
+            id: 'geometry',
+            key: 'geometry',
+            label,
+            code: 'geometry',
+            controlType: 'coordinate',
+            ...sharedOptions,
+        });
+    }
     #getEnrollmentDateField() {
         if (this.config.hideEnrollmentDate || this.config.programStage) {
             return null;
@@ -9444,13 +9484,73 @@ class ProgramEntryFormFieldUtil {
             disabled: this.config.disabledIncidentDate,
         });
     }
+    #getStageIdFromConfig() {
+        const programStageId = this.config
+            ?.programStage;
+        if (!programStageId) {
+            return null;
+        }
+        const trimmed = programStageId.trim();
+        return trimmed ? trimmed : null;
+    }
+    #findStageById(stageId) {
+        return ((this.program.programStages || []).find((stage) => stage?.id === stageId) ?? null);
+    }
+    #getEventDateField() {
+        if (this.config?.hideEventDate) {
+            return null;
+        }
+        const stageId = this.#getStageIdFromConfig();
+        if (!stageId) {
+            return null;
+        }
+        const programStage = this.#findStageById(stageId);
+        if (!programStage) {
+            return null;
+        }
+        const eventDateLabel = programStage.executionDateLabel ||
+            `Reporting date - ${programStage.displayName || programStage.name || 'Event'}`;
+        const todayIso = new Date().toISOString().slice(0, 10);
+        return new FormField({
+            id: 'occurredAt',
+            key: 'occurredAt',
+            code: 'OCCURRED_AT',
+            label: eventDateLabel,
+            required: true,
+            controlType: 'date',
+            type: 'date',
+            value: todayIso,
+            disabled: this.config?.disableEventDate ?? false,
+            max: todayIso,
+            hidden: false,
+        });
+    }
     get reportFields() {
         return [
             this.#getOrgUniField(),
             this.#getEnrollmentDateField(),
             this.#getIncidentDateField(),
+            this.#getGeometryField(),
         ].filter((field) => field != null);
     }
+    get eventReportFields() {
+        const fields = [
+            this.#getOrgUniField(),
+            this.#getGeometryField(),
+            this.#getEventDateField(),
+        ];
+        return fields.filter((field) => field !== null);
+    }
+    get defaultSection() {
+        const coreFields = this.reportFields.filter((field) => !!field);
+        return new ProgramEntryFormSection({
+            id: `${this.program.id}_basic_information`,
+            name: 'Basic Information',
+            description: '',
+            formFields: coreFields,
+            orientation: 'VERTICAL',
+        });
+    }
     get fields() {
         const fields = [...this.attributes, ...this.dataElements]
             .map((field) => {
@@ -9557,25 +9657,168 @@ class ProgramStageEntryFormSection {
 //   }
 // }
 // TODO: END - DEPRECATED APPROACH
+// export class ProgramStageEntryFormSectionUtil {
+//   constructor(
+//     private program: Program,
+//     private config: ProgramEntryFormConfig
+//   ) {}
+//   get programStageEntryFormSections(): IProgramStageEntryFormSection[] {
+//     const stageId = this.#getStageIdFromConfig();
+//     if (!stageId) return [];
+//     const programStage = this.#findStageById(stageId);
+//     if (!programStage) return [];
+//     return (programStage.programStageSections || []).map(
+//       (section: ProgramStageSection) =>
+//         new ProgramStageEntryFormSection({
+//           id: section.id,
+//           name: section.displayName,
+//           description: section?.description,
+//           formFields: this.#mapSectionToFormFields(programStage, section),
+//           orientation: 'HORIZONTAL',
+//         })
+//     );
+//   }
+//   #getStageIdFromConfig(): string | null {
+//     const programStageRef: any = (this.config as any)?.programStage;
+//     if (!programStageRef) return null;
+//     if (typeof programStageRef === 'string' && programStageRef.trim()) {
+//       return programStageRef.trim();
+//     }
+//     const candidateId =
+//       programStageRef.id ??
+//       programStageRef.stageId ??
+//       programStageRef.programStageId ??
+//       programStageRef.value?.id ??
+//       null;
+//     return typeof candidateId === 'string' && candidateId.trim()
+//       ? candidateId.trim()
+//       : null;
+//   }
+//   #findStageById(stageId: string): ProgramStage | null {
+//     return (
+//       (this.program.programStages || []).find(
+//         (stage: ProgramStage) => (stage as any)?.id === stageId
+//       ) ?? null
+//     );
+//   }
+//   #mapSectionToFormFields(
+//     stage: ProgramStage,
+//     section: ProgramStageSection
+//   ): IFormField<string>[] {
+//     const stageDataElements: any[] =
+//       (stage as any).programStageDataElements || [];
+//     const sectionElementIds: string[] =
+//       (section as any).dataElements?.map((d: { id: string }) => d.id) ??
+//       (section as any).dataElementsIds ??
+//       [];
+//     const relevantStageElements = sectionElementIds.length
+//       ? stageDataElements.filter((pde) =>
+//           sectionElementIds.includes(pde?.dataElement?.id)
+//         )
+//       : stageDataElements;
+//     const mappedFields = relevantStageElements
+//       .map((pde) => this.#mapDataElementToFormField(pde, stage.id))
+//       .filter((field): field is IFormField<string> => field != null)
+//       .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+//     const extraReportFields = (this as any)?.reportFields ?? [];
+//     return [...extraReportFields, ...mappedFields];
+//   }
+//   #mapDataElementToFormField(
+//     pde: any,
+//     stageId: string
+//   ): IFormField<string> | null {
+//     const dataElement = pde?.dataElement;
+//     if (!dataElement?.id) return null;
+//     const baseField = {
+//       id: dataElement.id,
+//       code: dataElement.code,
+//       formName: dataElement.formName,
+//       name: dataElement.displayName,
+//       mandatory: !!pde.compulsory,
+//       valueType: dataElement.valueType,
+//       sortOrder: pde.sortOrder,
+//       stepId: stageId,
+//       optionSet: dataElement.optionSet,
+//     };
+//     const options = FieldDropdown.getDropdownOptions(baseField);
+//     const hasOptions = options?.length > 0;
+//     const fieldExtension = this.config.formFieldExtensions?.find(
+//       (fx: any) => fx?.id === baseField.id
+//     );
+//     const autoAssignedValue = this.#getAutoAssignedValue(baseField);
+//     if (
+//       !isUndefined(autoAssignedValue) &&
+//       this.config.hideCustomAssignedFields
+//     ) {
+//       return null;
+//     }
+//     return new FormField<string>({
+//       ...baseField,
+//       label: baseField.formName || baseField.name,
+//       key: baseField.code ? camelCase(baseField.code) : baseField.id,
+//       required: baseField.mandatory,
+//       type: FieldUtil.getFieldType(baseField.valueType),
+//       options,
+//       disabled: this.#getDisabledStatus(baseField),
+//       order: baseField.sortOrder,
+//       hasOptions,
+//       controlType: FieldUtil.getFieldControlType(
+//         baseField.valueType,
+//         hasOptions
+//       ),
+//       extension: fieldExtension,
+//     });
+//   }
+//   #getAutoAssignedValue(field: any): unknown {
+//     const impl = (this as any)?.['#getAutoAssignedValue'];
+//     return typeof impl === 'function' ? impl.call(this, field) : undefined;
+//   }
+//   #getDisabledStatus(field: any): boolean {
+//     const impl = (this as any)?.['#getDisabledStatus'];
+//     return typeof impl === 'function' ? impl.call(this, field) : false;
+//   }
+// }
 class ProgramStageEntryFormSectionUtil {
     constructor(program, config) {
         this.program = program;
         this.config = config;
+        this.fieldUtil = new ProgramEntryFormFieldUtil(program, config);
     }
     get programStageEntryFormSections() {
         const stageId = this.#getStageIdFromConfig();
-        if (!stageId)
+        if (!stageId || !this.program) {
             return [];
+        }
         const programStage = this.#findStageById(stageId);
-        if (!programStage)
+        if (!programStage) {
             return [];
-        return (programStage.programStageSections || []).map((section) => new ProgramStageEntryFormSection({
-            id: section.id,
-            name: section.displayName,
-            description: section?.description,
-            formFields: this.#mapSectionToFormFields(programStage, section),
-            orientation: 'HORIZONTAL',
-        }));
+        }
+        const sections = [];
+        const basicDetailsFields = this.fieldUtil.eventReportFields;
+        if (basicDetailsFields?.length) {
+            sections.push(new ProgramStageEntryFormSection({
+                id: `${programStage.id}_basic_information`,
+                name: 'Basic Information',
+                description: '',
+                formFields: basicDetailsFields,
+                orientation: 'VERTICAL',
+            }));
+        }
+        const stageSections = programStage.programStageSections ?? [];
+        for (const section of stageSections) {
+            const sectionFormFields = this.#mapSectionToFormFields(programStage, section);
+            if (!sectionFormFields.length) {
+                continue;
+            }
+            sections.push(new ProgramStageEntryFormSection({
+                id: section.id,
+                name: section.displayName,
+                description: section?.description,
+                formFields: sectionFormFields,
+                orientation: 'HORIZONTAL',
+            }));
+        }
+        return sections;
     }
     #getStageIdFromConfig() {
         const programStageRef = this.config?.programStage;
@@ -9608,8 +9851,7 @@ class ProgramStageEntryFormSectionUtil {
             .map((pde) => this.#mapDataElementToFormField(pde, stage.id))
             .filter((field) => field != null)
             .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-        const extraReportFields = this?.reportFields ?? [];
-        return [...extraReportFields, ...mappedFields];
+        return mappedFields;
     }
     #mapDataElementToFormField(pde, stageId) {
         const dataElement = pde?.dataElement;
@@ -9674,37 +9916,103 @@ class ProgramEntryFormSectionUtil {
     constructor(program, config) {
         this.program = program;
         this.config = config;
-    }
+        this.fieldUtil = new ProgramEntryFormFieldUtil(program, config);
+    }
+    // get programEntryFormSections(): IProgramEntryFormSection[] {
+    //   const pteas = this.#getPteas();
+    //   if (!pteas.length) return [];
+    //   const byAttrId = new Map(
+    //     pteas.map(
+    //       (programTrackedEntityAttribute: ProgramTrackedEntityAttribute) => [
+    //         programTrackedEntityAttribute?.trackedEntityAttribute?.id,
+    //         programTrackedEntityAttribute,
+    //       ]
+    //     )
+    //   );
+    //   const programSections = this.#getProgramSections();
+    //   if (programSections.length) {
+    //     return programSections
+    //       .map(
+    //         (programSection: ProgramSection) =>
+    //           new ProgramEntryFormSection({
+    //             id: programSection.id,
+    //             name: programSection.displayName ?? programSection.name ?? '',
+    //             description:
+    //               programSection.description ?? programSection.description ?? '',
+    //             formFields: this.#mapSectionToFormFields(
+    //               programSection,
+    //               byAttrId
+    //             ),
+    //             orientation: 'VERTICAL',
+    //           })
+    //       )
+    //       .filter(
+    //         (iProgramEntryFormSection: IProgramEntryFormSection) =>
+    //           iProgramEntryFormSection.formFields.length > 0
+    //       );
+    //   }
+    //   return [
+    //     new ProgramEntryFormSection({
+    //       id: `${this.program.id}_enrollment`,
+    //       name: this.program.displayName ?? 'Enrollment',
+    //       description: '',
+    //       formFields: this.#mapAllPteasToFormFields(pteas),
+    //       orientation: 'VERTICAL',
+    //     }),
+    //   ];
+    // }
     get programEntryFormSections() {
-        const pteas = this.#getPteas();
-        if (!pteas.length)
+        if (!this.program) {
             return [];
-        const byAttrId = new Map(pteas.map((programTrackedEntityAttribute) => [
-            programTrackedEntityAttribute?.trackedEntityAttribute?.id,
-            programTrackedEntityAttribute,
-        ]));
+        }
+        const programTrackedEntityAttributes = this.#getPteas();
+        if (!programTrackedEntityAttributes.length) {
+            return [];
+        }
+        const sections = [];
+        const generalDetailsSection = this.fieldUtil.defaultSection;
+        if (generalDetailsSection?.formFields?.length) {
+            sections.push(generalDetailsSection);
+        }
         const programSections = this.#getProgramSections();
-        // Prefer explicit program sections (enrollment sections)
         if (programSections.length) {
-            return programSections
-                .map((programSection) => new ProgramEntryFormSection({
-                id: programSection.id,
-                name: programSection.displayName ?? programSection.name ?? '',
-                description: programSection.description ?? programSection.description ?? '',
-                formFields: this.#mapSectionToFormFields(programSection, byAttrId),
-                orientation: 'VERTICAL',
-            }))
-                .filter((iProgramEntryFormSection) => iProgramEntryFormSection.formFields.length > 0);
+            const attributesById = new Map(programTrackedEntityAttributes
+                .map((programTrackedEntityAttribute) => {
+                const trackedEntityAttributeId = programTrackedEntityAttribute?.trackedEntityAttribute?.id;
+                return trackedEntityAttributeId
+                    ? [
+                        trackedEntityAttributeId,
+                        programTrackedEntityAttribute,
+                    ]
+                    : null;
+            })
+                .filter((entry) => entry !== null));
+            for (const programSection of programSections) {
+                const sectionFormFields = this.#mapSectionToFormFields(programSection, attributesById);
+                if (!sectionFormFields.length) {
+                    continue;
+                }
+                sections.push(new ProgramEntryFormSection({
+                    id: programSection.id,
+                    name: programSection.displayName ?? programSection.name ?? '',
+                    description: programSection.description ?? '',
+                    formFields: sectionFormFields,
+                    orientation: 'VERTICAL',
+                }));
+            }
+            return sections;
         }
-        return [
-            new ProgramEntryFormSection({
+        const enrollmentFormFields = this.#mapAllPteasToFormFields(programTrackedEntityAttributes);
+        if (enrollmentFormFields.length) {
+            sections.push(new ProgramEntryFormSection({
                 id: `${this.program.id}_enrollment`,
                 name: this.program.displayName ?? 'Enrollment',
                 description: '',
-                formFields: this.#mapAllPteasToFormFields(pteas),
+                formFields: enrollmentFormFields,
                 orientation: 'VERTICAL',
-            }),
-        ];
+            }));
+        }
+        return sections;
     }
     #getProgramSections() {
         return this.program?.programSections ?? [];
@@ -9958,8 +10266,11 @@ class ProgramEntryFormMetaData {
                     this.config.formFieldExtensions[0]?.optionsSourceCode) {
                     const orgUnitResponse = await this.d2.httpInstance.get(`organisationUnits.json?fields=id,name,code&paging=false&filter=organisationUnitGroups.code:eq:${this.config.formFieldExtensions[0].optionsSourceCode}`);
                     const orgUnitsResponse = orgUnitResponse?.data?.['organisationUnits'];
-                    const organisationUnits = Array.isArray(orgUnitsResponse) ? orgUnitsResponse : [];
-                    this.config.formFieldExtensions[0].organisationUnits = organisationUnits;
+                    const organisationUnits = Array.isArray(orgUnitsResponse)
+                        ? orgUnitsResponse
+                        : [];
+                    this.config.formFieldExtensions[0].organisationUnits =
+                        organisationUnits;
                 }
                 return this.toJson();
             }
@@ -9971,17 +10282,6 @@ class ProgramEntryFormMetaData {
     }
 }
 
-// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-class ProgramEntryFormSection {
-    constructor(props) {
-        this.formFields = [];
-        this.orientation = 'HORIZONTAL';
-        Object.assign(this, props);
-    }
-}
-
 // Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.