@iapps/ng-dhis2-ui 1.2.170 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import * as i1$1 from '@angular/common';
|
|
2
1
|
import { CommonModule } from '@angular/common';
|
|
3
2
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, ContentChild, Input, Directive, inject, ElementRef, Component, EventEmitter, Output, NgZone, input,
|
|
3
|
+
import { NgModule, ContentChild, Input, Directive, inject, ElementRef, ChangeDetectionStrategy, Component, EventEmitter, Output, NgZone, input, Injectable, model, computed, signal, effect, ViewChildren } from '@angular/core';
|
|
5
4
|
import { useDataQuery, useConfig, useAlert, clearSensitiveCaches, DataProvider, useDataEngine, Provider } from '@dhis2/app-runtime';
|
|
6
5
|
import * as React from 'react';
|
|
7
6
|
import React__default, { useState, useCallback, useRef, useEffect, createContext, useContext, useMemo } from 'react';
|
|
@@ -23,8 +22,8 @@ import { Divider } from '@dhis2-ui/divider';
|
|
|
23
22
|
import { Layer } from '@dhis2-ui/layer';
|
|
24
23
|
import { CircularLoader } from '@dhis2-ui/loader';
|
|
25
24
|
import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
|
|
26
|
-
import { Button as Button$1, IconDimensionOrgUnit16, IconClock16, IconDimensionData16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, DropdownButton, FlyoutMenu, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, Field, NoticeBox, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
|
|
27
|
-
import { isObject, isString, debounce, isUndefined, find, sortBy, camelCase, flatten,
|
|
25
|
+
import { Button as Button$1, IconDimensionOrgUnit16, IconClock16, IconDimensionData16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, DropdownButton, FlyoutMenu, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, Field, NoticeBox, FileInputField, FileListItem, Legend, IconInfo16, Popover, FieldSet, MultiSelectField, TextAreaField } from '@dhis2/ui';
|
|
26
|
+
import { isObject, isString, debounce, isUndefined, find, sortBy, isArray, camelCase, flatten, isEmpty } from 'lodash';
|
|
28
27
|
import cx from 'classnames';
|
|
29
28
|
import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
|
|
30
29
|
import { Pager, DataOrderCriteria, DataQueryFilter, DataFilterCondition, ProgramRuleEngine } from '@iapps/d2-web-sdk';
|
|
@@ -38,11 +37,11 @@ import { useMapEvents, useMap, MapContainer, TileLayer, GeoJSON, Marker } from '
|
|
|
38
37
|
import moment from 'moment';
|
|
39
38
|
|
|
40
39
|
class SharedDhis2UiModule {
|
|
41
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
42
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
43
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
40
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SharedDhis2UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
41
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
|
|
42
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
|
|
44
43
|
}
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SharedDhis2UiModule, decorators: [{
|
|
46
45
|
type: NgModule,
|
|
47
46
|
args: [{
|
|
48
47
|
imports: [CommonModule],
|
|
@@ -78,10 +77,10 @@ class ReactWrapperModule {
|
|
|
78
77
|
this.reactDomRoot.render(React.createElement(this.component, this.props, jsxContent || ''));
|
|
79
78
|
}
|
|
80
79
|
}
|
|
81
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
82
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
80
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ReactWrapperModule, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
81
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ReactWrapperModule, isStandalone: true, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
|
|
83
82
|
}
|
|
84
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ReactWrapperModule, decorators: [{
|
|
85
84
|
type: Directive,
|
|
86
85
|
args: [{
|
|
87
86
|
selector: 'ng-dhis2-ui-wrapper',
|
|
@@ -1085,24 +1084,25 @@ class HeaderBarComponent extends ReactWrapperModule {
|
|
|
1085
1084
|
this.render();
|
|
1086
1085
|
}
|
|
1087
1086
|
}
|
|
1088
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1089
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1087
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HeaderBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1088
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: HeaderBarComponent, isStandalone: false, selector: "ng-dhis2-ui-header-bar", usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1090
1089
|
}
|
|
1091
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1090
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HeaderBarComponent, decorators: [{
|
|
1092
1091
|
type: Component,
|
|
1093
1092
|
args: [{
|
|
1094
1093
|
selector: 'ng-dhis2-ui-header-bar',
|
|
1095
1094
|
template: `<ng-container></ng-container>`,
|
|
1095
|
+
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1096
1096
|
standalone: false,
|
|
1097
1097
|
}]
|
|
1098
1098
|
}], ctorParameters: () => [] });
|
|
1099
1099
|
|
|
1100
1100
|
class HeaderBarModule {
|
|
1101
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1102
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1103
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1101
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HeaderBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1102
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: HeaderBarModule, declarations: [HeaderBarComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [HeaderBarComponent] }); }
|
|
1103
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HeaderBarModule, imports: [CommonModule, SharedDhis2UiModule] }); }
|
|
1104
1104
|
}
|
|
1105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HeaderBarModule, decorators: [{
|
|
1106
1106
|
type: NgModule,
|
|
1107
1107
|
args: [{
|
|
1108
1108
|
imports: [CommonModule, SharedDhis2UiModule],
|
|
@@ -1154,14 +1154,15 @@ class ButtonComponent extends ReactWrapperModule {
|
|
|
1154
1154
|
onButtonClick(event) {
|
|
1155
1155
|
this.buttonClick.emit(event);
|
|
1156
1156
|
}
|
|
1157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1157
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1158
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ButtonComponent, isStandalone: false, selector: "ng-dhis2-ui-button", inputs: { label: "label", primary: "primary", secondary: "secondary", destructive: "destructive", disabled: "disabled", small: "small", large: "large" }, outputs: { buttonClick: "buttonClick" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1159
1159
|
}
|
|
1160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
1161
1161
|
type: Component,
|
|
1162
1162
|
args: [{
|
|
1163
1163
|
selector: 'ng-dhis2-ui-button',
|
|
1164
1164
|
template: '<ng-content></ng-content>',
|
|
1165
|
+
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1165
1166
|
standalone: false,
|
|
1166
1167
|
}]
|
|
1167
1168
|
}], propDecorators: { label: [{
|
|
@@ -1183,11 +1184,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
1183
1184
|
}] } });
|
|
1184
1185
|
|
|
1185
1186
|
class ButtonModule {
|
|
1186
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1187
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1188
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1187
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1188
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [ButtonComponent] }); }
|
|
1189
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ButtonModule, imports: [CommonModule, SharedDhis2UiModule] }); }
|
|
1189
1190
|
}
|
|
1190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ButtonModule, decorators: [{
|
|
1191
1192
|
type: NgModule,
|
|
1192
1193
|
args: [{
|
|
1193
1194
|
declarations: [ButtonComponent],
|
|
@@ -1684,7 +1685,8 @@ class BreadcrumbComponent extends ReactWrapperModule {
|
|
|
1684
1685
|
constructor() {
|
|
1685
1686
|
super(...arguments);
|
|
1686
1687
|
this.#ngZone = inject(NgZone);
|
|
1687
|
-
this.breadcrumbs = input.required(
|
|
1688
|
+
this.breadcrumbs = input.required(/* @ts-ignore */
|
|
1689
|
+
...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
|
|
1688
1690
|
this.selectBreadcrumb = new EventEmitter();
|
|
1689
1691
|
}
|
|
1690
1692
|
#ngZone;
|
|
@@ -1713,10 +1715,10 @@ class BreadcrumbComponent extends ReactWrapperModule {
|
|
|
1713
1715
|
};
|
|
1714
1716
|
this.render();
|
|
1715
1717
|
}
|
|
1716
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1717
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1718
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1719
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: BreadcrumbComponent, isStandalone: false, selector: "ng-dhis2-ui-breadcrumb", inputs: { breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectBreadcrumb: "selectBreadcrumb" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1718
1720
|
}
|
|
1719
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1721
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
1720
1722
|
type: Component,
|
|
1721
1723
|
args: [{
|
|
1722
1724
|
selector: 'ng-dhis2-ui-breadcrumb',
|
|
@@ -1724,16 +1726,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
1724
1726
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1725
1727
|
standalone: false,
|
|
1726
1728
|
}]
|
|
1727
|
-
}], propDecorators: { selectBreadcrumb: [{
|
|
1729
|
+
}], propDecorators: { breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: true }] }], selectBreadcrumb: [{
|
|
1728
1730
|
type: Output
|
|
1729
1731
|
}] } });
|
|
1730
1732
|
|
|
1731
1733
|
class BreadcrumbModule {
|
|
1732
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1733
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1734
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1734
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1735
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent], imports: [CommonModule], exports: [BreadcrumbComponent] }); }
|
|
1736
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule] }); }
|
|
1735
1737
|
}
|
|
1736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1738
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BreadcrumbModule, decorators: [{
|
|
1737
1739
|
type: NgModule,
|
|
1738
1740
|
args: [{
|
|
1739
1741
|
declarations: [BreadcrumbComponent],
|
|
@@ -2470,12 +2472,12 @@ class PeriodSelectorModalComponent extends ReactWrapperModule {
|
|
|
2470
2472
|
onConfirm(selectedItems) {
|
|
2471
2473
|
this.confirm.emit(selectedItems);
|
|
2472
2474
|
}
|
|
2473
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2474
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2475
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PeriodSelectorModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2476
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: PeriodSelectorModalComponent, isStandalone: false, selector: "ng-dhis2-ui-period-selector-modal", inputs: { selectedPeriods: "selectedPeriods" }, outputs: { cancel: "cancel", confirm: "confirm" }, usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: ["::ng-deep .layer{z-index:2!important}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
2475
2477
|
}
|
|
2476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PeriodSelectorModalComponent, decorators: [{
|
|
2477
2479
|
type: Component,
|
|
2478
|
-
args: [{ selector: 'ng-dhis2-ui-period-selector-modal', template: `<ng-container></ng-container>`, standalone: false, styles: ["::ng-deep .layer{z-index:2!important}\n"] }]
|
|
2480
|
+
args: [{ selector: 'ng-dhis2-ui-period-selector-modal', template: `<ng-container></ng-container>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["::ng-deep .layer{z-index:2!important}\n"] }]
|
|
2479
2481
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedPeriods: [{
|
|
2480
2482
|
type: Input
|
|
2481
2483
|
}], cancel: [{
|
|
@@ -2535,12 +2537,12 @@ class PeriodSelectorComponent extends ReactWrapperModule {
|
|
|
2535
2537
|
onSelectItems(selectionEvent) {
|
|
2536
2538
|
this.selectPeriods.emit(selectionEvent.items);
|
|
2537
2539
|
}
|
|
2538
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2539
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2540
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PeriodSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2541
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: PeriodSelectorComponent, isStandalone: false, selector: "ng-dhis2-ui-period-selector", inputs: { selectedPeriods: "selectedPeriods" }, outputs: { selectPeriods: "selectPeriods" }, usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: ["::ng-deep .content-container{z-index:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
2540
2542
|
}
|
|
2541
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2543
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PeriodSelectorComponent, decorators: [{
|
|
2542
2544
|
type: Component,
|
|
2543
|
-
args: [{ selector: 'ng-dhis2-ui-period-selector', template: `<ng-container></ng-container>`, standalone: false, styles: ["::ng-deep .content-container{z-index:0!important}\n"] }]
|
|
2545
|
+
args: [{ selector: 'ng-dhis2-ui-period-selector', template: `<ng-container></ng-container>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["::ng-deep .content-container{z-index:0!important}\n"] }]
|
|
2544
2546
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { selectedPeriods: [{
|
|
2545
2547
|
type: Input
|
|
2546
2548
|
}], selectPeriods: [{
|
|
@@ -2548,11 +2550,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
2548
2550
|
}] } });
|
|
2549
2551
|
|
|
2550
2552
|
class PeriodSelectorModule {
|
|
2551
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2552
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2553
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2553
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PeriodSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2554
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: PeriodSelectorModule, declarations: [PeriodSelectorComponent, PeriodSelectorModalComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [PeriodSelectorComponent, PeriodSelectorModalComponent] }); }
|
|
2555
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PeriodSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
|
|
2554
2556
|
}
|
|
2555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PeriodSelectorModule, decorators: [{
|
|
2556
2558
|
type: NgModule,
|
|
2557
2559
|
args: [{
|
|
2558
2560
|
imports: [CommonModule, SharedDhis2UiModule],
|
|
@@ -3012,14 +3014,15 @@ class OrganisationUnitSelectorComponent extends ReactWrapperModule {
|
|
|
3012
3014
|
onSelectItems(selectionEvent) {
|
|
3013
3015
|
this.selectOrgUnits.emit(selectionEvent.items);
|
|
3014
3016
|
}
|
|
3015
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3016
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3017
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OrganisationUnitSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3018
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: OrganisationUnitSelectorComponent, isStandalone: false, selector: "ng-dhis2-ui-org-unit-selector", inputs: { selectedOrgUnits: "selectedOrgUnits", orgUnitSelectionConfig: "orgUnitSelectionConfig" }, outputs: { selectOrgUnits: "selectOrgUnits" }, usesInheritance: true, ngImport: i0, template: '<ng-container><ng-container>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
3017
3019
|
}
|
|
3018
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3020
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OrganisationUnitSelectorComponent, decorators: [{
|
|
3019
3021
|
type: Component,
|
|
3020
3022
|
args: [{
|
|
3021
3023
|
selector: 'ng-dhis2-ui-org-unit-selector',
|
|
3022
3024
|
template: '<ng-container><ng-container>',
|
|
3025
|
+
changeDetection: ChangeDetectionStrategy.Eager,
|
|
3023
3026
|
standalone: false,
|
|
3024
3027
|
}]
|
|
3025
3028
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { selectedOrgUnits: [{
|
|
@@ -3136,12 +3139,12 @@ class OrganisationUnitSelectorModalComponent extends ReactWrapperModule {
|
|
|
3136
3139
|
onSelectItems(selectionEvent) {
|
|
3137
3140
|
this.selectOrgUnits.emit(selectionEvent.items);
|
|
3138
3141
|
}
|
|
3139
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3140
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3142
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OrganisationUnitSelectorModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3143
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: OrganisationUnitSelectorModalComponent, isStandalone: false, selector: "ng-dhis2-ui-org-unit-selector-modal", inputs: { selectedOrgUnits: "selectedOrgUnits", orgUnitSelectionConfig: "orgUnitSelectionConfig" }, outputs: { selectOrgUnits: "selectOrgUnits", cancel: "cancel", confirm: "confirm" }, usesInheritance: true, ngImport: i0, template: '<ng-container><ng-container>', isInline: true, styles: ["::ng-deep .layer{z-index:2!important}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
3141
3144
|
}
|
|
3142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OrganisationUnitSelectorModalComponent, decorators: [{
|
|
3143
3146
|
type: Component,
|
|
3144
|
-
args: [{ selector: 'ng-dhis2-ui-org-unit-selector-modal', template: '<ng-container><ng-container>', standalone: false, styles: ["::ng-deep .layer{z-index:2!important}\n"] }]
|
|
3147
|
+
args: [{ selector: 'ng-dhis2-ui-org-unit-selector-modal', template: '<ng-container><ng-container>', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["::ng-deep .layer{z-index:2!important}\n"] }]
|
|
3145
3148
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedOrgUnits: [{
|
|
3146
3149
|
type: Input
|
|
3147
3150
|
}], orgUnitSelectionConfig: [{
|
|
@@ -3155,13 +3158,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
3155
3158
|
}] } });
|
|
3156
3159
|
|
|
3157
3160
|
class OrganisationUnitSelectorModule {
|
|
3158
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3159
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
3161
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OrganisationUnitSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3162
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: OrganisationUnitSelectorModule, declarations: [OrganisationUnitSelectorComponent,
|
|
3160
3163
|
OrganisationUnitSelectorModalComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [OrganisationUnitSelectorComponent,
|
|
3161
3164
|
OrganisationUnitSelectorModalComponent] }); }
|
|
3162
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
3165
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OrganisationUnitSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
|
|
3163
3166
|
}
|
|
3164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OrganisationUnitSelectorModule, decorators: [{
|
|
3165
3168
|
type: NgModule,
|
|
3166
3169
|
args: [{
|
|
3167
3170
|
imports: [CommonModule, SharedDhis2UiModule],
|
|
@@ -3347,7 +3350,7 @@ const OrgUnitFormField$1 = (props) => {
|
|
|
3347
3350
|
const handleBlur = () => {
|
|
3348
3351
|
// onBlur && onBlur(null);
|
|
3349
3352
|
};
|
|
3350
|
-
return (config && (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false },
|
|
3353
|
+
return (config && (React__default.createElement(Provider, { config: config, userInfo: d2.currentUser, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false },
|
|
3351
3354
|
React__default.createElement("div", null,
|
|
3352
3355
|
label && (React__default.createElement("div", { className: classes.orgUnitFieldLabel },
|
|
3353
3356
|
React__default.createElement("span", null, label),
|
|
@@ -4293,10 +4296,10 @@ class LineListService {
|
|
|
4293
4296
|
return orgUnitsMap;
|
|
4294
4297
|
}));
|
|
4295
4298
|
}
|
|
4296
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4297
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4299
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LineListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4300
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LineListService }); }
|
|
4298
4301
|
}
|
|
4299
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LineListService, decorators: [{
|
|
4300
4303
|
type: Injectable
|
|
4301
4304
|
}] });
|
|
4302
4305
|
|
|
@@ -5467,12 +5470,12 @@ class LineListTableComponent extends ReactWrapperModule {
|
|
|
5467
5470
|
this.component = this.LineList;
|
|
5468
5471
|
this.render();
|
|
5469
5472
|
}
|
|
5470
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5471
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5473
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5474
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: LineListTableComponent, isStandalone: false, selector: "ng-dhis2-ui-line-list", inputs: { triggerToken: "triggerToken", programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", lineListRowActionFilterConfig: "lineListRowActionFilterConfig", hydrateForActionFiltering: "hydrateForActionFiltering", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible", allowRowsSelection: "allowRowsSelection", enrollmentStatus: "enrollmentStatus", filterableColumnIds: "filterableColumnIds", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons", showEnrollmentDates: "showEnrollmentDates", showDownloadButton: "showDownloadButton", searcheableDataElements: "searcheableDataElements", columnNameSource: "columnNameSource", customDisplayInReportsIds: "customDisplayInReportsIds", columnMetadataDisplayMode: "columnMetadataDisplayMode" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .line-list-root{width:100%;max-width:100%;min-width:0}::ng-deep .line-list-download-toolbar{position:sticky;left:0;z-index:2;display:flex;justify-content:flex-end;width:100%;max-width:100%;box-sizing:border-box;background:#fff}::ng-deep .line-list-table-scroll{width:100%;max-width:100%;overflow-x:auto}::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5472
5475
|
}
|
|
5473
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LineListTableComponent, decorators: [{
|
|
5474
5477
|
type: Component,
|
|
5475
|
-
args: [{ selector: 'ng-dhis2-ui-line-list', template: '<ng-content></ng-content>', standalone: false, styles: ["@charset \"UTF-8\";::ng-deep .line-list-root{width:100%;max-width:100%;min-width:0}::ng-deep .line-list-download-toolbar{position:sticky;left:0;z-index:2;display:flex;justify-content:flex-end;width:100%;max-width:100%;box-sizing:border-box;background:#fff}::ng-deep .line-list-table-scroll{width:100%;max-width:100%;overflow-x:auto}::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }]
|
|
5478
|
+
args: [{ selector: 'ng-dhis2-ui-line-list', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["@charset \"UTF-8\";::ng-deep .line-list-root{width:100%;max-width:100%;min-width:0}::ng-deep .line-list-download-toolbar{position:sticky;left:0;z-index:2;display:flex;justify-content:flex-end;width:100%;max-width:100%;box-sizing:border-box;background:#fff}::ng-deep .line-list-table-scroll{width:100%;max-width:100%;overflow-x:auto}::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }]
|
|
5476
5479
|
}], propDecorators: { triggerToken: [{
|
|
5477
5480
|
type: Input
|
|
5478
5481
|
}], programId: [{
|
|
@@ -5542,11 +5545,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
5542
5545
|
}] } });
|
|
5543
5546
|
|
|
5544
5547
|
class LineListModule {
|
|
5545
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5546
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
5547
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
5548
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LineListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5549
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: LineListModule, declarations: [LineListTableComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [LineListTableComponent] }); }
|
|
5550
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LineListModule, providers: [LineListService], imports: [CommonModule, SharedDhis2UiModule] }); }
|
|
5548
5551
|
}
|
|
5549
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5552
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LineListModule, decorators: [{
|
|
5550
5553
|
type: NgModule,
|
|
5551
5554
|
args: [{
|
|
5552
5555
|
declarations: [LineListTableComponent],
|
|
@@ -5737,12 +5740,12 @@ class DataTableUIComponent extends ReactWrapperModule {
|
|
|
5737
5740
|
this.render();
|
|
5738
5741
|
}
|
|
5739
5742
|
}
|
|
5740
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5741
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5743
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataTableUIComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5744
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: DataTableUIComponent, isStandalone: false, selector: "app-data-table-ui", inputs: { data: "data", columnDefinitions: "columnDefinitions", actionOptions: "actionOptions" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5742
5745
|
}
|
|
5743
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataTableUIComponent, decorators: [{
|
|
5744
5747
|
type: Component,
|
|
5745
|
-
args: [{ selector: 'app-data-table-ui', standalone: false, template: '<ng-content></ng-content>' }]
|
|
5748
|
+
args: [{ selector: 'app-data-table-ui', standalone: false, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.Eager }]
|
|
5746
5749
|
}], propDecorators: { data: [{
|
|
5747
5750
|
type: Input
|
|
5748
5751
|
}], columnDefinitions: [{
|
|
@@ -5754,11 +5757,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
5754
5757
|
}] } });
|
|
5755
5758
|
|
|
5756
5759
|
class DataTableUIModule {
|
|
5757
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5758
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
5759
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
5760
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataTableUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5761
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: DataTableUIModule, declarations: [DataTableUIComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [DataTableUIComponent] }); }
|
|
5762
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataTableUIModule, imports: [CommonModule, SharedDhis2UiModule] }); }
|
|
5760
5763
|
}
|
|
5761
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5764
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataTableUIModule, decorators: [{
|
|
5762
5765
|
type: NgModule,
|
|
5763
5766
|
args: [{
|
|
5764
5767
|
declarations: [DataTableUIComponent],
|
|
@@ -6365,417 +6368,7 @@ Only proceed if you are certain this is intentional and acceptable according to
|
|
|
6365
6368
|
captureAccuracy && (React__default.createElement(InputField$1, { label: "Accuracy radius (km)", name: `${name}-accuracy-km`, type: "number", step: "0.1", min: "0",
|
|
6366
6369
|
// disabled={disabled}
|
|
6367
6370
|
disabled: true, value: accuracyKmValue == null ? '' : String(accuracyKmValue), onChange: handleAccuracyChange, onBlur: onBlur, placeholder: "e.g. 0.1" })))),
|
|
6368
|
-
isMapDialogOpen && (
|
|
6369
|
-
// <Modal
|
|
6370
|
-
// onClose={handleCloseMapDialog}
|
|
6371
|
-
// position="middle"
|
|
6372
|
-
// className="coordinate-modal"
|
|
6373
|
-
// >
|
|
6374
|
-
// <ModalTitle>Select location on street map</ModalTitle>
|
|
6375
|
-
// <ModalContent>
|
|
6376
|
-
// <div
|
|
6377
|
-
// style={{
|
|
6378
|
-
// display: 'flex',
|
|
6379
|
-
// flexDirection: 'row',
|
|
6380
|
-
// flexWrap: 'wrap',
|
|
6381
|
-
// width: '100%',
|
|
6382
|
-
// height: '70vh',
|
|
6383
|
-
// gap: 16,
|
|
6384
|
-
// overflow: 'hidden',
|
|
6385
|
-
// }}
|
|
6386
|
-
// >
|
|
6387
|
-
// {/* ------------------ MAP AREA (flex: 3) ------------------ */}
|
|
6388
|
-
// <div
|
|
6389
|
-
// style={{
|
|
6390
|
-
// flex: '3 1 60%',
|
|
6391
|
-
// borderRadius: 8,
|
|
6392
|
-
// overflow: 'hidden',
|
|
6393
|
-
// boxShadow: '0 1px 4px rgba(0,0,0,0.15)',
|
|
6394
|
-
// minWidth: '320px',
|
|
6395
|
-
// }}
|
|
6396
|
-
// >
|
|
6397
|
-
// <CoordinateMapContainer
|
|
6398
|
-
// center={mapCenterPosition}
|
|
6399
|
-
// zoom={markerCoordinate ? 12 : DEFAULT_ZOOM}
|
|
6400
|
-
// style={{ width: '100%', height: '100%' }}
|
|
6401
|
-
// scrollWheelZoom={!disabled}
|
|
6402
|
-
// >
|
|
6403
|
-
// <TileLayer
|
|
6404
|
-
// attribution="© OpenStreetMap contributors"
|
|
6405
|
-
// url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
6406
|
-
// />
|
|
6407
|
-
// {safeAllowedAreaGeoJson && (
|
|
6408
|
-
// <>
|
|
6409
|
-
// <LeafletGeoJSON
|
|
6410
|
-
// data={safeAllowedAreaGeoJson as any}
|
|
6411
|
-
// style={(feature: any) => {
|
|
6412
|
-
// const isMulti =
|
|
6413
|
-
// feature?.geometry?.type === 'MultiPolygon' ||
|
|
6414
|
-
// safeAllowedAreaGeoJson.type === 'MultiPolygon';
|
|
6415
|
-
// // Consistent DHIS2-like palette
|
|
6416
|
-
// const strokeColor = isMulti ? '#E67E22' : '#1976D2';
|
|
6417
|
-
// const fillColor = isMulti ? '#FAD7A0' : '#BBDEFB';
|
|
6418
|
-
// return {
|
|
6419
|
-
// color: strokeColor,
|
|
6420
|
-
// weight: 2,
|
|
6421
|
-
// opacity: 0.9,
|
|
6422
|
-
// fillColor,
|
|
6423
|
-
// fillOpacity: 0.3,
|
|
6424
|
-
// dashArray: '4 4',
|
|
6425
|
-
// };
|
|
6426
|
-
// }}
|
|
6427
|
-
// />
|
|
6428
|
-
// <AutoFitToBoundary boundary={safeAllowedAreaGeoJson} />
|
|
6429
|
-
// </>
|
|
6430
|
-
// )}
|
|
6431
|
-
// <RecenterOnCoordinate coordinate={markerCoordinate} />
|
|
6432
|
-
// {markerCoordinate && (
|
|
6433
|
-
// <Marker
|
|
6434
|
-
// position={[markerCoordinate.lat, markerCoordinate.lng]}
|
|
6435
|
-
// />
|
|
6436
|
-
// )}
|
|
6437
|
-
// <MapClickListener
|
|
6438
|
-
// disabled={disabled}
|
|
6439
|
-
// onCoordinateSelected={handleMapClick}
|
|
6440
|
-
// />
|
|
6441
|
-
// </CoordinateMapContainer>
|
|
6442
|
-
// </div>
|
|
6443
|
-
// {/* ------------------ INFO PANEL (flex: 1) ------------------ */}
|
|
6444
|
-
// <div
|
|
6445
|
-
// style={{
|
|
6446
|
-
// flex: '1 1 30%',
|
|
6447
|
-
// display: 'flex',
|
|
6448
|
-
// flexDirection: 'column',
|
|
6449
|
-
// gap: 12,
|
|
6450
|
-
// minWidth: '280px',
|
|
6451
|
-
// overflowY: 'auto',
|
|
6452
|
-
// maxHeight: '70vh',
|
|
6453
|
-
// }}
|
|
6454
|
-
// >
|
|
6455
|
-
// {markerCoordinate && (
|
|
6456
|
-
// <>
|
|
6457
|
-
// {safeAllowedAreaGeoJson ? (
|
|
6458
|
-
// isOutsideAllowedArea ? (
|
|
6459
|
-
// requireWithinArea ? (
|
|
6460
|
-
// // 🟥 ERROR: Outside & not permitted
|
|
6461
|
-
// <NoticeBox
|
|
6462
|
-
// error
|
|
6463
|
-
// title="Outside Allowed Area (Not Permitted)"
|
|
6464
|
-
// >
|
|
6465
|
-
// <p>
|
|
6466
|
-
// The selected location is outside{' '}
|
|
6467
|
-
// <b>{allowedAreaDisplayName}</b>. You must pick a
|
|
6468
|
-
// point <b>within</b> the boundary to continue.
|
|
6469
|
-
// </p>
|
|
6470
|
-
// </NoticeBox>
|
|
6471
|
-
// ) : (
|
|
6472
|
-
// // 🟧 WARNING: Outside but allowed
|
|
6473
|
-
// <NoticeBox title="Outside Allowed Area (Review Required)">
|
|
6474
|
-
// <p>
|
|
6475
|
-
// The selected point is outside{' '}
|
|
6476
|
-
// <b>{allowedAreaDisplayName}</b>. Click{' '}
|
|
6477
|
-
// <b>Use Selected Location</b> again to confirm this
|
|
6478
|
-
// is intentional.
|
|
6479
|
-
// </p>
|
|
6480
|
-
// <p>
|
|
6481
|
-
// Saving out-of-boundary data may cause reporting
|
|
6482
|
-
// inconsistencies.
|
|
6483
|
-
// </p>
|
|
6484
|
-
// </NoticeBox>
|
|
6485
|
-
// )
|
|
6486
|
-
// ) : (
|
|
6487
|
-
// // 🟩 VALID: Inside allowed area
|
|
6488
|
-
// <NoticeBox valid title="Valid Location within Boundary">
|
|
6489
|
-
// <p>
|
|
6490
|
-
// <strong>Selected Location:</strong>
|
|
6491
|
-
// <br />
|
|
6492
|
-
// Lat {markerCoordinate.lat.toFixed(5)}, Lon{' '}
|
|
6493
|
-
// {markerCoordinate.lng.toFixed(5)}
|
|
6494
|
-
// </p>
|
|
6495
|
-
// {captureAccuracy && (
|
|
6496
|
-
// <p>
|
|
6497
|
-
// <strong>Accuracy Info:</strong>
|
|
6498
|
-
// <br />
|
|
6499
|
-
// Radius: {accuracyKmValue ?? 'N/A'} km (
|
|
6500
|
-
// {accuracySource === 'DEVICE'
|
|
6501
|
-
// ? 'device-derived'
|
|
6502
|
-
// : accuracySource === 'MANUAL'
|
|
6503
|
-
// ? 'manual'
|
|
6504
|
-
// : 'unknown'}
|
|
6505
|
-
// )<br />
|
|
6506
|
-
// Max allowed: {maxAccuracyKm} km
|
|
6507
|
-
// </p>
|
|
6508
|
-
// )}
|
|
6509
|
-
// <p>
|
|
6510
|
-
// Pan or zoom to find the correct point. Click once to
|
|
6511
|
-
// drop the marker. Ensure it's within{' '}
|
|
6512
|
-
// {allowedAreaDisplayName}.
|
|
6513
|
-
// </p>
|
|
6514
|
-
// </NoticeBox>
|
|
6515
|
-
// )
|
|
6516
|
-
// ) : (
|
|
6517
|
-
// // ℹ️ INFO: When no boundary provided
|
|
6518
|
-
// <NoticeBox title="Selected Location">
|
|
6519
|
-
// <p>
|
|
6520
|
-
// <strong>Selected Location:</strong>
|
|
6521
|
-
// <br />
|
|
6522
|
-
// Lat {markerCoordinate.lat.toFixed(5)}, Lon{' '}
|
|
6523
|
-
// {markerCoordinate.lng.toFixed(5)}
|
|
6524
|
-
// </p>
|
|
6525
|
-
// {captureAccuracy && (
|
|
6526
|
-
// <p>
|
|
6527
|
-
// <strong>Accuracy Info:</strong>
|
|
6528
|
-
// <br />
|
|
6529
|
-
// Radius: {accuracyKmValue ?? 'N/A'} km (
|
|
6530
|
-
// {accuracySource === 'DEVICE'
|
|
6531
|
-
// ? 'device-derived'
|
|
6532
|
-
// : accuracySource === 'MANUAL'
|
|
6533
|
-
// ? 'manual'
|
|
6534
|
-
// : 'unknown'}
|
|
6535
|
-
// )<br />
|
|
6536
|
-
// Max allowed: {maxAccuracyKm} km
|
|
6537
|
-
// </p>
|
|
6538
|
-
// )}
|
|
6539
|
-
// <p>
|
|
6540
|
-
// Pan or zoom to find the correct point. Click once to
|
|
6541
|
-
// drop the marker.
|
|
6542
|
-
// </p>
|
|
6543
|
-
// </NoticeBox>
|
|
6544
|
-
// )}
|
|
6545
|
-
// </>
|
|
6546
|
-
// )}
|
|
6547
|
-
// </div>
|
|
6548
|
-
// </div>
|
|
6549
|
-
// </ModalContent>
|
|
6550
|
-
// <ModalActions>
|
|
6551
|
-
// <div style={{ display: 'flex', gap: 12 }}>
|
|
6552
|
-
// <Button onClick={handleCloseMapDialog} secondary>
|
|
6553
|
-
// Cancel
|
|
6554
|
-
// </Button>
|
|
6555
|
-
// <Button
|
|
6556
|
-
// primary
|
|
6557
|
-
// onClick={handleConfirmFromMap}
|
|
6558
|
-
// disabled={!pendingCoordinate || disabled || !canConfirm}
|
|
6559
|
-
// >
|
|
6560
|
-
// {requireWithinArea && isOutsideAllowedArea
|
|
6561
|
-
// ? 'Pick a point inside boundary'
|
|
6562
|
-
// : !requireWithinArea &&
|
|
6563
|
-
// isOutsideAllowedArea &&
|
|
6564
|
-
// !outsideAreaAcknowledged
|
|
6565
|
-
// ? 'Review & Acknowledge'
|
|
6566
|
-
// : 'Use Selected Location'}
|
|
6567
|
-
// </Button>
|
|
6568
|
-
// </div>
|
|
6569
|
-
// </ModalActions>
|
|
6570
|
-
// </Modal>
|
|
6571
|
-
// <Modal
|
|
6572
|
-
// onClose={handleCloseMapDialog}
|
|
6573
|
-
// position="middle"
|
|
6574
|
-
// className="coordinate-modal"
|
|
6575
|
-
// >
|
|
6576
|
-
// <ModalTitle>
|
|
6577
|
-
// <div
|
|
6578
|
-
// style={{
|
|
6579
|
-
// display: 'flex',
|
|
6580
|
-
// justifyContent: 'space-between',
|
|
6581
|
-
// alignItems: 'center',
|
|
6582
|
-
// padding: '0 8px',
|
|
6583
|
-
// }}
|
|
6584
|
-
// >
|
|
6585
|
-
// <span style={{ fontWeight: 600, fontSize: 16 }}>
|
|
6586
|
-
// 🗺️ Select Location on Street Map
|
|
6587
|
-
// </span>
|
|
6588
|
-
// <span style={{ fontSize: 12, color: '#555' }}>
|
|
6589
|
-
// Click or tap on the map to choose coordinates
|
|
6590
|
-
// </span>
|
|
6591
|
-
// </div>
|
|
6592
|
-
// </ModalTitle>
|
|
6593
|
-
// <ModalContent>
|
|
6594
|
-
// <div
|
|
6595
|
-
// style={{
|
|
6596
|
-
// display: 'flex',
|
|
6597
|
-
// flexDirection: 'row',
|
|
6598
|
-
// flexWrap: 'wrap',
|
|
6599
|
-
// width: '100%',
|
|
6600
|
-
// height: '70vh',
|
|
6601
|
-
// gap: 16,
|
|
6602
|
-
// overflow: 'hidden',
|
|
6603
|
-
// }}
|
|
6604
|
-
// >
|
|
6605
|
-
// {/* ------------------ MAP AREA ------------------ */}
|
|
6606
|
-
// <div
|
|
6607
|
-
// style={{
|
|
6608
|
-
// flex: '3 1 60%',
|
|
6609
|
-
// borderRadius: 8,
|
|
6610
|
-
// overflow: 'hidden',
|
|
6611
|
-
// boxShadow: '0 1px 4px rgba(0,0,0,0.15)',
|
|
6612
|
-
// minWidth: '320px',
|
|
6613
|
-
// }}
|
|
6614
|
-
// >
|
|
6615
|
-
// <CoordinateMapContainer
|
|
6616
|
-
// center={mapCenterPosition}
|
|
6617
|
-
// zoom={markerCoordinate ? 12 : DEFAULT_ZOOM}
|
|
6618
|
-
// style={{ width: '100%', height: '100%' }}
|
|
6619
|
-
// scrollWheelZoom={!disabled}
|
|
6620
|
-
// >
|
|
6621
|
-
// <TileLayer
|
|
6622
|
-
// attribution="© OpenStreetMap contributors"
|
|
6623
|
-
// url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
6624
|
-
// />
|
|
6625
|
-
// {safeAllowedAreaGeoJson && (
|
|
6626
|
-
// <>
|
|
6627
|
-
// <LeafletGeoJSON
|
|
6628
|
-
// data={safeAllowedAreaGeoJson as any}
|
|
6629
|
-
// style={(feature: any) => {
|
|
6630
|
-
// const isMulti =
|
|
6631
|
-
// feature?.geometry?.type === 'MultiPolygon' ||
|
|
6632
|
-
// safeAllowedAreaGeoJson.type === 'MultiPolygon';
|
|
6633
|
-
// const strokeColor = isMulti ? '#E67E22' : '#1976D2';
|
|
6634
|
-
// const fillColor = isMulti ? '#FAD7A0' : '#BBDEFB';
|
|
6635
|
-
// return {
|
|
6636
|
-
// color: strokeColor,
|
|
6637
|
-
// weight: 2,
|
|
6638
|
-
// opacity: 0.9,
|
|
6639
|
-
// fillColor,
|
|
6640
|
-
// fillOpacity: 0.3,
|
|
6641
|
-
// dashArray: '4 4',
|
|
6642
|
-
// };
|
|
6643
|
-
// }}
|
|
6644
|
-
// />
|
|
6645
|
-
// <AutoFitToBoundary boundary={safeAllowedAreaGeoJson} />
|
|
6646
|
-
// </>
|
|
6647
|
-
// )}
|
|
6648
|
-
// <RecenterOnCoordinate coordinate={markerCoordinate} />
|
|
6649
|
-
// {markerCoordinate && (
|
|
6650
|
-
// <Marker
|
|
6651
|
-
// position={[markerCoordinate.lat, markerCoordinate.lng]}
|
|
6652
|
-
// />
|
|
6653
|
-
// )}
|
|
6654
|
-
// <MapClickListener
|
|
6655
|
-
// disabled={disabled}
|
|
6656
|
-
// onCoordinateSelected={handleMapClick}
|
|
6657
|
-
// />
|
|
6658
|
-
// </CoordinateMapContainer>
|
|
6659
|
-
// </div>
|
|
6660
|
-
// {/* ------------------ SIDE INFO PANEL ------------------ */}
|
|
6661
|
-
// <div
|
|
6662
|
-
// style={{
|
|
6663
|
-
// flex: '1 1 30%',
|
|
6664
|
-
// display: 'flex',
|
|
6665
|
-
// flexDirection: 'column',
|
|
6666
|
-
// gap: 12,
|
|
6667
|
-
// minWidth: '280px',
|
|
6668
|
-
// overflowY: 'auto',
|
|
6669
|
-
// maxHeight: '70vh',
|
|
6670
|
-
// }}
|
|
6671
|
-
// >
|
|
6672
|
-
// {/* 🟦 Top Info Box (always visible) */}
|
|
6673
|
-
// <NoticeBox title="Selected Location Info">
|
|
6674
|
-
// {markerCoordinate ? (
|
|
6675
|
-
// <div
|
|
6676
|
-
// style={{
|
|
6677
|
-
// display: 'flex',
|
|
6678
|
-
// flexDirection: 'column',
|
|
6679
|
-
// gap: 6,
|
|
6680
|
-
// }}
|
|
6681
|
-
// >
|
|
6682
|
-
// <div>
|
|
6683
|
-
// <strong>Selected Location:</strong>
|
|
6684
|
-
// <br />
|
|
6685
|
-
// Lat {markerCoordinate.lat.toFixed(5)}, Lon{' '}
|
|
6686
|
-
// {markerCoordinate.lng.toFixed(5)}
|
|
6687
|
-
// </div>
|
|
6688
|
-
// {captureAccuracy && (
|
|
6689
|
-
// <div>
|
|
6690
|
-
// <strong>Accuracy Info:</strong>
|
|
6691
|
-
// <br />
|
|
6692
|
-
// Radius: {accuracyKmValue ?? 'N/A'} km (
|
|
6693
|
-
// {accuracySource === 'DEVICE'
|
|
6694
|
-
// ? 'device-derived'
|
|
6695
|
-
// : accuracySource === 'MANUAL'
|
|
6696
|
-
// ? 'manual'
|
|
6697
|
-
// : 'unknown'}
|
|
6698
|
-
// )<br />
|
|
6699
|
-
// Max allowed: {maxAccuracyKm} km
|
|
6700
|
-
// </div>
|
|
6701
|
-
// )}
|
|
6702
|
-
// </div>
|
|
6703
|
-
// ) : (
|
|
6704
|
-
// <p>
|
|
6705
|
-
// No location selected yet. Click on the map to drop a
|
|
6706
|
-
// marker.
|
|
6707
|
-
// </p>
|
|
6708
|
-
// )}
|
|
6709
|
-
// </NoticeBox>
|
|
6710
|
-
// {/* ✅ Valid or ❌ Error */}
|
|
6711
|
-
// {markerCoordinate &&
|
|
6712
|
-
// safeAllowedAreaGeoJson &&
|
|
6713
|
-
// (isOutsideAllowedArea ? (
|
|
6714
|
-
// <NoticeBox
|
|
6715
|
-
// error
|
|
6716
|
-
// title="Outside Allowed Area (Not Permitted)"
|
|
6717
|
-
// >
|
|
6718
|
-
// <p>
|
|
6719
|
-
// The selected location is <strong>outside</strong> the
|
|
6720
|
-
// required boundary (<b>{allowedAreaDisplayName}</b>).
|
|
6721
|
-
// </p>
|
|
6722
|
-
// <p>
|
|
6723
|
-
// Please pick a point <b>within</b> the Shehia boundary.
|
|
6724
|
-
// </p>
|
|
6725
|
-
// </NoticeBox>
|
|
6726
|
-
// ) : (
|
|
6727
|
-
// <NoticeBox valid title="Valid Location within Boundary">
|
|
6728
|
-
// <p>
|
|
6729
|
-
// ✅ You have successfully selected a valid location
|
|
6730
|
-
// inside {allowedAreaDisplayName}.
|
|
6731
|
-
// </p>
|
|
6732
|
-
// </NoticeBox>
|
|
6733
|
-
// ))}
|
|
6734
|
-
// {/* 🟦 Bottom Instructions (always visible) */}
|
|
6735
|
-
// <NoticeBox title="Instructions">
|
|
6736
|
-
// <p style={{ marginBottom: 0, lineHeight: 1.5 }}>
|
|
6737
|
-
// Pan or zoom to find the correct point. Click once to drop
|
|
6738
|
-
// the marker. Ensure it's within <b>Shehia boundary</b>.
|
|
6739
|
-
// </p>
|
|
6740
|
-
// </NoticeBox>
|
|
6741
|
-
// </div>
|
|
6742
|
-
// </div>
|
|
6743
|
-
// </ModalContent>
|
|
6744
|
-
// <ModalActions>
|
|
6745
|
-
// <div
|
|
6746
|
-
// style={{
|
|
6747
|
-
// display: 'flex',
|
|
6748
|
-
// justifyContent: 'space-between',
|
|
6749
|
-
// alignItems: 'center',
|
|
6750
|
-
// width: '100%',
|
|
6751
|
-
// }}
|
|
6752
|
-
// >
|
|
6753
|
-
// <div style={{ fontSize: 13, color: '#666' }}>
|
|
6754
|
-
// <span>💡 Tip:</span> You can click again to reposition your
|
|
6755
|
-
// marker.
|
|
6756
|
-
// </div>
|
|
6757
|
-
// <div style={{ display: 'flex', gap: 12 }}>
|
|
6758
|
-
// <Button onClick={handleCloseMapDialog} secondary>
|
|
6759
|
-
// Cancel
|
|
6760
|
-
// </Button>
|
|
6761
|
-
// <Button
|
|
6762
|
-
// primary
|
|
6763
|
-
// onClick={handleConfirmFromMap}
|
|
6764
|
-
// disabled={!pendingCoordinate || disabled || !canConfirm}
|
|
6765
|
-
// >
|
|
6766
|
-
// {requireWithinArea && isOutsideAllowedArea
|
|
6767
|
-
// ? 'Pick a point inside boundary'
|
|
6768
|
-
// : !requireWithinArea &&
|
|
6769
|
-
// isOutsideAllowedArea &&
|
|
6770
|
-
// !outsideAreaAcknowledged
|
|
6771
|
-
// ? 'Review & Acknowledge'
|
|
6772
|
-
// : 'Use Selected Location'}
|
|
6773
|
-
// </Button>
|
|
6774
|
-
// </div>
|
|
6775
|
-
// </div>
|
|
6776
|
-
// </ModalActions>
|
|
6777
|
-
// </Modal>
|
|
6778
|
-
React__default.createElement(Modal$1, { onClose: handleCloseMapDialog, position: "middle", className: "coordinate-modal" },
|
|
6371
|
+
isMapDialogOpen && (React__default.createElement(Modal$1, { onClose: handleCloseMapDialog, position: "middle", className: "coordinate-modal" },
|
|
6779
6372
|
React__default.createElement(ModalTitle$1, null,
|
|
6780
6373
|
React__default.createElement("div", { style: {
|
|
6781
6374
|
display: 'flex',
|
|
@@ -8011,7 +7604,7 @@ const OrgUnitFormField = (props) => {
|
|
|
8011
7604
|
onSelectOrgUnit(event.id);
|
|
8012
7605
|
} })));
|
|
8013
7606
|
};
|
|
8014
|
-
return (config && (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false },
|
|
7607
|
+
return (config && (React__default.createElement(Provider, { config: config, userInfo: d2.currentUser, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false },
|
|
8015
7608
|
React__default.createElement("div", null,
|
|
8016
7609
|
label && (React__default.createElement("div", { className: classes.orgUnitFieldLabel },
|
|
8017
7610
|
React__default.createElement("span", null, label),
|
|
@@ -8049,6 +7642,7 @@ class FieldConfig {
|
|
|
8049
7642
|
constructor(config) {
|
|
8050
7643
|
this.hideLabel = config?.hideLabel ?? false;
|
|
8051
7644
|
this.inputWidth = config?.inputWidth || '100%';
|
|
7645
|
+
this.fieldDescriptionLabel = config?.fieldDescriptionLabel ?? 'Description';
|
|
8052
7646
|
}
|
|
8053
7647
|
}
|
|
8054
7648
|
|
|
@@ -8367,6 +7961,45 @@ class FieldCascadeUtil {
|
|
|
8367
7961
|
}
|
|
8368
7962
|
}
|
|
8369
7963
|
|
|
7964
|
+
const FormFieldLabel = (props) => {
|
|
7965
|
+
const { field, fieldConfig } = props;
|
|
7966
|
+
if (fieldConfig?.hideLabel) {
|
|
7967
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
7968
|
+
}
|
|
7969
|
+
const [backgroundColor, setBackgroundColor] = useState('transparent');
|
|
7970
|
+
const [open, setOpen] = useState(false);
|
|
7971
|
+
const buttonRef = useRef(null);
|
|
7972
|
+
return (React__default.createElement("div", null,
|
|
7973
|
+
React__default.createElement("div", { style: {
|
|
7974
|
+
display: 'flex',
|
|
7975
|
+
alignContent: 'center',
|
|
7976
|
+
gap: 12,
|
|
7977
|
+
marginBottom: 4,
|
|
7978
|
+
} },
|
|
7979
|
+
React__default.createElement(Legend, { required: field.required }, field.label),
|
|
7980
|
+
field.description && (React__default.createElement("div", { ref: buttonRef, style: {
|
|
7981
|
+
cursor: 'pointer',
|
|
7982
|
+
backgroundColor,
|
|
7983
|
+
display: 'flex',
|
|
7984
|
+
alignItems: 'center',
|
|
7985
|
+
padding: 1,
|
|
7986
|
+
borderRadius: 2,
|
|
7987
|
+
marginBottom: 2,
|
|
7988
|
+
}, onMouseEnter: () => setBackgroundColor(colors$1.grey200), onMouseLeave: () => setBackgroundColor('transparent'), onClick: () => setOpen(!open) },
|
|
7989
|
+
React__default.createElement(IconInfo16, null)))),
|
|
7990
|
+
open && (React__default.createElement(Popover, { arrow: true, reference: buttonRef, elevation: "0px 0px 1px rgba(33,41,52,0.1), 0px 4px 6px -1px rgba(33,41,52,0.1), 0px 2px 4px -1px rgba(33,41,52,0.06)", maxWidth: 400, placement: "top", onClickOutside: () => setOpen(false) },
|
|
7991
|
+
React__default.createElement("div", { style: {
|
|
7992
|
+
padding: 8,
|
|
7993
|
+
} },
|
|
7994
|
+
React__default.createElement("div", { style: {
|
|
7995
|
+
fontSize: 14,
|
|
7996
|
+
marginBottom: 4,
|
|
7997
|
+
} }, fieldConfig?.fieldDescriptionLabel ?? 'Description'),
|
|
7998
|
+
React__default.createElement("small", { style: {
|
|
7999
|
+
color: colors$1.grey700,
|
|
8000
|
+
} }, field.description))))));
|
|
8001
|
+
};
|
|
8002
|
+
|
|
8370
8003
|
// Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
|
|
8371
8004
|
// Use of this source code is governed by a BSD-style
|
|
8372
8005
|
// license that can be found in the LICENSE file.
|
|
@@ -9003,25 +8636,41 @@ class BaseFormFieldComponent extends ReactWrapperModule {
|
|
|
9003
8636
|
super(...arguments);
|
|
9004
8637
|
this.ngZone = inject(NgZone);
|
|
9005
8638
|
this.fieldType = 'textbox';
|
|
9006
|
-
this.field = input.required(
|
|
9007
|
-
|
|
9008
|
-
this.
|
|
9009
|
-
|
|
9010
|
-
this.
|
|
9011
|
-
|
|
8639
|
+
this.field = input.required(/* @ts-ignore */
|
|
8640
|
+
...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
8641
|
+
this.fieldError = input(/* @ts-ignore */
|
|
8642
|
+
...(ngDevMode ? [undefined, { debugName: "fieldError" }] : /* istanbul ignore next */ []));
|
|
8643
|
+
this.fieldConfig = input(new FieldConfig(), /* @ts-ignore */
|
|
8644
|
+
...(ngDevMode ? [{ debugName: "fieldConfig" }] : /* istanbul ignore next */ []));
|
|
8645
|
+
this.programRuleOptions = input(/* @ts-ignore */
|
|
8646
|
+
...(ngDevMode ? [undefined, { debugName: "programRuleOptions" }] : /* istanbul ignore next */ []));
|
|
8647
|
+
this.runtimeOptions = input(/* @ts-ignore */
|
|
8648
|
+
...(ngDevMode ? [undefined, { debugName: "runtimeOptions" }] : /* istanbul ignore next */ []));
|
|
8649
|
+
this.form = model.required(/* @ts-ignore */
|
|
8650
|
+
...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
|
|
9012
8651
|
// kept for compatibility (even if not used directly here)
|
|
9013
|
-
this.isValid = input(
|
|
9014
|
-
|
|
9015
|
-
this.
|
|
9016
|
-
|
|
8652
|
+
this.isValid = input(/* @ts-ignore */
|
|
8653
|
+
...(ngDevMode ? [undefined, { debugName: "isValid" }] : /* istanbul ignore next */ []));
|
|
8654
|
+
this.isValueAssigned = input(/* @ts-ignore */
|
|
8655
|
+
...(ngDevMode ? [undefined, { debugName: "isValueAssigned" }] : /* istanbul ignore next */ []));
|
|
8656
|
+
this.dataId = input(/* @ts-ignore */
|
|
8657
|
+
...(ngDevMode ? [undefined, { debugName: "dataId" }] : /* istanbul ignore next */ []));
|
|
8658
|
+
this.customOrgUnitRoots = input(/* @ts-ignore */
|
|
8659
|
+
...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : /* istanbul ignore next */ []));
|
|
9017
8660
|
// Cascade
|
|
9018
|
-
this.optionCascadeConfigs = input([],
|
|
9019
|
-
|
|
9020
|
-
this.
|
|
9021
|
-
|
|
8661
|
+
this.optionCascadeConfigs = input([], /* @ts-ignore */
|
|
8662
|
+
...(ngDevMode ? [{ debugName: "optionCascadeConfigs" }] : /* istanbul ignore next */ []));
|
|
8663
|
+
this.optionCascadeConfigMap = input({}, /* @ts-ignore */
|
|
8664
|
+
...(ngDevMode ? [{ debugName: "optionCascadeConfigMap" }] : /* istanbul ignore next */ []));
|
|
8665
|
+
this.coordinatePickerGeoConfig = input(/* @ts-ignore */
|
|
8666
|
+
...(ngDevMode ? [undefined, { debugName: "coordinatePickerGeoConfig" }] : /* istanbul ignore next */ []));
|
|
8667
|
+
this.fieldControlKeyById = input({}, /* @ts-ignore */
|
|
8668
|
+
...(ngDevMode ? [{ debugName: "fieldControlKeyById" }] : /* istanbul ignore next */ []));
|
|
9022
8669
|
// kept for compatibility (used by FileUploadField)
|
|
9023
|
-
this.program = input(
|
|
9024
|
-
|
|
8670
|
+
this.program = input(/* @ts-ignore */
|
|
8671
|
+
...(ngDevMode ? [undefined, { debugName: "program" }] : /* istanbul ignore next */ []));
|
|
8672
|
+
this.value = model(/* @ts-ignore */
|
|
8673
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
9025
8674
|
this.value$ = toObservable(this.value);
|
|
9026
8675
|
this.isValueAssigned$ = toObservable(this.isValueAssigned);
|
|
9027
8676
|
this.fieldError$ = toObservable(this.fieldError);
|
|
@@ -9031,11 +8680,13 @@ class BaseFormFieldComponent extends ReactWrapperModule {
|
|
|
9031
8680
|
const cfg = this.fieldConfig();
|
|
9032
8681
|
const f = this.field();
|
|
9033
8682
|
return cfg?.hideLabel ? undefined : f.label;
|
|
9034
|
-
},
|
|
8683
|
+
}, /* @ts-ignore */
|
|
8684
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
9035
8685
|
this.placeholder = computed(() => {
|
|
9036
8686
|
const f = this.field();
|
|
9037
8687
|
return f?.placeholder || `Enter ${f?.label || 'value'}`;
|
|
9038
|
-
},
|
|
8688
|
+
}, /* @ts-ignore */
|
|
8689
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
9039
8690
|
this.InputField = this.#getInputField();
|
|
9040
8691
|
this.update = new EventEmitter();
|
|
9041
8692
|
this.immediateUpdate = new EventEmitter();
|
|
@@ -9212,6 +8863,8 @@ class BaseFormFieldComponent extends ReactWrapperModule {
|
|
|
9212
8863
|
}, []);
|
|
9213
8864
|
useEffect(() => {
|
|
9214
8865
|
const sub = this.runtimeOptions$.subscribe((options) => {
|
|
8866
|
+
if (!this.field().dependentField)
|
|
8867
|
+
return;
|
|
9215
8868
|
if (!options)
|
|
9216
8869
|
return;
|
|
9217
8870
|
setFilteredOptions(options);
|
|
@@ -9410,8 +9063,9 @@ class BaseFormFieldComponent extends ReactWrapperModule {
|
|
|
9410
9063
|
const ctrl = this.#getCurrentFieldControl(fg);
|
|
9411
9064
|
ctrl?.setValue(newValue);
|
|
9412
9065
|
this.update.emit({ form: fg, value: newValue });
|
|
9413
|
-
if (currentField.
|
|
9414
|
-
currentField.controlType === '
|
|
9066
|
+
if (currentField.dependentField &&
|
|
9067
|
+
(currentField.controlType === 'dropdown' ||
|
|
9068
|
+
currentField.controlType === 'multi-dropdown')) {
|
|
9415
9069
|
this.runtimeOptionsChange.emit({
|
|
9416
9070
|
field: currentField,
|
|
9417
9071
|
options: filteredOptions ?? [],
|
|
@@ -9428,6 +9082,31 @@ class BaseFormFieldComponent extends ReactWrapperModule {
|
|
|
9428
9082
|
setTouched(true);
|
|
9429
9083
|
};
|
|
9430
9084
|
// UI renderer
|
|
9085
|
+
const formFieldLabel = (props) => {
|
|
9086
|
+
const { field, fieldConfig } = props;
|
|
9087
|
+
if (fieldConfig?.hideLabel) {
|
|
9088
|
+
return null;
|
|
9089
|
+
}
|
|
9090
|
+
const [backgroundColor, setBackgroundColor] = useState('transparent');
|
|
9091
|
+
return (React__default.createElement("div", { style: {
|
|
9092
|
+
display: 'flex',
|
|
9093
|
+
alignContent: 'center',
|
|
9094
|
+
gap: '12px',
|
|
9095
|
+
} },
|
|
9096
|
+
React__default.createElement(Legend, { required: this.field().required }, this.label()),
|
|
9097
|
+
React__default.createElement("div", { style: {
|
|
9098
|
+
cursor: 'pointer',
|
|
9099
|
+
backgroundColor,
|
|
9100
|
+
display: 'flex',
|
|
9101
|
+
alignItems: 'center',
|
|
9102
|
+
padding: 1,
|
|
9103
|
+
borderRadius: 2,
|
|
9104
|
+
marginBottom: 2,
|
|
9105
|
+
}, onMouseEnter: () => setBackgroundColor(colors$1.grey200), onMouseLeave: () => setBackgroundColor('transparent'), onClick: () => {
|
|
9106
|
+
console.log('Clicked here');
|
|
9107
|
+
} },
|
|
9108
|
+
React__default.createElement(IconInfo16, null))));
|
|
9109
|
+
};
|
|
9431
9110
|
const formFieldContent = () => {
|
|
9432
9111
|
const f = this.field();
|
|
9433
9112
|
switch (f.controlType) {
|
|
@@ -9452,7 +9131,9 @@ class BaseFormFieldComponent extends ReactWrapperModule {
|
|
|
9452
9131
|
" to save the coordinates."))),
|
|
9453
9132
|
React__default.createElement(CoordinatePickerField, { error: hasError, validationText: validationError, required: f.required, name: f.id, disabled: disabled, label: this.label(), value: value, geoConfig: this.coordinatePickerGeoConfig(), onChange: (newValue) => onValueChange(newValue), onBlur: () => checkValueUniqueness() })));
|
|
9454
9133
|
case 'textarea':
|
|
9455
|
-
return (React__default.createElement(
|
|
9134
|
+
return (React__default.createElement(FieldSet, null,
|
|
9135
|
+
React__default.createElement(FormFieldLabel, { field: this.field(), fieldConfig: this.fieldConfig() }),
|
|
9136
|
+
React__default.createElement(TextAreaField, { error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, required: f.required, name: f.id, disabled: disabled, rows: 5, placeholder: this.placeholder(), value: value, onChange: (event) => onValueChange(event.value), onBlur: () => checkValueUniqueness() })));
|
|
9456
9137
|
case 'org-unit':
|
|
9457
9138
|
return (React__default.createElement(OrgUnitFormField, { label: this.label(), key: f.id, field: f.id, required: f.required, disabled: disabled, customOrgUnitRoots: this.customOrgUnitRoots(), orgUnitRoots: f.extension?.orgUnitRoots, onSelectOrgUnit: (selectedOrgUnit) => onValueChange(selectedOrgUnit), selected: value }));
|
|
9458
9139
|
case 'transfer':
|
|
@@ -9460,12 +9141,16 @@ class BaseFormFieldComponent extends ReactWrapperModule {
|
|
|
9460
9141
|
case 'checkbox':
|
|
9461
9142
|
return (React__default.createElement(Checkbox, { checked: Boolean(value), error: hasError, label: this.label(), name: f.id, disabled: disabled, onChange: (event) => onValueChange(event.checked), onBlur: () => checkValueUniqueness() }));
|
|
9462
9143
|
case 'dropdown':
|
|
9463
|
-
return (React__default.createElement(
|
|
9144
|
+
return (React__default.createElement(FieldSet, null,
|
|
9145
|
+
React__default.createElement(FormFieldLabel, { field: this.field(), fieldConfig: this.fieldConfig() }),
|
|
9146
|
+
React__default.createElement(SingleSelectField, { filterable: (filteredOptions || []).length > 5, clearable: true, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, required: f.required, className: "select", selected: value, onChange: (event) => onValueChange(event.selected), onBlur: () => checkValueUniqueness() }, (filteredOptions || []).map((option) => (React__default.createElement(SingleSelectOption, { key: this.#getOptionKey(option), label: option.label ?? option.name ?? option.displayName, value: option.value ?? option.id }))))));
|
|
9464
9147
|
case 'multi-dropdown':
|
|
9465
|
-
return (React__default.createElement(
|
|
9466
|
-
|
|
9467
|
-
|
|
9468
|
-
|
|
9148
|
+
return (React__default.createElement(FieldSet, null,
|
|
9149
|
+
React__default.createElement(FormFieldLabel, { field: this.field(), fieldConfig: this.fieldConfig() }),
|
|
9150
|
+
React__default.createElement(MultiSelectField, { clearText: "Clear", clearable: true, empty: "No data found", filterable: (filteredOptions || []).length > 5, filterPlaceholder: "Type to filter options", error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, disabled: disabled, required: f.required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
|
|
9151
|
+
const selectedValue = (event.selected || []).join(',');
|
|
9152
|
+
onValueChange(selectedValue);
|
|
9153
|
+
}, onBlur: () => checkValueUniqueness(), selected: arrayValue }, (filteredOptions || []).map((option) => (React__default.createElement(MultiSelectOption, { key: this.#getOptionKey(option), label: option.label ?? option.name ?? option.displayName, value: option.value ?? option.id }))))));
|
|
9469
9154
|
case 'date':
|
|
9470
9155
|
case 'date-time': {
|
|
9471
9156
|
const isDateTimeField = f.type === 'date-time';
|
|
@@ -9484,15 +9169,19 @@ class BaseFormFieldComponent extends ReactWrapperModule {
|
|
|
9484
9169
|
: f.max
|
|
9485
9170
|
? this.pickEarlierDateLimit(this.formatValueForHtmlInputFromDhis(String(f.max), isDateTimeField), this.getNowForHtmlDateInput(isDateTimeField))
|
|
9486
9171
|
: this.getNowForHtmlDateInput(isDateTimeField);
|
|
9487
|
-
return (React__default.createElement(
|
|
9488
|
-
|
|
9489
|
-
|
|
9490
|
-
|
|
9172
|
+
return (React__default.createElement(FieldSet, null,
|
|
9173
|
+
React__default.createElement(FormFieldLabel, { field: this.field(), fieldConfig: this.fieldConfig() }),
|
|
9174
|
+
React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: inputType, inputWidth: inputWidth, required: f.required, name: f.id, min: htmlMin, max: htmlMax, placeholder: this.placeholder(), value: htmlValue, readOnly: disabled, onChange: ({ value: newValue }) => {
|
|
9175
|
+
const normalized = this.normalizeDateValueFromHtmlInput(newValue, isDateTimeField, allowFutureDate);
|
|
9176
|
+
onValueChange(normalized);
|
|
9177
|
+
}, onBlur: () => checkValueUniqueness() })));
|
|
9491
9178
|
}
|
|
9492
9179
|
case 'file':
|
|
9493
9180
|
return (React__default.createElement(FileUploadField, { label: this.label(), id: f.id, hasError: hasError, required: f.required, validationText: validationError, performUpload: true, uploadUrl: 'fileResources', onUploadSuccess: (fileId) => onValueChange(fileId), onRemoveFile: () => onValueChange(''), extension: f?.extension, value: value, metaType: f.metaType, dataId: this.dataId(), program: this.program() }));
|
|
9494
9181
|
default:
|
|
9495
|
-
return (React__default.createElement(
|
|
9182
|
+
return (React__default.createElement(FieldSet, null,
|
|
9183
|
+
React__default.createElement(FormFieldLabel, { field: this.field(), fieldConfig: this.fieldConfig() }),
|
|
9184
|
+
React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: f.type, inputWidth: inputWidth, required: f.required, name: f.id, min: f.min?.toString(), max: f.max?.toString(), placeholder: this.placeholder(), value: value, readOnly: disabled, onChange: (event) => onValueChange(event.value), onBlur: () => checkValueUniqueness() })));
|
|
9496
9185
|
}
|
|
9497
9186
|
};
|
|
9498
9187
|
return (React__default.createElement(React__default.Fragment, null,
|
|
@@ -9637,12 +9326,12 @@ class BaseFormFieldComponent extends ReactWrapperModule {
|
|
|
9637
9326
|
return false;
|
|
9638
9327
|
}
|
|
9639
9328
|
}
|
|
9640
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9641
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
9329
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BaseFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
9330
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: BaseFormFieldComponent, isStandalone: true, inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldError: { classPropertyName: "fieldError", publicName: "fieldError", isSignal: true, isRequired: false, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: false, transformFunction: null }, programRuleOptions: { classPropertyName: "programRuleOptions", publicName: "programRuleOptions", isSignal: true, isRequired: false, transformFunction: null }, runtimeOptions: { classPropertyName: "runtimeOptions", publicName: "runtimeOptions", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isValueAssigned: { classPropertyName: "isValueAssigned", publicName: "isValueAssigned", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, optionCascadeConfigs: { classPropertyName: "optionCascadeConfigs", publicName: "optionCascadeConfigs", isSignal: true, isRequired: false, transformFunction: null }, optionCascadeConfigMap: { classPropertyName: "optionCascadeConfigMap", publicName: "optionCascadeConfigMap", isSignal: true, isRequired: false, transformFunction: null }, coordinatePickerGeoConfig: { classPropertyName: "coordinatePickerGeoConfig", publicName: "coordinatePickerGeoConfig", isSignal: true, isRequired: false, transformFunction: null }, fieldControlKeyById: { classPropertyName: "fieldControlKeyById", publicName: "fieldControlKeyById", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", value: "valueChange", update: "update", immediateUpdate: "immediateUpdate", runtimeOptionsChange: "runtimeOptionsChange" }, usesInheritance: true, ngImport: i0 }); }
|
|
9642
9331
|
}
|
|
9643
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BaseFormFieldComponent, decorators: [{
|
|
9644
9333
|
type: Directive
|
|
9645
|
-
}], propDecorators: { update: [{
|
|
9334
|
+
}], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], fieldError: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldError", required: false }] }], fieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfig", required: false }] }], programRuleOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "programRuleOptions", required: false }] }], runtimeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "runtimeOptions", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }, { type: i0.Output, args: ["formChange"] }], isValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValid", required: false }] }], isValueAssigned: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValueAssigned", required: false }] }], dataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataId", required: false }] }], customOrgUnitRoots: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOrgUnitRoots", required: false }] }], optionCascadeConfigs: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionCascadeConfigs", required: false }] }], optionCascadeConfigMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionCascadeConfigMap", required: false }] }], coordinatePickerGeoConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordinatePickerGeoConfig", required: false }] }], fieldControlKeyById: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldControlKeyById", required: false }] }], program: [{ type: i0.Input, args: [{ isSignal: true, alias: "program", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], update: [{
|
|
9646
9335
|
type: Output
|
|
9647
9336
|
}], immediateUpdate: [{
|
|
9648
9337
|
type: Output
|
|
@@ -9651,51 +9340,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
9651
9340
|
}] } });
|
|
9652
9341
|
|
|
9653
9342
|
class FormFieldItemComponent extends BaseFormFieldComponent {
|
|
9654
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9655
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
9343
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormFieldItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
9344
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: FormFieldItemComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field-item", usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
9656
9345
|
}
|
|
9657
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormFieldItemComponent, decorators: [{
|
|
9658
9347
|
type: Component,
|
|
9659
9348
|
args: [{
|
|
9660
9349
|
selector: 'ng-dhis2-ui-form-field-item',
|
|
9661
9350
|
template: `<ng-content></ng-content>`,
|
|
9351
|
+
changeDetection: ChangeDetectionStrategy.Eager,
|
|
9662
9352
|
standalone: false,
|
|
9663
9353
|
}]
|
|
9664
9354
|
}] });
|
|
9665
9355
|
|
|
9666
9356
|
class FormFieldComponent {
|
|
9667
9357
|
constructor() {
|
|
9668
|
-
this.field = input.required(
|
|
9669
|
-
|
|
9670
|
-
this.
|
|
9671
|
-
|
|
9672
|
-
this.
|
|
9673
|
-
|
|
9674
|
-
this.
|
|
9675
|
-
|
|
9676
|
-
this.
|
|
9677
|
-
|
|
9358
|
+
this.field = input.required(/* @ts-ignore */
|
|
9359
|
+
...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
9360
|
+
this.fieldConfig = input.required(/* @ts-ignore */
|
|
9361
|
+
...(ngDevMode ? [{ debugName: "fieldConfig" }] : /* istanbul ignore next */ []));
|
|
9362
|
+
this.isCheckBoxButton = input(/* @ts-ignore */
|
|
9363
|
+
...(ngDevMode ? [undefined, { debugName: "isCheckBoxButton" }] : /* istanbul ignore next */ []));
|
|
9364
|
+
this.fieldClass = input('', /* @ts-ignore */
|
|
9365
|
+
...(ngDevMode ? [{ debugName: "fieldClass" }] : /* istanbul ignore next */ []));
|
|
9366
|
+
this.programRuleActions = input([], /* @ts-ignore */
|
|
9367
|
+
...(ngDevMode ? [{ debugName: "programRuleActions" }] : /* istanbul ignore next */ []));
|
|
9368
|
+
this.dataEntities = input({}, /* @ts-ignore */
|
|
9369
|
+
...(ngDevMode ? [{ debugName: "dataEntities" }] : /* istanbul ignore next */ []));
|
|
9370
|
+
this.minDate = input(/* @ts-ignore */
|
|
9371
|
+
...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
9372
|
+
this.maxDate = input(new Date(), /* @ts-ignore */
|
|
9373
|
+
...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
9374
|
+
this.dataId = input(/* @ts-ignore */
|
|
9375
|
+
...(ngDevMode ? [undefined, { debugName: "dataId" }] : /* istanbul ignore next */ []));
|
|
9376
|
+
this.customOrgUnitRoots = input(/* @ts-ignore */
|
|
9377
|
+
...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : /* istanbul ignore next */ []));
|
|
9678
9378
|
//TODO: FIND BETTER WAY TO PASS PROGRAM TO FIELDS i.e field extensions
|
|
9679
|
-
this.program = input(
|
|
9680
|
-
|
|
9681
|
-
this.
|
|
9682
|
-
|
|
9683
|
-
this.
|
|
9379
|
+
this.program = input(/* @ts-ignore */
|
|
9380
|
+
...(ngDevMode ? [undefined, { debugName: "program" }] : /* istanbul ignore next */ []));
|
|
9381
|
+
this.optionCascadeConfigs = input([], /* @ts-ignore */
|
|
9382
|
+
...(ngDevMode ? [{ debugName: "optionCascadeConfigs" }] : /* istanbul ignore next */ []));
|
|
9383
|
+
this.optionCascadeConfigMap = input({}, /* @ts-ignore */
|
|
9384
|
+
...(ngDevMode ? [{ debugName: "optionCascadeConfigMap" }] : /* istanbul ignore next */ []));
|
|
9385
|
+
this.coordinatePickerGeoConfig = input(/* @ts-ignore */
|
|
9386
|
+
...(ngDevMode ? [undefined, { debugName: "coordinatePickerGeoConfig" }] : /* istanbul ignore next */ []));
|
|
9387
|
+
this.fieldControlKeyById = input({}, /* @ts-ignore */
|
|
9388
|
+
...(ngDevMode ? [{ debugName: "fieldControlKeyById" }] : /* istanbul ignore next */ []));
|
|
9684
9389
|
this.color = 'primary';
|
|
9685
9390
|
this.fieldUpdate = new EventEmitter();
|
|
9686
9391
|
this.immediateFieldUpdate = new EventEmitter();
|
|
9687
9392
|
this.runtimeOptionChange = new EventEmitter();
|
|
9688
|
-
this.value = signal('',
|
|
9689
|
-
|
|
9690
|
-
this.
|
|
9393
|
+
this.value = signal('', /* @ts-ignore */
|
|
9394
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
9395
|
+
this.runtimeError = signal(undefined, /* @ts-ignore */
|
|
9396
|
+
...(ngDevMode ? [{ debugName: "runtimeError" }] : /* istanbul ignore next */ []));
|
|
9397
|
+
this.programRuleOptions = signal(undefined, /* @ts-ignore */
|
|
9398
|
+
...(ngDevMode ? [{ debugName: "programRuleOptions" }] : /* istanbul ignore next */ []));
|
|
9691
9399
|
this._runtimeOptions = [];
|
|
9692
9400
|
this.runtimeOptions = [];
|
|
9693
9401
|
this.fieldFilterControl = new FormControl();
|
|
9694
9402
|
this._onDestroy = new Subject();
|
|
9695
|
-
this.isValueAssigned = signal(false,
|
|
9403
|
+
this.isValueAssigned = signal(false, /* @ts-ignore */
|
|
9404
|
+
...(ngDevMode ? [{ debugName: "isValueAssigned" }] : /* istanbul ignore next */ []));
|
|
9696
9405
|
this.ruleProcessor = effect(() => {
|
|
9697
9406
|
this.#processRules(this.programRuleActions());
|
|
9698
|
-
},
|
|
9407
|
+
}, /* @ts-ignore */
|
|
9408
|
+
...(ngDevMode ? [{ debugName: "ruleProcessor" }] : /* istanbul ignore next */ []));
|
|
9699
9409
|
}
|
|
9700
9410
|
ngOnChanges(changes) {
|
|
9701
9411
|
if (changes && changes['dataEntities'] && this.field()?.dependentField) {
|
|
@@ -9889,15 +9599,15 @@ class FormFieldComponent {
|
|
|
9889
9599
|
this._runtimeOptions = [...options];
|
|
9890
9600
|
this.runtimeOptions = [...options];
|
|
9891
9601
|
}
|
|
9892
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9893
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
9602
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9603
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FormFieldComponent, isStandalone: false, selector: "ng-dhis2-ui-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, isCheckBoxButton: { classPropertyName: "isCheckBoxButton", publicName: "isCheckBoxButton", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", 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 }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", 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 }, optionCascadeConfigs: { classPropertyName: "optionCascadeConfigs", publicName: "optionCascadeConfigs", isSignal: true, isRequired: false, transformFunction: null }, optionCascadeConfigMap: { classPropertyName: "optionCascadeConfigMap", publicName: "optionCascadeConfigMap", isSignal: true, isRequired: false, transformFunction: null }, coordinatePickerGeoConfig: { classPropertyName: "coordinatePickerGeoConfig", publicName: "coordinatePickerGeoConfig", isSignal: true, isRequired: false, transformFunction: null }, fieldControlKeyById: { classPropertyName: "fieldControlKeyById", publicName: "fieldControlKeyById", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldUpdate: "fieldUpdate", immediateFieldUpdate: "immediateFieldUpdate", runtimeOptionChange: "runtimeOptionChange" }, usesOnChanges: true, ngImport: i0, template: "@if (field(); as formField) {\n @let fieldError = runtimeError();\n @let isAssigned = isValueAssigned();\n @let fieldConfigValue = fieldConfig();\n @let cascadeConfigs = optionCascadeConfigs();\n @let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n\n <div class=\"form-field-item\">\n <ng-dhis2-ui-form-field-item\n [field]=\"getDisplayField(formField)\"\n [fieldError]=\"fieldError\"\n [isValueAssigned]=\"isAssigned\"\n [fieldConfig]=\"fieldConfigValue\"\n [(form)]=\"form\"\n [programRuleOptions]=\"programRuleOptions()\"\n [runtimeOptions]=\"runtimeOptions\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigs]=\"cascadeConfigs\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [fieldControlKeyById]=\"fieldControlKeyById()\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [program]=\"program()\"\n [value]=\"value()\"\n (update)=\"onValueChange()\"\n (immediateUpdate)=\"onImmediateChange($event)\"\n (runtimeOptionsChange)=\"onRuntimeOptionsChange($event)\"\n />\n </div>\n}\n", styles: [".form-field-item{margin-bottom:16px}\n"], dependencies: [{ kind: "component", type: FormFieldItemComponent, selector: "ng-dhis2-ui-form-field-item" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
9894
9604
|
}
|
|
9895
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
9896
9606
|
type: Component,
|
|
9897
|
-
args: [{ selector: 'ng-dhis2-ui-form-field', standalone: false, template: "@if (field(); as formField) {\n @let fieldError = runtimeError();\n @let isAssigned = isValueAssigned();\n @let fieldConfigValue = fieldConfig();\n @let cascadeConfigs = optionCascadeConfigs();\n @let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n\n <div class=\"form-field-item\">\n <ng-dhis2-ui-form-field-item\n [field]=\"getDisplayField(formField)\"\n [fieldError]=\"fieldError\"\n [isValueAssigned]=\"isAssigned\"\n [fieldConfig]=\"fieldConfigValue\"\n [(form)]=\"form\"\n [programRuleOptions]=\"programRuleOptions()\"\n [runtimeOptions]=\"runtimeOptions\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigs]=\"cascadeConfigs\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [fieldControlKeyById]=\"fieldControlKeyById()\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [program]=\"program()\"\n [value]=\"value()\"\n (update)=\"onValueChange()\"\n (immediateUpdate)=\"onImmediateChange($event)\"\n (runtimeOptionsChange)=\"onRuntimeOptionsChange($event)\"\n />\n </div>\n}\n", styles: [".form-field-item{margin-bottom:16px}\n"] }]
|
|
9898
|
-
}], ctorParameters: () => [], propDecorators: { form: [{
|
|
9607
|
+
args: [{ selector: 'ng-dhis2-ui-form-field', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (field(); as formField) {\n @let fieldError = runtimeError();\n @let isAssigned = isValueAssigned();\n @let fieldConfigValue = fieldConfig();\n @let cascadeConfigs = optionCascadeConfigs();\n @let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n\n <div class=\"form-field-item\">\n <ng-dhis2-ui-form-field-item\n [field]=\"getDisplayField(formField)\"\n [fieldError]=\"fieldError\"\n [isValueAssigned]=\"isAssigned\"\n [fieldConfig]=\"fieldConfigValue\"\n [(form)]=\"form\"\n [programRuleOptions]=\"programRuleOptions()\"\n [runtimeOptions]=\"runtimeOptions\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigs]=\"cascadeConfigs\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [fieldControlKeyById]=\"fieldControlKeyById()\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [program]=\"program()\"\n [value]=\"value()\"\n (update)=\"onValueChange()\"\n (immediateUpdate)=\"onImmediateChange($event)\"\n (runtimeOptionsChange)=\"onRuntimeOptionsChange($event)\"\n />\n </div>\n}\n", styles: [".form-field-item{margin-bottom:16px}\n"] }]
|
|
9608
|
+
}], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], fieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfig", required: true }] }], form: [{
|
|
9899
9609
|
type: Input
|
|
9900
|
-
}], fieldUpdate: [{
|
|
9610
|
+
}], isCheckBoxButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCheckBoxButton", required: false }] }], fieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClass", required: false }] }], programRuleActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "programRuleActions", required: false }] }], dataEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataEntities", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataId", required: false }] }], customOrgUnitRoots: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOrgUnitRoots", required: false }] }], program: [{ type: i0.Input, args: [{ isSignal: true, alias: "program", required: false }] }], optionCascadeConfigs: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionCascadeConfigs", required: false }] }], optionCascadeConfigMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionCascadeConfigMap", required: false }] }], coordinatePickerGeoConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordinatePickerGeoConfig", required: false }] }], fieldControlKeyById: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldControlKeyById", required: false }] }], fieldUpdate: [{
|
|
9901
9611
|
type: Output
|
|
9902
9612
|
}], immediateFieldUpdate: [{
|
|
9903
9613
|
type: Output
|
|
@@ -9948,408 +9658,85 @@ class FormValue {
|
|
|
9948
9658
|
}
|
|
9949
9659
|
}
|
|
9950
9660
|
|
|
9951
|
-
class
|
|
9952
|
-
|
|
9953
|
-
|
|
9954
|
-
|
|
9955
|
-
|
|
9956
|
-
|
|
9957
|
-
|
|
9958
|
-
|
|
9661
|
+
class FormField {
|
|
9662
|
+
constructor(options = {}) {
|
|
9663
|
+
this.value = options.value || '';
|
|
9664
|
+
this.key = options.key || '';
|
|
9665
|
+
this.referenceKey = options.referenceKey || '';
|
|
9666
|
+
this.id = options.id || '';
|
|
9667
|
+
this.code = options.code || '';
|
|
9668
|
+
this.label = options.label || '';
|
|
9669
|
+
this.description = options.description;
|
|
9670
|
+
this.required = !!options.required;
|
|
9671
|
+
this.order = options.order === undefined ? 1 : options.order;
|
|
9672
|
+
this.controlType = options.controlType;
|
|
9673
|
+
this.type = options.type || '';
|
|
9674
|
+
this.options = options.options || [];
|
|
9675
|
+
this.disabled = options.disabled ?? false;
|
|
9676
|
+
this.placeholder = options.placeholder || '';
|
|
9677
|
+
this.min = options.min;
|
|
9678
|
+
this.max = this.setMax(options);
|
|
9679
|
+
this.maxLength = options.maxLength;
|
|
9680
|
+
this.hidden = options.hidden || false;
|
|
9681
|
+
this.unique = options.unique || false;
|
|
9682
|
+
this.generated = options.generated || false;
|
|
9683
|
+
this.isDataElement = options.isDataElement;
|
|
9684
|
+
this.isAttribute = options.isAttribute;
|
|
9685
|
+
this.isOrgUnit = options.isOrgUnit;
|
|
9686
|
+
this.isGeometryField = options.isGeometryField;
|
|
9687
|
+
this.isEnrollmentDate = options.isEnrollmentDate;
|
|
9688
|
+
this.event = options.event;
|
|
9689
|
+
this.programStage = options.programStage;
|
|
9690
|
+
this.program = options.program;
|
|
9691
|
+
this.trackedEntityInstance = options.trackedEntityInstance;
|
|
9692
|
+
this.trackedEntityType = options.trackedEntityType;
|
|
9693
|
+
this.hasOptions = options.hasOptions;
|
|
9694
|
+
this.dependentField = options.dependentField;
|
|
9695
|
+
this.fieldOptionsDependsOn = options.fieldOptionsDependsOn;
|
|
9696
|
+
this.displayInList = options.displayInList;
|
|
9697
|
+
this.displayInReports = options.displayInReports;
|
|
9698
|
+
this.searchable = options.searchable;
|
|
9699
|
+
this.unique = options.unique;
|
|
9700
|
+
this.metaType = options.metaType;
|
|
9701
|
+
this.stepId = options.stepId;
|
|
9702
|
+
this.availableOptionsLabel =
|
|
9703
|
+
options.availableOptionsLabel ?? 'Available options';
|
|
9704
|
+
this.selectedOptionsLabel =
|
|
9705
|
+
options.availableOptionsLabel ?? 'Selected options';
|
|
9706
|
+
this.allowFutureDate = options.allowFutureDate;
|
|
9707
|
+
this.extension = options.extension;
|
|
9708
|
+
}
|
|
9709
|
+
setMax(field) {
|
|
9710
|
+
if (field.controlType !== 'date') {
|
|
9711
|
+
return field.max;
|
|
9959
9712
|
}
|
|
9960
|
-
if (
|
|
9961
|
-
return
|
|
9713
|
+
if (field.allowFutureDate) {
|
|
9714
|
+
return undefined;
|
|
9962
9715
|
}
|
|
9963
|
-
return '
|
|
9716
|
+
return format(new Date(), 'yyyy-MM-dd');
|
|
9964
9717
|
}
|
|
9718
|
+
}
|
|
9719
|
+
|
|
9720
|
+
let Boolean$1 = class Boolean extends FormField {
|
|
9965
9721
|
constructor() {
|
|
9966
|
-
|
|
9967
|
-
this.
|
|
9968
|
-
this.fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : []));
|
|
9969
|
-
this.form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
9970
|
-
this.isFormHorizontal = input(false, ...(ngDevMode ? [{ debugName: "isFormHorizontal" }] : []));
|
|
9971
|
-
this.showSaveButton = input(false, ...(ngDevMode ? [{ debugName: "showSaveButton" }] : []));
|
|
9972
|
-
this.fieldsData = input(...(ngDevMode ? [undefined, { debugName: "fieldsData" }] : []));
|
|
9973
|
-
this.formMetaData = input(...(ngDevMode ? [undefined, { debugName: "formMetaData" }] : []));
|
|
9974
|
-
this.programEntryFormMetaData = input(...(ngDevMode ? [undefined, { debugName: "programEntryFormMetaData" }] : []));
|
|
9975
|
-
this.fieldClass = input('', ...(ngDevMode ? [{ debugName: "fieldClass" }] : []));
|
|
9976
|
-
this.shouldRenderAsCheckBoxesButton = input(false, ...(ngDevMode ? [{ debugName: "shouldRenderAsCheckBoxesButton" }] : []));
|
|
9977
|
-
this.programRuleActions = input([], ...(ngDevMode ? [{ debugName: "programRuleActions" }] : []));
|
|
9978
|
-
this.dataEntities = input(undefined, ...(ngDevMode ? [{ debugName: "dataEntities" }] : []));
|
|
9979
|
-
this.dataId = input(...(ngDevMode ? [undefined, { debugName: "dataId" }] : []));
|
|
9980
|
-
this.customOrgUnitRoots = input(...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : []));
|
|
9981
|
-
this.optionCascadeConfigs = input([], ...(ngDevMode ? [{ debugName: "optionCascadeConfigs" }] : []));
|
|
9982
|
-
this.coordinatePickerGeoConfig = input(...(ngDevMode ? [undefined, { debugName: "coordinatePickerGeoConfig" }] : []));
|
|
9983
|
-
/** ✅ Build map once when configs change */
|
|
9984
|
-
this.optionCascadeConfigMap = computed(() => {
|
|
9985
|
-
const configs = this.optionCascadeConfigs() ?? [];
|
|
9986
|
-
// (optional) guard if you later widen union types
|
|
9987
|
-
const optionPathConfigs = configs.filter((c) => c?.kind === CascadeKind.OPTIONS_PATH);
|
|
9988
|
-
// util returns: Readonly<Record<string, OptionsPathCascadeConfig>>
|
|
9989
|
-
return FieldCascadeUtil.buildConfigByChildFieldId(optionPathConfigs);
|
|
9990
|
-
}, ...(ngDevMode ? [{ debugName: "optionCascadeConfigMap" }] : []));
|
|
9991
|
-
//TODO: FIND BETTER WAY TO PASS PROGRAM TO FIELDS i.e field extensions
|
|
9992
|
-
this.program = input(...(ngDevMode ? [undefined, { debugName: "program" }] : []));
|
|
9993
|
-
this.collapsibleSections = input(false, ...(ngDevMode ? [{ debugName: "collapsibleSections" }] : []));
|
|
9994
|
-
this.openSectionId = signal(null, ...(ngDevMode ? [{ debugName: "openSectionId" }] : []));
|
|
9995
|
-
this.configuration = computed(() => {
|
|
9996
|
-
if (!this.formConfig()) {
|
|
9997
|
-
return new FormConfig({
|
|
9998
|
-
direction: this.isFormHorizontal() ? 'horizontal' : 'vertical',
|
|
9999
|
-
});
|
|
10000
|
-
}
|
|
10001
|
-
return this.formConfig();
|
|
10002
|
-
}, ...(ngDevMode ? [{ debugName: "configuration" }] : []));
|
|
10003
|
-
this.formUpdate = new EventEmitter();
|
|
10004
|
-
this.formValidityUpdate = new EventEmitter();
|
|
10005
|
-
// get sanitizedFields(): IFormField<string>[] {
|
|
10006
|
-
// return (this.fields() || []).filter((field: any) => {
|
|
10007
|
-
// if (field.hidden) {
|
|
10008
|
-
// return false;
|
|
10009
|
-
// }
|
|
10010
|
-
// const type = field.isDataElement
|
|
10011
|
-
// ? 'dataElement'
|
|
10012
|
-
// : 'trackedEntityAttribute';
|
|
10013
|
-
// const elementItem = field[type] || field;
|
|
10014
|
-
// if (!elementItem) {
|
|
10015
|
-
// return true;
|
|
10016
|
-
// }
|
|
10017
|
-
// const availableRule = head(
|
|
10018
|
-
// (this.programRuleActions() || []).filter((ruleAction) => {
|
|
10019
|
-
// return (
|
|
10020
|
-
// ruleAction.field === elementItem.id &&
|
|
10021
|
-
// ruleAction.actionType === 'HIDEFIELD'
|
|
10022
|
-
// );
|
|
10023
|
-
// })
|
|
10024
|
-
// );
|
|
10025
|
-
// if (!availableRule) {
|
|
10026
|
-
// return true;
|
|
10027
|
-
// }
|
|
10028
|
-
// return availableRule.actionType !== 'HIDEFIELD';
|
|
10029
|
-
// });
|
|
10030
|
-
// }
|
|
10031
|
-
this.fieldControlKeyById = computed(() => {
|
|
10032
|
-
const list = this.fields() ?? []; // or sanitizedFields
|
|
10033
|
-
const map = Object.create(null);
|
|
10034
|
-
for (const f of list) {
|
|
10035
|
-
if (!f?.id)
|
|
10036
|
-
continue;
|
|
10037
|
-
// Prefer explicit key if present, else fall back to id.
|
|
10038
|
-
map[f.id] = f.key || f.id;
|
|
10039
|
-
}
|
|
10040
|
-
return map;
|
|
10041
|
-
}, ...(ngDevMode ? [{ debugName: "fieldControlKeyById" }] : []));
|
|
10042
|
-
// get sanitizedFields(): IFormField<string>[] {
|
|
10043
|
-
// return (this.fields() || []).filter(
|
|
10044
|
-
// (field) => !this.isFieldHiddenByRules(field)
|
|
10045
|
-
// );
|
|
10046
|
-
// }
|
|
10047
|
-
// getVisibleSectionFields(section: any): IFormField<string>[] {
|
|
10048
|
-
// const rawFields: IFormField<string>[] = section?.formFields ?? [];
|
|
10049
|
-
// return rawFields.filter((field) => !this.isFieldHiddenByRules(field));
|
|
10050
|
-
// }
|
|
10051
|
-
// private isFieldHiddenByRules(field: IFormField<string>): boolean {
|
|
10052
|
-
// if (field.hidden) {
|
|
10053
|
-
// return true;
|
|
10054
|
-
// }
|
|
10055
|
-
// const type = (field as any).isDataElement
|
|
10056
|
-
// ? 'dataElement'
|
|
10057
|
-
// : 'trackedEntityAttribute';
|
|
10058
|
-
// const elementItem = (field as any)[type] || field;
|
|
10059
|
-
// if (!elementItem) return false;
|
|
10060
|
-
// const rule = (this.programRuleActions() || []).find(
|
|
10061
|
-
// (ruleAction) =>
|
|
10062
|
-
// ruleAction.field === elementItem.id &&
|
|
10063
|
-
// ruleAction.actionType === 'HIDEFIELD'
|
|
10064
|
-
// );
|
|
10065
|
-
// return !!rule;
|
|
10066
|
-
// }
|
|
10067
|
-
// 1) Precompute the hidden field ids from programRuleActions()
|
|
10068
|
-
this.hiddenFieldIds = computed(() => {
|
|
10069
|
-
const actions = this.programRuleActions() || [];
|
|
10070
|
-
return new Set(actions
|
|
10071
|
-
.filter((ruleAction) => ruleAction.actionType === 'HIDEFIELD')
|
|
10072
|
-
.map((ruleAction) => ruleAction.field)
|
|
10073
|
-
.filter((id) => !!id));
|
|
10074
|
-
}, ...(ngDevMode ? [{ debugName: "hiddenFieldIds" }] : []));
|
|
10075
|
-
this.ruleProcessor = effect(() => {
|
|
10076
|
-
this.#processRules(this.programRuleActions());
|
|
10077
|
-
}, ...(ngDevMode ? [{ debugName: "ruleProcessor" }] : []));
|
|
10078
|
-
effect(() => {
|
|
10079
|
-
if (!this.collapsibleSections())
|
|
10080
|
-
return;
|
|
10081
|
-
const meta = this.programEntryFormMetaData?.();
|
|
10082
|
-
const sections = Array.isArray(meta?.programStageSections) &&
|
|
10083
|
-
meta.programStageSections.length > 0
|
|
10084
|
-
? meta.programStageSections
|
|
10085
|
-
: Array.isArray(meta?.sections) && meta.sections.length > 0
|
|
10086
|
-
? meta.sections
|
|
10087
|
-
: [];
|
|
10088
|
-
if (!sections.length)
|
|
10089
|
-
return;
|
|
10090
|
-
if (this.openSectionId() == null) {
|
|
10091
|
-
const firstId = sections[0]?.id ?? 0;
|
|
10092
|
-
this.openSectionId.set(firstId);
|
|
10093
|
-
}
|
|
10094
|
-
});
|
|
9722
|
+
super(...arguments);
|
|
9723
|
+
this.controlType = 'boolean';
|
|
10095
9724
|
}
|
|
10096
|
-
|
|
10097
|
-
|
|
10098
|
-
|
|
10099
|
-
|
|
10100
|
-
|
|
10101
|
-
|
|
10102
|
-
return sections.map((s) => ({
|
|
10103
|
-
id: s?.id ?? s?.uid ?? crypto?.randomUUID?.() ?? String(Math.random()),
|
|
10104
|
-
name: s?.name ?? s?.displayName ?? 'Section',
|
|
10105
|
-
description: s?.description ?? '',
|
|
10106
|
-
formFields: s?.formFields ?? [],
|
|
10107
|
-
}));
|
|
9725
|
+
};
|
|
9726
|
+
|
|
9727
|
+
class CheckBox extends FormField {
|
|
9728
|
+
constructor() {
|
|
9729
|
+
super(...arguments);
|
|
9730
|
+
this.controlType = 'checkbox';
|
|
10108
9731
|
}
|
|
10109
|
-
|
|
10110
|
-
|
|
10111
|
-
|
|
10112
|
-
|
|
10113
|
-
|
|
10114
|
-
|
|
10115
|
-
|
|
10116
|
-
|
|
10117
|
-
getSections() {
|
|
10118
|
-
const meta = this.programEntryFormMetaData?.();
|
|
10119
|
-
if (!meta)
|
|
10120
|
-
return [];
|
|
10121
|
-
// Normalize to array only if it's valid and non-empty
|
|
10122
|
-
if (Array.isArray(meta.programStageSections) &&
|
|
10123
|
-
meta.programStageSections.length > 0) {
|
|
10124
|
-
return meta.programStageSections;
|
|
10125
|
-
}
|
|
10126
|
-
if (Array.isArray(meta.sections) && meta.sections.length > 0) {
|
|
10127
|
-
return meta.sections;
|
|
10128
|
-
}
|
|
10129
|
-
return [];
|
|
10130
|
-
}
|
|
10131
|
-
openSection(section, index) {
|
|
10132
|
-
if (!this.collapsibleSections())
|
|
10133
|
-
return;
|
|
10134
|
-
const sections = this.getSections();
|
|
10135
|
-
if (!sections.length)
|
|
10136
|
-
return;
|
|
10137
|
-
const clickedId = section?.id ?? index;
|
|
10138
|
-
const currentId = this.openSectionId();
|
|
10139
|
-
if (currentId === clickedId) {
|
|
10140
|
-
// clicked the currently open section → open the next one (wrap to first)
|
|
10141
|
-
const nextIndex = (index + 1) % sections.length;
|
|
10142
|
-
// ToDo: Get Backward | Un-comment Below
|
|
10143
|
-
// const nextIndex = index === sections.length - 1 ? 0 : index + 1;
|
|
10144
|
-
const nextId = sections[nextIndex]?.id ?? nextIndex;
|
|
10145
|
-
this.openSectionId.set(nextId);
|
|
10146
|
-
}
|
|
10147
|
-
else {
|
|
10148
|
-
// clicked a different section → open it
|
|
10149
|
-
this.openSectionId.set(clickedId);
|
|
10150
|
-
}
|
|
10151
|
-
}
|
|
10152
|
-
// NEW: helper used in template
|
|
10153
|
-
isSectionOpen(section, index) {
|
|
10154
|
-
if (!this.collapsibleSections())
|
|
10155
|
-
return true;
|
|
10156
|
-
const id = section?.id ?? index;
|
|
10157
|
-
return this.openSectionId() === id;
|
|
10158
|
-
}
|
|
10159
|
-
//TODO: To move the section visible check to a custom rule implementation for program sections
|
|
10160
|
-
isSectionVisible(section, expectedSectionType) {
|
|
10161
|
-
const sectionId = section?.id;
|
|
10162
|
-
if (!sectionId)
|
|
10163
|
-
return true;
|
|
10164
|
-
if (expectedSectionType === 'PROGRAM_SECTION') {
|
|
10165
|
-
return this.getVisibleSectionFields(section).length > 0;
|
|
10166
|
-
}
|
|
10167
|
-
const sectionActions = (this.programRuleActions() || []).filter((action) => action.section === sectionId &&
|
|
10168
|
-
action.sectionType === expectedSectionType);
|
|
10169
|
-
const hasShowSectionAction = sectionActions.some((action) => action.actionType === 'SHOWSECTION');
|
|
10170
|
-
const hasHideSectionAction = sectionActions.some((action) => action.actionType === 'HIDESECTION');
|
|
10171
|
-
return hasShowSectionAction || !hasHideSectionAction;
|
|
10172
|
-
}
|
|
10173
|
-
ngOnInit() {
|
|
10174
|
-
this.values = this.form().getRawValue();
|
|
10175
|
-
// TODO: This is uneccesary emit at this stage of execution, since nothing has changes at initiation and potentially break some of implementation that depends formUpdate, which also is triggered when there is actual change in the form apart form initial values that came with it
|
|
10176
|
-
this.formUpdate.emit(new FormValue(this.form(), this.fields()));
|
|
10177
|
-
this.formValidityUpdate.emit(new FormValue(this.form(), this.fields()).isValid);
|
|
10178
|
-
}
|
|
10179
|
-
// ngOnChanges(changes: SimpleChanges): void {
|
|
10180
|
-
// this.values = this.form.getRawValue();
|
|
10181
|
-
// }
|
|
10182
|
-
ngOnChanges(changes) {
|
|
10183
|
-
this.values = this.form().getRawValue();
|
|
10184
|
-
}
|
|
10185
|
-
#processRules(ruleActions) {
|
|
10186
|
-
ruleActions.forEach((ruleAction) => {
|
|
10187
|
-
switch (ruleAction.actionType) {
|
|
10188
|
-
case 'HIDEFIELD': {
|
|
10189
|
-
const fieldToRemove = this.fields().find((field) => field.id === ruleAction.field);
|
|
10190
|
-
if (fieldToRemove) {
|
|
10191
|
-
const form = this.form();
|
|
10192
|
-
const currentValue = form.get(fieldToRemove.key)?.value;
|
|
10193
|
-
const shouldPreserveValue = fieldToRemove.disabled || fieldToRemove.generated;
|
|
10194
|
-
if (currentValue != null && !shouldPreserveValue) {
|
|
10195
|
-
form.get(fieldToRemove.key)?.setValue(null);
|
|
10196
|
-
this.onFieldUpdate(form, fieldToRemove);
|
|
10197
|
-
}
|
|
10198
|
-
}
|
|
10199
|
-
break;
|
|
10200
|
-
}
|
|
10201
|
-
default:
|
|
10202
|
-
break;
|
|
10203
|
-
}
|
|
10204
|
-
});
|
|
10205
|
-
}
|
|
10206
|
-
onSubmit() {
|
|
10207
|
-
this.formUpdate.emit(this.form().getRawValue());
|
|
10208
|
-
this.formValidityUpdate.emit(this.form().valid);
|
|
10209
|
-
this.formValidityUpdate.emit(new FormValue(this.form(), this.fields()).isValid);
|
|
10210
|
-
}
|
|
10211
|
-
onFieldUpdate(form, field) {
|
|
10212
|
-
if (!this.showSaveButton() && form) {
|
|
10213
|
-
this.formUpdate.emit(new FormValue(this.form(), this.fields(), field));
|
|
10214
|
-
this.formValidityUpdate.emit(this.form().valid);
|
|
10215
|
-
this.values = form.getRawValue();
|
|
10216
|
-
}
|
|
10217
|
-
}
|
|
10218
|
-
onClear() {
|
|
10219
|
-
this.form().reset();
|
|
10220
|
-
}
|
|
10221
|
-
isFormInValid() {
|
|
10222
|
-
return this.form().invalid;
|
|
10223
|
-
}
|
|
10224
|
-
getOptionValue(option) {
|
|
10225
|
-
return String(option?.value ?? option?.code ?? option?.key ?? option?.id ?? '');
|
|
10226
|
-
}
|
|
10227
|
-
onRunTimeOptionUpdate(result) {
|
|
10228
|
-
if (this.fieldComponents) {
|
|
10229
|
-
const fieldToUpdate = this.fieldComponents.find((fieldComponent) => fieldComponent?.field()?.dependentField?.id === result?.field?.id);
|
|
10230
|
-
const selectedValue = String(this.form()?.value[result?.field?.id] ??
|
|
10231
|
-
this.form()?.value[result?.field?.key] ??
|
|
10232
|
-
'');
|
|
10233
|
-
const parentOption = result?.options.find((option) => this.getOptionValue(option) === selectedValue);
|
|
10234
|
-
fieldToUpdate?.onUpdateRuntimeOptions(parentOption?.options || []);
|
|
10235
|
-
}
|
|
10236
|
-
}
|
|
10237
|
-
ngOnDestroy() {
|
|
10238
|
-
this.ruleProcessor.destroy();
|
|
10239
|
-
}
|
|
10240
|
-
get sanitizedFields() {
|
|
10241
|
-
return (this.fields() || []).filter((field) => !this.isFieldHiddenByRules(field));
|
|
10242
|
-
}
|
|
10243
|
-
getVisibleSectionFields(section) {
|
|
10244
|
-
const rawFields = section?.formFields ?? [];
|
|
10245
|
-
return rawFields.filter((field) => !this.isFieldHiddenByRules(field));
|
|
10246
|
-
}
|
|
10247
|
-
isFieldHiddenByRules(field) {
|
|
10248
|
-
if (field.hidden) {
|
|
10249
|
-
return true;
|
|
10250
|
-
}
|
|
10251
|
-
const type = field.isDataElement
|
|
10252
|
-
? 'dataElement'
|
|
10253
|
-
: 'trackedEntityAttribute';
|
|
10254
|
-
const elementItem = field || field;
|
|
10255
|
-
if (!elementItem || !elementItem.id) {
|
|
10256
|
-
return false;
|
|
10257
|
-
}
|
|
10258
|
-
return this.hiddenFieldIds().has(elementItem.id);
|
|
10259
|
-
}
|
|
10260
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10261
|
-
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 }, optionCascadeConfigs: { classPropertyName: "optionCascadeConfigs", publicName: "optionCascadeConfigs", isSignal: true, isRequired: false, transformFunction: null }, coordinatePickerGeoConfig: { classPropertyName: "coordinatePickerGeoConfig", publicName: "coordinatePickerGeoConfig", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n <div class=\"form-name\">\n <h2>{{ configuration().formName }}</h2>\n </div>\n\n <div>\n {{ formMetaData().sections }}\n </div>\n <div\n *ngFor=\"let field of sanitizedFields\"\n class=\"form-field-{{ configuration().direction }}\"\n >\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [program]=\"program()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n\n @if (meta.programStageSections?.length) {\n @for (section of meta.programStageSections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n\n <div class=\"form__section-content\">\n @if (section.formFields?.length) {\n @for (field of section.formFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n @if (meta.programStageSections?.length) {\n @for (section of meta.programStageSections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n }\n\n @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n <div class=\"form__section-content\">\n @if (section.formFields?.length) {\n @for (field of section.formFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n @if (meta.sections?.length) {\n @for (section of meta.sections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n }\n \n @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n <div class=\"form__section-content\">\n \n @if (section.formFields?.length) {\n \n @for (field of section.formFields; track field?.id ?? $index) {\n <div>\n </div>\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n} @else {\n <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n <div class=\"form-name\">\n <h2>{{ configuration().formName }}</h2>\n </div>\n\n <div>\n {{ formMetaData().sections }}\n </div>\n <div\n *ngFor=\"let field of sanitizedFields\"\n class=\"form-field-{{ configuration().direction }}\"\n >\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n </form>\n} -->\n<!-- \n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n [formGroup]=\"form()\"\n class=\"form {{ configuration().directionClassName }}\"\n>\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) { @if\n (meta?.programStageSections?.length) { @for (section of\n meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n desc = section?.description; @let hasDesc = !!desc;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n @if (section?.name) { @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n [attr.aria-controls]=\"sectionId\"\n [attr.aria-describedby]=\"\n hasDesc && isSectionOpen(section, $index) ? descId : null\n \"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n @if (hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n (collapsibleSections() && hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionId\">\n @if (section.formFields?.length) { @for (field of\n getVisibleSectionFields(section); track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n \n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [optionCascadeConfigs]=\"optionCascadeConfigs()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n } } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n [formGroup]=\"form()\"\n class=\"form {{ configuration().directionClassName }}\"\n>\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n @let desc = section?.description; @let hasDesc = !!desc;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n @if (section?.name) { @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n [attr.aria-controls]=\"sectionId\"\n [attr.aria-describedby]=\"\n hasDesc && isSectionOpen(section, $index) ? descId : null\n \"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n @if (hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n (collapsibleSections() && hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n }\n <div class=\"form__section-content\" [id]=\"sectionId\">\n @if (section.formFields?.length) { @for (field of\n getVisibleSectionFields(section); track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n } } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } }\n</form>\n} @else {\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n @if (configuration()?.formName) {\n <div class=\"form-name\">\n <h2>{{ configuration()?.formName }}</h2>\n </div>\n } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n field?.id ?? $index) {\n <div class=\"form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } } @else {\n <div class=\"text-sm text-gray-500\">No fields to display.</div>\n }\n</form>\n} -->\n\n@let entryFormConfig = programEntryFormConfig();\n@let entryFormMeta = programEntryFormMetaData();\n@let uiConfig = configuration();\n@let formGroupValue = form();\n\n@let isSectionsCollapsible = collapsibleSections();\n\n@let dataEntitiesValue = dataEntities();\n@let dataEntityId = dataId();\n@let orgUnitRootIds = customOrgUnitRoots();\n\n@let cascadeConfigMap = optionCascadeConfigMap();\n@let cascadeConfigs = optionCascadeConfigs();\n\n@let ruleActionList = programRuleActions();\n@let renderAsCheckboxButtons = shouldRenderAsCheckBoxesButton();\n\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n@let entryFormFieldControlKeyById = fieldControlKeyById();\n\n@if (entryFormConfig?.formType === 'EVENT') {\n <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n </div>\n\n @if (entryFormMeta?.programStageSections?.length) {\n @for (stageSection of entryFormMeta.programStageSections; track stageSection?.id ?? $index) {\n @if (isSectionVisible(stageSection, 'PROGRAM_STAGE_SECTION')) {\n @let sectionKey = stageSection?.id ?? $index;\n @let sectionDomId = 'section-' + sectionKey;\n @let descriptionDomId = sectionDomId + '-desc';\n @let sectionDescription = stageSection?.description;\n @let hasDescription = !!sectionDescription;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n @if (stageSection?.name) {\n @if (isSectionsCollapsible) {\n @let isOpen = isSectionOpen(stageSection, $index);\n\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(stageSection, $index)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"sectionDomId\"\n [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n >\n <span class=\"form__section-title\">{{ stageSection.name }}</span>\n <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ stageSection.name }}</div>\n @if (hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n }\n }\n\n @let isOpen = !isSectionsCollapsible || isSectionOpen(stageSection, $index);\n @if (isOpen) {\n @if (isSectionsCollapsible && hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionDomId\">\n @if (stageSection?.formFields?.length) {\n @for (visibleField of getVisibleSectionFields(stageSection); track visibleField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"visibleField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [optionCascadeConfigs]=\"cascadeConfigs\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n }\n } @empty {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n\n} @else if (entryFormConfig?.formType === 'TRACKER') {\n\n <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n </div>\n\n @if (entryFormMeta?.sections?.length) {\n @for (teiSection of entryFormMeta.sections; track teiSection?.id ?? $index) {\n @if (isSectionVisible(teiSection, 'PROGRAM_SECTION')) {\n @let sectionKey = teiSection?.id ?? $index;\n @let sectionDomId = 'section-' + sectionKey;\n @let descriptionDomId = sectionDomId + '-desc';\n @let sectionDescription = teiSection?.description;\n @let hasDescription = !!sectionDescription;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n @if (teiSection?.name) {\n @if (isSectionsCollapsible) {\n @let isOpen = isSectionOpen(teiSection, $index);\n\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(teiSection, $index)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"sectionDomId\"\n [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n >\n <span class=\"form__section-title\">{{ teiSection.name }}</span>\n <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ teiSection.name }}</div>\n @if (hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n }\n }\n\n @let isOpen = !isSectionsCollapsible || isSectionOpen(teiSection, $index);\n @if (isOpen) {\n @if (isSectionsCollapsible && hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionDomId\">\n @if (teiSection?.formFields?.length) {\n @for (visibleField of getVisibleSectionFields(teiSection); track visibleField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"visibleField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n }\n } @empty {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n\n} @else {\n\n <form [formGroup]=\"formGroupValue\" [class]=\"uiConfig.directionClassName\">\n @if (uiConfig?.formName) {\n <div class=\"form-name\">\n <h2>{{ uiConfig.formName }}</h2>\n </div>\n }\n\n @if (sanitizedFields?.length) {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n }\n } @else {\n <div class=\"text-sm text-gray-500\">No fields to display.</div>\n }\n </form>\n\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate", "dataId", "customOrgUnitRoots", "program", "optionCascadeConfigs", "optionCascadeConfigMap", "coordinatePickerGeoConfig", "fieldControlKeyById"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }] }); }
|
|
10262
|
-
}
|
|
10263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormComponent, decorators: [{
|
|
10264
|
-
type: Component,
|
|
10265
|
-
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 [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [program]=\"program()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n\n @if (meta.programStageSections?.length) {\n @for (section of meta.programStageSections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n\n <div class=\"form__section-content\">\n @if (section.formFields?.length) {\n @for (field of section.formFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n @if (meta.programStageSections?.length) {\n @for (section of meta.programStageSections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n }\n\n @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n <div class=\"form__section-content\">\n @if (section.formFields?.length) {\n @for (field of section.formFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n @if (meta.sections?.length) {\n @for (section of meta.sections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n }\n \n @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n <div class=\"form__section-content\">\n \n @if (section.formFields?.length) {\n \n @for (field of section.formFields; track field?.id ?? $index) {\n <div>\n </div>\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n} @else {\n <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n <div class=\"form-name\">\n <h2>{{ configuration().formName }}</h2>\n </div>\n\n <div>\n {{ formMetaData().sections }}\n </div>\n <div\n *ngFor=\"let field of sanitizedFields\"\n class=\"form-field-{{ configuration().direction }}\"\n >\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n </form>\n} -->\n<!-- \n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n [formGroup]=\"form()\"\n class=\"form {{ configuration().directionClassName }}\"\n>\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) { @if\n (meta?.programStageSections?.length) { @for (section of\n meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n desc = section?.description; @let hasDesc = !!desc;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n @if (section?.name) { @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n [attr.aria-controls]=\"sectionId\"\n [attr.aria-describedby]=\"\n hasDesc && isSectionOpen(section, $index) ? descId : null\n \"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n @if (hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n (collapsibleSections() && hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionId\">\n @if (section.formFields?.length) { @for (field of\n getVisibleSectionFields(section); track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n \n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [optionCascadeConfigs]=\"optionCascadeConfigs()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n } } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n [formGroup]=\"form()\"\n class=\"form {{ configuration().directionClassName }}\"\n>\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n @let desc = section?.description; @let hasDesc = !!desc;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n @if (section?.name) { @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n [attr.aria-controls]=\"sectionId\"\n [attr.aria-describedby]=\"\n hasDesc && isSectionOpen(section, $index) ? descId : null\n \"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n @if (hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n (collapsibleSections() && hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n }\n <div class=\"form__section-content\" [id]=\"sectionId\">\n @if (section.formFields?.length) { @for (field of\n getVisibleSectionFields(section); track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n } } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } }\n</form>\n} @else {\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n @if (configuration()?.formName) {\n <div class=\"form-name\">\n <h2>{{ configuration()?.formName }}</h2>\n </div>\n } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n field?.id ?? $index) {\n <div class=\"form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } } @else {\n <div class=\"text-sm text-gray-500\">No fields to display.</div>\n }\n</form>\n} -->\n\n@let entryFormConfig = programEntryFormConfig();\n@let entryFormMeta = programEntryFormMetaData();\n@let uiConfig = configuration();\n@let formGroupValue = form();\n\n@let isSectionsCollapsible = collapsibleSections();\n\n@let dataEntitiesValue = dataEntities();\n@let dataEntityId = dataId();\n@let orgUnitRootIds = customOrgUnitRoots();\n\n@let cascadeConfigMap = optionCascadeConfigMap();\n@let cascadeConfigs = optionCascadeConfigs();\n\n@let ruleActionList = programRuleActions();\n@let renderAsCheckboxButtons = shouldRenderAsCheckBoxesButton();\n\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n@let entryFormFieldControlKeyById = fieldControlKeyById();\n\n@if (entryFormConfig?.formType === 'EVENT') {\n <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n </div>\n\n @if (entryFormMeta?.programStageSections?.length) {\n @for (stageSection of entryFormMeta.programStageSections; track stageSection?.id ?? $index) {\n @if (isSectionVisible(stageSection, 'PROGRAM_STAGE_SECTION')) {\n @let sectionKey = stageSection?.id ?? $index;\n @let sectionDomId = 'section-' + sectionKey;\n @let descriptionDomId = sectionDomId + '-desc';\n @let sectionDescription = stageSection?.description;\n @let hasDescription = !!sectionDescription;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n @if (stageSection?.name) {\n @if (isSectionsCollapsible) {\n @let isOpen = isSectionOpen(stageSection, $index);\n\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(stageSection, $index)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"sectionDomId\"\n [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n >\n <span class=\"form__section-title\">{{ stageSection.name }}</span>\n <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ stageSection.name }}</div>\n @if (hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n }\n }\n\n @let isOpen = !isSectionsCollapsible || isSectionOpen(stageSection, $index);\n @if (isOpen) {\n @if (isSectionsCollapsible && hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionDomId\">\n @if (stageSection?.formFields?.length) {\n @for (visibleField of getVisibleSectionFields(stageSection); track visibleField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"visibleField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [optionCascadeConfigs]=\"cascadeConfigs\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n }\n } @empty {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n\n} @else if (entryFormConfig?.formType === 'TRACKER') {\n\n <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n </div>\n\n @if (entryFormMeta?.sections?.length) {\n @for (teiSection of entryFormMeta.sections; track teiSection?.id ?? $index) {\n @if (isSectionVisible(teiSection, 'PROGRAM_SECTION')) {\n @let sectionKey = teiSection?.id ?? $index;\n @let sectionDomId = 'section-' + sectionKey;\n @let descriptionDomId = sectionDomId + '-desc';\n @let sectionDescription = teiSection?.description;\n @let hasDescription = !!sectionDescription;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n @if (teiSection?.name) {\n @if (isSectionsCollapsible) {\n @let isOpen = isSectionOpen(teiSection, $index);\n\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(teiSection, $index)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"sectionDomId\"\n [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n >\n <span class=\"form__section-title\">{{ teiSection.name }}</span>\n <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ teiSection.name }}</div>\n @if (hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n }\n }\n\n @let isOpen = !isSectionsCollapsible || isSectionOpen(teiSection, $index);\n @if (isOpen) {\n @if (isSectionsCollapsible && hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionDomId\">\n @if (teiSection?.formFields?.length) {\n @for (visibleField of getVisibleSectionFields(teiSection); track visibleField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"visibleField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n }\n } @empty {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n\n} @else {\n\n <form [formGroup]=\"formGroupValue\" [class]=\"uiConfig.directionClassName\">\n @if (uiConfig?.formName) {\n <div class=\"form-name\">\n <h2>{{ uiConfig.formName }}</h2>\n </div>\n }\n\n @if (sanitizedFields?.length) {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n }\n } @else {\n <div class=\"text-sm text-gray-500\">No fields to display.</div>\n }\n </form>\n\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"] }]
|
|
10266
|
-
}], ctorParameters: () => [], propDecorators: { formUpdate: [{
|
|
10267
|
-
type: Output
|
|
10268
|
-
}], formValidityUpdate: [{
|
|
10269
|
-
type: Output
|
|
10270
|
-
}], fieldComponents: [{
|
|
10271
|
-
type: ViewChildren,
|
|
10272
|
-
args: [FormFieldComponent]
|
|
10273
|
-
}] } });
|
|
10274
|
-
|
|
10275
|
-
class FormField {
|
|
10276
|
-
constructor(options = {}) {
|
|
10277
|
-
this.value = options.value || '';
|
|
10278
|
-
this.key = options.key || '';
|
|
10279
|
-
this.referenceKey = options.referenceKey || '';
|
|
10280
|
-
this.id = options.id || '';
|
|
10281
|
-
this.code = options.code || '';
|
|
10282
|
-
this.label = options.label || '';
|
|
10283
|
-
this.required = !!options.required;
|
|
10284
|
-
this.order = options.order === undefined ? 1 : options.order;
|
|
10285
|
-
this.controlType = options.controlType;
|
|
10286
|
-
this.type = options.type || '';
|
|
10287
|
-
this.options = options.options || [];
|
|
10288
|
-
this.disabled = options.disabled ?? false;
|
|
10289
|
-
this.placeholder = options.placeholder || '';
|
|
10290
|
-
this.min = options.min;
|
|
10291
|
-
this.max = this.setMax(options);
|
|
10292
|
-
this.maxLength = options.maxLength;
|
|
10293
|
-
this.hidden = options.hidden || false;
|
|
10294
|
-
this.unique = options.unique || false;
|
|
10295
|
-
this.generated = options.generated || false;
|
|
10296
|
-
this.isDataElement = options.isDataElement;
|
|
10297
|
-
this.isAttribute = options.isAttribute;
|
|
10298
|
-
this.isOrgUnit = options.isOrgUnit;
|
|
10299
|
-
this.isGeometryField = options.isGeometryField;
|
|
10300
|
-
this.isEnrollmentDate = options.isEnrollmentDate;
|
|
10301
|
-
this.event = options.event;
|
|
10302
|
-
this.programStage = options.programStage;
|
|
10303
|
-
this.program = options.program;
|
|
10304
|
-
this.trackedEntityInstance = options.trackedEntityInstance;
|
|
10305
|
-
this.trackedEntityType = options.trackedEntityType;
|
|
10306
|
-
this.hasOptions = options.hasOptions;
|
|
10307
|
-
this.dependentField = options.dependentField;
|
|
10308
|
-
this.fieldOptionsDependsOn = options.fieldOptionsDependsOn;
|
|
10309
|
-
this.displayInList = options.displayInList;
|
|
10310
|
-
this.displayInReports = options.displayInReports;
|
|
10311
|
-
this.searchable = options.searchable;
|
|
10312
|
-
this.unique = options.unique;
|
|
10313
|
-
this.metaType = options.metaType;
|
|
10314
|
-
this.stepId = options.stepId;
|
|
10315
|
-
this.availableOptionsLabel =
|
|
10316
|
-
options.availableOptionsLabel ?? 'Available options';
|
|
10317
|
-
this.selectedOptionsLabel =
|
|
10318
|
-
options.availableOptionsLabel ?? 'Selected options';
|
|
10319
|
-
this.allowFutureDate = options.allowFutureDate;
|
|
10320
|
-
this.extension = options.extension;
|
|
10321
|
-
}
|
|
10322
|
-
setMax(field) {
|
|
10323
|
-
if (field.controlType !== 'date') {
|
|
10324
|
-
return field.max;
|
|
10325
|
-
}
|
|
10326
|
-
if (field.allowFutureDate) {
|
|
10327
|
-
return undefined;
|
|
10328
|
-
}
|
|
10329
|
-
return format(new Date(), 'yyyy-MM-dd');
|
|
10330
|
-
}
|
|
10331
|
-
}
|
|
10332
|
-
|
|
10333
|
-
let Boolean$1 = class Boolean extends FormField {
|
|
10334
|
-
constructor() {
|
|
10335
|
-
super(...arguments);
|
|
10336
|
-
this.controlType = 'boolean';
|
|
10337
|
-
}
|
|
10338
|
-
};
|
|
10339
|
-
|
|
10340
|
-
class CheckBox extends FormField {
|
|
10341
|
-
constructor() {
|
|
10342
|
-
super(...arguments);
|
|
10343
|
-
this.controlType = 'checkbox';
|
|
10344
|
-
}
|
|
10345
|
-
}
|
|
10346
|
-
|
|
10347
|
-
class DateField extends FormField {
|
|
10348
|
-
constructor(field) {
|
|
10349
|
-
super(field);
|
|
10350
|
-
this.controlType = 'date';
|
|
10351
|
-
this.type = 'date';
|
|
10352
|
-
this.max = field.max ?? format(new Date(), 'yyyy-MM-dd');
|
|
9732
|
+
}
|
|
9733
|
+
|
|
9734
|
+
class DateField extends FormField {
|
|
9735
|
+
constructor(field) {
|
|
9736
|
+
super(field);
|
|
9737
|
+
this.controlType = 'date';
|
|
9738
|
+
this.type = 'date';
|
|
9739
|
+
this.max = field.max ?? format(new Date(), 'yyyy-MM-dd');
|
|
10353
9740
|
}
|
|
10354
9741
|
}
|
|
10355
9742
|
|
|
@@ -10609,6 +9996,126 @@ class FormFieldTypeUtil {
|
|
|
10609
9996
|
}
|
|
10610
9997
|
}
|
|
10611
9998
|
|
|
9999
|
+
class FormUtil {
|
|
10000
|
+
static getFormGroup(fields, dataEntities) {
|
|
10001
|
+
const group = {};
|
|
10002
|
+
(fields || []).forEach((field) => {
|
|
10003
|
+
if (field) {
|
|
10004
|
+
const value = FormUtil.getFieldValue(field, dataEntities);
|
|
10005
|
+
const minValidators = field.min
|
|
10006
|
+
? [Validators.min(field.min)]
|
|
10007
|
+
: [];
|
|
10008
|
+
const maxValidators = field.max
|
|
10009
|
+
? [Validators.max(field.max)]
|
|
10010
|
+
: [];
|
|
10011
|
+
const phoneNumberValidator = field.type === 'tel' ? [] : [];
|
|
10012
|
+
const emailValidator = field.type === 'email'
|
|
10013
|
+
? [
|
|
10014
|
+
Validators.pattern('^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$'),
|
|
10015
|
+
]
|
|
10016
|
+
: [];
|
|
10017
|
+
group[field.key] = field.required
|
|
10018
|
+
? new UntypedFormControl({ value, disabled: field.disabled }, {
|
|
10019
|
+
validators: [
|
|
10020
|
+
Validators.required,
|
|
10021
|
+
...minValidators,
|
|
10022
|
+
...maxValidators,
|
|
10023
|
+
...phoneNumberValidator,
|
|
10024
|
+
...emailValidator,
|
|
10025
|
+
],
|
|
10026
|
+
updateOn: 'change',
|
|
10027
|
+
})
|
|
10028
|
+
: new UntypedFormControl({ value, disabled: field.disabled }, {
|
|
10029
|
+
validators: [
|
|
10030
|
+
...minValidators,
|
|
10031
|
+
...maxValidators,
|
|
10032
|
+
...phoneNumberValidator,
|
|
10033
|
+
...emailValidator,
|
|
10034
|
+
],
|
|
10035
|
+
});
|
|
10036
|
+
if (field.referenceKey) {
|
|
10037
|
+
const value = dataEntities
|
|
10038
|
+
? dataEntities[field.referenceKey] || ''
|
|
10039
|
+
: '';
|
|
10040
|
+
group[field.referenceKey] = field.required
|
|
10041
|
+
? new UntypedFormControl({ value, disabled: field.disabled }, {
|
|
10042
|
+
validators: [
|
|
10043
|
+
Validators.required,
|
|
10044
|
+
...minValidators,
|
|
10045
|
+
...maxValidators,
|
|
10046
|
+
...phoneNumberValidator,
|
|
10047
|
+
...emailValidator,
|
|
10048
|
+
],
|
|
10049
|
+
updateOn: 'change',
|
|
10050
|
+
})
|
|
10051
|
+
: new UntypedFormControl({ value, disabled: field.disabled }, {
|
|
10052
|
+
validators: [
|
|
10053
|
+
...minValidators,
|
|
10054
|
+
...maxValidators,
|
|
10055
|
+
...phoneNumberValidator,
|
|
10056
|
+
...emailValidator,
|
|
10057
|
+
],
|
|
10058
|
+
});
|
|
10059
|
+
}
|
|
10060
|
+
}
|
|
10061
|
+
});
|
|
10062
|
+
return new UntypedFormGroup(group);
|
|
10063
|
+
}
|
|
10064
|
+
static getFieldValue(field, dataEntities) {
|
|
10065
|
+
const fieldValue = dataEntities
|
|
10066
|
+
? dataEntities[field.id] || dataEntities[field.key] || ''
|
|
10067
|
+
: '';
|
|
10068
|
+
return isArray(fieldValue) ? JSON.stringify(fieldValue) : fieldValue;
|
|
10069
|
+
}
|
|
10070
|
+
static getFormFields(fields) {
|
|
10071
|
+
return (fields || []).map((field) => {
|
|
10072
|
+
const options = FieldUtil.getFieldDropdownOptions(field);
|
|
10073
|
+
const dependentField = find(fields, ['id', field.fieldOptionsDependsOn]);
|
|
10074
|
+
const label = field.formName || field.name || field.displayName;
|
|
10075
|
+
return new FormField({
|
|
10076
|
+
id: field.id,
|
|
10077
|
+
label,
|
|
10078
|
+
code: field.code,
|
|
10079
|
+
key: camelCase(field.code) || field.id,
|
|
10080
|
+
referenceKey: field.referenceKey,
|
|
10081
|
+
required: field.mandatory && !field.generated,
|
|
10082
|
+
displayInList: field.displayInList,
|
|
10083
|
+
type: FieldUtil.getFieldType(field.valueType),
|
|
10084
|
+
controlType: FieldUtil.getFieldControlType(field.valueType, options?.length > 0 || field.hasOptions),
|
|
10085
|
+
options,
|
|
10086
|
+
isDataElement: field.isDataElement,
|
|
10087
|
+
isAttribute: field.isAttribute,
|
|
10088
|
+
isOrgUnit: field.isOrgUnit,
|
|
10089
|
+
isGeometryField: field.isGeometryField,
|
|
10090
|
+
isEnrollmentDate: field.isEnrollmentDate,
|
|
10091
|
+
programStage: field.stageId,
|
|
10092
|
+
event: field.event,
|
|
10093
|
+
trackedEntityInstance: field.trackedEntityInstance,
|
|
10094
|
+
disabled: field.disabled || field.generated,
|
|
10095
|
+
dependentField: dependentField,
|
|
10096
|
+
min: field.min,
|
|
10097
|
+
max: field.max,
|
|
10098
|
+
maxLength: field.maxLength,
|
|
10099
|
+
allowFutureDate: field.allowFutureDate,
|
|
10100
|
+
});
|
|
10101
|
+
});
|
|
10102
|
+
}
|
|
10103
|
+
static createField(id, label, required, controlType, disabled, placeholder, options) {
|
|
10104
|
+
return new FormField({
|
|
10105
|
+
id,
|
|
10106
|
+
code: id,
|
|
10107
|
+
key: id,
|
|
10108
|
+
label,
|
|
10109
|
+
required,
|
|
10110
|
+
controlType,
|
|
10111
|
+
type: 'text',
|
|
10112
|
+
options: options ?? [],
|
|
10113
|
+
disabled: disabled ?? false,
|
|
10114
|
+
placeholder: placeholder,
|
|
10115
|
+
});
|
|
10116
|
+
}
|
|
10117
|
+
}
|
|
10118
|
+
|
|
10612
10119
|
class FormValueUtil {
|
|
10613
10120
|
static getFormDataEntities(formValueEntities) {
|
|
10614
10121
|
const formValueKeys = Object.keys(formValueEntities);
|
|
@@ -11184,141 +10691,371 @@ class FormMetaData {
|
|
|
11184
10691
|
formFieldExtensions: this.params.formFieldExtensions,
|
|
11185
10692
|
}).toJson();
|
|
11186
10693
|
}
|
|
11187
|
-
toJson() {
|
|
11188
|
-
return {
|
|
11189
|
-
id: this.params.customFormMetaData?.id,
|
|
11190
|
-
name: TranslationUtil.getTranslatedFormName(this.params.customFormMetaData || {}, this.params.locale),
|
|
11191
|
-
fields: this.fields,
|
|
11192
|
-
sections: this.sections,
|
|
11193
|
-
programStageSections: this.programStageSections,
|
|
11194
|
-
rules: this.rules,
|
|
11195
|
-
};
|
|
10694
|
+
toJson() {
|
|
10695
|
+
return {
|
|
10696
|
+
id: this.params.customFormMetaData?.id,
|
|
10697
|
+
name: TranslationUtil.getTranslatedFormName(this.params.customFormMetaData || {}, this.params.locale),
|
|
10698
|
+
fields: this.fields,
|
|
10699
|
+
sections: this.sections,
|
|
10700
|
+
programStageSections: this.programStageSections,
|
|
10701
|
+
rules: this.rules,
|
|
10702
|
+
};
|
|
10703
|
+
}
|
|
10704
|
+
}
|
|
10705
|
+
|
|
10706
|
+
// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
|
|
10707
|
+
// Use of this source code is governed by a BSD-style
|
|
10708
|
+
// license that can be found in the LICENSE file.
|
|
10709
|
+
|
|
10710
|
+
class FormComponent {
|
|
10711
|
+
get layoutCssClass() {
|
|
10712
|
+
if (!this.isFormHorizontal()) {
|
|
10713
|
+
return 'col-12';
|
|
10714
|
+
}
|
|
10715
|
+
const numberOfFields = this.sanitizedFields.length;
|
|
10716
|
+
if (numberOfFields === 2) {
|
|
10717
|
+
return 'col-sm-6';
|
|
10718
|
+
}
|
|
10719
|
+
if (numberOfFields === 1) {
|
|
10720
|
+
return 'col-12';
|
|
10721
|
+
}
|
|
10722
|
+
return 'col-sm-4';
|
|
10723
|
+
}
|
|
10724
|
+
constructor() {
|
|
10725
|
+
this.programEntryFormConfig = input(/* @ts-ignore */
|
|
10726
|
+
...(ngDevMode ? [undefined, { debugName: "programEntryFormConfig" }] : /* istanbul ignore next */ []));
|
|
10727
|
+
this.formConfig = input(/* @ts-ignore */
|
|
10728
|
+
...(ngDevMode ? [undefined, { debugName: "formConfig" }] : /* istanbul ignore next */ []));
|
|
10729
|
+
this.fields = input.required(/* @ts-ignore */
|
|
10730
|
+
...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
|
|
10731
|
+
this.form = input.required(/* @ts-ignore */
|
|
10732
|
+
...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
|
|
10733
|
+
this.isFormHorizontal = input(false, /* @ts-ignore */
|
|
10734
|
+
...(ngDevMode ? [{ debugName: "isFormHorizontal" }] : /* istanbul ignore next */ []));
|
|
10735
|
+
this.showSaveButton = input(false, /* @ts-ignore */
|
|
10736
|
+
...(ngDevMode ? [{ debugName: "showSaveButton" }] : /* istanbul ignore next */ []));
|
|
10737
|
+
this.fieldsData = input(/* @ts-ignore */
|
|
10738
|
+
...(ngDevMode ? [undefined, { debugName: "fieldsData" }] : /* istanbul ignore next */ []));
|
|
10739
|
+
this.formMetaData = input(/* @ts-ignore */
|
|
10740
|
+
...(ngDevMode ? [undefined, { debugName: "formMetaData" }] : /* istanbul ignore next */ []));
|
|
10741
|
+
this.programEntryFormMetaData = input(/* @ts-ignore */
|
|
10742
|
+
...(ngDevMode ? [undefined, { debugName: "programEntryFormMetaData" }] : /* istanbul ignore next */ []));
|
|
10743
|
+
this.fieldClass = input('', /* @ts-ignore */
|
|
10744
|
+
...(ngDevMode ? [{ debugName: "fieldClass" }] : /* istanbul ignore next */ []));
|
|
10745
|
+
this.shouldRenderAsCheckBoxesButton = input(false, /* @ts-ignore */
|
|
10746
|
+
...(ngDevMode ? [{ debugName: "shouldRenderAsCheckBoxesButton" }] : /* istanbul ignore next */ []));
|
|
10747
|
+
this.programRuleActions = input([], /* @ts-ignore */
|
|
10748
|
+
...(ngDevMode ? [{ debugName: "programRuleActions" }] : /* istanbul ignore next */ []));
|
|
10749
|
+
this.dataEntities = input(undefined, /* @ts-ignore */
|
|
10750
|
+
...(ngDevMode ? [{ debugName: "dataEntities" }] : /* istanbul ignore next */ []));
|
|
10751
|
+
this.dataId = input(/* @ts-ignore */
|
|
10752
|
+
...(ngDevMode ? [undefined, { debugName: "dataId" }] : /* istanbul ignore next */ []));
|
|
10753
|
+
this.customOrgUnitRoots = input(/* @ts-ignore */
|
|
10754
|
+
...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : /* istanbul ignore next */ []));
|
|
10755
|
+
this.optionCascadeConfigs = input([], /* @ts-ignore */
|
|
10756
|
+
...(ngDevMode ? [{ debugName: "optionCascadeConfigs" }] : /* istanbul ignore next */ []));
|
|
10757
|
+
this.coordinatePickerGeoConfig = input(/* @ts-ignore */
|
|
10758
|
+
...(ngDevMode ? [undefined, { debugName: "coordinatePickerGeoConfig" }] : /* istanbul ignore next */ []));
|
|
10759
|
+
/** ✅ Build map once when configs change */
|
|
10760
|
+
this.optionCascadeConfigMap = computed(() => {
|
|
10761
|
+
const configs = this.optionCascadeConfigs() ?? [];
|
|
10762
|
+
// (optional) guard if you later widen union types
|
|
10763
|
+
const optionPathConfigs = configs.filter((c) => c?.kind === CascadeKind.OPTIONS_PATH);
|
|
10764
|
+
// util returns: Readonly<Record<string, OptionsPathCascadeConfig>>
|
|
10765
|
+
return FieldCascadeUtil.buildConfigByChildFieldId(optionPathConfigs);
|
|
10766
|
+
}, /* @ts-ignore */
|
|
10767
|
+
...(ngDevMode ? [{ debugName: "optionCascadeConfigMap" }] : /* istanbul ignore next */ []));
|
|
10768
|
+
//TODO: FIND BETTER WAY TO PASS PROGRAM TO FIELDS i.e field extensions
|
|
10769
|
+
this.program = input(/* @ts-ignore */
|
|
10770
|
+
...(ngDevMode ? [undefined, { debugName: "program" }] : /* istanbul ignore next */ []));
|
|
10771
|
+
this.collapsibleSections = input(false, /* @ts-ignore */
|
|
10772
|
+
...(ngDevMode ? [{ debugName: "collapsibleSections" }] : /* istanbul ignore next */ []));
|
|
10773
|
+
this.openSectionId = signal(null, /* @ts-ignore */
|
|
10774
|
+
...(ngDevMode ? [{ debugName: "openSectionId" }] : /* istanbul ignore next */ []));
|
|
10775
|
+
this.configuration = computed(() => {
|
|
10776
|
+
if (!this.formConfig()) {
|
|
10777
|
+
const fieldConfig = new FieldConfig({
|
|
10778
|
+
fieldDescriptionLabel: this.programEntryFormConfig()?.fieldDescriptionLabel,
|
|
10779
|
+
});
|
|
10780
|
+
return new FormConfig({
|
|
10781
|
+
direction: this.isFormHorizontal() ? 'horizontal' : 'vertical',
|
|
10782
|
+
fieldConfig,
|
|
10783
|
+
});
|
|
10784
|
+
}
|
|
10785
|
+
return this.formConfig();
|
|
10786
|
+
}, /* @ts-ignore */
|
|
10787
|
+
...(ngDevMode ? [{ debugName: "configuration" }] : /* istanbul ignore next */ []));
|
|
10788
|
+
this.formUpdate = new EventEmitter();
|
|
10789
|
+
this.formValidityUpdate = new EventEmitter();
|
|
10790
|
+
// get sanitizedFields(): IFormField<string>[] {
|
|
10791
|
+
// return (this.fields() || []).filter((field: any) => {
|
|
10792
|
+
// if (field.hidden) {
|
|
10793
|
+
// return false;
|
|
10794
|
+
// }
|
|
10795
|
+
// const type = field.isDataElement
|
|
10796
|
+
// ? 'dataElement'
|
|
10797
|
+
// : 'trackedEntityAttribute';
|
|
10798
|
+
// const elementItem = field[type] || field;
|
|
10799
|
+
// if (!elementItem) {
|
|
10800
|
+
// return true;
|
|
10801
|
+
// }
|
|
10802
|
+
// const availableRule = head(
|
|
10803
|
+
// (this.programRuleActions() || []).filter((ruleAction) => {
|
|
10804
|
+
// return (
|
|
10805
|
+
// ruleAction.field === elementItem.id &&
|
|
10806
|
+
// ruleAction.actionType === 'HIDEFIELD'
|
|
10807
|
+
// );
|
|
10808
|
+
// })
|
|
10809
|
+
// );
|
|
10810
|
+
// if (!availableRule) {
|
|
10811
|
+
// return true;
|
|
10812
|
+
// }
|
|
10813
|
+
// return availableRule.actionType !== 'HIDEFIELD';
|
|
10814
|
+
// });
|
|
10815
|
+
// }
|
|
10816
|
+
this.fieldControlKeyById = computed(() => {
|
|
10817
|
+
const list = this.fields() ?? []; // or sanitizedFields
|
|
10818
|
+
const map = Object.create(null);
|
|
10819
|
+
for (const f of list) {
|
|
10820
|
+
if (!f?.id)
|
|
10821
|
+
continue;
|
|
10822
|
+
// Prefer explicit key if present, else fall back to id.
|
|
10823
|
+
map[f.id] = f.key || f.id;
|
|
10824
|
+
}
|
|
10825
|
+
return map;
|
|
10826
|
+
}, /* @ts-ignore */
|
|
10827
|
+
...(ngDevMode ? [{ debugName: "fieldControlKeyById" }] : /* istanbul ignore next */ []));
|
|
10828
|
+
// get sanitizedFields(): IFormField<string>[] {
|
|
10829
|
+
// return (this.fields() || []).filter(
|
|
10830
|
+
// (field) => !this.isFieldHiddenByRules(field)
|
|
10831
|
+
// );
|
|
10832
|
+
// }
|
|
10833
|
+
// getVisibleSectionFields(section: any): IFormField<string>[] {
|
|
10834
|
+
// const rawFields: IFormField<string>[] = section?.formFields ?? [];
|
|
10835
|
+
// return rawFields.filter((field) => !this.isFieldHiddenByRules(field));
|
|
10836
|
+
// }
|
|
10837
|
+
// private isFieldHiddenByRules(field: IFormField<string>): boolean {
|
|
10838
|
+
// if (field.hidden) {
|
|
10839
|
+
// return true;
|
|
10840
|
+
// }
|
|
10841
|
+
// const type = (field as any).isDataElement
|
|
10842
|
+
// ? 'dataElement'
|
|
10843
|
+
// : 'trackedEntityAttribute';
|
|
10844
|
+
// const elementItem = (field as any)[type] || field;
|
|
10845
|
+
// if (!elementItem) return false;
|
|
10846
|
+
// const rule = (this.programRuleActions() || []).find(
|
|
10847
|
+
// (ruleAction) =>
|
|
10848
|
+
// ruleAction.field === elementItem.id &&
|
|
10849
|
+
// ruleAction.actionType === 'HIDEFIELD'
|
|
10850
|
+
// );
|
|
10851
|
+
// return !!rule;
|
|
10852
|
+
// }
|
|
10853
|
+
// 1) Precompute the hidden field ids from programRuleActions()
|
|
10854
|
+
this.hiddenFieldIds = computed(() => {
|
|
10855
|
+
const actions = this.programRuleActions() || [];
|
|
10856
|
+
return new Set(actions
|
|
10857
|
+
.filter((ruleAction) => ruleAction.actionType === 'HIDEFIELD')
|
|
10858
|
+
.map((ruleAction) => ruleAction.field)
|
|
10859
|
+
.filter((id) => !!id));
|
|
10860
|
+
}, /* @ts-ignore */
|
|
10861
|
+
...(ngDevMode ? [{ debugName: "hiddenFieldIds" }] : /* istanbul ignore next */ []));
|
|
10862
|
+
this.ruleProcessor = effect(() => {
|
|
10863
|
+
this.#processRules(this.programRuleActions());
|
|
10864
|
+
}, /* @ts-ignore */
|
|
10865
|
+
...(ngDevMode ? [{ debugName: "ruleProcessor" }] : /* istanbul ignore next */ []));
|
|
10866
|
+
effect(() => {
|
|
10867
|
+
if (!this.collapsibleSections())
|
|
10868
|
+
return;
|
|
10869
|
+
const meta = this.programEntryFormMetaData?.();
|
|
10870
|
+
const sections = Array.isArray(meta?.programStageSections) &&
|
|
10871
|
+
meta.programStageSections.length > 0
|
|
10872
|
+
? meta.programStageSections
|
|
10873
|
+
: Array.isArray(meta?.sections) && meta.sections.length > 0
|
|
10874
|
+
? meta.sections
|
|
10875
|
+
: [];
|
|
10876
|
+
if (!sections.length)
|
|
10877
|
+
return;
|
|
10878
|
+
if (this.openSectionId() == null) {
|
|
10879
|
+
const firstId = sections[0]?.id ?? 0;
|
|
10880
|
+
this.openSectionId.set(firstId);
|
|
10881
|
+
}
|
|
10882
|
+
});
|
|
10883
|
+
}
|
|
10884
|
+
resolveSections(meta) {
|
|
10885
|
+
if (!meta)
|
|
10886
|
+
return [];
|
|
10887
|
+
const stageSections = meta.programStageSections ?? [];
|
|
10888
|
+
const genericSections = meta.sections ?? [];
|
|
10889
|
+
const sections = (stageSections?.length ? stageSections : genericSections) ?? [];
|
|
10890
|
+
return sections.map((s) => ({
|
|
10891
|
+
id: s?.id ?? s?.uid ?? crypto?.randomUUID?.() ?? String(Math.random()),
|
|
10892
|
+
name: s?.name ?? s?.displayName ?? 'Section',
|
|
10893
|
+
description: s?.description ?? '',
|
|
10894
|
+
formFields: s?.formFields ?? [],
|
|
10895
|
+
}));
|
|
10896
|
+
}
|
|
10897
|
+
// // NEW: open a section; keep at least one open at all times
|
|
10898
|
+
// openSection(section: { id?: string | number }, index: number): void {
|
|
10899
|
+
// if (!this.collapsibleSections()) return;
|
|
10900
|
+
// const id = section?.id ?? index;
|
|
10901
|
+
// // if clicking the already-open section, do nothing (always keep one open)
|
|
10902
|
+
// if (this.openSectionId() === id) return;
|
|
10903
|
+
// this.openSectionId.set(id);
|
|
10904
|
+
// }
|
|
10905
|
+
getSections() {
|
|
10906
|
+
const meta = this.programEntryFormMetaData?.();
|
|
10907
|
+
if (!meta)
|
|
10908
|
+
return [];
|
|
10909
|
+
// Normalize to array only if it's valid and non-empty
|
|
10910
|
+
if (Array.isArray(meta.programStageSections) &&
|
|
10911
|
+
meta.programStageSections.length > 0) {
|
|
10912
|
+
return meta.programStageSections;
|
|
10913
|
+
}
|
|
10914
|
+
if (Array.isArray(meta.sections) && meta.sections.length > 0) {
|
|
10915
|
+
return meta.sections;
|
|
10916
|
+
}
|
|
10917
|
+
return [];
|
|
10918
|
+
}
|
|
10919
|
+
openSection(section, index) {
|
|
10920
|
+
if (!this.collapsibleSections())
|
|
10921
|
+
return;
|
|
10922
|
+
const sections = this.getSections();
|
|
10923
|
+
if (!sections.length)
|
|
10924
|
+
return;
|
|
10925
|
+
const clickedId = section?.id ?? index;
|
|
10926
|
+
const currentId = this.openSectionId();
|
|
10927
|
+
if (currentId === clickedId) {
|
|
10928
|
+
// clicked the currently open section → open the next one (wrap to first)
|
|
10929
|
+
const nextIndex = (index + 1) % sections.length;
|
|
10930
|
+
// ToDo: Get Backward | Un-comment Below
|
|
10931
|
+
// const nextIndex = index === sections.length - 1 ? 0 : index + 1;
|
|
10932
|
+
const nextId = sections[nextIndex]?.id ?? nextIndex;
|
|
10933
|
+
this.openSectionId.set(nextId);
|
|
10934
|
+
}
|
|
10935
|
+
else {
|
|
10936
|
+
// clicked a different section → open it
|
|
10937
|
+
this.openSectionId.set(clickedId);
|
|
10938
|
+
}
|
|
10939
|
+
}
|
|
10940
|
+
// NEW: helper used in template
|
|
10941
|
+
isSectionOpen(section, index) {
|
|
10942
|
+
if (!this.collapsibleSections())
|
|
10943
|
+
return true;
|
|
10944
|
+
const id = section?.id ?? index;
|
|
10945
|
+
return this.openSectionId() === id;
|
|
11196
10946
|
}
|
|
11197
|
-
|
|
11198
|
-
|
|
11199
|
-
|
|
11200
|
-
|
|
11201
|
-
|
|
11202
|
-
|
|
11203
|
-
|
|
11204
|
-
|
|
11205
|
-
const
|
|
11206
|
-
|
|
11207
|
-
|
|
11208
|
-
|
|
11209
|
-
|
|
11210
|
-
|
|
11211
|
-
|
|
11212
|
-
|
|
11213
|
-
|
|
11214
|
-
|
|
11215
|
-
|
|
11216
|
-
|
|
11217
|
-
|
|
11218
|
-
|
|
11219
|
-
|
|
11220
|
-
|
|
11221
|
-
|
|
11222
|
-
|
|
11223
|
-
|
|
11224
|
-
|
|
11225
|
-
|
|
11226
|
-
|
|
11227
|
-
|
|
11228
|
-
|
|
11229
|
-
|
|
11230
|
-
|
|
11231
|
-
|
|
11232
|
-
|
|
11233
|
-
|
|
11234
|
-
|
|
11235
|
-
...maxValidators,
|
|
11236
|
-
...phoneNumberValidator,
|
|
11237
|
-
...emailValidator,
|
|
11238
|
-
],
|
|
11239
|
-
});
|
|
11240
|
-
if (field.referenceKey) {
|
|
11241
|
-
const value = dataEntities
|
|
11242
|
-
? dataEntities[field.referenceKey] || ''
|
|
11243
|
-
: '';
|
|
11244
|
-
group[field.referenceKey] = field.required
|
|
11245
|
-
? new UntypedFormControl({ value, disabled: field.disabled }, {
|
|
11246
|
-
validators: [
|
|
11247
|
-
Validators.required,
|
|
11248
|
-
...minValidators,
|
|
11249
|
-
...maxValidators,
|
|
11250
|
-
...phoneNumberValidator,
|
|
11251
|
-
...emailValidator,
|
|
11252
|
-
],
|
|
11253
|
-
updateOn: 'change',
|
|
11254
|
-
})
|
|
11255
|
-
: new UntypedFormControl({ value, disabled: field.disabled }, {
|
|
11256
|
-
validators: [
|
|
11257
|
-
...minValidators,
|
|
11258
|
-
...maxValidators,
|
|
11259
|
-
...phoneNumberValidator,
|
|
11260
|
-
...emailValidator,
|
|
11261
|
-
],
|
|
11262
|
-
});
|
|
10947
|
+
//TODO: To move the section visible check to a custom rule implementation for program sections
|
|
10948
|
+
isSectionVisible(section, expectedSectionType) {
|
|
10949
|
+
const sectionId = section?.id;
|
|
10950
|
+
if (!sectionId)
|
|
10951
|
+
return true;
|
|
10952
|
+
if (expectedSectionType === 'PROGRAM_SECTION') {
|
|
10953
|
+
return this.getVisibleSectionFields(section).length > 0;
|
|
10954
|
+
}
|
|
10955
|
+
const sectionActions = (this.programRuleActions() || []).filter((action) => action.section === sectionId &&
|
|
10956
|
+
action.sectionType === expectedSectionType);
|
|
10957
|
+
const hasShowSectionAction = sectionActions.some((action) => action.actionType === 'SHOWSECTION');
|
|
10958
|
+
const hasHideSectionAction = sectionActions.some((action) => action.actionType === 'HIDESECTION');
|
|
10959
|
+
return hasShowSectionAction || !hasHideSectionAction;
|
|
10960
|
+
}
|
|
10961
|
+
ngOnInit() {
|
|
10962
|
+
this.values = this.form().getRawValue();
|
|
10963
|
+
// TODO: This is uneccesary emit at this stage of execution, since nothing has changes at initiation and potentially break some of implementation that depends formUpdate, which also is triggered when there is actual change in the form apart form initial values that came with it
|
|
10964
|
+
this.formUpdate.emit(new FormValue(this.form(), this.fields()));
|
|
10965
|
+
this.formValidityUpdate.emit(new FormValue(this.form(), this.fields()).isValid);
|
|
10966
|
+
}
|
|
10967
|
+
ngOnChanges(changes) {
|
|
10968
|
+
this.values = this.form().getRawValue();
|
|
10969
|
+
}
|
|
10970
|
+
#processRules(ruleActions) {
|
|
10971
|
+
ruleActions.forEach((ruleAction) => {
|
|
10972
|
+
switch (ruleAction.actionType) {
|
|
10973
|
+
case 'HIDEFIELD': {
|
|
10974
|
+
const fieldToRemove = this.fields().find((field) => field.id === ruleAction.field);
|
|
10975
|
+
if (fieldToRemove) {
|
|
10976
|
+
const form = this.form();
|
|
10977
|
+
const currentValue = form.get(fieldToRemove.key)?.value;
|
|
10978
|
+
const shouldPreserveValue = fieldToRemove.disabled || fieldToRemove.generated;
|
|
10979
|
+
if (currentValue != null && !shouldPreserveValue) {
|
|
10980
|
+
form.get(fieldToRemove.key)?.setValue(null);
|
|
10981
|
+
this.onFieldUpdate(form, fieldToRemove);
|
|
10982
|
+
}
|
|
10983
|
+
}
|
|
10984
|
+
break;
|
|
11263
10985
|
}
|
|
10986
|
+
default:
|
|
10987
|
+
break;
|
|
11264
10988
|
}
|
|
11265
10989
|
});
|
|
11266
|
-
return new UntypedFormGroup(group);
|
|
11267
10990
|
}
|
|
11268
|
-
|
|
11269
|
-
|
|
11270
|
-
|
|
11271
|
-
|
|
11272
|
-
return isArray(fieldValue) ? JSON.stringify(fieldValue) : fieldValue;
|
|
10991
|
+
onSubmit() {
|
|
10992
|
+
this.formUpdate.emit(this.form().getRawValue());
|
|
10993
|
+
this.formValidityUpdate.emit(this.form().valid);
|
|
10994
|
+
this.formValidityUpdate.emit(new FormValue(this.form(), this.fields()).isValid);
|
|
11273
10995
|
}
|
|
11274
|
-
|
|
11275
|
-
|
|
11276
|
-
|
|
11277
|
-
|
|
11278
|
-
|
|
11279
|
-
|
|
11280
|
-
id: field.id,
|
|
11281
|
-
label,
|
|
11282
|
-
code: field.code,
|
|
11283
|
-
key: camelCase(field.code) || field.id,
|
|
11284
|
-
referenceKey: field.referenceKey,
|
|
11285
|
-
required: field.mandatory && !field.generated,
|
|
11286
|
-
displayInList: field.displayInList,
|
|
11287
|
-
type: FieldUtil.getFieldType(field.valueType),
|
|
11288
|
-
controlType: FieldUtil.getFieldControlType(field.valueType, options?.length > 0 || field.hasOptions),
|
|
11289
|
-
options,
|
|
11290
|
-
isDataElement: field.isDataElement,
|
|
11291
|
-
isAttribute: field.isAttribute,
|
|
11292
|
-
isOrgUnit: field.isOrgUnit,
|
|
11293
|
-
isGeometryField: field.isGeometryField,
|
|
11294
|
-
isEnrollmentDate: field.isEnrollmentDate,
|
|
11295
|
-
programStage: field.stageId,
|
|
11296
|
-
event: field.event,
|
|
11297
|
-
trackedEntityInstance: field.trackedEntityInstance,
|
|
11298
|
-
disabled: field.disabled || field.generated,
|
|
11299
|
-
dependentField: dependentField,
|
|
11300
|
-
min: field.min,
|
|
11301
|
-
max: field.max,
|
|
11302
|
-
maxLength: field.maxLength,
|
|
11303
|
-
allowFutureDate: field.allowFutureDate,
|
|
11304
|
-
});
|
|
11305
|
-
});
|
|
10996
|
+
onFieldUpdate(form, field) {
|
|
10997
|
+
if (!this.showSaveButton() && form) {
|
|
10998
|
+
this.formUpdate.emit(new FormValue(this.form(), this.fields(), field));
|
|
10999
|
+
this.formValidityUpdate.emit(this.form().valid);
|
|
11000
|
+
this.values = form.getRawValue();
|
|
11001
|
+
}
|
|
11306
11002
|
}
|
|
11307
|
-
|
|
11308
|
-
|
|
11309
|
-
|
|
11310
|
-
|
|
11311
|
-
|
|
11312
|
-
|
|
11313
|
-
|
|
11314
|
-
|
|
11315
|
-
|
|
11316
|
-
|
|
11317
|
-
|
|
11318
|
-
|
|
11319
|
-
|
|
11003
|
+
onClear() {
|
|
11004
|
+
this.form().reset();
|
|
11005
|
+
}
|
|
11006
|
+
isFormInValid() {
|
|
11007
|
+
return this.form().invalid;
|
|
11008
|
+
}
|
|
11009
|
+
getOptionValue(option) {
|
|
11010
|
+
return String(option?.value ?? option?.code ?? option?.key ?? option?.id ?? '');
|
|
11011
|
+
}
|
|
11012
|
+
onRunTimeOptionUpdate(result) {
|
|
11013
|
+
if (this.fieldComponents) {
|
|
11014
|
+
const fieldToUpdate = this.fieldComponents.find((fieldComponent) => fieldComponent?.field()?.dependentField?.id === result?.field?.id);
|
|
11015
|
+
const selectedValue = String(this.form()?.value[result?.field?.id] ??
|
|
11016
|
+
this.form()?.value[result?.field?.key] ??
|
|
11017
|
+
'');
|
|
11018
|
+
const parentOption = result?.options.find((option) => this.getOptionValue(option) === selectedValue);
|
|
11019
|
+
fieldToUpdate?.onUpdateRuntimeOptions(parentOption?.options || []);
|
|
11020
|
+
}
|
|
11021
|
+
}
|
|
11022
|
+
ngOnDestroy() {
|
|
11023
|
+
this.ruleProcessor.destroy();
|
|
11024
|
+
}
|
|
11025
|
+
get sanitizedFields() {
|
|
11026
|
+
return (this.fields() || []).filter((field) => !this.isFieldHiddenByRules(field));
|
|
11027
|
+
}
|
|
11028
|
+
getVisibleSectionFields(section) {
|
|
11029
|
+
const rawFields = section?.formFields ?? [];
|
|
11030
|
+
return rawFields.filter((field) => !this.isFieldHiddenByRules(field));
|
|
11031
|
+
}
|
|
11032
|
+
isFieldHiddenByRules(field) {
|
|
11033
|
+
if (field.hidden) {
|
|
11034
|
+
return true;
|
|
11035
|
+
}
|
|
11036
|
+
const type = field.isDataElement
|
|
11037
|
+
? 'dataElement'
|
|
11038
|
+
: 'trackedEntityAttribute';
|
|
11039
|
+
const elementItem = field || field;
|
|
11040
|
+
if (!elementItem || !elementItem.id) {
|
|
11041
|
+
return false;
|
|
11042
|
+
}
|
|
11043
|
+
return this.hiddenFieldIds().has(elementItem.id);
|
|
11320
11044
|
}
|
|
11045
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11046
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FormComponent, isStandalone: false, selector: "ng-dhis2-ui-form", inputs: { programEntryFormConfig: { classPropertyName: "programEntryFormConfig", publicName: "programEntryFormConfig", isSignal: true, isRequired: false, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, isFormHorizontal: { classPropertyName: "isFormHorizontal", publicName: "isFormHorizontal", isSignal: true, isRequired: false, transformFunction: null }, showSaveButton: { classPropertyName: "showSaveButton", publicName: "showSaveButton", isSignal: true, isRequired: false, transformFunction: null }, fieldsData: { classPropertyName: "fieldsData", publicName: "fieldsData", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormMetaData: { classPropertyName: "programEntryFormMetaData", publicName: "programEntryFormMetaData", isSignal: true, isRequired: false, transformFunction: null }, fieldClass: { classPropertyName: "fieldClass", publicName: "fieldClass", isSignal: true, isRequired: false, transformFunction: null }, shouldRenderAsCheckBoxesButton: { classPropertyName: "shouldRenderAsCheckBoxesButton", publicName: "shouldRenderAsCheckBoxesButton", isSignal: true, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: true, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: false, transformFunction: null }, dataId: { classPropertyName: "dataId", publicName: "dataId", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, optionCascadeConfigs: { classPropertyName: "optionCascadeConfigs", publicName: "optionCascadeConfigs", isSignal: true, isRequired: false, transformFunction: null }, coordinatePickerGeoConfig: { classPropertyName: "coordinatePickerGeoConfig", publicName: "coordinatePickerGeoConfig", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formUpdate: "formUpdate", formValidityUpdate: "formValidityUpdate" }, viewQueries: [{ propertyName: "fieldComponents", predicate: FormFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n <div class=\"form-name\">\n <h2>{{ configuration().formName }}</h2>\n </div>\n\n <div>\n {{ formMetaData().sections }}\n </div>\n <div\n *ngFor=\"let field of sanitizedFields\"\n class=\"form-field-{{ configuration().direction }}\"\n >\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [program]=\"program()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n\n @if (meta.programStageSections?.length) {\n @for (section of meta.programStageSections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n\n <div class=\"form__section-content\">\n @if (section.formFields?.length) {\n @for (field of section.formFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n @if (meta.programStageSections?.length) {\n @for (section of meta.programStageSections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n }\n\n @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n <div class=\"form__section-content\">\n @if (section.formFields?.length) {\n @for (field of section.formFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n @if (meta.sections?.length) {\n @for (section of meta.sections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n }\n \n @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n <div class=\"form__section-content\">\n \n @if (section.formFields?.length) {\n \n @for (field of section.formFields; track field?.id ?? $index) {\n <div>\n </div>\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n} @else {\n <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n <div class=\"form-name\">\n <h2>{{ configuration().formName }}</h2>\n </div>\n\n <div>\n {{ formMetaData().sections }}\n </div>\n <div\n *ngFor=\"let field of sanitizedFields\"\n class=\"form-field-{{ configuration().direction }}\"\n >\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n </form>\n} -->\n<!-- \n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n [formGroup]=\"form()\"\n class=\"form {{ configuration().directionClassName }}\"\n>\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) { @if\n (meta?.programStageSections?.length) { @for (section of\n meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n desc = section?.description; @let hasDesc = !!desc;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n @if (section?.name) { @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n [attr.aria-controls]=\"sectionId\"\n [attr.aria-describedby]=\"\n hasDesc && isSectionOpen(section, $index) ? descId : null\n \"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n @if (hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n (collapsibleSections() && hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionId\">\n @if (section.formFields?.length) { @for (field of\n getVisibleSectionFields(section); track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n \n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [optionCascadeConfigs]=\"optionCascadeConfigs()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n } } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n [formGroup]=\"form()\"\n class=\"form {{ configuration().directionClassName }}\"\n>\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n @let desc = section?.description; @let hasDesc = !!desc;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n @if (section?.name) { @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n [attr.aria-controls]=\"sectionId\"\n [attr.aria-describedby]=\"\n hasDesc && isSectionOpen(section, $index) ? descId : null\n \"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n @if (hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n (collapsibleSections() && hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n }\n <div class=\"form__section-content\" [id]=\"sectionId\">\n @if (section.formFields?.length) { @for (field of\n getVisibleSectionFields(section); track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n } } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } }\n</form>\n} @else {\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n @if (configuration()?.formName) {\n <div class=\"form-name\">\n <h2>{{ configuration()?.formName }}</h2>\n </div>\n } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n field?.id ?? $index) {\n <div class=\"form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } } @else {\n <div class=\"text-sm text-gray-500\">No fields to display.</div>\n }\n</form>\n} -->\n\n@let entryFormConfig = programEntryFormConfig();\n@let entryFormMeta = programEntryFormMetaData();\n@let uiConfig = configuration();\n@let formGroupValue = form();\n\n@let isSectionsCollapsible = collapsibleSections();\n\n@let dataEntitiesValue = dataEntities();\n@let dataEntityId = dataId();\n@let orgUnitRootIds = customOrgUnitRoots();\n\n@let cascadeConfigMap = optionCascadeConfigMap();\n@let cascadeConfigs = optionCascadeConfigs();\n\n@let ruleActionList = programRuleActions();\n@let renderAsCheckboxButtons = shouldRenderAsCheckBoxesButton();\n\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n@let entryFormFieldControlKeyById = fieldControlKeyById();\n\n@if (entryFormConfig?.formType === 'EVENT') {\n <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n </div>\n\n @if (entryFormMeta?.programStageSections?.length) {\n @for (stageSection of entryFormMeta.programStageSections; track stageSection?.id ?? $index) {\n @if (isSectionVisible(stageSection, 'PROGRAM_STAGE_SECTION')) {\n @let sectionKey = stageSection?.id ?? $index;\n @let sectionDomId = 'section-' + sectionKey;\n @let descriptionDomId = sectionDomId + '-desc';\n @let sectionDescription = $safeNavigationMigration(stageSection?.description);\n @let hasDescription = !!sectionDescription;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n @if (stageSection?.name) {\n @if (isSectionsCollapsible) {\n @let isOpen = isSectionOpen(stageSection, $index);\n\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(stageSection, $index)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"sectionDomId\"\n [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n >\n <span class=\"form__section-title\">{{ stageSection.name }}</span>\n <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ stageSection.name }}</div>\n @if (hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n }\n }\n\n @let isOpen = !isSectionsCollapsible || isSectionOpen(stageSection, $index);\n @if (isOpen) {\n @if (isSectionsCollapsible && hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionDomId\">\n @if (stageSection?.formFields?.length) {\n @for (visibleField of getVisibleSectionFields(stageSection); track visibleField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"visibleField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [optionCascadeConfigs]=\"cascadeConfigs\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n }\n } @empty {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n\n} @else if (entryFormConfig?.formType === 'TRACKER') {\n\n <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n </div>\n\n @if (entryFormMeta?.sections?.length) {\n @for (teiSection of entryFormMeta.sections; track teiSection?.id ?? $index) {\n @if (isSectionVisible(teiSection, 'PROGRAM_SECTION')) {\n @let sectionKey = teiSection?.id ?? $index;\n @let sectionDomId = 'section-' + sectionKey;\n @let descriptionDomId = sectionDomId + '-desc';\n @let sectionDescription = $safeNavigationMigration(teiSection?.description);\n @let hasDescription = !!sectionDescription;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n @if (teiSection?.name) {\n @if (isSectionsCollapsible) {\n @let isOpen = isSectionOpen(teiSection, $index);\n\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(teiSection, $index)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"sectionDomId\"\n [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n >\n <span class=\"form__section-title\">{{ teiSection.name }}</span>\n <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ teiSection.name }}</div>\n @if (hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n }\n }\n\n @let isOpen = !isSectionsCollapsible || isSectionOpen(teiSection, $index);\n @if (isOpen) {\n @if (isSectionsCollapsible && hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionDomId\">\n @if (teiSection?.formFields?.length) {\n @for (visibleField of getVisibleSectionFields(teiSection); track visibleField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"visibleField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n }\n } @empty {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n\n} @else {\n\n <form [formGroup]=\"formGroupValue\" [class]=\"uiConfig.directionClassName\">\n @if (uiConfig?.formName) {\n <div class=\"form-name\">\n <h2>{{ uiConfig.formName }}</h2>\n </div>\n }\n\n @if (sanitizedFields?.length) {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n }\n } @else {\n <div class=\"text-sm text-gray-500\">No fields to display.</div>\n }\n </form>\n\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "ng-dhis2-ui-form-field", inputs: ["field", "fieldConfig", "form", "isCheckBoxButton", "fieldClass", "programRuleActions", "dataEntities", "minDate", "maxDate", "dataId", "customOrgUnitRoots", "program", "optionCascadeConfigs", "optionCascadeConfigMap", "coordinatePickerGeoConfig", "fieldControlKeyById"], outputs: ["fieldUpdate", "immediateFieldUpdate", "runtimeOptionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
11321
11047
|
}
|
|
11048
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FormComponent, decorators: [{
|
|
11049
|
+
type: Component,
|
|
11050
|
+
args: [{ selector: 'ng-dhis2-ui-form', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<!-- <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n <div class=\"form-name\">\n <h2>{{ configuration().formName }}</h2>\n </div>\n\n <div>\n {{ formMetaData().sections }}\n </div>\n <div\n *ngFor=\"let field of sanitizedFields\"\n class=\"form-field-{{ configuration().direction }}\"\n >\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [program]=\"program()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n</form> -->\n\n<!-- <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n\n @if (meta.programStageSections?.length) {\n @for (section of meta.programStageSections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n\n <div class=\"form__section-content\">\n @if (section.formFields?.length) {\n @for (field of section.formFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n</form> -->\n\n<!-- @if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT') {\n <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n @if (meta.programStageSections?.length) {\n @for (section of meta.programStageSections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n }\n\n @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n <div class=\"form__section-content\">\n @if (section.formFields?.length) {\n @for (field of section.formFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'TRACKER') {\n <form [formGroup]=\"form()\" class=\"form {{ configuration().directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) {\n @if (meta.sections?.length) {\n @for (section of meta.sections; track section?.id ?? $index) {\n <section class=\"form__section\">\n @if (section?.name) {\n @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n }\n }\n \n @if (!collapsibleSections() || isSectionOpen(section, $index)) {\n <div class=\"form__section-content\">\n \n @if (section.formFields?.length) {\n \n @for (field of section.formFields; track field?.id ?? $index) {\n <div>\n </div>\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n} @else {\n <form [formGroup]=\"form()\" class=\"{{ configuration().directionClassName }}\">\n <div class=\"form-name\">\n <h2>{{ configuration().formName }}</h2>\n </div>\n\n <div>\n {{ formMetaData().sections }}\n </div>\n <div\n *ngFor=\"let field of sanitizedFields\"\n class=\"form-field-{{ configuration().direction }}\"\n >\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n </form>\n} -->\n<!-- \n@if (programEntryFormConfig() && programEntryFormConfig()!.formType === 'EVENT')\n{\n<form\n [formGroup]=\"form()\"\n class=\"form {{ configuration().directionClassName }}\"\n>\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) { @if\n (meta?.programStageSections?.length) { @for (section of\n meta?.programStageSections; track section?.id ?? $index) { @let sectionId =\n 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc'; @let\n desc = section?.description; @let hasDesc = !!desc;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n @if (section?.name) { @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n [attr.aria-controls]=\"sectionId\"\n [attr.aria-describedby]=\"\n hasDesc && isSectionOpen(section, $index) ? descId : null\n \"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ section.name }} - {{ descId }}</div>\n @if (hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n (collapsibleSections() && hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionId\">\n @if (section.formFields?.length) { @for (field of\n getVisibleSectionFields(section); track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n \n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [optionCascadeConfigs]=\"optionCascadeConfigs()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n } } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } }\n</form>\n} @else if (programEntryFormConfig() && programEntryFormConfig()!.formType ===\n'TRACKER') {\n<form\n [formGroup]=\"form()\"\n class=\"form {{ configuration().directionClassName }}\"\n>\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ configuration().formName }}</h2>\n </div>\n\n @if (programEntryFormMetaData(); as meta) { @if (meta?.sections?.length) {\n @for (section of meta?.sections; track section?.id ?? $index) { @let sectionId\n = 'section-' + (section?.id ?? $index); @let descId = sectionId + '-desc';\n @let desc = section?.description; @let hasDesc = !!desc;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionId\">\n @if (section?.name) { @if (collapsibleSections()) {\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(section, $index)\"\n [attr.aria-expanded]=\"isSectionOpen(section, $index)\"\n [attr.aria-controls]=\"sectionId\"\n [attr.aria-describedby]=\"\n hasDesc && isSectionOpen(section, $index) ? descId : null\n \"\n >\n <span class=\"form__section-title\">{{ section.name }}</span>\n <span\n class=\"form__chevron\"\n [class.form__chevron--open]=\"isSectionOpen(section, $index)\"\n ></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">\n {{ section.name }}\n </div>\n @if (hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n } } } @if (!collapsibleSections() || isSectionOpen(section, $index)) { @if\n (collapsibleSections() && hasDesc) {\n <p class=\"form__section-description\" [id]=\"descId\">\n {{ desc }}\n </p>\n }\n <div class=\"form__section-content\" [id]=\"sectionId\">\n @if (section.formFields?.length) { @for (field of\n getVisibleSectionFields(section); track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n } } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n } @empty { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else { @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } } } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (field of sanitizedFields; track field?.id ?? $index) {\n <div class=\"form__field form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n } }\n</form>\n} @else {\n<form [formGroup]=\"form()\" [class]=\"configuration().directionClassName\">\n @if (configuration()?.formName) {\n <div class=\"form-name\">\n <h2>{{ configuration()?.formName }}</h2>\n </div>\n } @if (sanitizedFields?.length) { @for (field of sanitizedFields; track\n field?.id ?? $index) {\n <div class=\"form-field-{{ configuration().direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"field\"\n [fieldConfig]=\"configuration().fieldConfig\"\n [form]=\"form()\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntities()\"\n [dataId]=\"dataId()\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [optionCascadeConfigMap]=\"optionCascadeConfigMap()\"\n [programRuleActions]=\"programRuleActions()\"\n [isCheckBoxButton]=\"shouldRenderAsCheckBoxesButton()\"\n (fieldUpdate)=\"onFieldUpdate($event, field)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } } @else {\n <div class=\"text-sm text-gray-500\">No fields to display.</div>\n }\n</form>\n} -->\n\n@let entryFormConfig = programEntryFormConfig();\n@let entryFormMeta = programEntryFormMetaData();\n@let uiConfig = configuration();\n@let formGroupValue = form();\n\n@let isSectionsCollapsible = collapsibleSections();\n\n@let dataEntitiesValue = dataEntities();\n@let dataEntityId = dataId();\n@let orgUnitRootIds = customOrgUnitRoots();\n\n@let cascadeConfigMap = optionCascadeConfigMap();\n@let cascadeConfigs = optionCascadeConfigs();\n\n@let ruleActionList = programRuleActions();\n@let renderAsCheckboxButtons = shouldRenderAsCheckBoxesButton();\n\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n@let entryFormFieldControlKeyById = fieldControlKeyById();\n\n@if (entryFormConfig?.formType === 'EVENT') {\n <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n </div>\n\n @if (entryFormMeta?.programStageSections?.length) {\n @for (stageSection of entryFormMeta.programStageSections; track stageSection?.id ?? $index) {\n @if (isSectionVisible(stageSection, 'PROGRAM_STAGE_SECTION')) {\n @let sectionKey = stageSection?.id ?? $index;\n @let sectionDomId = 'section-' + sectionKey;\n @let descriptionDomId = sectionDomId + '-desc';\n @let sectionDescription = $safeNavigationMigration(stageSection?.description);\n @let hasDescription = !!sectionDescription;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n @if (stageSection?.name) {\n @if (isSectionsCollapsible) {\n @let isOpen = isSectionOpen(stageSection, $index);\n\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(stageSection, $index)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"sectionDomId\"\n [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n >\n <span class=\"form__section-title\">{{ stageSection.name }}</span>\n <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ stageSection.name }}</div>\n @if (hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n }\n }\n\n @let isOpen = !isSectionsCollapsible || isSectionOpen(stageSection, $index);\n @if (isOpen) {\n @if (isSectionsCollapsible && hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionDomId\">\n @if (stageSection?.formFields?.length) {\n @for (visibleField of getVisibleSectionFields(stageSection); track visibleField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"visibleField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [optionCascadeConfigs]=\"cascadeConfigs\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n }\n } @empty {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n\n} @else if (entryFormConfig?.formType === 'TRACKER') {\n\n <form [formGroup]=\"formGroupValue\" class=\"form {{ uiConfig.directionClassName }}\">\n <div class=\"form__header\">\n <h2 class=\"form__title\">{{ uiConfig.formName }}</h2>\n </div>\n\n @if (entryFormMeta?.sections?.length) {\n @for (teiSection of entryFormMeta.sections; track teiSection?.id ?? $index) {\n @if (isSectionVisible(teiSection, 'PROGRAM_SECTION')) {\n @let sectionKey = teiSection?.id ?? $index;\n @let sectionDomId = 'section-' + sectionKey;\n @let descriptionDomId = sectionDomId + '-desc';\n @let sectionDescription = $safeNavigationMigration(teiSection?.description);\n @let hasDescription = !!sectionDescription;\n\n <section class=\"form__section\" [attr.data-section-id]=\"sectionDomId\">\n @if (teiSection?.name) {\n @if (isSectionsCollapsible) {\n @let isOpen = isSectionOpen(teiSection, $index);\n\n <button\n type=\"button\"\n class=\"form__section-toggle\"\n (click)=\"openSection(teiSection, $index)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"sectionDomId\"\n [attr.aria-describedby]=\"hasDescription && isOpen ? descriptionDomId : null\"\n >\n <span class=\"form__section-title\">{{ teiSection.name }}</span>\n <span class=\"form__chevron\" [class.form__chevron--open]=\"isOpen\"></span>\n </button>\n } @else {\n <div class=\"form__field-group-name\">{{ teiSection.name }}</div>\n @if (hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n }\n }\n\n @let isOpen = !isSectionsCollapsible || isSectionOpen(teiSection, $index);\n @if (isOpen) {\n @if (isSectionsCollapsible && hasDescription) {\n <p class=\"form__section-description\" [id]=\"descriptionDomId\">\n {{ sectionDescription }}\n </p>\n }\n\n <div class=\"form__section-content\" [id]=\"sectionDomId\">\n @if (teiSection?.formFields?.length) {\n @for (visibleField of getVisibleSectionFields(teiSection); track visibleField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"visibleField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, visibleField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n } @else {\n <div class=\"form__empty\">No fields available for this section.</div>\n }\n </div>\n }\n </section>\n }\n } @empty {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n } @else {\n <div class=\"form__empty\">No metadata available</div>\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form__field form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n } @empty {\n <div class=\"form__empty\">No fields to display.</div>\n }\n }\n </form>\n\n} @else {\n\n <form [formGroup]=\"formGroupValue\" [class]=\"uiConfig.directionClassName\">\n @if (uiConfig?.formName) {\n <div class=\"form-name\">\n <h2>{{ uiConfig.formName }}</h2>\n </div>\n }\n\n @if (sanitizedFields?.length) {\n @for (fallbackField of sanitizedFields; track fallbackField?.id ?? $index) {\n <div class=\"form-field-{{ uiConfig.direction }}\">\n <ng-dhis2-ui-form-field\n [field]=\"fallbackField\"\n [fieldConfig]=\"uiConfig.fieldConfig\"\n [form]=\"formGroupValue\"\n [fieldClass]=\"fieldClass()\"\n [dataEntities]=\"dataEntitiesValue\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"orgUnitRootIds\"\n [optionCascadeConfigMap]=\"cascadeConfigMap\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [fieldControlKeyById]=\"entryFormFieldControlKeyById\"\n [programRuleActions]=\"ruleActionList\"\n [isCheckBoxButton]=\"renderAsCheckboxButtons\"\n (fieldUpdate)=\"onFieldUpdate($event, fallbackField)\"\n (runtimeOptionChange)=\"onRunTimeOptionUpdate($event)\"\n />\n </div>\n }\n } @else {\n <div class=\"text-sm text-gray-500\">No fields to display.</div>\n }\n </form>\n\n}\n", styles: ["@charset \"UTF-8\";.form__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;padding:14px 16px 16px;background-color:#e8edf2;color:#374151;border:0;cursor:pointer;text-align:left}.form__section-toggle:focus{outline:2px solid #93c5fd;outline-offset:2px}.form__section-title{pointer-events:none}.form__chevron{width:10px;height:10px;display:inline-block;margin-left:12px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .12s ease-in-out}.form__chevron--open{transform:rotate(45deg)}.form__section{border:1px solid #eee;margin-bottom:16px;background-color:#fff}.form__field-group-name{display:inline-flex;font-size:14px;font-weight:600;padding:8px 16px;background-color:#e8edf2;color:#374151}.form__section-content{padding:16px}.form__section-description{margin:5px 5px 15px;font-size:15px;line-height:1.5;color:#4b5563;white-space:pre-line}.form__section-description:before{content:\"\";display:inline-block;width:4px;height:.9em;margin-right:8px;vertical-align:-2px;background-color:#cbd5e1;border-radius:2px}\n"] }]
|
|
11051
|
+
}], ctorParameters: () => [], propDecorators: { programEntryFormConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "programEntryFormConfig", required: false }] }], formConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "formConfig", required: false }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], isFormHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFormHorizontal", required: false }] }], showSaveButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSaveButton", required: false }] }], fieldsData: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsData", required: false }] }], formMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMetaData", required: false }] }], programEntryFormMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "programEntryFormMetaData", required: false }] }], fieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClass", required: false }] }], shouldRenderAsCheckBoxesButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldRenderAsCheckBoxesButton", required: false }] }], programRuleActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "programRuleActions", required: false }] }], dataEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataEntities", required: false }] }], dataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataId", required: false }] }], customOrgUnitRoots: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOrgUnitRoots", required: false }] }], optionCascadeConfigs: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionCascadeConfigs", required: false }] }], coordinatePickerGeoConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordinatePickerGeoConfig", required: false }] }], program: [{ type: i0.Input, args: [{ isSignal: true, alias: "program", required: false }] }], collapsibleSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsibleSections", required: false }] }], formUpdate: [{
|
|
11052
|
+
type: Output
|
|
11053
|
+
}], formValidityUpdate: [{
|
|
11054
|
+
type: Output
|
|
11055
|
+
}], fieldComponents: [{
|
|
11056
|
+
type: ViewChildren,
|
|
11057
|
+
args: [FormFieldComponent]
|
|
11058
|
+
}] } });
|
|
11322
11059
|
|
|
11323
11060
|
class RepeatableFormComponent {
|
|
11324
11061
|
#eventFormValue$;
|
|
@@ -11326,15 +11063,21 @@ class RepeatableFormComponent {
|
|
|
11326
11063
|
#events$;
|
|
11327
11064
|
constructor() {
|
|
11328
11065
|
this.ngZone = inject(NgZone);
|
|
11329
|
-
this.fieldGroup = input.required(
|
|
11330
|
-
|
|
11331
|
-
this.
|
|
11066
|
+
this.fieldGroup = input.required(/* @ts-ignore */
|
|
11067
|
+
...(ngDevMode ? [{ debugName: "fieldGroup" }] : /* istanbul ignore next */ []));
|
|
11068
|
+
this.events = model(/* @ts-ignore */
|
|
11069
|
+
...(ngDevMode ? [undefined, { debugName: "events" }] : /* istanbul ignore next */ []));
|
|
11070
|
+
this.dataEntities = input.required(/* @ts-ignore */
|
|
11071
|
+
...(ngDevMode ? [{ debugName: "dataEntities" }] : /* istanbul ignore next */ []));
|
|
11332
11072
|
this.repeatableEvents = [];
|
|
11333
11073
|
this.repeatableData = {};
|
|
11334
11074
|
this.repeatableStageUpdate = new EventEmitter();
|
|
11335
|
-
this.eventFormValue = signal(null,
|
|
11336
|
-
|
|
11337
|
-
this.
|
|
11075
|
+
this.eventFormValue = signal(null, /* @ts-ignore */
|
|
11076
|
+
...(ngDevMode ? [{ debugName: "eventFormValue" }] : /* istanbul ignore next */ []));
|
|
11077
|
+
this.showForm = signal(false, /* @ts-ignore */
|
|
11078
|
+
...(ngDevMode ? [{ debugName: "showForm" }] : /* istanbul ignore next */ []));
|
|
11079
|
+
this.eventIndex = signal(0, /* @ts-ignore */
|
|
11080
|
+
...(ngDevMode ? [{ debugName: "eventIndex" }] : /* istanbul ignore next */ []));
|
|
11338
11081
|
this.#eventFormValue$ = toObservable(this.eventFormValue);
|
|
11339
11082
|
this.#showForm$ = toObservable(this.showForm);
|
|
11340
11083
|
this.#events$ = toObservable(this.events);
|
|
@@ -11369,29 +11112,29 @@ class RepeatableFormComponent {
|
|
|
11369
11112
|
[this.eventIndex()]: formValue,
|
|
11370
11113
|
};
|
|
11371
11114
|
}
|
|
11372
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
11373
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
11115
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RepeatableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11116
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: RepeatableFormComponent, isStandalone: false, selector: "ng-dhis2-ui-repeatable-form", inputs: { formObject: { classPropertyName: "formObject", publicName: "formObject", isSignal: false, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: false, isRequired: false, transformFunction: null }, fieldGroup: { classPropertyName: "fieldGroup", publicName: "fieldGroup", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, numberOfRows: { classPropertyName: "numberOfRows", publicName: "numberOfRows", isSignal: false, isRequired: false, transformFunction: null }, programRuleActions: { classPropertyName: "programRuleActions", publicName: "programRuleActions", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: false, isRequired: false, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: false, isRequired: false, transformFunction: null }, repeatDependentField: { classPropertyName: "repeatDependentField", publicName: "repeatDependentField", isSignal: false, isRequired: false, transformFunction: null }, dataEntities: { classPropertyName: "dataEntities", publicName: "dataEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { events: "eventsChange", repeatableStageUpdate: "repeatableStageUpdate" }, ngImport: i0, template: "<div class=\"form__repeatable-stage-container\">\n <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n @if(showForm()) {\n <div class=\"form__repeatable-stage-form\">\n <ng-dhis2-ui-form\n [fields]=\"fieldGroup().fields || []\"\n [form]=\"eventForm\"\n [programRuleActions]=\"programRuleActions\"\n [dataEntities]=\"{}\"\n [isFormHorizontal]=\"false\"\n (formUpdate)=\"onFormUpdate($event)\"\n >\n </ng-dhis2-ui-form>\n\n <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n </div>\n }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"], dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["programEntryFormConfig", "formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "formMetaData", "programEntryFormMetaData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId", "customOrgUnitRoots", "optionCascadeConfigs", "coordinatePickerGeoConfig", "program", "collapsibleSections"], outputs: ["formUpdate", "formValidityUpdate"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
11374
11117
|
}
|
|
11375
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11118
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RepeatableFormComponent, decorators: [{
|
|
11376
11119
|
type: Component,
|
|
11377
|
-
args: [{ selector: 'ng-dhis2-ui-repeatable-form', standalone: false, template: "<div class=\"form__repeatable-stage-container\">\n <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n @if(showForm()) {\n <div class=\"form__repeatable-stage-form\">\n <ng-dhis2-ui-form\n [fields]=\"fieldGroup().fields || []\"\n [form]=\"eventForm\"\n [programRuleActions]=\"programRuleActions\"\n [dataEntities]=\"{}\"\n [isFormHorizontal]=\"false\"\n (formUpdate)=\"onFormUpdate($event)\"\n >\n </ng-dhis2-ui-form>\n\n <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n </div>\n }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"] }]
|
|
11120
|
+
args: [{ selector: 'ng-dhis2-ui-repeatable-form', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"form__repeatable-stage-container\">\n <!-- <ng-dhis2-ui-wrapper [component]=\"EventTable()\"></ng-dhis2-ui-wrapper> -->\n @if(showForm()) {\n <div class=\"form__repeatable-stage-form\">\n <ng-dhis2-ui-form\n [fields]=\"fieldGroup().fields || []\"\n [form]=\"eventForm\"\n [programRuleActions]=\"programRuleActions\"\n [dataEntities]=\"{}\"\n [isFormHorizontal]=\"false\"\n (formUpdate)=\"onFormUpdate($event)\"\n >\n </ng-dhis2-ui-form>\n\n <!-- <ng-dhis2-ui-wrapper [component]=\"FormActionButtons\"></ng-dhis2-ui-wrapper> -->\n </div>\n }\n</div>\n", styles: [".form__repeatable-stage-container{margin-top:16px}.form__repeatable-stage-form{border:solid 1px rgb(232,237,242);border-top-style:none;background-color:#fff;padding:16px}\n"] }]
|
|
11378
11121
|
}], ctorParameters: () => [], propDecorators: { formObject: [{
|
|
11379
11122
|
type: Input
|
|
11380
11123
|
}], formData: [{
|
|
11381
11124
|
type: Input
|
|
11382
|
-
}], form: [{
|
|
11125
|
+
}], fieldGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldGroup", required: true }] }], form: [{
|
|
11383
11126
|
type: Input
|
|
11384
11127
|
}], numberOfRows: [{
|
|
11385
11128
|
type: Input
|
|
11386
11129
|
}], programRuleActions: [{
|
|
11387
11130
|
type: Input
|
|
11388
|
-
}], program: [{
|
|
11131
|
+
}], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }, { type: i0.Output, args: ["eventsChange"] }], program: [{
|
|
11389
11132
|
type: Input
|
|
11390
11133
|
}], programStage: [{
|
|
11391
11134
|
type: Input
|
|
11392
11135
|
}], repeatDependentField: [{
|
|
11393
11136
|
type: Input
|
|
11394
|
-
}], repeatableStageUpdate: [{
|
|
11137
|
+
}], dataEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataEntities", required: true }] }], repeatableStageUpdate: [{
|
|
11395
11138
|
type: Output
|
|
11396
11139
|
}] } });
|
|
11397
11140
|
|
|
@@ -11399,18 +11142,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
11399
11142
|
class SectionFormComponent {
|
|
11400
11143
|
constructor() {
|
|
11401
11144
|
this.ngZone = inject(NgZone);
|
|
11402
|
-
this.loading = input(
|
|
11403
|
-
|
|
11404
|
-
this.
|
|
11145
|
+
this.loading = input(/* @ts-ignore */
|
|
11146
|
+
...(ngDevMode ? [undefined, { debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
11147
|
+
this.formMetaData = input.required(/* @ts-ignore */
|
|
11148
|
+
...(ngDevMode ? [{ debugName: "formMetaData" }] : /* istanbul ignore next */ []));
|
|
11149
|
+
this.dataValueEntities = input.required(/* @ts-ignore */
|
|
11150
|
+
...(ngDevMode ? [{ debugName: "dataValueEntities" }] : /* istanbul ignore next */ []));
|
|
11405
11151
|
this.formGroups = {};
|
|
11406
11152
|
this.formValueEntity = {};
|
|
11407
11153
|
this.repeatableFormValueEntity = {};
|
|
11408
|
-
this.ruleActions = signal([],
|
|
11154
|
+
this.ruleActions = signal([], /* @ts-ignore */
|
|
11155
|
+
...(ngDevMode ? [{ debugName: "ruleActions" }] : /* istanbul ignore next */ []));
|
|
11409
11156
|
this.save = new EventEmitter();
|
|
11410
11157
|
this.formUpdate = new EventEmitter();
|
|
11411
11158
|
this.cancel = new EventEmitter();
|
|
11412
11159
|
this.formValidityUpdate = new EventEmitter();
|
|
11413
|
-
this.inValid = signal(true,
|
|
11160
|
+
this.inValid = signal(true, /* @ts-ignore */
|
|
11161
|
+
...(ngDevMode ? [{ debugName: "inValid" }] : /* istanbul ignore next */ []));
|
|
11414
11162
|
this.inValid$ = toObservable(this.inValid);
|
|
11415
11163
|
}
|
|
11416
11164
|
ngOnInit() {
|
|
@@ -11497,13 +11245,13 @@ class SectionFormComponent {
|
|
|
11497
11245
|
.some((validity) => !validity);
|
|
11498
11246
|
return valueValidity || repeatableDataValidity;
|
|
11499
11247
|
}
|
|
11500
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
11501
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
11248
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SectionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11249
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SectionFormComponent, isStandalone: false, selector: "ng-dhis2-ui-section-form", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: true, transformFunction: null }, dataValueEntities: { classPropertyName: "dataValueEntities", publicName: "dataValueEntities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { save: "save", formUpdate: "formUpdate", cancel: "cancel", formValidityUpdate: "formValidityUpdate" }, ngImport: i0, template: "@if (formMetaData()) {\n @for (formSection of formMetaData().sections; track formSection) {\n @if(formSection?.name; as sectionName) {\n <div class=\"form__section-name\">\n {{ sectionName }}\n </div>\n }\n <div class=\"form__section-content\">\n @if (formSection) {\n @for (fieldGroup of formSection?.fieldGroups; track fieldGroup) {\n <div>\n @if (formGroups[fieldGroup.id]; as formGroup) {\n @if (fieldGroup.name && !fieldGroup.repeatableStage) {\n <div\n class=\"form__field-group-name\"\n >\n {{ fieldGroup?.name }}\n </div>\n }\n @if (fieldGroup.fields) {\n <div>\n <!-- Single stage form section -->\n @if (!fieldGroup.repeatableStage) {\n @if (fieldGroup.fields.length > 0) {\n <ng-dhis2-ui-form\n [fields]=\"fieldGroup.fields\"\n [form]=\"formGroup\"\n [dataEntities]=\"dataValueEntities()\"\n [programRuleActions]=\"ruleActions()\"\n [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n ></ng-dhis2-ui-form>\n }\n }\n <!-- Repeatable stage form section -->\n @if (fieldGroup.repeatableStage) {\n @if(fieldGroup.repeatDependentField) {\n @if (fieldGroup.repeatDependentField) {\n @if ({\n numberOfRows:\n dataValueEntities()[fieldGroup.repeatDependentField]\n }; as dataParams) {\n @if (\n dataParams.numberOfRows &&\n dataParams.numberOfRows !== '0'\n ) {\n <ng-dhis2-ui-repeatable-form\n [fieldGroup]=\"fieldGroup\"\n [dataEntities]=\"dataValueEntities()\"\n [form]=\"formGroup\"\n [program]=\"formSection.program || ''\"\n [programStage]=\"fieldGroup.repeatableStage\"\n [programRuleActions]=\"ruleActions()\"\n [numberOfRows]=\"+dataParams.numberOfRows\"\n [repeatDependentField]=\"\n fieldGroup.repeatDependentField || ''\n \"\n [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n (repeatableStageUpdate)=\"\n onUpdateRepeatableStage($event, fieldGroup)\n \"\n ></ng-dhis2-ui-repeatable-form\n >\n }\n }\n }\n } @else {\n <ng-dhis2-ui-repeatable-form\n [fieldGroup]=\"fieldGroup\"\n [dataEntities]=\"dataValueEntities()\"\n [form]=\"formGroup\"\n [program]=\"formSection.program || ''\"\n [programStage]=\"fieldGroup.repeatableStage\"\n [programRuleActions]=\"ruleActions()\"\n [numberOfRows]=\"1\"\n [repeatDependentField]=\"fieldGroup.repeatDependentField || ''\"\n [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n (repeatableStageUpdate)=\"\n onUpdateRepeatableStage($event, fieldGroup)\n \"\n ></ng-dhis2-ui-repeatable-form>\n }\n }\n </div>\n }\n }\n </div>\n }\n }\n </div>\n }\n }\n", styles: [".form__section-name{font-size:16px;font-weight:600;margin-bottom:16px}.form__section-content{margin-bottom:24px}.form__field-group-name{font-size:14px;font-weight:500;padding-bottom:8px;border-bottom:solid 1px rgb(232,237,242);margin-bottom:16px}\n"], dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["programEntryFormConfig", "formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "formMetaData", "programEntryFormMetaData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId", "customOrgUnitRoots", "optionCascadeConfigs", "coordinatePickerGeoConfig", "program", "collapsibleSections"], outputs: ["formUpdate", "formValidityUpdate"] }, { kind: "component", type: RepeatableFormComponent, selector: "ng-dhis2-ui-repeatable-form", inputs: ["formObject", "formData", "fieldGroup", "form", "numberOfRows", "programRuleActions", "events", "program", "programStage", "repeatDependentField", "dataEntities"], outputs: ["eventsChange", "repeatableStageUpdate"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
11502
11250
|
}
|
|
11503
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SectionFormComponent, decorators: [{
|
|
11504
11252
|
type: Component,
|
|
11505
|
-
args: [{ selector: 'ng-dhis2-ui-section-form', standalone: false, template: "
|
|
11506
|
-
}], ctorParameters: () => [], propDecorators: { save: [{
|
|
11253
|
+
args: [{ selector: 'ng-dhis2-ui-section-form', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (formMetaData()) {\n @for (formSection of formMetaData().sections; track formSection) {\n @if(formSection?.name; as sectionName) {\n <div class=\"form__section-name\">\n {{ sectionName }}\n </div>\n }\n <div class=\"form__section-content\">\n @if (formSection) {\n @for (fieldGroup of formSection?.fieldGroups; track fieldGroup) {\n <div>\n @if (formGroups[fieldGroup.id]; as formGroup) {\n @if (fieldGroup.name && !fieldGroup.repeatableStage) {\n <div\n class=\"form__field-group-name\"\n >\n {{ fieldGroup?.name }}\n </div>\n }\n @if (fieldGroup.fields) {\n <div>\n <!-- Single stage form section -->\n @if (!fieldGroup.repeatableStage) {\n @if (fieldGroup.fields.length > 0) {\n <ng-dhis2-ui-form\n [fields]=\"fieldGroup.fields\"\n [form]=\"formGroup\"\n [dataEntities]=\"dataValueEntities()\"\n [programRuleActions]=\"ruleActions()\"\n [isFormHorizontal]=\"fieldGroup.isFormHorizontal || false\"\n (formUpdate)=\"onFormUpdate($event, fieldGroup.id)\"\n ></ng-dhis2-ui-form>\n }\n }\n <!-- Repeatable stage form section -->\n @if (fieldGroup.repeatableStage) {\n @if(fieldGroup.repeatDependentField) {\n @if (fieldGroup.repeatDependentField) {\n @if ({\n numberOfRows:\n dataValueEntities()[fieldGroup.repeatDependentField]\n }; as dataParams) {\n @if (\n dataParams.numberOfRows &&\n dataParams.numberOfRows !== '0'\n ) {\n <ng-dhis2-ui-repeatable-form\n [fieldGroup]=\"fieldGroup\"\n [dataEntities]=\"dataValueEntities()\"\n [form]=\"formGroup\"\n [program]=\"formSection.program || ''\"\n [programStage]=\"fieldGroup.repeatableStage\"\n [programRuleActions]=\"ruleActions()\"\n [numberOfRows]=\"+dataParams.numberOfRows\"\n [repeatDependentField]=\"\n fieldGroup.repeatDependentField || ''\n \"\n [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n (repeatableStageUpdate)=\"\n onUpdateRepeatableStage($event, fieldGroup)\n \"\n ></ng-dhis2-ui-repeatable-form\n >\n }\n }\n }\n } @else {\n <ng-dhis2-ui-repeatable-form\n [fieldGroup]=\"fieldGroup\"\n [dataEntities]=\"dataValueEntities()\"\n [form]=\"formGroup\"\n [program]=\"formSection.program || ''\"\n [programStage]=\"fieldGroup.repeatableStage\"\n [programRuleActions]=\"ruleActions()\"\n [numberOfRows]=\"1\"\n [repeatDependentField]=\"fieldGroup.repeatDependentField || ''\"\n [events]=\"dataValueEntities()[fieldGroup.dataKey!]\"\n (repeatableStageUpdate)=\"\n onUpdateRepeatableStage($event, fieldGroup)\n \"\n ></ng-dhis2-ui-repeatable-form>\n }\n }\n </div>\n }\n }\n </div>\n }\n }\n </div>\n }\n }\n", styles: [".form__section-name{font-size:16px;font-weight:600;margin-bottom:16px}.form__section-content{margin-bottom:24px}.form__field-group-name{font-size:14px;font-weight:500;padding-bottom:8px;border-bottom:solid 1px rgb(232,237,242);margin-bottom:16px}\n"] }]
|
|
11254
|
+
}], ctorParameters: () => [], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], formMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMetaData", required: true }] }], dataValueEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataValueEntities", required: true }] }], save: [{
|
|
11507
11255
|
type: Output
|
|
11508
11256
|
}], formUpdate: [{
|
|
11509
11257
|
type: Output
|
|
@@ -11520,21 +11268,35 @@ class BaseFormWrapperComponent {
|
|
|
11520
11268
|
#updatedDataValues;
|
|
11521
11269
|
constructor() {
|
|
11522
11270
|
this.ngZone = inject(NgZone);
|
|
11523
|
-
this.name = input(
|
|
11524
|
-
|
|
11525
|
-
this.
|
|
11526
|
-
|
|
11527
|
-
this.
|
|
11528
|
-
|
|
11529
|
-
this.
|
|
11530
|
-
|
|
11531
|
-
this.
|
|
11532
|
-
|
|
11271
|
+
this.name = input(/* @ts-ignore */
|
|
11272
|
+
...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
11273
|
+
this.fields = input.required(/* @ts-ignore */
|
|
11274
|
+
...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
|
|
11275
|
+
this.rules = input([], /* @ts-ignore */
|
|
11276
|
+
...(ngDevMode ? [{ debugName: "rules" }] : /* istanbul ignore next */ []));
|
|
11277
|
+
this.dataValues = input({}, /* @ts-ignore */
|
|
11278
|
+
...(ngDevMode ? [{ debugName: "dataValues" }] : /* istanbul ignore next */ []));
|
|
11279
|
+
this.dataId = input(/* @ts-ignore */
|
|
11280
|
+
...(ngDevMode ? [undefined, { debugName: "dataId" }] : /* istanbul ignore next */ []));
|
|
11281
|
+
this.customOrgUnitRoots = input(/* @ts-ignore */
|
|
11282
|
+
...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : /* istanbul ignore next */ []));
|
|
11283
|
+
this.coordinatePickerGeoConfig = input(/* @ts-ignore */
|
|
11284
|
+
...(ngDevMode ? [undefined, { debugName: "coordinatePickerGeoConfig" }] : /* istanbul ignore next */ []));
|
|
11285
|
+
this.formMetaData = input(/* @ts-ignore */
|
|
11286
|
+
...(ngDevMode ? [undefined, { debugName: "formMetaData" }] : /* istanbul ignore next */ []));
|
|
11287
|
+
this.programEntryFormMetaData = input(/* @ts-ignore */
|
|
11288
|
+
...(ngDevMode ? [undefined, { debugName: "programEntryFormMetaData" }] : /* istanbul ignore next */ []));
|
|
11289
|
+
this.programStage = input(/* @ts-ignore */
|
|
11290
|
+
...(ngDevMode ? [undefined, { debugName: "programStage" }] : /* istanbul ignore next */ []));
|
|
11533
11291
|
//TODO: FIND BETTER WAY TO PASS PROGRAM TO FIELDS i.e field extensions
|
|
11534
|
-
this.program = input(
|
|
11535
|
-
|
|
11536
|
-
this.
|
|
11537
|
-
|
|
11292
|
+
this.program = input(/* @ts-ignore */
|
|
11293
|
+
...(ngDevMode ? [undefined, { debugName: "program" }] : /* istanbul ignore next */ []));
|
|
11294
|
+
this.ruleActions = signal([], /* @ts-ignore */
|
|
11295
|
+
...(ngDevMode ? [{ debugName: "ruleActions" }] : /* istanbul ignore next */ []));
|
|
11296
|
+
this.isFormValid = signal(true, /* @ts-ignore */
|
|
11297
|
+
...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
|
|
11298
|
+
this.#updatedDataValues = signal({}, /* @ts-ignore */
|
|
11299
|
+
...(ngDevMode ? [{ debugName: "#updatedDataValues" }] : /* istanbul ignore next */ []));
|
|
11538
11300
|
this.formSave = new EventEmitter();
|
|
11539
11301
|
this.formUpdate = new EventEmitter();
|
|
11540
11302
|
this.formCancel = new EventEmitter();
|
|
@@ -11543,7 +11305,8 @@ class BaseFormWrapperComponent {
|
|
|
11543
11305
|
if (this.#updatedDataValues()) {
|
|
11544
11306
|
this.executeRules();
|
|
11545
11307
|
}
|
|
11546
|
-
},
|
|
11308
|
+
}, /* @ts-ignore */
|
|
11309
|
+
...(ngDevMode ? [{ debugName: "ruleProcessor" }] : /* istanbul ignore next */ []));
|
|
11547
11310
|
}
|
|
11548
11311
|
updateDataValues(dataValues) {
|
|
11549
11312
|
this.#updatedDataValues.set(dataValues);
|
|
@@ -11562,12 +11325,12 @@ class BaseFormWrapperComponent {
|
|
|
11562
11325
|
ngOnDestroy() {
|
|
11563
11326
|
this.ruleProcessor.destroy();
|
|
11564
11327
|
}
|
|
11565
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
11566
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
11328
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BaseFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
11329
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: BaseFormWrapperComponent, isStandalone: true, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, rules: { classPropertyName: "rules", publicName: "rules", isSignal: true, isRequired: false, transformFunction: null }, dataValues: { classPropertyName: "dataValues", publicName: "dataValues", 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 }, coordinatePickerGeoConfig: { classPropertyName: "coordinatePickerGeoConfig", publicName: "coordinatePickerGeoConfig", 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 }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: true, isRequired: false, transformFunction: null }, program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSave: "formSave", formUpdate: "formUpdate", formCancel: "formCancel", formValidityUpdate: "formValidityUpdate" }, ngImport: i0 }); }
|
|
11567
11330
|
}
|
|
11568
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: BaseFormWrapperComponent, decorators: [{
|
|
11569
11332
|
type: Directive
|
|
11570
|
-
}], ctorParameters: () => [], propDecorators: { formSave: [{
|
|
11333
|
+
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], rules: [{ type: i0.Input, args: [{ isSignal: true, alias: "rules", required: false }] }], dataValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataValues", required: false }] }], dataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataId", required: false }] }], customOrgUnitRoots: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOrgUnitRoots", required: false }] }], coordinatePickerGeoConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordinatePickerGeoConfig", required: false }] }], formMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMetaData", required: false }] }], programEntryFormMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "programEntryFormMetaData", required: false }] }], programStage: [{ type: i0.Input, args: [{ isSignal: true, alias: "programStage", required: false }] }], program: [{ type: i0.Input, args: [{ isSignal: true, alias: "program", required: false }] }], formSave: [{
|
|
11571
11334
|
type: Output
|
|
11572
11335
|
}], formUpdate: [{
|
|
11573
11336
|
type: Output
|
|
@@ -11580,9 +11343,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
11580
11343
|
class FlatFormComponent extends BaseFormWrapperComponent {
|
|
11581
11344
|
constructor() {
|
|
11582
11345
|
super(...arguments);
|
|
11583
|
-
this.collapsibleSections = input(false,
|
|
11584
|
-
|
|
11585
|
-
this.
|
|
11346
|
+
this.collapsibleSections = input(false, /* @ts-ignore */
|
|
11347
|
+
...(ngDevMode ? [{ debugName: "collapsibleSections" }] : /* istanbul ignore next */ []));
|
|
11348
|
+
this.programEntryFormConfig = input.required(/* @ts-ignore */
|
|
11349
|
+
...(ngDevMode ? [{ debugName: "programEntryFormConfig" }] : /* istanbul ignore next */ []));
|
|
11350
|
+
this.optionCascadeConfigs = input([], /* @ts-ignore */
|
|
11351
|
+
...(ngDevMode ? [{ debugName: "optionCascadeConfigs" }] : /* istanbul ignore next */ []));
|
|
11586
11352
|
}
|
|
11587
11353
|
ngOnInit() {
|
|
11588
11354
|
this.formGroup = FormUtil.getFormGroup(this.fields(), this.dataValues());
|
|
@@ -11592,17 +11358,17 @@ class FlatFormComponent extends BaseFormWrapperComponent {
|
|
|
11592
11358
|
this.updateDataValues(this.formGroup.getRawValue());
|
|
11593
11359
|
this.updateFormValidity(this.formGroup.valid);
|
|
11594
11360
|
}
|
|
11595
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
11596
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
11361
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FlatFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
11362
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FlatFormComponent, isStandalone: false, selector: "ng-dhis2-ui-flat-form", inputs: { collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null }, programEntryFormConfig: { classPropertyName: "programEntryFormConfig", publicName: "programEntryFormConfig", isSignal: true, isRequired: true, transformFunction: null }, optionCascadeConfigs: { classPropertyName: "optionCascadeConfigs", publicName: "optionCascadeConfigs", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@let entryFormConfig = programEntryFormConfig();\n@let collapsibleSectionConfig = collapsibleSections();\n@let optionCascadeConfigMap = optionCascadeConfigs();\n@let entryFormMetaData = programEntryFormMetaData();\n@let entryFormFields = fields();\n@let formDataValues = dataValues();\n@let dataEntityId = dataId();\n@let customOrgUnitRootIds = customOrgUnitRoots();\n@let programRuleActionList = ruleActions();\n@let activeProgram = program();\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n\n<ng-dhis2-ui-form\n [programEntryFormConfig]=\"entryFormConfig\"\n [collapsibleSections]=\"collapsibleSectionConfig\"\n [optionCascadeConfigs]=\"optionCascadeConfigMap\"\n [programEntryFormMetaData]=\"entryFormMetaData\"\n [fields]=\"entryFormFields\"\n [form]=\"formGroup\"\n [dataEntities]=\"formDataValues\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"customOrgUnitRootIds\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [programRuleActions]=\"programRuleActionList\"\n [program]=\"activeProgram\"\n (formUpdate)=\"onFormUpdate()\"\n/>\n", dependencies: [{ kind: "component", type: FormComponent, selector: "ng-dhis2-ui-form", inputs: ["programEntryFormConfig", "formConfig", "fields", "form", "isFormHorizontal", "showSaveButton", "fieldsData", "formMetaData", "programEntryFormMetaData", "fieldClass", "shouldRenderAsCheckBoxesButton", "programRuleActions", "dataEntities", "dataId", "customOrgUnitRoots", "optionCascadeConfigs", "coordinatePickerGeoConfig", "program", "collapsibleSections"], outputs: ["formUpdate", "formValidityUpdate"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
11597
11363
|
}
|
|
11598
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FlatFormComponent, decorators: [{
|
|
11599
11365
|
type: Component,
|
|
11600
|
-
args: [{ selector: 'ng-dhis2-ui-flat-form', standalone: false, template: "@let entryFormConfig = programEntryFormConfig();\n@let collapsibleSectionConfig = collapsibleSections();\n@let optionCascadeConfigMap = optionCascadeConfigs();\n@let entryFormMetaData = programEntryFormMetaData();\n@let entryFormFields = fields();\n@let formDataValues = dataValues();\n@let dataEntityId = dataId();\n@let customOrgUnitRootIds = customOrgUnitRoots();\n@let programRuleActionList = ruleActions();\n@let activeProgram = program();\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n\n<ng-dhis2-ui-form\n [programEntryFormConfig]=\"entryFormConfig\"\n [collapsibleSections]=\"collapsibleSectionConfig\"\n [optionCascadeConfigs]=\"optionCascadeConfigMap\"\n [programEntryFormMetaData]=\"entryFormMetaData\"\n [fields]=\"entryFormFields\"\n [form]=\"formGroup\"\n [dataEntities]=\"formDataValues\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"customOrgUnitRootIds\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [programRuleActions]=\"programRuleActionList\"\n [program]=\"activeProgram\"\n (formUpdate)=\"onFormUpdate()\"\n/>\n" }]
|
|
11601
|
-
}] });
|
|
11366
|
+
args: [{ selector: 'ng-dhis2-ui-flat-form', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@let entryFormConfig = programEntryFormConfig();\n@let collapsibleSectionConfig = collapsibleSections();\n@let optionCascadeConfigMap = optionCascadeConfigs();\n@let entryFormMetaData = programEntryFormMetaData();\n@let entryFormFields = fields();\n@let formDataValues = dataValues();\n@let dataEntityId = dataId();\n@let customOrgUnitRootIds = customOrgUnitRoots();\n@let programRuleActionList = ruleActions();\n@let activeProgram = program();\n@let entryFormCoordinatePickerGeoConfig = coordinatePickerGeoConfig();\n\n<ng-dhis2-ui-form\n [programEntryFormConfig]=\"entryFormConfig\"\n [collapsibleSections]=\"collapsibleSectionConfig\"\n [optionCascadeConfigs]=\"optionCascadeConfigMap\"\n [programEntryFormMetaData]=\"entryFormMetaData\"\n [fields]=\"entryFormFields\"\n [form]=\"formGroup\"\n [dataEntities]=\"formDataValues\"\n [dataId]=\"dataEntityId\"\n [customOrgUnitRoots]=\"customOrgUnitRootIds\"\n [coordinatePickerGeoConfig]=\"entryFormCoordinatePickerGeoConfig\"\n [programRuleActions]=\"programRuleActionList\"\n [program]=\"activeProgram\"\n (formUpdate)=\"onFormUpdate()\"\n/>\n" }]
|
|
11367
|
+
}], propDecorators: { collapsibleSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsibleSections", required: false }] }], programEntryFormConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "programEntryFormConfig", required: true }] }], optionCascadeConfigs: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionCascadeConfigs", required: false }] }] } });
|
|
11602
11368
|
|
|
11603
11369
|
class D2FormModule {
|
|
11604
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
11605
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
11370
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: D2FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
11371
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: D2FormModule, declarations: [FormFieldComponent,
|
|
11606
11372
|
FormComponent,
|
|
11607
11373
|
RepeatableFormComponent,
|
|
11608
11374
|
SectionFormComponent,
|
|
@@ -11615,11 +11381,11 @@ class D2FormModule {
|
|
|
11615
11381
|
RepeatableFormComponent,
|
|
11616
11382
|
SectionFormComponent,
|
|
11617
11383
|
FlatFormComponent] }); }
|
|
11618
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
11384
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: D2FormModule, imports: [CommonModule,
|
|
11619
11385
|
ReactiveFormsModule,
|
|
11620
11386
|
OrganisationUnitSelectorModule] }); }
|
|
11621
11387
|
}
|
|
11622
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: D2FormModule, decorators: [{
|
|
11623
11389
|
type: NgModule,
|
|
11624
11390
|
args: [{
|
|
11625
11391
|
declarations: [
|
|
@@ -11702,7 +11468,8 @@ class SelectionFiltersComponent extends ReactWrapperModule {
|
|
|
11702
11468
|
})
|
|
11703
11469
|
: React__default.createElement(CircularLoader$1, { small: true });
|
|
11704
11470
|
};
|
|
11705
|
-
this.showOrgUnitTree = signal(false,
|
|
11471
|
+
this.showOrgUnitTree = signal(false, /* @ts-ignore */
|
|
11472
|
+
...(ngDevMode ? [{ debugName: "showOrgUnitTree" }] : /* istanbul ignore next */ []));
|
|
11706
11473
|
this.orgUnitSelectionConfig = {
|
|
11707
11474
|
hideGroupSelect: true,
|
|
11708
11475
|
hideLevelSelect: true,
|
|
@@ -11711,7 +11478,8 @@ class SelectionFiltersComponent extends ReactWrapperModule {
|
|
|
11711
11478
|
usageType: 'DATA_ENTRY',
|
|
11712
11479
|
};
|
|
11713
11480
|
// Renamed to avoid shadowing the @Input
|
|
11714
|
-
this.selectedOrgUnitSignal = signal(null,
|
|
11481
|
+
this.selectedOrgUnitSignal = signal(null, /* @ts-ignore */
|
|
11482
|
+
...(ngDevMode ? [{ debugName: "selectedOrgUnitSignal" }] : /* istanbul ignore next */ []));
|
|
11715
11483
|
this.selectedOrgUnit$ = toObservable(this.selectedOrgUnitSignal);
|
|
11716
11484
|
this.SelectionFiltersUI = () => {
|
|
11717
11485
|
const [filters, setFilters] = useState({
|
|
@@ -11952,12 +11720,12 @@ class SelectionFiltersComponent extends ReactWrapperModule {
|
|
|
11952
11720
|
this.component = this.SelectionFiltersUI;
|
|
11953
11721
|
this.render();
|
|
11954
11722
|
}
|
|
11955
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
11956
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
11723
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SelectionFiltersComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
11724
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SelectionFiltersComponent, isStandalone: false, selector: "app-selection-filters-ui", inputs: { actionOptions: "actionOptions", programAttributesFilters: "programAttributesFilters", programStageDataElementFilters: "programStageDataElementFilters", startDate: "startDate", endDate: "endDate", program: "program", organisationUnit: "organisationUnit", selectedOrgUnit: "selectedOrgUnit", orgUnitFieldTitle: "orgUnitFieldTitle" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}.clickable-field input{cursor:pointer!important}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
11957
11725
|
}
|
|
11958
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11726
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SelectionFiltersComponent, decorators: [{
|
|
11959
11727
|
type: Component,
|
|
11960
|
-
args: [{ selector: 'app-selection-filters-ui', template: '<ng-content></ng-content>', standalone: false, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}.clickable-field input{cursor:pointer!important}\n"] }]
|
|
11728
|
+
args: [{ selector: 'app-selection-filters-ui', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}.clickable-field input{cursor:pointer!important}\n"] }]
|
|
11961
11729
|
}], propDecorators: { actionOptions: [{
|
|
11962
11730
|
type: Input
|
|
11963
11731
|
}], programAttributesFilters: [{
|
|
@@ -11981,11 +11749,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
11981
11749
|
}] } });
|
|
11982
11750
|
|
|
11983
11751
|
class SelectionFiltersUiModule {
|
|
11984
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
11985
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
11986
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
11752
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SelectionFiltersUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
11753
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SelectionFiltersUiModule, declarations: [SelectionFiltersComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule, OrganisationUnitSelectorModule], exports: [SelectionFiltersComponent] }); }
|
|
11754
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SelectionFiltersUiModule, imports: [CommonModule, SharedDhis2UiModule, OrganisationUnitSelectorModule] }); }
|
|
11987
11755
|
}
|
|
11988
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11756
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SelectionFiltersUiModule, decorators: [{
|
|
11989
11757
|
type: NgModule,
|
|
11990
11758
|
args: [{
|
|
11991
11759
|
declarations: [SelectionFiltersComponent],
|
|
@@ -11996,9 +11764,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
11996
11764
|
|
|
11997
11765
|
class TrackerFormComponent {
|
|
11998
11766
|
constructor() {
|
|
11999
|
-
this.program = input.required(
|
|
12000
|
-
|
|
12001
|
-
this.
|
|
11767
|
+
this.program = input.required(/* @ts-ignore */
|
|
11768
|
+
...(ngDevMode ? [{ debugName: "program" }] : /* istanbul ignore next */ []));
|
|
11769
|
+
this.programStage = input(/* @ts-ignore */
|
|
11770
|
+
...(ngDevMode ? [undefined, { debugName: "programStage" }] : /* istanbul ignore next */ []));
|
|
11771
|
+
this.trackedEntity = input(/* @ts-ignore */
|
|
11772
|
+
...(ngDevMode ? [undefined, { debugName: "trackedEntity" }] : /* istanbul ignore next */ []));
|
|
12002
11773
|
this.d2 = window.d2Web;
|
|
12003
11774
|
}
|
|
12004
11775
|
async ngOnInit() {
|
|
@@ -12024,20 +11795,20 @@ class TrackerFormComponent {
|
|
|
12024
11795
|
}
|
|
12025
11796
|
onSave(event) { }
|
|
12026
11797
|
onCancel() { }
|
|
12027
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
12028
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
11798
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TrackerFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11799
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TrackerFormComponent, isStandalone: false, selector: "ng-dhis2-ui-tracker-form", inputs: { program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: true, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: true, isRequired: false, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n [formMetaData]=\"formMetaData\"\n [dataValueEntities]=\"instance\"\n (formUpdate)=\"onFormUpdate($event)\"\n (save)=\"onSave($event)\"\n (cancel)=\"onCancel()\"\n/>\n}\n", dependencies: [{ kind: "component", type: SectionFormComponent, selector: "ng-dhis2-ui-section-form", inputs: ["loading", "formMetaData", "dataValueEntities"], outputs: ["save", "formUpdate", "cancel", "formValidityUpdate"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
12029
11800
|
}
|
|
12030
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11801
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TrackerFormComponent, decorators: [{
|
|
12031
11802
|
type: Component,
|
|
12032
|
-
args: [{ selector: 'ng-dhis2-ui-tracker-form', standalone: false, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n [formMetaData]=\"formMetaData\"\n [dataValueEntities]=\"instance\"\n (formUpdate)=\"onFormUpdate($event)\"\n (save)=\"onSave($event)\"\n (cancel)=\"onCancel()\"\n/>\n}\n" }]
|
|
12033
|
-
}] });
|
|
11803
|
+
args: [{ selector: 'ng-dhis2-ui-tracker-form', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n [formMetaData]=\"formMetaData\"\n [dataValueEntities]=\"instance\"\n (formUpdate)=\"onFormUpdate($event)\"\n (save)=\"onSave($event)\"\n (cancel)=\"onCancel()\"\n/>\n}\n" }]
|
|
11804
|
+
}], propDecorators: { program: [{ type: i0.Input, args: [{ isSignal: true, alias: "program", required: true }] }], programStage: [{ type: i0.Input, args: [{ isSignal: true, alias: "programStage", required: false }] }], trackedEntity: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackedEntity", required: false }] }] } });
|
|
12034
11805
|
|
|
12035
11806
|
class TrackerFormModule {
|
|
12036
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
12037
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
12038
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
11807
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TrackerFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
11808
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: TrackerFormModule, declarations: [TrackerFormComponent], imports: [CommonModule, D2FormModule], exports: [TrackerFormComponent] }); }
|
|
11809
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TrackerFormModule, imports: [CommonModule, D2FormModule] }); }
|
|
12039
11810
|
}
|
|
12040
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11811
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TrackerFormModule, decorators: [{
|
|
12041
11812
|
type: NgModule,
|
|
12042
11813
|
args: [{
|
|
12043
11814
|
imports: [CommonModule, D2FormModule],
|
|
@@ -12052,11 +11823,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
12052
11823
|
|
|
12053
11824
|
class EventFormComponent {
|
|
12054
11825
|
constructor() {
|
|
12055
|
-
this.program = input.required(
|
|
12056
|
-
|
|
12057
|
-
this.
|
|
12058
|
-
|
|
12059
|
-
this.
|
|
11826
|
+
this.program = input.required(/* @ts-ignore */
|
|
11827
|
+
...(ngDevMode ? [{ debugName: "program" }] : /* istanbul ignore next */ []));
|
|
11828
|
+
this.programStage = input.required(/* @ts-ignore */
|
|
11829
|
+
...(ngDevMode ? [{ debugName: "programStage" }] : /* istanbul ignore next */ []));
|
|
11830
|
+
this.eventId = input(/* @ts-ignore */
|
|
11831
|
+
...(ngDevMode ? [undefined, { debugName: "eventId" }] : /* istanbul ignore next */ []));
|
|
11832
|
+
this.enrollment = input(/* @ts-ignore */
|
|
11833
|
+
...(ngDevMode ? [undefined, { debugName: "enrollment" }] : /* istanbul ignore next */ []));
|
|
11834
|
+
this.trackedEntity = input(/* @ts-ignore */
|
|
11835
|
+
...(ngDevMode ? [undefined, { debugName: "trackedEntity" }] : /* istanbul ignore next */ []));
|
|
12060
11836
|
this.d2 = window.d2Web;
|
|
12061
11837
|
}
|
|
12062
11838
|
async ngOnInit() {
|
|
@@ -12083,20 +11859,20 @@ class EventFormComponent {
|
|
|
12083
11859
|
}
|
|
12084
11860
|
onSave(event) { }
|
|
12085
11861
|
onCancel() { }
|
|
12086
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
12087
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
11862
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: EventFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11863
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: EventFormComponent, isStandalone: false, selector: "ng-dhis2-ui-event-form", inputs: { program: { classPropertyName: "program", publicName: "program", isSignal: true, isRequired: true, transformFunction: null }, programStage: { classPropertyName: "programStage", publicName: "programStage", isSignal: true, isRequired: true, transformFunction: null }, eventId: { classPropertyName: "eventId", publicName: "eventId", isSignal: true, isRequired: false, transformFunction: null }, enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: false, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n [formMetaData]=\"formMetaData\"\n [dataValueEntities]=\"instance\"\n (formUpdate)=\"onFormUpdate($event)\"\n (save)=\"onSave($event)\"\n (cancel)=\"onCancel()\"\n/>\n}\n", dependencies: [{ kind: "component", type: SectionFormComponent, selector: "ng-dhis2-ui-section-form", inputs: ["loading", "formMetaData", "dataValueEntities"], outputs: ["save", "formUpdate", "cancel", "formValidityUpdate"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
12088
11864
|
}
|
|
12089
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11865
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: EventFormComponent, decorators: [{
|
|
12090
11866
|
type: Component,
|
|
12091
|
-
args: [{ selector: 'ng-dhis2-ui-event-form', standalone: false, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n [formMetaData]=\"formMetaData\"\n [dataValueEntities]=\"instance\"\n (formUpdate)=\"onFormUpdate($event)\"\n (save)=\"onSave($event)\"\n (cancel)=\"onCancel()\"\n/>\n}\n" }]
|
|
12092
|
-
}] });
|
|
11867
|
+
args: [{ selector: 'ng-dhis2-ui-event-form', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if(formMetaData) {\n<ng-dhis2-ui-section-form\n [formMetaData]=\"formMetaData\"\n [dataValueEntities]=\"instance\"\n (formUpdate)=\"onFormUpdate($event)\"\n (save)=\"onSave($event)\"\n (cancel)=\"onCancel()\"\n/>\n}\n" }]
|
|
11868
|
+
}], propDecorators: { program: [{ type: i0.Input, args: [{ isSignal: true, alias: "program", required: true }] }], programStage: [{ type: i0.Input, args: [{ isSignal: true, alias: "programStage", required: true }] }], eventId: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventId", required: false }] }], enrollment: [{ type: i0.Input, args: [{ isSignal: true, alias: "enrollment", required: false }] }], trackedEntity: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackedEntity", required: false }] }] } });
|
|
12093
11869
|
|
|
12094
11870
|
class EventFormModule {
|
|
12095
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
12096
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
12097
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
11871
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: EventFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
11872
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: EventFormModule, declarations: [EventFormComponent], imports: [CommonModule, D2FormModule], exports: [EventFormComponent] }); }
|
|
11873
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: EventFormModule, imports: [CommonModule, D2FormModule] }); }
|
|
12098
11874
|
}
|
|
12099
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11875
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: EventFormModule, decorators: [{
|
|
12100
11876
|
type: NgModule,
|
|
12101
11877
|
args: [{
|
|
12102
11878
|
imports: [CommonModule, D2FormModule],
|
|
@@ -12117,6 +11893,7 @@ class ProgramEntryFormConfig {
|
|
|
12117
11893
|
this.displayType = 'FLAT';
|
|
12118
11894
|
this.submitButtonLabel = 'Submit';
|
|
12119
11895
|
this.cancelButtonLabel = 'Cancel';
|
|
11896
|
+
this.fieldDescriptionLabel = 'Description';
|
|
12120
11897
|
this.updateTeiOrgUnit = false;
|
|
12121
11898
|
Object.assign(this, config);
|
|
12122
11899
|
}
|
|
@@ -12185,6 +11962,7 @@ class ProgramEntryFormFieldUtil {
|
|
|
12185
11962
|
formName: eventDateName,
|
|
12186
11963
|
name: eventDateName,
|
|
12187
11964
|
shortName: eventDateName,
|
|
11965
|
+
description: eventDateName,
|
|
12188
11966
|
displayName: eventDateName,
|
|
12189
11967
|
sortOrder: 1,
|
|
12190
11968
|
mandatory: true,
|
|
@@ -12408,6 +12186,7 @@ class ProgramEntryFormFieldUtil {
|
|
|
12408
12186
|
id: field.id,
|
|
12409
12187
|
code: field.code,
|
|
12410
12188
|
label: field.formName || field.name,
|
|
12189
|
+
description: field.description,
|
|
12411
12190
|
key: field.code ? camelCase(field.code) : field.id,
|
|
12412
12191
|
required: field.mandatory,
|
|
12413
12192
|
type: FieldUtil.getFieldType(field.valueType),
|
|
@@ -12476,7 +12255,7 @@ class ProgramStageEntryFormSectionUtil {
|
|
|
12476
12255
|
sections.push(new ProgramStageEntryFormSection({
|
|
12477
12256
|
id: `${programStage.id}_basic_information`,
|
|
12478
12257
|
name: 'Basic Information',
|
|
12479
|
-
description: '',
|
|
12258
|
+
description: programStage.description ?? '',
|
|
12480
12259
|
formFields: basicDetailsFields,
|
|
12481
12260
|
orientation: 'VERTICAL',
|
|
12482
12261
|
}));
|
|
@@ -12564,6 +12343,7 @@ class ProgramStageEntryFormSectionUtil {
|
|
|
12564
12343
|
code: dataElementDefinition.code,
|
|
12565
12344
|
formName: dataElementDefinition.formName,
|
|
12566
12345
|
name: dataElementDefinition.displayName ?? dataElementDefinition.name ?? '',
|
|
12346
|
+
description: dataElementDefinition.description,
|
|
12567
12347
|
mandatory: !!programStageDataElement.compulsory,
|
|
12568
12348
|
valueType: dataElementDefinition.valueType,
|
|
12569
12349
|
sortOrder: programStageDataElement.sortOrder,
|
|
@@ -12867,6 +12647,7 @@ class ProgramEntryFormSectionUtil {
|
|
|
12867
12647
|
code: tea.code,
|
|
12868
12648
|
formName: tea.formName,
|
|
12869
12649
|
name: tea.displayName ?? tea.name,
|
|
12650
|
+
description: tea.description,
|
|
12870
12651
|
mandatory: !!programTrackedEntityAttribute.mandatory,
|
|
12871
12652
|
valueType: tea.valueType,
|
|
12872
12653
|
sortOrder: programTrackedEntityAttribute.sortOrder,
|
|
@@ -12890,6 +12671,7 @@ class ProgramEntryFormSectionUtil {
|
|
|
12890
12671
|
code: fieldWithCustomConfiguration.code,
|
|
12891
12672
|
label: fieldWithCustomConfiguration.formName ||
|
|
12892
12673
|
fieldWithCustomConfiguration.name,
|
|
12674
|
+
description: fieldWithCustomConfiguration.description,
|
|
12893
12675
|
key: fieldWithCustomConfiguration.code
|
|
12894
12676
|
? camelCase(fieldWithCustomConfiguration.code)
|
|
12895
12677
|
: fieldWithCustomConfiguration.id,
|
|
@@ -12897,8 +12679,7 @@ class ProgramEntryFormSectionUtil {
|
|
|
12897
12679
|
type: FieldUtil.getFieldType(fieldWithCustomConfiguration.valueType),
|
|
12898
12680
|
options,
|
|
12899
12681
|
hasOptions,
|
|
12900
|
-
disabled: this.#getDisabledStatus(iTrackedEntityFormFieldBase) ||
|
|
12901
|
-
!!tea.generated,
|
|
12682
|
+
disabled: this.#getDisabledStatus(iTrackedEntityFormFieldBase) || !!tea.generated,
|
|
12902
12683
|
order: fieldWithCustomConfiguration.sortOrder,
|
|
12903
12684
|
controlType: FieldUtil.getFieldControlType(fieldWithCustomConfiguration.valueType, hasOptions),
|
|
12904
12685
|
allowFutureDate: programTrackedEntityAttribute.allowFutureDate === true,
|
|
@@ -13003,6 +12784,7 @@ class ProgramEntryFormMetaData {
|
|
|
13003
12784
|
'id',
|
|
13004
12785
|
'code',
|
|
13005
12786
|
'name',
|
|
12787
|
+
'description',
|
|
13006
12788
|
'captureCoordinates',
|
|
13007
12789
|
'featureType',
|
|
13008
12790
|
'enrollmentDateLabel',
|
|
@@ -13043,7 +12825,7 @@ class ProgramEntryFormMetaData {
|
|
|
13043
12825
|
.with(this.d2.programModule.programStageDataElement.with(this.d2.dataElementModule.dataElement.with(this.d2.optionSetModule.optionSet.with(this.d2.optionSetModule.option), 'ToOne'), 'ToOne'));
|
|
13044
12826
|
programQuery.with(programStageQuery);
|
|
13045
12827
|
}
|
|
13046
|
-
return programQuery.get();
|
|
12828
|
+
return programQuery.get({ useIndexDb: true });
|
|
13047
12829
|
}
|
|
13048
12830
|
async #getProgramMetaData() {
|
|
13049
12831
|
const program = this.config.program;
|
|
@@ -13070,14 +12852,26 @@ class ProgramEntryFormMetaData {
|
|
|
13070
12852
|
'id',
|
|
13071
12853
|
'code',
|
|
13072
12854
|
'name',
|
|
12855
|
+
'description',
|
|
13073
12856
|
]), 'ToOne')
|
|
13074
12857
|
.with(this.d2.programModule.trackedEntityAttribute.select([
|
|
13075
12858
|
'id',
|
|
13076
12859
|
'code',
|
|
13077
12860
|
'name',
|
|
12861
|
+
'description',
|
|
12862
|
+
]), 'ToOne')
|
|
12863
|
+
.with(this.d2.programModule.programSection.select([
|
|
12864
|
+
'id',
|
|
12865
|
+
'code',
|
|
12866
|
+
'name',
|
|
12867
|
+
'description',
|
|
12868
|
+
]), 'ToOne')
|
|
12869
|
+
.with(this.d2.programModule.programStageSection.select([
|
|
12870
|
+
'id',
|
|
12871
|
+
'code',
|
|
12872
|
+
'name',
|
|
12873
|
+
'description',
|
|
13078
12874
|
]), 'ToOne')
|
|
13079
|
-
.with(this.d2.programModule.programSection.select(['id', 'code', 'name']), 'ToOne')
|
|
13080
|
-
.with(this.d2.programModule.programStageSection.select(['id', 'code', 'name']), 'ToOne')
|
|
13081
12875
|
.with(this.d2.optionSetModule.optionGroup
|
|
13082
12876
|
.select(['id'])
|
|
13083
12877
|
.with(this.d2.optionSetModule.option.select([
|
|
@@ -13091,7 +12885,7 @@ class ProgramEntryFormMetaData {
|
|
|
13091
12885
|
'displayName',
|
|
13092
12886
|
]), 'ToOne'))
|
|
13093
12887
|
.paginate(new Pager({ paging: false }))
|
|
13094
|
-
.get(),
|
|
12888
|
+
.get({ useIndexDb: true }),
|
|
13095
12889
|
]);
|
|
13096
12890
|
const [programResponse, programRuleResponse] = metaDataResponse;
|
|
13097
12891
|
const metaData = programResponse.data;
|
|
@@ -13267,7 +13061,7 @@ class ProgramEntryFormMetaData {
|
|
|
13267
13061
|
if (this.config?.formFieldExtensions &&
|
|
13268
13062
|
this.config.formFieldExtensions.length > 0 &&
|
|
13269
13063
|
this.config.formFieldExtensions[0]?.optionsSourceCode) {
|
|
13270
|
-
const orgUnitResponse = await this.d2.httpInstance.get(`organisationUnits.json?fields=id,name,code&paging=false&filter=organisationUnitGroups.code:eq:${this.config.formFieldExtensions[0].optionsSourceCode}
|
|
13064
|
+
const orgUnitResponse = await this.d2.httpInstance.get(`organisationUnits.json?fields=id,name,code&paging=false&filter=organisationUnitGroups.code:eq:${this.config.formFieldExtensions[0].optionsSourceCode}`, { useIndexDb: true });
|
|
13271
13065
|
const orgUnitsResponse = orgUnitResponse?.data?.['organisationUnits'];
|
|
13272
13066
|
const organisationUnits = Array.isArray(orgUnitsResponse)
|
|
13273
13067
|
? orgUnitsResponse
|
|
@@ -13292,23 +13086,37 @@ class ProgramEntryFormMetaData {
|
|
|
13292
13086
|
// eslint-disable-next-line @angular-eslint/component-class-suffix
|
|
13293
13087
|
class ProgramEntryFormModule {
|
|
13294
13088
|
constructor() {
|
|
13295
|
-
this.config = input.required(
|
|
13296
|
-
|
|
13297
|
-
this.
|
|
13298
|
-
|
|
13299
|
-
this.
|
|
13300
|
-
|
|
13301
|
-
this.
|
|
13302
|
-
|
|
13303
|
-
this.
|
|
13089
|
+
this.config = input.required(/* @ts-ignore */
|
|
13090
|
+
...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
13091
|
+
this.trackedEntity = input(/* @ts-ignore */
|
|
13092
|
+
...(ngDevMode ? [undefined, { debugName: "trackedEntity" }] : /* istanbul ignore next */ []));
|
|
13093
|
+
this.event = input(/* @ts-ignore */
|
|
13094
|
+
...(ngDevMode ? [undefined, { debugName: "event" }] : /* istanbul ignore next */ []));
|
|
13095
|
+
this.enrollment = input(/* @ts-ignore */
|
|
13096
|
+
...(ngDevMode ? [undefined, { debugName: "enrollment" }] : /* istanbul ignore next */ []));
|
|
13097
|
+
this.orgUnit = input(/* @ts-ignore */
|
|
13098
|
+
...(ngDevMode ? [undefined, { debugName: "orgUnit" }] : /* istanbul ignore next */ []));
|
|
13099
|
+
this.codeGeneratorOrgUnit = input(/* @ts-ignore */
|
|
13100
|
+
...(ngDevMode ? [undefined, { debugName: "codeGeneratorOrgUnit" }] : /* istanbul ignore next */ []));
|
|
13101
|
+
this.customOrgUnitRoots = input(/* @ts-ignore */
|
|
13102
|
+
...(ngDevMode ? [undefined, { debugName: "customOrgUnitRoots" }] : /* istanbul ignore next */ []));
|
|
13103
|
+
this.formMetaData = input(/* @ts-ignore */
|
|
13104
|
+
...(ngDevMode ? [undefined, { debugName: "formMetaData" }] : /* istanbul ignore next */ []));
|
|
13105
|
+
this.collapsibleSections = input(false, /* @ts-ignore */
|
|
13106
|
+
...(ngDevMode ? [{ debugName: "collapsibleSections" }] : /* istanbul ignore next */ []));
|
|
13304
13107
|
this.ngZone = inject(NgZone);
|
|
13305
13108
|
this.d2 = window.d2Web;
|
|
13306
|
-
this.loading = signal(false,
|
|
13307
|
-
|
|
13308
|
-
this.
|
|
13109
|
+
this.loading = signal(false, /* @ts-ignore */
|
|
13110
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
13111
|
+
this.metaData = signal(null, /* @ts-ignore */
|
|
13112
|
+
...(ngDevMode ? [{ debugName: "metaData" }] : /* istanbul ignore next */ []));
|
|
13113
|
+
this.isFormValid = signal(true, /* @ts-ignore */
|
|
13114
|
+
...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
|
|
13309
13115
|
this.isFormValid$ = toObservable(this.isFormValid);
|
|
13310
|
-
this.instance = signal(null,
|
|
13311
|
-
|
|
13116
|
+
this.instance = signal(null, /* @ts-ignore */
|
|
13117
|
+
...(ngDevMode ? [{ debugName: "instance" }] : /* istanbul ignore next */ []));
|
|
13118
|
+
this.preprocess = input(/* @ts-ignore */
|
|
13119
|
+
...(ngDevMode ? [undefined, { debugName: "preprocess" }] : /* istanbul ignore next */ []));
|
|
13312
13120
|
this.instanceSave = new EventEmitter();
|
|
13313
13121
|
this.instanceSaveCompleted = new EventEmitter();
|
|
13314
13122
|
this.instanceUpdate = new EventEmitter();
|
|
@@ -13325,7 +13133,8 @@ class ProgramEntryFormModule {
|
|
|
13325
13133
|
return this.instance()?.trackedEntity;
|
|
13326
13134
|
}
|
|
13327
13135
|
return undefined;
|
|
13328
|
-
},
|
|
13136
|
+
}, /* @ts-ignore */
|
|
13137
|
+
...(ngDevMode ? [{ debugName: "dataId" }] : /* istanbul ignore next */ []));
|
|
13329
13138
|
this.FormActionButtons = computed(() => {
|
|
13330
13139
|
if (this.config().hideActionButtons) {
|
|
13331
13140
|
return React__default.createElement(React__default.Fragment, null);
|
|
@@ -13357,7 +13166,8 @@ class ProgramEntryFormModule {
|
|
|
13357
13166
|
});
|
|
13358
13167
|
} }, this.config().cancelButtonLabel))));
|
|
13359
13168
|
};
|
|
13360
|
-
},
|
|
13169
|
+
}, /* @ts-ignore */
|
|
13170
|
+
...(ngDevMode ? [{ debugName: "FormActionButtons" }] : /* istanbul ignore next */ []));
|
|
13361
13171
|
}
|
|
13362
13172
|
// async ngOnInit() {
|
|
13363
13173
|
// this.loading.set(true);
|
|
@@ -13596,8 +13406,7 @@ class ProgramEntryFormModule {
|
|
|
13596
13406
|
const instance = await this.instanceQuery.create();
|
|
13597
13407
|
return await this.#setReservedValuesForCodeGeneration(instance);
|
|
13598
13408
|
}
|
|
13599
|
-
this.instanceQuery
|
|
13600
|
-
.setInstanceFields(this.metaData()?.program);
|
|
13409
|
+
this.instanceQuery.setInstanceFields(this.metaData()?.program);
|
|
13601
13410
|
const instance = await this.#setReservedValuesForCodeGeneration(this.instanceQuery.instance);
|
|
13602
13411
|
if (this.orgUnit()) {
|
|
13603
13412
|
instance.setOrgUnit(this.orgUnit());
|
|
@@ -13633,13 +13442,13 @@ class ProgramEntryFormModule {
|
|
|
13633
13442
|
return firstValueFrom(of(null));
|
|
13634
13443
|
}
|
|
13635
13444
|
}
|
|
13636
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
13637
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
13445
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ProgramEntryFormModule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13446
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ProgramEntryFormModule, isStandalone: true, selector: "ng-dhis2-ui-program-entry-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, trackedEntity: { classPropertyName: "trackedEntity", publicName: "trackedEntity", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: false, transformFunction: null }, orgUnit: { classPropertyName: "orgUnit", publicName: "orgUnit", isSignal: true, isRequired: false, transformFunction: null }, codeGeneratorOrgUnit: { classPropertyName: "codeGeneratorOrgUnit", publicName: "codeGeneratorOrgUnit", isSignal: true, isRequired: false, transformFunction: null }, customOrgUnitRoots: { classPropertyName: "customOrgUnitRoots", publicName: "customOrgUnitRoots", isSignal: true, isRequired: false, transformFunction: null }, formMetaData: { classPropertyName: "formMetaData", publicName: "formMetaData", isSignal: true, isRequired: false, transformFunction: null }, collapsibleSections: { classPropertyName: "collapsibleSections", publicName: "collapsibleSections", isSignal: true, isRequired: false, transformFunction: null }, preprocess: { classPropertyName: "preprocess", publicName: "preprocess", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { instanceSave: "instanceSave", instanceSaveCompleted: "instanceSaveCompleted", instanceUpdate: "instanceUpdate", formValidityUpdate: "formValidityUpdate", formCancel: "formCancel" }, ngImport: i0, template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n <!-- Form content -->\n @switch (config().displayType) {\n\n <!-- Flat display -->\n @case ('FLAT') {\n <ng-dhis2-ui-flat-form\n [programEntryFormConfig]=\"config()\"\n [optionCascadeConfigs]=\"config().optionCascadeConfigs || []\"\n [collapsibleSections]=\"collapsibleSections()\"\n [programEntryFormMetaData]=\"metaData()!\"\n [name]=\"metaData()!.name\"\n [dataValues]=\"instance() || {}\"\n [dataId]=\"dataId()\"\n [rules]=\"metaData()!.rules\"\n [fields]=\"metaData()!.formFields\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [coordinatePickerGeoConfig]=\"config().coordinatePickerGeoConfig\"\n (formUpdate)=\"onFormUpdate($event)\"\n (formValidityUpdate)=\"onValidityUpdate($event)\"\n />\n\n <!-- <ng-dhis2-ui-flat-form\n [name]=\"metaData()!.name\"\n [dataValues]=\"instance() || {}\"\n [dataId]=\"dataId()\"\n [rules]=\"metaData()!.rules\"\n [fields]=\"metaData()!.formFields\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [program]=\"config().program\"\n (formUpdate)=\"onFormUpdate($event)\"\n (formValidityUpdate)=\"onValidityUpdate($event)\"\n /> -->\n }\n\n <!-- SECTION display -->\n @case ('SECTION') { Section form }\n\n <!-- CUSTOM FORM -->\n @case ('CUSTOM') { } }\n\n <!-- Action buttons -->\n\n @if(!config().hideActionButtons) {\n <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: D2FormModule }, { kind: "component", type: FlatFormComponent, selector: "ng-dhis2-ui-flat-form", inputs: ["collapsibleSections", "programEntryFormConfig", "optionCascadeConfigs"] }, { kind: "directive", type: ReactWrapperModule, selector: "ng-dhis2-ui-wrapper", inputs: ["props", "component"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
13638
13447
|
}
|
|
13639
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
13448
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ProgramEntryFormModule, decorators: [{
|
|
13640
13449
|
type: Component,
|
|
13641
|
-
args: [{ selector: 'ng-dhis2-ui-program-entry-form', imports: [
|
|
13642
|
-
}], propDecorators: { instanceSave: [{
|
|
13450
|
+
args: [{ selector: 'ng-dhis2-ui-program-entry-form', changeDetection: ChangeDetectionStrategy.Eager, imports: [D2FormModule, ReactWrapperModule], template: "@if (loading()) {\n<div className=\"program-entry__form-loader\">\n <ng-dhis2-ui-wrapper [component]=\"FormLoader\" />\n</div>\n} @else if(metaData()) {\n\n<div>\n <!-- Form content -->\n @switch (config().displayType) {\n\n <!-- Flat display -->\n @case ('FLAT') {\n <ng-dhis2-ui-flat-form\n [programEntryFormConfig]=\"config()\"\n [optionCascadeConfigs]=\"config().optionCascadeConfigs || []\"\n [collapsibleSections]=\"collapsibleSections()\"\n [programEntryFormMetaData]=\"metaData()!\"\n [name]=\"metaData()!.name\"\n [dataValues]=\"instance() || {}\"\n [dataId]=\"dataId()\"\n [rules]=\"metaData()!.rules\"\n [fields]=\"metaData()!.formFields\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [coordinatePickerGeoConfig]=\"config().coordinatePickerGeoConfig\"\n (formUpdate)=\"onFormUpdate($event)\"\n (formValidityUpdate)=\"onValidityUpdate($event)\"\n />\n\n <!-- <ng-dhis2-ui-flat-form\n [name]=\"metaData()!.name\"\n [dataValues]=\"instance() || {}\"\n [dataId]=\"dataId()\"\n [rules]=\"metaData()!.rules\"\n [fields]=\"metaData()!.formFields\"\n [customOrgUnitRoots]=\"customOrgUnitRoots()\"\n [program]=\"config().program\"\n (formUpdate)=\"onFormUpdate($event)\"\n (formValidityUpdate)=\"onValidityUpdate($event)\"\n /> -->\n }\n\n <!-- SECTION display -->\n @case ('SECTION') { Section form }\n\n <!-- CUSTOM FORM -->\n @case ('CUSTOM') { } }\n\n <!-- Action buttons -->\n\n @if(!config().hideActionButtons) {\n <ng-dhis2-ui-wrapper [component]=\"FormActionButtons()\" />\n }\n</div>\n}\n", styles: ["::ng-deep .program-entry__form-loader{padding:8px}\n"] }]
|
|
13451
|
+
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], trackedEntity: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackedEntity", required: false }] }], event: [{ type: i0.Input, args: [{ isSignal: true, alias: "event", required: false }] }], enrollment: [{ type: i0.Input, args: [{ isSignal: true, alias: "enrollment", required: false }] }], orgUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "orgUnit", required: false }] }], codeGeneratorOrgUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeGeneratorOrgUnit", required: false }] }], customOrgUnitRoots: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOrgUnitRoots", required: false }] }], formMetaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMetaData", required: false }] }], collapsibleSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsibleSections", required: false }] }], preprocess: [{ type: i0.Input, args: [{ isSignal: true, alias: "preprocess", required: false }] }], instanceSave: [{
|
|
13643
13452
|
type: Output
|
|
13644
13453
|
}], instanceSaveCompleted: [{
|
|
13645
13454
|
type: Output
|