@iapps/ng-dhis2-ui 1.2.136 → 1.2.137

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

@@ -7692,11 +7692,11 @@ class FormComponent {
         return this.hiddenFieldIds().has(elementItem.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { programEntryFormConfig: { classPropertyName: "programEntryFormConfig", publicName: "programEntryFormConfig", isSignal: true, isRequired: false, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: true, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: true, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormMetaData: { classPropertyName: "programEntryFormMetaData", publicName: "programEntryFormMetaData", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n\n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <div>\n          {{ sanitizedFields | json }}\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { programEntryFormConfig: { classPropertyName: "programEntryFormConfig", publicName: "programEntryFormConfig", isSignal: true, isRequired: false, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: true, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: true, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormMetaData: { classPropertyName: "programEntryFormMetaData", publicName: "programEntryFormMetaData", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n\n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <div>\n          {{ sanitizedFields | json }}\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div *ngFor=\"let field of sanitizedFields\" class=\"form-field-{{ configuration().direction }}\">\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form> -->\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate", "dataId", "customOrgUnitRoots", "program"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-dhis2-ui-form', standalone: false, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n\n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <div>\n          {{ sanitizedFields | json }}\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <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"] }]
+            args: [{ selector: 'ng-dhis2-ui-form', standalone: false, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n  <div class=\"form-name\">\n    <h2>{{ configuration().formName }}</h2>\n  </div>\n\n  <div>\n    {{ formMetaData().sections }}\n  </div>\n  <div\n    *ngFor=\"let field of sanitizedFields\"\n    class=\"form-field-{{ configuration().direction }}\"\n  >\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [program]=\"program()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) {\n\n    @if (meta.programStageSections?.length) {\n      @for (section of meta.programStageSections; track section?.id ?? $index) {\n        <section class=\"form__section\">\n          @if (section?.name) {\n            <div class=\"form__field-group-name\">\n              {{ section.name }}\n            </div>\n          }\n\n          <div class=\"form__section-content\">\n            @if (section.formFields?.length) {\n              @for (field of section.formFields; track field?.id ?? $index) {\n                <div class=\"form__field form-field-{{ configuration().direction }}\">\n                  <ng-dhis2-ui-form-field\n                    [field]=\"field\"\n                    [fieldConfig]=\"configuration().fieldConfig\"\n                    [form]=\"form()\"\n                    [fieldClass]=\"fieldClass()\"\n                    [dataEntities]=\"dataEntities()\"\n                    [dataId]=\"dataId()\"\n                    [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                    [programRuleActions]=\"programRuleActions()\"\n                    [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                    (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                    (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                  />\n                </div>\n              } @empty {\n                <div class=\"form__empty\">No fields available for this section.</div>\n              }\n            } @else {\n              <div class=\"form__empty\">No fields available for this section.</div>\n            }\n          </div>\n        </section>\n      } @empty {\n        @for (field of sanitizedFields;  track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n    } @else {\n      @for (field of sanitizedFields;  track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n\n  } @else {\n    <div class=\"form__empty\">No metadata available</div>\n    @for (field of sanitizedFields;  track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n    } @empty {\n      <div class=\"form__empty\">No fields to display.</div>\n    }\n  }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.programStageSections?.length) {\n        @for (section of meta.programStageSections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n\n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                @if (section.formFields?.length) {\n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n  <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n    <div class=\"form__header\">\n      <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n    </div>\n\n    @if (programEntryFormMetaData(); as meta) {\n      @if (meta.sections?.length) {\n        @for (section of meta.sections; track section?.id ?? $index) {\n          <section class=\"form__section\">\n            @if (section?.name) {\n              @if (collapsibleSections()) {\n                <button\n                  type=\"button\"\n                  class=\"form__section-toggle\"\n                  (click)=\"openSection(section, $index)\"\n                  [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n                >\n                  <span class=\"form__section-title\">{{ section.name }}</span>\n                  <span\n                    class=\"form__chevron\"\n                    [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n                  ></span>\n                </button>\n              } @else {\n                <div class=\"form__field-group-name\">\n                  {{ section.name }}\n                </div>\n              }\n            }\n           \n            @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n              <div class=\"form__section-content\">\n                \n                @if (section.formFields?.length) {\n                  \n                  @for (field of section.formFields; track field?.id ?? $index) {\n                    <div>\n                    </div>\n                    <div class=\"form__field form-field-{{ configuration().direction }}\">\n                      <ng-dhis2-ui-form-field\n                        [field]=\"field\"\n                        [fieldConfig]=\"configuration().fieldConfig\"\n                        [form]=\"form()\"\n                        [fieldClass]=\"fieldClass()\"\n                        [dataEntities]=\"dataEntities()\"\n                        [dataId]=\"dataId()\"\n                        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                        [programRuleActions]=\"programRuleActions()\"\n                        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n                      />\n                    </div>\n                  } @empty {\n                    <div class=\"form__empty\">No fields available for this section.</div>\n                  }\n                } @else {\n                  <div class=\"form__empty\">No fields available for this section.</div>\n                }\n              </div>\n            }\n          </section>\n        } @empty {\n          @for (field of sanitizedFields; track field?.id ?? $index) {\n            <div class=\"form__field form-field-{{ configuration().direction }}\">\n              <ng-dhis2-ui-form-field\n                [field]=\"field\"\n                [fieldConfig]=\"configuration().fieldConfig\"\n                [form]=\"form()\"\n                [fieldClass]=\"fieldClass()\"\n                [dataEntities]=\"dataEntities()\"\n                [dataId]=\"dataId()\"\n                [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n                [programRuleActions]=\"programRuleActions()\"\n                [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n                (fieldUpdate)=\"onFieldUpdate($event, field)\"\n                (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n              />\n            </div>\n          } @empty {\n            <div class=\"form__empty\">No fields to display.</div>\n          }\n        }\n      } @else {\n        @for (field of sanitizedFields; track field?.id ?? $index) {\n          <div class=\"form__field form-field-{{ configuration().direction }}\">\n            <ng-dhis2-ui-form-field\n              [field]=\"field\"\n              [fieldConfig]=\"configuration().fieldConfig\"\n              [form]=\"form()\"\n              [fieldClass]=\"fieldClass()\"\n              [dataEntities]=\"dataEntities()\"\n              [dataId]=\"dataId()\"\n              [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n              [programRuleActions]=\"programRuleActions()\"\n              [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n              (fieldUpdate)=\"onFieldUpdate($event, field)\"\n              (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n            />\n          </div>\n        } @empty {\n          <div class=\"form__empty\">No fields to display.</div>\n        }\n      }\n\n    } @else {\n      <div class=\"form__empty\">No metadata available</div>\n      @for (field of sanitizedFields; track field?.id ?? $index) {\n        <div class=\"form__field form-field-{{ configuration().direction }}\">\n          <ng-dhis2-ui-form-field\n            [field]=\"field\"\n            [fieldConfig]=\"configuration().fieldConfig\"\n            [form]=\"form()\"\n            [fieldClass]=\"fieldClass()\"\n            [dataEntities]=\"dataEntities()\"\n            [dataId]=\"dataId()\"\n            [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n            [programRuleActions]=\"programRuleActions()\"\n            [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n            (fieldUpdate)=\"onFieldUpdate($event, field)\"\n            (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n          />\n        </div>\n      } @empty {\n        <div class=\"form__empty\">No fields to display.</div>\n      }\n    }\n  </form>\n} @else {\n  <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div>\n      {{ formMetaData().sections }}\n    </div>\n    <div\n      *ngFor=\"let field of sanitizedFields\"\n      class=\"form-field-{{ configuration().direction }}\"\n    >\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form>\n} -->\n\n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if\n  (meta?.programStageSections?.length) { @for (section of\n  meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n  'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n  desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <div>\n          {{ sanitizedFields | json }}\n    </div>\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n  [formGroup]=\"form()\"\n  class=\"form {{ configuration().directionClassName }}\"\n>\n  <div class=\"form__header\">\n    <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n  </div>\n\n  @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n  @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n  = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n  @let desc = section?.description; @let hasDesc = !!desc;\n\n  <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n    @if (section?.name) { @if (collapsibleSections()) {\n    <button\n      type=\"button\"\n      class=\"form__section-toggle\"\n      (click)=\"openSection(section, $index)\"\n      [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n      [attr.aria-controls]=\"sectionId\"\n      [attr.aria-describedby]=\"\n        hasDesc && isSectionOpen(section, $index) ? descId : null\n      \"\n    >\n      <span class=\"form__section-title\">{{ section.name }}</span>\n      <span\n        class=\"form__chevron\"\n        [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n      ></span>\n    </button>\n    } @else {\n    <div class=\"form__field-group-name\">\n      {{ section.name }}\n    </div>\n    @if (hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n    (collapsibleSections() && hasDesc) {\n    <p class=\"form__section-description\" [id]=\"descId\">\n      {{ desc }}\n    </p>\n    }\n    <div class=\"form__section-content\" [id]=\"sectionId\">\n      @if (section.formFields?.length) { @for (field of\n      getVisibleSectionFields(section); track field?.id ?? $index) {\n      <div class=\"form__field form-field-{{ configuration().direction }}\">\n        <ng-dhis2-ui-form-field\n          [field]=\"field\"\n          [fieldConfig]=\"configuration().fieldConfig\"\n          [form]=\"form()\"\n          [fieldClass]=\"fieldClass()\"\n          [dataEntities]=\"dataEntities()\"\n          [dataId]=\"dataId()\"\n          [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n          [programRuleActions]=\"programRuleActions()\"\n          [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n          (fieldUpdate)=\"onFieldUpdate($event, field)\"\n          (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n        />\n      </div>\n      } @empty {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      } } @else {\n      <div class=\"form__empty\">No fields available for this section.</div>\n      }\n    </div>\n    }\n  </section>\n  } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } } } @else {\n  <div class=\"form__empty\">No metadata available</div>\n  @for (field of sanitizedFields; track field?.id ?? $index) {\n  <div class=\"form__field form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } @empty {\n  <div class=\"form__empty\">No fields to display.</div>\n  } }\n</form>\n} @else {\n<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n    <div class=\"form-name\">\n      <h2>{{ configuration().formName }}</h2>\n    </div>\n\n    <div *ngFor=\"let field of sanitizedFields\" class=\"form-field-{{ configuration().direction }}\">\n      <ng-dhis2-ui-form-field\n        [field]=\"field\"\n        [fieldConfig]=\"configuration().fieldConfig\"\n        [form]=\"form()\"\n        [fieldClass]=\"fieldClass()\"\n        [dataEntities]=\"dataEntities()\"\n        [dataId]=\"dataId()\"\n        [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n        [programRuleActions]=\"programRuleActions()\"\n        [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n        (fieldUpdate)=\"onFieldUpdate($event, field)\"\n        (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n      />\n    </div>\n  </form> -->\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n  @if (configuration()?.formName) {\n  <div class=\"form-name\">\n    <h2>{{ configuration()?.formName }}</h2>\n  </div>\n  } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n  field?.id ?? $index) {\n  <div class=\"form-field-{{ configuration().direction }}\">\n    <ng-dhis2-ui-form-field\n      [field]=\"field\"\n      [fieldConfig]=\"configuration().fieldConfig\"\n      [form]=\"form()\"\n      [fieldClass]=\"fieldClass()\"\n      [dataEntities]=\"dataEntities()\"\n      [dataId]=\"dataId()\"\n      [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n      [programRuleActions]=\"programRuleActions()\"\n      [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n      (fieldUpdate)=\"onFieldUpdate($event, field)\"\n      (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n    />\n  </div>\n  } } @else {\n  <div class=\"text-sm text-gray-500\">No fields to display.</div>\n  }\n</form>\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formUpdate: [{
                 type: Output
             }], formValidityUpdate: [{
@@ -9777,70 +9777,234 @@ class ProgramStageEntryFormSection {
     }
 }
 
-// // 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.
-// import {
-//   IProgramStageEntryFormSection,
-//   ProgramEntryFormConfig,
-//   ProgramStageEntryFormSection,
-// } from '../models';
-// TODO: START - DEPRECATED APPROACH
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// // // 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.
+// import { camelCase, isUndefined } from 'lodash';
 // import { Program, ProgramStage, ProgramStageSection } from '@iapps/d2-web-sdk';
 // import {
 //   IProgramStageEntryFormSection,
-//   ProgramEntryFormConfig,
 //   ProgramStageEntryFormSection,
-// } from '../models';
+// } from '../models/program-stage-entry-form-section.model';
+// import { ProgramEntryFormConfig } from '../models/program-entry-form.config';
+// import { IFormField } from '../../form/interfaces/form-field.interface';
+// import { FieldDropdown } from '../../form/models/field-dropdown.model';
+// import { FormField } from '../../form/models/form-field.model';
+// import { FieldUtil } from '../../form/utils';
+// import { ProgramEntryFormFieldUtil } from './program-entry-form-field.util';
+// // import {
+// //   IProgramStageEntryFormSection,
+// //   ProgramEntryFormConfig,
+// //   ProgramStageEntryFormSection,
+// // } from '../models';
+// // TODO: START - DEPRECATED APPROACH
+// // import { Program, ProgramStage, ProgramStageSection } from '@iapps/d2-web-sdk';
+// // import {
+// //   IProgramStageEntryFormSection,
+// //   ProgramEntryFormConfig,
+// //   ProgramStageEntryFormSection,
+// // } from '../models';
+// // export class ProgramStageEntryFormSectionUtil {
+// //   constructor(
+// //     private program: Program,
+// //     private config: ProgramEntryFormConfig
+// //   ) {}
+// //   // get getProgramStageSections(): IProgramStageEntryFormSection[] {
+// //   //   return (this.program.programStages || []).flatMap((stage) =>
+// //   //     (stage.programStageSections || []).map(
+// //   //       (programStageSection: ProgramStageSection) =>
+// //   //         new ProgramStageSection(programStageSection)
+// //   //     )
+// //   //   );
+// //   // }
+// //   get programStageEntryFormSections(): IProgramStageEntryFormSection[] {
+// //     return (this.program.programStages || []).flatMap((stage: ProgramStage) =>
+// //       (stage.programStageSections || []).map(
+// //         (section: ProgramStageSection) =>
+// //           new ProgramStageEntryFormSection({
+// //             id: section.id,
+// //             name: section.displayName,
+// //             description: '',
+// //             formFields: fieldsForSection(stage, section),
+// //             orientation: 'HORIZONTAL',
+// //           })
+// //       )
+// //     );
+// //   }
+// // }
+// // 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;
+// //   }
+// // }
 // export class ProgramStageEntryFormSectionUtil {
+//   private readonly fieldUtil: ProgramEntryFormFieldUtil;
 //   constructor(
-//     private program: Program,
-//     private config: ProgramEntryFormConfig
-//   ) {}
-//   // get getProgramStageSections(): IProgramStageEntryFormSection[] {
-//   //   return (this.program.programStages || []).flatMap((stage) =>
-//   //     (stage.programStageSections || []).map(
-//   //       (programStageSection: ProgramStageSection) =>
-//   //         new ProgramStageSection(programStageSection)
-//   //     )
-//   //   );
-//   // }
-//   get programStageEntryFormSections(): IProgramStageEntryFormSection[] {
-//     return (this.program.programStages || []).flatMap((stage: ProgramStage) =>
-//       (stage.programStageSections || []).map(
-//         (section: ProgramStageSection) =>
-//           new ProgramStageEntryFormSection({
-//             id: section.id,
-//             name: section.displayName,
-//             description: '',
-//             formFields: fieldsForSection(stage, section),
-//             orientation: 'HORIZONTAL',
-//           })
-//       )
-//     );
+//     private readonly program: Program,
+//     private readonly config: ProgramEntryFormConfig
+//   ) {
+//     this.fieldUtil = new ProgramEntryFormFieldUtil(program, config);
 //   }
-// }
-// TODO: END - DEPRECATED APPROACH
-// export class ProgramStageEntryFormSectionUtil {
-//   constructor(
-//     private program: Program,
-//     private config: ProgramEntryFormConfig
-//   ) {}
 //   get programStageEntryFormSections(): IProgramStageEntryFormSection[] {
 //     const stageId = this.#getStageIdFromConfig();
-//     if (!stageId) return [];
+//     if (!stageId || !this.program) {
+//       return [];
+//     }
 //     const programStage = this.#findStageById(stageId);
-//     if (!programStage) return [];
-//     return (programStage.programStageSections || []).map(
-//       (section: ProgramStageSection) =>
+//     if (!programStage) {
+//       return [];
+//     }
+//     const sections: IProgramStageEntryFormSection[] = [];
+//     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: this.#mapSectionToFormFields(programStage, section),
+//           formFields: sectionFormFields,
 //           orientation: 'HORIZONTAL',
 //         })
-//     );
+//       );
+//     }
+//     return sections;
 //   }
 //   #getStageIdFromConfig(): string | null {
 //     const programStageRef: any = (this.config as any)?.programStage;
@@ -9884,8 +10048,7 @@ class ProgramStageEntryFormSection {
 //       .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];
+//     return mappedFields;
 //   }
 //   #mapDataElementToFormField(
 //     pde: any,
@@ -9943,20 +10106,19 @@ class ProgramStageEntryFormSection {
 //   }
 // }
 class ProgramStageEntryFormSectionUtil {
+    #sortedCanonicalStageFieldsCache = null;
     constructor(program, config) {
         this.program = program;
         this.config = config;
         this.fieldUtil = new ProgramEntryFormFieldUtil(program, config);
     }
     get programStageEntryFormSections() {
-        const stageId = this.#getStageIdFromConfig();
-        if (!stageId || !this.program) {
+        const programStageId = this.#getStageIdFromConfig();
+        if (!programStageId)
             return [];
-        }
-        const programStage = this.#findStageById(stageId);
-        if (!programStage) {
+        const programStage = this.#findStageById(programStageId);
+        if (!programStage)
             return [];
-        }
         const sections = [];
         const basicDetailsFields = this.fieldUtil.eventReportFields;
         if (basicDetailsFields?.length) {
@@ -9968,22 +10130,122 @@ class ProgramStageEntryFormSectionUtil {
                 orientation: 'VERTICAL',
             }));
         }
-        const stageSections = programStage.programStageSections ?? [];
-        for (const section of stageSections) {
-            const sectionFormFields = this.#mapSectionToFormFields(programStage, section);
-            if (!sectionFormFields.length) {
+        const canonicalFieldsByDataElementId = this.#buildCanonicalStageFieldsByDataElementId(programStage);
+        const programStageSections = programStage.programStageSections ?? [];
+        for (const programStageSection of programStageSections) {
+            const sectionFields = this.#mapStageSectionToFields(programStageSection, canonicalFieldsByDataElementId);
+            if (!sectionFields.length)
                 continue;
-            }
             sections.push(new ProgramStageEntryFormSection({
-                id: section.id,
-                name: section.displayName,
-                description: section?.description,
-                formFields: sectionFormFields,
+                id: programStageSection.id,
+                name: programStageSection.displayName ?? programStageSection.name ?? '',
+                description: programStageSection.description ?? '',
+                formFields: sectionFields,
                 orientation: 'HORIZONTAL',
             }));
         }
         return sections;
     }
+    // ---------------------------
+    // Canonical stage fields
+    // ---------------------------
+    #buildCanonicalStageFieldsByDataElementId(programStage) {
+        const programStageDataElements = programStage.programStageDataElements ?? [];
+        const fieldsByDataElementId = new Map();
+        for (let i = 0; i < programStageDataElements.length; i++) {
+            const programStageDataElement = programStageDataElements[i];
+            const canonicalField = this.#mapProgramStageDataElementToField(programStageDataElement, programStage.id);
+            if (!canonicalField?.id)
+                continue;
+            fieldsByDataElementId.set(canonicalField.id, canonicalField);
+        }
+        this.#sortedCanonicalStageFieldsCache = null;
+        return fieldsByDataElementId;
+    }
+    // ---------------------------
+    // Map a stage section using canonical fields (like program sections)
+    // ---------------------------
+    #mapStageSectionToFields(programStageSection, canonicalFieldsByDataElementId) {
+        const sectionDataElements = programStageSection.dataElements;
+        const sectionDataElementIdsFromAlt = programStageSection?.dataElementsIds ??
+            undefined;
+        const sectionDataElementIds = (sectionDataElements?.length
+            ? sectionDataElements.map((d) => d?.id).filter(Boolean)
+            : sectionDataElementIdsFromAlt?.filter(Boolean)) ?? [];
+        if (sectionDataElementIds.length > 0) {
+            const sectionFields = [];
+            for (let index = 0; index < sectionDataElementIds.length; index++) {
+                const dataElementId = sectionDataElementIds[index];
+                const canonicalField = canonicalFieldsByDataElementId.get(dataElementId);
+                if (!canonicalField)
+                    continue;
+                sectionFields.push({
+                    ...canonicalField,
+                    order: index + 1,
+                });
+            }
+            return sectionFields;
+        }
+        return this.#getSortedCanonicalStageFields(canonicalFieldsByDataElementId);
+    }
+    #getSortedCanonicalStageFields(canonicalFieldsByDataElementId) {
+        const cache = this.#sortedCanonicalStageFieldsCache;
+        if (cache?.sourceMap === canonicalFieldsByDataElementId) {
+            return cache.sortedFields;
+        }
+        const sortedFields = Array.from(canonicalFieldsByDataElementId.values());
+        sortedFields.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+        this.#sortedCanonicalStageFieldsCache = {
+            sourceMap: canonicalFieldsByDataElementId,
+            sortedFields,
+        };
+        return sortedFields;
+    }
+    // ---------------------------
+    // Map a programStageDataElement => canonical form field
+    // ---------------------------
+    #mapProgramStageDataElementToField(programStageDataElement, programStageId) {
+        const dataElementDefinition = programStageDataElement?.dataElement;
+        if (!dataElementDefinition?.id)
+            return null;
+        const fieldBaseConfig = {
+            id: dataElementDefinition.id,
+            code: dataElementDefinition.code,
+            formName: dataElementDefinition.formName,
+            name: dataElementDefinition.displayName ?? dataElementDefinition.name ?? '',
+            mandatory: !!programStageDataElement.compulsory,
+            valueType: dataElementDefinition.valueType,
+            sortOrder: programStageDataElement.sortOrder,
+            stepId: programStageId,
+            optionSet: dataElementDefinition.optionSet,
+        };
+        const dropdownOptions = FieldDropdown.getDropdownOptions(fieldBaseConfig);
+        const hasSelectableOptions = (dropdownOptions?.length ?? 0) > 0;
+        const fieldExtension = this.config.formFieldExtensions?.find((extension) => extension?.id === fieldBaseConfig.id);
+        const autoAssignedValue = this.#getAutoAssignedValue(fieldBaseConfig);
+        if (!isUndefined(autoAssignedValue) &&
+            this.config.hideCustomAssignedFields) {
+            return null;
+        }
+        return new FormField({
+            ...fieldBaseConfig,
+            label: fieldBaseConfig.formName || fieldBaseConfig.name,
+            key: fieldBaseConfig.code
+                ? camelCase(fieldBaseConfig.code)
+                : fieldBaseConfig.id,
+            required: fieldBaseConfig.mandatory,
+            type: FieldUtil.getFieldType(fieldBaseConfig.valueType),
+            options: dropdownOptions,
+            disabled: this.#getDisabledStatus(fieldBaseConfig),
+            order: fieldBaseConfig.sortOrder,
+            hasOptions: hasSelectableOptions,
+            controlType: FieldUtil.getFieldControlType(fieldBaseConfig.valueType, hasSelectableOptions),
+            extension: fieldExtension,
+        });
+    }
+    // ---------------------------
+    // Stage selection helpers
+    // ---------------------------
     #getStageIdFromConfig() {
         const programStageRef = this.config?.programStage;
         if (!programStageRef)
@@ -10000,60 +10262,12 @@ class ProgramStageEntryFormSectionUtil {
             ? candidateId.trim()
             : null;
     }
-    #findStageById(stageId) {
-        return ((this.program.programStages || []).find((stage) => stage?.id === stageId) ?? null);
-    }
-    #mapSectionToFormFields(stage, section) {
-        const stageDataElements = stage.programStageDataElements || [];
-        const sectionElementIds = section.dataElements?.map((d) => d.id) ??
-            section.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 != null)
-            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-        return mappedFields;
-    }
-    #mapDataElementToFormField(pde, stageId) {
-        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) => fx?.id === baseField.id);
-        const autoAssignedValue = this.#getAutoAssignedValue(baseField);
-        if (!isUndefined(autoAssignedValue) &&
-            this.config.hideCustomAssignedFields) {
-            return null;
-        }
-        return new FormField({
-            ...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,
-        });
+    #findStageById(programStageId) {
+        return ((this.program.programStages ?? []).find((stage) => stage?.id === programStageId) ?? null);
     }
+    // ---------------------------
+    // Extension hooks
+    // ---------------------------
     #getAutoAssignedValue(field) {
         const impl = this?.['#getAutoAssignedValue'];
         return typeof impl === 'function' ? impl.call(this, field) : undefined;
@@ -10064,6 +10278,8 @@ class ProgramStageEntryFormSectionUtil {
     }
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 // 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.
@@ -10077,6 +10293,7 @@ class ProgramStageEntryFormSectionUtil {
 //   }
 // }
 class ProgramEntryFormSectionUtil {
+    #sortedCanonicalFieldsCache = null;
     constructor(program, config) {
         this.program = program;
         this.config = config;
@@ -10151,8 +10368,9 @@ class ProgramEntryFormSectionUtil {
                     : null;
             })
                 .filter((entry) => entry !== null));
+            const canonicalFieldsById = this.#buildCanonicalFieldsById(programTrackedEntityAttributes);
             for (const programSection of programSections) {
-                const sectionFormFields = this.#mapSectionToFormFields(programSection, attributesById);
+                const sectionFormFields = this.#mapSectionToFormFields(programSection, attributesById, canonicalFieldsById);
                 if (!sectionFormFields.length) {
                     continue;
                 }
@@ -10184,19 +10402,99 @@ class ProgramEntryFormSectionUtil {
     #getPteas() {
         return this.program?.programTrackedEntityAttributes ?? [];
     }
-    #mapSectionToFormFields(section, byAttrId) {
-        const ids = section?.trackedEntityAttributes?.map((trackedEntityAttribute) => trackedEntityAttribute?.id) ??
-            section?.trackedEntityAttributes?.map((trackedEntityAttribute) => trackedEntityAttribute?.id) ??
-            [];
-        const fields = (ids.length
-            ? ids.map((id) => byAttrId.get(id)).filter(Boolean)
-            : Array.from(byAttrId.values()))
-            .map((programTrackedEntityAttribute) => this.#mapPteaToFormField(programTrackedEntityAttribute))
-            .filter((f) => f != null)
-            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-        // const extraReportFields = (this as any)?.reportFields ?? [];
-        // return [...extraReportFields, ...fields];
-        return [...fields];
+    // #mapSectionToFormFields(
+    //   section: ProgramSection,
+    //   byAttrId: Map<string, any>
+    // ): IFormField<string>[] {
+    //   const ids: string[] =
+    //     section?.trackedEntityAttributes?.map(
+    //       (trackedEntityAttribute: TrackedEntityAttribute) =>
+    //         trackedEntityAttribute?.id
+    //     ) ??
+    //     section?.trackedEntityAttributes?.map(
+    //       (trackedEntityAttribute: TrackedEntityAttribute) =>
+    //         trackedEntityAttribute?.id
+    //     ) ??
+    //     [];
+    //   const fields = (
+    //     ids.length
+    //       ? ids.map((id: string) => byAttrId.get(id)).filter(Boolean)
+    //       : Array.from(byAttrId.values())
+    //   )
+    //     .map((programTrackedEntityAttribute: ProgramTrackedEntityAttribute) =>
+    //       this.#mapPteaToFormField(programTrackedEntityAttribute)
+    //     )
+    //     .filter((f): f is IFormField<string> => f != null)
+    //     .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    //   // const extraReportFields = (this as any)?.reportFields ?? [];
+    //   // return [...extraReportFields, ...fields];
+    //   return [...fields];
+    // }
+    // #mapSectionToFormFields(
+    //   section: ProgramSection,
+    //   byAttrId: Map<string, ProgramTrackedEntityAttribute>,
+    //   canonicalFieldsById: Map<string, IFormField<string>>
+    // ): IFormField<string>[] {
+    //   const ids: string[] =
+    //     section?.trackedEntityAttributes
+    //       ?.map(
+    //         (trackedEntityAttribute: TrackedEntityAttribute) =>
+    //           trackedEntityAttribute?.id
+    //       )
+    //       .filter(Boolean as any) ?? [];
+    //   if (ids.length) {
+    //     const fields = ids
+    //       .map((id, index) => {
+    //         const canonical = canonicalFieldsById.get(id);
+    //         if (!canonical) return null;
+    //         // Clone to avoid mutating the canonical instance
+    //         return {
+    //           ...canonical,
+    //           // preserve stable order in the section (optional but recommended)
+    //           order: index + 1,
+    //         } as IFormField<string>;
+    //       })
+    //       .filter((f): f is IFormField<string> => f != null);
+    //     return fields;
+    //   }
+    //   // Fallback: no section ids => return all canonical fields
+    //   return Array.from(canonicalFieldsById.values()).sort(
+    //     (a, b) => (a.order ?? 0) - (b.order ?? 0)
+    //   );
+    // }
+    #mapSectionToFormFields(programSection, _unusedAttributeMap, // intentionally unused
+    canonicalFieldsByAttributeId) {
+        const sectionTrackedEntityAttributes = programSection?.trackedEntityAttributes;
+        const sectionAttributeCount = sectionTrackedEntityAttributes?.length ?? 0;
+        if (sectionAttributeCount > 0) {
+            const sectionFields = [];
+            for (let index = 0; index < sectionAttributeCount; index++) {
+                const attributeId = sectionTrackedEntityAttributes[index]?.id;
+                if (!attributeId)
+                    continue;
+                const canonicalField = canonicalFieldsByAttributeId.get(attributeId);
+                if (!canonicalField)
+                    continue;
+                sectionFields.push({
+                    ...canonicalField,
+                    order: index + 1,
+                });
+            }
+            return sectionFields;
+        }
+        return this.#getSortedCanonicalFields(canonicalFieldsByAttributeId);
+    }
+    #getSortedCanonicalFields(canonicalFieldsByAttributeId) {
+        const cache = this.#sortedCanonicalFieldsCache;
+        if (cache?.sourceMap === canonicalFieldsByAttributeId) {
+            return cache.sortedFields;
+        }
+        const sortedFields = Array.from(canonicalFieldsByAttributeId.values()).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+        this.#sortedCanonicalFieldsCache = {
+            sourceMap: canonicalFieldsByAttributeId,
+            sortedFields,
+        };
+        return sortedFields;
     }
     #mapAllPteasToFormFields(programTrackedEntityAttribute) {
         const fields = programTrackedEntityAttribute
@@ -10241,10 +10539,14 @@ class ProgramEntryFormSectionUtil {
             type: FieldUtil.getFieldType(iTrackedEntityFormFieldBase.valueType),
             options,
             hasOptions,
-            disabled: this.#getDisabledStatus(iTrackedEntityFormFieldBase),
+            disabled: this.#getDisabledStatus(iTrackedEntityFormFieldBase) || !!tea.generated,
             order: iTrackedEntityFormFieldBase.sortOrder,
             controlType: FieldUtil.getFieldControlType(iTrackedEntityFormFieldBase.valueType, hasOptions),
             extension: fieldExtension,
+            generated: !!tea.generated,
+            unique: !!tea.unique,
+            pattern: tea.pattern,
+            optionSetValue: !!tea.optionSetValue,
         });
     }
     #getAutoAssignedValue(field) {
@@ -10255,6 +10557,17 @@ class ProgramEntryFormSectionUtil {
         const impl = this?.['#getDisabledStatus'];
         return typeof impl === 'function' ? impl.call(this, field) : false;
     }
+    #buildCanonicalFieldsById(programTrackedEntityAttributes) {
+        const fieldsByAttributeId = new Map();
+        for (let i = 0; i < programTrackedEntityAttributes.length; i++) {
+            const programTrackedEntityAttribute = programTrackedEntityAttributes[i];
+            const canonicalField = this.#mapPteaToFormField(programTrackedEntityAttribute);
+            if (!canonicalField?.id)
+                continue;
+            fieldsByAttributeId.set(canonicalField.id, canonicalField);
+        }
+        return fieldsByAttributeId;
+    }
 }
 
 // Copyright 2025 UDSM DHIS2 Lab. All rights reserved.