@wemake4u/form-player 2.0.2 → 2.0.3

package/fesm2022/wemake4u-form-player.mjs

@@ -1,31 +1,26 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, DOCUMENT, DestroyRef, Directive, ElementRef, EventEmitter, Host, HostListener, Injectable, Injector, Input, Optional, Output, PLATFORM_ID, Renderer2, Self, SkipSelf, ViewChild, ViewContainerRef, ViewEncapsulation, createEnvironmentInjector, effect, forwardRef, inject, input, isSignal, signal, untracked } from "@angular/core";
-import * as i1$6 from "@angular/common";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, DOCUMENT, DestroyRef, Directive, ElementRef, EventEmitter, HostListener, Injectable, Injector, Input, Optional, Output, PLATFORM_ID, Renderer2, Self, SkipSelf, ViewChild, ViewContainerRef, ViewEncapsulation, createEnvironmentInjector, effect, forwardRef, inject, input, isSignal, signal, untracked } from "@angular/core";
+import * as i1$5 from "@angular/common";
 import { CommonModule, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from "@angular/common";
-import * as i1$3 from "@angular/forms";
+import * as i1$2 from "@angular/forms";
 import { AbstractControl, FormArray, FormControl as FormControl$1, FormGroup, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import { BehaviorSubject, Observable, Subject, TimeoutError, catchError, combineLatest, debounceTime, distinctUntilChanged, filter, finalize, interval, isObservable, map, merge, of, pairwise, shareReplay, startWith, take, takeUntil, tap } from "rxjs";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import * as i1$4 from "@wemake4u/interact";
+import * as i1$3 from "@wemake4u/interact";
 import { LanguageService, downloadBlob, downloadFile } from "@wemake4u/interact";
-import { catchError as catchError$1, filter as filter$1, finalize as finalize$1, map as map$1, shareReplay as shareReplay$1, take as take$1, tap as tap$1 } from "rxjs/operators";
-import * as i1$5 from "@angular/router";
+import { filter as filter$1, map as map$1, shareReplay as shareReplay$1, take as take$1, tap as tap$1 } from "rxjs/operators";
+import * as i1$4 from "@angular/router";
 import { ActivatedRoute, NavigationStart } from "@angular/router";
 import { buildSimpleTree, evaluate, parser } from "feelers";
 import { evaluate as evaluate$1, parseExpression, unaryTest } from "feelin";
-import * as i1$7 from "@wemake4u/form-controls";
-import { SIRIO_DATA_GRID, SirioAccordion, SirioAccordionContent, SirioAccordionItem, SirioAlert, SirioAlertContent, SirioBadgeTag, SirioButton, SirioCheckbox, SirioChecklist, SirioCollapse, SirioCollapseToggle, SirioDataGrid, SirioDate, SirioDateTime, SirioDialog, SirioDialogFooter, SirioDialogRef, SirioDialogService, SirioFileUpload, SirioInfoButton, SirioNotify, SirioNotifyContent, SirioNumber, SirioOptionLabel, SirioPagination, SirioRadioGroup, SirioSelect, SirioSidenav, SirioSlider, SirioStepper, SirioTab, SirioTabContent, SirioTabs, SirioTextarea, SirioTextbox, SirioTime, provideSirioReadonlyAppearance, provideSirioValidationPresenter, sirioGridClassText, sirioGridFilterActive, sirioGridStyleObject, sirioIsFilterCondition } from "@wemake4u/form-controls";
-import { CellStyleModule, ClientSideRowModelApiModule, ClientSideRowModelModule, ColumnApiModule, ColumnAutoSizeModule, CustomFilterModule, DateFilterModule, HighlightChangesModule, InfiniteRowModelModule, LocaleModule, NumberFilterModule, PaginationModule, RowApiModule, RowAutoHeightModule, RowSelectionModule, RowStyleModule, TextFilterModule, iconSetAlpine, themeQuartz } from "ag-grid-community";
-import { AG_GRID_LOCALE_DE, AG_GRID_LOCALE_EN, AG_GRID_LOCALE_ES, AG_GRID_LOCALE_FR, AG_GRID_LOCALE_IT, AG_GRID_LOCALE_PT } from "@ag-grid-community/locale";
+import * as i1$6 from "@wemake4u/form-controls";
+import { SIRIO_DATA_GRID, SirioAccordion, SirioAccordionContent, SirioAccordionItem, SirioAlert, SirioAlertContent, SirioBadgeTag, SirioButton, SirioCheckbox, SirioChecklist, SirioCollapse, SirioCollapseToggle, SirioDataGrid, SirioDate, SirioDateTime, SirioDialog, SirioDialogFooter, SirioDialogRef, SirioDialogService, SirioFileUpload, SirioInfoButton, SirioNotify, SirioNotifyContent, SirioNumber, SirioOptionLabel, SirioPagination, SirioRadioGroup, SirioSelect, SirioSidenav, SirioSlider, SirioStepper, SirioTab, SirioTabContent, SirioTabs, SirioTextarea, SirioTextbox, SirioTime, provideSirioReadonlyAppearance, provideSirioValidationPresenter, sirioGridClassText, sirioGridFilterActive, sirioGridStyleObject, sirioIsFilterCondition, sirioToFilterModel } from "@wemake4u/form-controls";
 import { marked } from "marked";
-import * as i1$2 from "ag-grid-angular";
-import { AgGridAngular } from "ag-grid-angular";
 import { AgCharts } from "ag-charts-angular";
-import sanitizeHtml from "sanitize-html";
+import DOMPurify from "dompurify";
 import * as i1$1 from "@angular/platform-browser";
-import mimeDb from "mime-db";
 import * as i1 from "@angular/common/http";
-import { HttpParams } from "@angular/common/http";
+import { HttpErrorResponse, HttpParams } from "@angular/common/http";
 var FormGroupEx = class extends FormGroup {
 	constructor(controls, mode, validatorOrOpts, asyncValidator) {
 		super(controls, validatorOrOpts, asyncValidator);
@@ -211,6 +206,8 @@ const Texts$6 = {
 	SomethingWentWrong: "Si è verificato un problema",
 	TimeoutOccurred: "Il server non ha risposto in tempo. Riprova tra qualche istante",
 	GenericError: "Si è verificato un errore imprevisto",
+	ServiceUnreachable: "Il servizio non è raggiungibile. Riprova tra qualche istante",
+	GridNavigationHint: "Usa le frecce per spostarti tra celle e pulsanti, Tab per uscire dalla tabella",
 	ItemPosition: "elemento {0} di {1}",
 	ItemAdded: "Elemento {0} aggiunto",
 	ItemRemoved: "Elemento {0} rimosso",
@@ -278,6 +275,8 @@ const Texts$5 = {
 	SomethingWentWrong: "Something went wrong",
 	TimeoutOccurred: "The server did not respond in time. Please try again in a few moments",
 	GenericError: "An unexpected error occurred",
+	ServiceUnreachable: "The service cannot be reached. Please try again in a few moments",
+	GridNavigationHint: "Use the arrow keys to move between cells and buttons, Tab to leave the table",
 	ItemPosition: "item {0} of {1}",
 	ItemAdded: "Item {0} added",
 	ItemRemoved: "Item {0} removed",
@@ -345,6 +344,8 @@ const Texts$4 = {
 	SomethingWentWrong: "Etwas ist schiefgelaufen",
 	TimeoutOccurred: "Der Server hat nicht rechtzeitig geantwortet. Bitte versuchen Sie es in wenigen Augenblicken erneut",
 	GenericError: "Ein unerwarteter Fehler ist aufgetreten",
+	ServiceUnreachable: "Der Dienst ist nicht erreichbar. Bitte versuchen Sie es in wenigen Augenblicken erneut",
+	GridNavigationHint: "Mit den Pfeiltasten zwischen Zellen und Schaltflächen wechseln, mit Tab die Tabelle verlassen",
 	ItemPosition: "Element {0} von {1}",
 	ItemAdded: "Element {0} hinzugefügt",
 	ItemRemoved: "Element {0} entfernt",
@@ -412,6 +413,8 @@ const Texts$3 = {
 	SomethingWentWrong: "Une erreur s'est produite",
 	TimeoutOccurred: "Le serveur n'a pas répondu à temps. Veuillez réessayer dans quelques instants",
 	GenericError: "Une erreur inattendue s'est produite",
+	ServiceUnreachable: "Le service n'est pas joignable. Veuillez réessayer dans quelques instants",
+	GridNavigationHint: "Utilisez les flèches pour vous déplacer entre les cellules et les boutons, Tab pour quitter le tableau",
 	ItemPosition: "élément {0} sur {1}",
 	ItemAdded: "Élément {0} ajouté",
 	ItemRemoved: "Élément {0} supprimé",
@@ -479,6 +482,8 @@ const Texts$2 = {
 	SomethingWentWrong: "Algo salió mal",
 	TimeoutOccurred: "El servidor no respondió a tiempo. Inténtalo de nuevo en unos instantes",
 	GenericError: "Se produjo un error inesperado",
+	ServiceUnreachable: "No se puede acceder al servicio. Inténtalo de nuevo en unos instantes",
+	GridNavigationHint: "Usa las flechas para moverte entre celdas y botones, Tab para salir de la tabla",
 	ItemPosition: "elemento {0} de {1}",
 	ItemAdded: "Elemento {0} añadido",
 	ItemRemoved: "Elemento {0} eliminado",
@@ -546,6 +551,8 @@ const Texts$1 = {
 	SomethingWentWrong: "Algo deu errado",
 	TimeoutOccurred: "O servidor não respondeu a tempo. Tente novamente dentro de alguns instantes",
 	GenericError: "Ocorreu um erro inesperado",
+	ServiceUnreachable: "O serviço não está acessível. Tente novamente dentro de alguns instantes",
+	GridNavigationHint: "Use as setas para mover-se entre células e botões, Tab para sair da tabela",
 	ItemPosition: "item {0} de {1}",
 	ItemAdded: "Item {0} adicionado",
 	ItemRemoved: "Item {0} removido",
@@ -1056,7 +1063,7 @@ var ToastService = class ToastService {
 		version: "22.2.2",
 		ngImport: i0,
 		type: ToastService,
-		deps: [{ token: i1$7.SirioToastService }, { token: GlobalService }],
+		deps: [{ token: i1$6.SirioToastService }, { token: GlobalService }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
@@ -1076,7 +1083,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Injectable,
 		args: [{ providedIn: "root" }]
 	}],
-	ctorParameters: () => [{ type: i1$7.SirioToastService }, { type: GlobalService }]
+	ctorParameters: () => [{ type: i1$6.SirioToastService }, { type: GlobalService }]
 });
 var DialogComponent = class DialogComponent {
 	formHost;
@@ -1211,8 +1218,8 @@ var DialogComponent = class DialogComponent {
 			static: true
 		}],
 		ngImport: i0,
-		template: "<wm-sirio-dialog\r\n  [title]=\"options.title ?? ''\"\r\n  [icon]=\"icon()\"\r\n  [tone]=\"tone()\"\r\n  centered\r\n  [size]=\"options.size ?? 'default'\"\r\n  [drawer]=\"options.isDrawer ?? false\"\r\n  [alert]=\"options.alert ?? false\"\r\n  [dismissible]=\"showCloseButton()\"\r\n  [closeLabel]=\"locale(Texts, 'Close')\"\r\n  [closeOnBackdrop]=\"options.isDrawer ?? false\"\r\n  (closed)=\"onClosed()\">\r\n\r\n  <ng-template #formHost></ng-template>\r\n\r\n  @if (showFooter()) {\r\n    <div wmSirioDialogFooter>\r\n      @switch (options.buttons) {\r\n        <!-- OK -->\r\n        @case ('OK') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n        }\r\n        <!-- Caso: OKCancel -->\r\n        @case ('OKCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: ConfirmClose -->\r\n        @case ('ConfirmCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Confirm' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: AbortRetryIgnore -->\r\n        @case ('AbortRetryIgnore') {\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Abort' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Ignore' }\"></ng-container>\r\n        }\r\n        <!-- Caso: YesNoCancel -->\r\n        @case ('YesNoCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: YesNo -->\r\n        @case ('YesNo') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n        }\r\n        <!-- Caso: RetryCancel -->\r\n        @case ('RetryCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: CancelTryContinue -->\r\n        @case ('CancelTryContinue') {\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Try' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Continue' }\"></ng-container>\r\n        }\r\n        <!-- Caso: Custom -->\r\n        @case ('Custom') {\r\n          @for (customButton of options.customButtons ?? []; track customButton; let i = $index) {\r\n            <ng-container *ngTemplateOutlet=\"customTemplate; context: { customButton: customButton }\"></ng-container>\r\n          }\r\n        }\r\n      }\r\n      <!-- Templates -->\r\n      <ng-template #confirmTemplate let-action=\"action\">\r\n        <button type=\"button\" wmSirioButton=\"primary\" (click)=\"doSubmit(action)\" [disabled]=\"!canSubmit()\">{{ locale(Texts, action) }}</button>\r\n      </ng-template>\r\n      <ng-template #closeTemplate let-action=\"action\">\r\n        <button type=\"button\" wmSirioButton=\"secondary\" (click)=\"doAction(action)\">{{ locale(Texts, action) }}</button>\r\n      </ng-template>\r\n      <ng-template #customTemplate\r\n        let-customButton=\"customButton\">\r\n        <!-- No color = plain button (ngx-sirio-lib color null). -->\r\n        <button type=\"button\" [wmSirioButton]=\"customButton.color || 'ghost'\" (click)=\"doAction(customButton.action)\">{{ customButton.text }}</button>\r\n      </ng-template>\r\n    </div>\r\n  }\r\n\r\n</wm-sirio-dialog>\r\n",
-		styles: ["::ng-deep .sirio-dialog{background-color:#0000007f!important}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-sm .sirio-dialog-content{max-width:18.75rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-lg .sirio-dialog-content{max-width:50rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-xl .sirio-dialog-content{max-width:71.25rem}\n"],
+		template: "<wm-sirio-dialog\r\n  [title]=\"options.title ?? ''\"\r\n  [icon]=\"icon()\"\r\n  [tone]=\"tone()\"\r\n  centered\r\n  backdrop=\"light\"\r\n  [size]=\"options.size ?? 'default'\"\r\n  [drawer]=\"options.isDrawer ?? false\"\r\n  [alert]=\"options.alert ?? false\"\r\n  [dismissible]=\"showCloseButton()\"\r\n  [closeLabel]=\"locale(Texts, 'Close')\"\r\n  [closeOnBackdrop]=\"options.isDrawer ?? false\"\r\n  (closed)=\"onClosed()\">\r\n\r\n  <ng-template #formHost></ng-template>\r\n\r\n  @if (showFooter()) {\r\n    <div wmSirioDialogFooter>\r\n      @switch (options.buttons) {\r\n        <!-- OK -->\r\n        @case ('OK') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n        }\r\n        <!-- Caso: OKCancel -->\r\n        @case ('OKCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: ConfirmClose -->\r\n        @case ('ConfirmCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Confirm' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: AbortRetryIgnore -->\r\n        @case ('AbortRetryIgnore') {\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Abort' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Ignore' }\"></ng-container>\r\n        }\r\n        <!-- Caso: YesNoCancel -->\r\n        @case ('YesNoCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: YesNo -->\r\n        @case ('YesNo') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n        }\r\n        <!-- Caso: RetryCancel -->\r\n        @case ('RetryCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: CancelTryContinue -->\r\n        @case ('CancelTryContinue') {\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Try' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Continue' }\"></ng-container>\r\n        }\r\n        <!-- Caso: Custom -->\r\n        @case ('Custom') {\r\n          @for (customButton of options.customButtons ?? []; track customButton; let i = $index) {\r\n            <ng-container *ngTemplateOutlet=\"customTemplate; context: { customButton: customButton }\"></ng-container>\r\n          }\r\n        }\r\n      }\r\n      <!-- Templates -->\r\n      <ng-template #confirmTemplate let-action=\"action\">\r\n        <button type=\"button\" wmSirioButton=\"primary\" (click)=\"doSubmit(action)\" [disabled]=\"!canSubmit()\">{{ locale(Texts, action) }}</button>\r\n      </ng-template>\r\n      <ng-template #closeTemplate let-action=\"action\">\r\n        <button type=\"button\" wmSirioButton=\"secondary\" (click)=\"doAction(action)\">{{ locale(Texts, action) }}</button>\r\n      </ng-template>\r\n      <ng-template #customTemplate\r\n        let-customButton=\"customButton\">\r\n        <!-- No color = plain button (ngx-sirio-lib color null). -->\r\n        <button type=\"button\" [wmSirioButton]=\"customButton.color || 'ghost'\" (click)=\"doAction(customButton.action)\">{{ customButton.text }}</button>\r\n      </ng-template>\r\n    </div>\r\n  }\r\n\r\n</wm-sirio-dialog>\r\n",
+		styles: ["::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-sm .sirio-dialog-content{max-width:18.75rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-lg .sirio-dialog-content{max-width:50rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-xl .sirio-dialog-content{max-width:71.25rem}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -1220,7 +1227,7 @@ var DialogComponent = class DialogComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$6.NgTemplateOutlet,
+				type: i1$5.NgTemplateOutlet,
 				selector: "[ngTemplateOutlet]",
 				inputs: [
 					"ngTemplateOutletContext",
@@ -1246,6 +1253,8 @@ var DialogComponent = class DialogComponent {
 					"closeOnBackdrop",
 					"alert",
 					"drawer",
+					"backdrop",
+					"header",
 					"panelClass",
 					"inline"
 				],
@@ -1296,8 +1305,8 @@ i0.ɵɵngDeclareClassMetadata({
 				SirioButton
 			],
 			changeDetection: ChangeDetectionStrategy.Eager,
-			template: "<wm-sirio-dialog\r\n  [title]=\"options.title ?? ''\"\r\n  [icon]=\"icon()\"\r\n  [tone]=\"tone()\"\r\n  centered\r\n  [size]=\"options.size ?? 'default'\"\r\n  [drawer]=\"options.isDrawer ?? false\"\r\n  [alert]=\"options.alert ?? false\"\r\n  [dismissible]=\"showCloseButton()\"\r\n  [closeLabel]=\"locale(Texts, 'Close')\"\r\n  [closeOnBackdrop]=\"options.isDrawer ?? false\"\r\n  (closed)=\"onClosed()\">\r\n\r\n  <ng-template #formHost></ng-template>\r\n\r\n  @if (showFooter()) {\r\n    <div wmSirioDialogFooter>\r\n      @switch (options.buttons) {\r\n        <!-- OK -->\r\n        @case ('OK') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n        }\r\n        <!-- Caso: OKCancel -->\r\n        @case ('OKCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: ConfirmClose -->\r\n        @case ('ConfirmCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Confirm' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: AbortRetryIgnore -->\r\n        @case ('AbortRetryIgnore') {\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Abort' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Ignore' }\"></ng-container>\r\n        }\r\n        <!-- Caso: YesNoCancel -->\r\n        @case ('YesNoCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: YesNo -->\r\n        @case ('YesNo') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n        }\r\n        <!-- Caso: RetryCancel -->\r\n        @case ('RetryCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: CancelTryContinue -->\r\n        @case ('CancelTryContinue') {\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Try' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Continue' }\"></ng-container>\r\n        }\r\n        <!-- Caso: Custom -->\r\n        @case ('Custom') {\r\n          @for (customButton of options.customButtons ?? []; track customButton; let i = $index) {\r\n            <ng-container *ngTemplateOutlet=\"customTemplate; context: { customButton: customButton }\"></ng-container>\r\n          }\r\n        }\r\n      }\r\n      <!-- Templates -->\r\n      <ng-template #confirmTemplate let-action=\"action\">\r\n        <button type=\"button\" wmSirioButton=\"primary\" (click)=\"doSubmit(action)\" [disabled]=\"!canSubmit()\">{{ locale(Texts, action) }}</button>\r\n      </ng-template>\r\n      <ng-template #closeTemplate let-action=\"action\">\r\n        <button type=\"button\" wmSirioButton=\"secondary\" (click)=\"doAction(action)\">{{ locale(Texts, action) }}</button>\r\n      </ng-template>\r\n      <ng-template #customTemplate\r\n        let-customButton=\"customButton\">\r\n        <!-- No color = plain button (ngx-sirio-lib color null). -->\r\n        <button type=\"button\" [wmSirioButton]=\"customButton.color || 'ghost'\" (click)=\"doAction(customButton.action)\">{{ customButton.text }}</button>\r\n      </ng-template>\r\n    </div>\r\n  }\r\n\r\n</wm-sirio-dialog>\r\n",
-			styles: ["::ng-deep .sirio-dialog{background-color:#0000007f!important}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-sm .sirio-dialog-content{max-width:18.75rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-lg .sirio-dialog-content{max-width:50rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-xl .sirio-dialog-content{max-width:71.25rem}\n"]
+			template: "<wm-sirio-dialog\r\n  [title]=\"options.title ?? ''\"\r\n  [icon]=\"icon()\"\r\n  [tone]=\"tone()\"\r\n  centered\r\n  backdrop=\"light\"\r\n  [size]=\"options.size ?? 'default'\"\r\n  [drawer]=\"options.isDrawer ?? false\"\r\n  [alert]=\"options.alert ?? false\"\r\n  [dismissible]=\"showCloseButton()\"\r\n  [closeLabel]=\"locale(Texts, 'Close')\"\r\n  [closeOnBackdrop]=\"options.isDrawer ?? false\"\r\n  (closed)=\"onClosed()\">\r\n\r\n  <ng-template #formHost></ng-template>\r\n\r\n  @if (showFooter()) {\r\n    <div wmSirioDialogFooter>\r\n      @switch (options.buttons) {\r\n        <!-- OK -->\r\n        @case ('OK') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n        }\r\n        <!-- Caso: OKCancel -->\r\n        @case ('OKCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: ConfirmClose -->\r\n        @case ('ConfirmCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Confirm' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: AbortRetryIgnore -->\r\n        @case ('AbortRetryIgnore') {\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Abort' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Ignore' }\"></ng-container>\r\n        }\r\n        <!-- Caso: YesNoCancel -->\r\n        @case ('YesNoCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: YesNo -->\r\n        @case ('YesNo') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n        }\r\n        <!-- Caso: RetryCancel -->\r\n        @case ('RetryCancel') {\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        }\r\n        <!-- Caso: CancelTryContinue -->\r\n        @case ('CancelTryContinue') {\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Try' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Continue' }\"></ng-container>\r\n        }\r\n        <!-- Caso: Custom -->\r\n        @case ('Custom') {\r\n          @for (customButton of options.customButtons ?? []; track customButton; let i = $index) {\r\n            <ng-container *ngTemplateOutlet=\"customTemplate; context: { customButton: customButton }\"></ng-container>\r\n          }\r\n        }\r\n      }\r\n      <!-- Templates -->\r\n      <ng-template #confirmTemplate let-action=\"action\">\r\n        <button type=\"button\" wmSirioButton=\"primary\" (click)=\"doSubmit(action)\" [disabled]=\"!canSubmit()\">{{ locale(Texts, action) }}</button>\r\n      </ng-template>\r\n      <ng-template #closeTemplate let-action=\"action\">\r\n        <button type=\"button\" wmSirioButton=\"secondary\" (click)=\"doAction(action)\">{{ locale(Texts, action) }}</button>\r\n      </ng-template>\r\n      <ng-template #customTemplate\r\n        let-customButton=\"customButton\">\r\n        <!-- No color = plain button (ngx-sirio-lib color null). -->\r\n        <button type=\"button\" [wmSirioButton]=\"customButton.color || 'ghost'\" (click)=\"doAction(customButton.action)\">{{ customButton.text }}</button>\r\n      </ng-template>\r\n    </div>\r\n  }\r\n\r\n</wm-sirio-dialog>\r\n",
+			styles: ["::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-sm .sirio-dialog-content{max-width:18.75rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-lg .sirio-dialog-content{max-width:50rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-xl .sirio-dialog-content{max-width:71.25rem}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -2360,7 +2369,7 @@ var NavigationService = class NavigationService {
 		version: "22.2.2",
 		ngImport: i0,
 		type: NavigationService,
-		deps: [{ token: i1$5.Router }],
+		deps: [{ token: i1$4.Router }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
@@ -2380,7 +2389,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Injectable,
 		args: [{ providedIn: "root" }]
 	}],
-	ctorParameters: () => [{ type: i1$5.Router }]
+	ctorParameters: () => [{ type: i1$4.Router }]
 });
 var StateService = class StateService {
 	navigation;
@@ -3610,7 +3619,7 @@ var ValidationService = class ValidationService {
 		version: "22.2.2",
 		ngImport: i0,
 		type: ValidationService,
-		deps: [{ token: i1$4.LanguageService }, { token: ProgrammabilityService }],
+		deps: [{ token: i1$3.LanguageService }, { token: ProgrammabilityService }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
@@ -3626,7 +3635,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ngImport: i0,
 	type: ValidationService,
 	decorators: [{ type: Injectable }],
-	ctorParameters: () => [{ type: i1$4.LanguageService }, { type: ProgrammabilityService }]
+	ctorParameters: () => [{ type: i1$3.LanguageService }, { type: ProgrammabilityService }]
 });
 var DisableService = class DisableService {
 	programmability;
@@ -3668,6 +3677,7 @@ var DisableService = class DisableService {
 				logDisabled(value);
 			} else {
 				if (control.enabled && !container) return;
+				if (control.parent?.disabled) return;
 				control.enable();
 				logDisabled(value);
 			}
@@ -3852,8 +3862,9 @@ var StatusService = class StatusService {
 			totalErrors: 0,
 			visibleErrors: 0
 		});
+		const dirtyKey = key ?? collection.rootKey;
 		const markDirty = () => {
-			const entry = this.invalidMap.get(key);
+			const entry = this.invalidMap.get(dirtyKey);
 			if (entry) entry.dirty = true;
 			this.statusDone.notify();
 		};
@@ -3936,6 +3947,7 @@ var StatusCollection = class StatusCollection {
 	}
 	controls = /* @__PURE__ */ new Set();
 	children = /* @__PURE__ */ new Map();
+	rootKey;
 	add(control) {
 		this.controls.add(control);
 		return this;
@@ -3955,6 +3967,7 @@ var StatusCollection = class StatusCollection {
 		let collection = this.children.get(key);
 		if (!collection) {
 			collection = new StatusCollection();
+			collection.rootKey = this.key ?? this.rootKey;
 			this.children.set(key, collection);
 		}
 		return collection;
@@ -4662,200 +4675,6 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [{ type: ProgrammabilityService }]
 });
-const getLabelSymbol = Symbol("getLabel");
-function isLabeledRecord(obj, isKey, isValue, getLabelSymbol) {
-	if (!isRecord(obj, isKey, isValue)) return false;
-	const getLabel = obj[getLabelSymbol];
-	return getLabel !== void 0 && typeof getLabel === "function";
-}
-function isRecord(obj, isKey, isValue) {
-	if (typeof obj !== "object" || obj === null || Array.isArray(obj)) return false;
-	return Object.entries(obj).every(([key, val]) => {
-		return isKey(key) && isValue(val);
-	});
-}
-function isNumericKey(key) {
-	return typeof key === "string" && !isNaN(Number(key));
-}
-var SetFilterComponent = class SetFilterComponent {
-	params;
-	fieldName;
-	Texts = Texts$6;
-	selectAll = true;
-	searchText = "";
-	options = [];
-	filteredOptions = [];
-	agInit(params) {
-		this.params = params;
-		this.fieldName = params.colDef.field;
-		const map = params.colDef.filterParams?.map;
-		if (isRecord(map, (key) => typeof key === "string" || typeof key === "number", (val) => typeof val === "string")) this.options = Object.entries(map).map(([key, label]) => ({
-			value: this.parseKey(key),
-			label,
-			selected: true
-		}));
-		else this.options = [];
-		this.filteredOptions = [...this.options];
-	}
-	isFilterActive() {
-		return this.options.some((o) => !o.selected);
-	}
-	doesFilterPass(params) {
-		const value = this.resolvePath(params.data, this.fieldName);
-		return this.options.some((o) => o.selected && o.value === value);
-	}
-	getModel() {
-		const selectedValues = this.options.filter((o) => o.selected).map((o) => o.value);
-		if (selectedValues.length === this.options.length) return null;
-		if (selectedValues.length === 0) return {
-			filterType: "text",
-			type: "excludeAll"
-		};
-		const filterType = this.getFilterType();
-		const filters = selectedValues.map((value) => ({
-			filterType,
-			type: "equals",
-			filter: value
-		}));
-		if (filters.length === 1) return filters[0];
-		return {
-			filterType,
-			operator: "OR",
-			conditions: filters
-		};
-	}
-	setModel(model) {
-		if (model == null) return;
-		this.selectAll = false;
-		if (model?.type === "excludeAll") this.options.forEach((o) => o.selected = false);
-		else if (model?.type === "equals") this.options.forEach((o) => o.selected = o.value == model.filter);
-		else if (model?.operator === "OR" && Array.isArray(model.conditions)) {
-			const selected = model.conditions.map((x) => x.filter);
-			this.options.forEach((o) => o.selected = selected.includes(o.value));
-		}
-		this.updateFilteredOptions();
-	}
-	onSelectionChange() {
-		this.params.filterChangedCallback();
-	}
-	onSearchChange() {
-		this.updateFilteredOptions();
-	}
-	onSelectAllChange() {
-		this.setAll(this.selectAll);
-	}
-	parseKey(key) {
-		if (key === "true") return true;
-		if (key === "false") return false;
-		const num = Number(key);
-		return isNaN(num) ? key : num;
-	}
-	setAll(select) {
-		this.options.forEach((o) => o.selected = select);
-		this.updateFilteredOptions();
-		this.params.filterChangedCallback();
-	}
-	updateFilteredOptions() {
-		const search = this.searchText.toLowerCase();
-		this.filteredOptions = this.options.filter((o) => o.label.toLowerCase().includes(search));
-	}
-	resolvePath(obj, path) {
-		return path.split(".").reduce((acc, part) => acc?.[part], obj);
-	}
-	getFilterType() {
-		switch (this.params?.colDef?.cellDataType) {
-			case "number": return "number";
-			case "date":
-			case "dateTime": return "date";
-			case "text": return "text";
-			default: return "number";
-		}
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.2",
-		ngImport: i0,
-		type: SetFilterComponent,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
-		version: "22.2.2",
-		type: SetFilterComponent,
-		isStandalone: true,
-		selector: "ng-component",
-		ngImport: i0,
-		template: "<div class=\"set-filter\">\r\n\r\n  <wm-sirio-textbox\r\n    [placeholder]=\"Texts.TypeToSearch\"\r\n    [ariaLabel]=\"Texts.TypeToSearch\"\r\n    autocomplete=\"off\"\r\n    [(ngModel)]=\"searchText\"\r\n    (ngModelChange)=\"onSearchChange()\" />\r\n\r\n  <div class=\"set-filter-options\">\r\n    <wm-sirio-checkbox [label]=\"Texts.SelectAll\" [(ngModel)]=\"selectAll\" (ngModelChange)=\"onSelectAllChange()\" />\r\n\r\n    @for (option of filteredOptions; track option) {\r\n      <wm-sirio-checkbox\r\n        [label]=\"option.label\"\r\n        [(ngModel)]=\"option.selected\"\r\n        (ngModelChange)=\"onSelectionChange()\" />\r\n    }\r\n  </div>\r\n\r\n</div>\r\n",
-		styles: [".set-filter{padding:10px;background-color:#fff}.set-filter-options{max-height:200px;overflow-y:auto}\n"],
-		dependencies: [
-			{
-				kind: "ngmodule",
-				type: FormsModule
-			},
-			{
-				kind: "directive",
-				type: i1$3.NgControlStatus,
-				selector: "[formControlName],[ngModel],[formControl]"
-			},
-			{
-				kind: "directive",
-				type: i1$3.NgModel,
-				selector: "[ngModel]:not([formControlName]):not([formControl])",
-				inputs: [
-					"name",
-					"disabled",
-					"ngModel",
-					"ngModelOptions"
-				],
-				outputs: ["ngModelChange"],
-				exportAs: ["ngModel"]
-			},
-			{
-				kind: "component",
-				type: SirioTextbox,
-				selector: "wm-sirio-textbox",
-				inputs: [
-					"type",
-					"maxlength",
-					"autocomplete",
-					"emptyAsNull",
-					"textCase"
-				]
-			},
-			{
-				kind: "component",
-				type: SirioCheckbox,
-				selector: "wm-sirio-checkbox",
-				inputs: [
-					"toggle",
-					"togglePosition",
-					"inline"
-				]
-			}
-		],
-		changeDetection: i0.ChangeDetectionStrategy.Eager
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: SetFilterComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			changeDetection: ChangeDetectionStrategy.Eager,
-			imports: [
-				FormsModule,
-				SirioTextbox,
-				SirioCheckbox
-			],
-			template: "<div class=\"set-filter\">\r\n\r\n  <wm-sirio-textbox\r\n    [placeholder]=\"Texts.TypeToSearch\"\r\n    [ariaLabel]=\"Texts.TypeToSearch\"\r\n    autocomplete=\"off\"\r\n    [(ngModel)]=\"searchText\"\r\n    (ngModelChange)=\"onSearchChange()\" />\r\n\r\n  <div class=\"set-filter-options\">\r\n    <wm-sirio-checkbox [label]=\"Texts.SelectAll\" [(ngModel)]=\"selectAll\" (ngModelChange)=\"onSelectAllChange()\" />\r\n\r\n    @for (option of filteredOptions; track option) {\r\n      <wm-sirio-checkbox\r\n        [label]=\"option.label\"\r\n        [(ngModel)]=\"option.selected\"\r\n        (ngModelChange)=\"onSelectionChange()\" />\r\n    }\r\n  </div>\r\n\r\n</div>\r\n",
-			styles: [".set-filter{padding:10px;background-color:#fff}.set-filter-options{max-height:200px;overflow-y:auto}\n"]
-		}]
-	}]
-});
 var HostCellRendererComponent = class HostCellRendererComponent {
 	injector;
 	programmability;
@@ -4998,856 +4817,102 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
-function getCandidate(element) {
-	return Array.from(element.querySelectorAll("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex]:not([tabindex=\"-1\"]), [contenteditable]"));
-}
-function isVisible(element) {
-	let el = element;
-	while (el) {
-		const style = window.getComputedStyle(el);
-		if (style.display === "none" || style.visibility === "hidden") return false;
-		el = el.parentElement;
+var CacheContextService = class CacheContextService {
+	programmability;
+	constructor(programmability) {
+		this.programmability = programmability;
 	}
-	return true;
-}
-function isFocusable(element) {
-	const style = window.getComputedStyle(element);
-	const hasTabIndex = element.tabIndex >= 0;
-	const isContentEditable = element.hasAttribute("contenteditable") && element.getAttribute("contenteditable") !== "false";
-	if (element.contentEditable === "true") return true;
-	return (hasTabIndex || isContentEditable) && style.visibility !== "hidden" && style.display !== "none" && !element.hasAttribute("disabled") && isVisible(element);
-}
-function getFocusables(el, firstOnly = false) {
-	const candidates = getCandidate(el);
-	const result = [];
-	for (const focusableEl of candidates) if (isFocusable(focusableEl)) {
-		result.push(focusableEl);
-		if (firstOnly) break;
+	isExpression(text) {
+		return this.programmability.isExpression(text);
 	}
-	return result;
-}
-function setFocus(el, preventScroll = false) {
-	const focusables = getFocusables(el, true);
-	if (focusables.length === 0) return null;
-	const target = focusables[0];
-	target.focus({ preventScroll });
-	return target;
-}
-function hasFieldFocus(container) {
-	const active = container.ownerDocument.activeElement;
-	return !!active && active !== container && container.contains(active) && active.matches("input, select, textarea, [contenteditable]:not([contenteditable=\"false\"])");
-}
-var MarkdownService = class MarkdownService {
-	constructor() {
-		marked.use({
-			async: false,
-			gfm: true,
-			breaks: true
-		});
-		const renderer = new marked.Renderer();
-		renderer.link = function(args) {
-			if (args.href?.startsWith("action://")) return `<a href="#" data-action="${args.href.substring(9)}">${args.text}</a>`;
-			return `<a href="${args.href}" target="_blank">${args.text}</a>`;
-		};
-		marked.setOptions({ renderer });
+	getExpression(text) {
+		return this.programmability.getExpression(text);
 	}
-	toHtml(text) {
-		return marked.parse(text ?? "");
+	evaluateString(cacheControl, formGroup, value, options = {}) {
+		if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluateString(formGroup, value, this.getOptions(options)));
+		return value ?? "";
 	}
-	toInlineHtml(text) {
-		return marked.parseInline(text ?? "");
+	evaluateBoolean(cacheControl, formGroup, value, options = {}) {
+		if (typeof value === "boolean") return value;
+		else if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluateBoolean(formGroup, value, this.getOptions(options)));
+		return null;
+	}
+	evaluateNumber(cacheControl, formGroup, value, options = {}) {
+		if (typeof value === "number") return value;
+		else if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluateNumber(formGroup, value, this.getOptions(options)));
+		return null;
+	}
+	evaluate(cacheControl, formGroup, value, options = {}) {
+		if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluate(formGroup, value, this.getOptions(options)));
+		return value;
+	}
+	evaluateTemplate(cacheControl, formGroup, value, options = {}) {
+		return this.call(cacheControl, value, () => this.programmability.evaluateTemplate(formGroup, value, this.getOptions(options)));
+	}
+	evaluateUnary(cacheControl, formGroup, value, input, options = {}) {
+		if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluateUnary(formGroup, value, input, this.getOptions(options)));
+		return null;
+	}
+	invalidate(cacheControl) {
+		if (this.cache.has(cacheControl)) this.cache.delete(cacheControl);
+	}
+	invalidateAll() {
+		this.cache = /* @__PURE__ */ new WeakMap();
+	}
+	getOptions(options) {
+		return {
+			...options,
+			cacheable: false
+		};
+	}
+	call(cacheControl, value, evaluate) {
+		if (value === null) return null;
+		if (!this.cache.has(cacheControl)) this.cache.set(cacheControl, {});
+		const cachedObject = this.cache.get(cacheControl);
+		if (value in cachedObject) return cachedObject[value];
+		const result = evaluate();
+		cachedObject[value] = result;
+		return result;
 	}
+	cache = /* @__PURE__ */ new WeakMap();
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.2",
 		ngImport: i0,
-		type: MarkdownService,
-		deps: [],
+		type: CacheContextService,
+		deps: [{ token: ProgrammabilityService }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
 		version: "22.2.2",
 		ngImport: i0,
-		type: MarkdownService,
-		providedIn: "root"
+		type: CacheContextService
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: MarkdownService,
-	decorators: [{
-		type: Injectable,
-		args: [{ providedIn: "root" }]
-	}],
-	ctorParameters: () => []
+	type: CacheContextService,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => [{ type: ProgrammabilityService }]
 });
-var GridService = class GridService {
-	formatter;
-	languageService;
-	programmability;
-	metadata;
-	markdownService;
-	weak;
-	constructor(formatter, languageService, programmability, metadata, markdownService, weak) {
-		this.formatter = formatter;
-		this.languageService = languageService;
-		this.programmability = programmability;
-		this.metadata = metadata;
-		this.markdownService = markdownService;
-		this.weak = weak;
-	}
-	getModules() {
-		return [
-			ClientSideRowModelModule,
-			InfiniteRowModelModule,
-			PaginationModule,
-			LocaleModule,
-			CellStyleModule,
-			ClientSideRowModelApiModule,
-			TextFilterModule,
-			NumberFilterModule,
-			DateFilterModule,
-			CustomFilterModule,
-			ColumnAutoSizeModule,
-			ColumnApiModule,
-			RowSelectionModule,
-			RowApiModule,
-			RowAutoHeightModule,
-			RowStyleModule,
-			HighlightChangesModule
-		];
-	}
-	getOptions(component, formGroup) {
-		const selection = this.getRowSelection(component, formGroup);
-		const rowId = this.getRowId(component);
-		const pagination = this.getPaginable(component);
-		const pageSize = this.getPageSize(component);
-		const texts = this.getTexts();
-		const theme = this.getTheme();
-		const autoHeight = component.autoHeight === true;
-		const options = {
-			defaultColDef: {
-				floatingFilter: component.floatingFilter === true,
-				headerClass: component.floatingFilter === true ? "show-filter" : "hide-filter"
-			},
-			selectionColumnDef: { pinned: "left" },
-			dataTypeDefinitions: this.getDataTypeDefinitions(),
-			rowSelection: selection,
-			pagination,
-			paginationPageSize: pageSize,
-			cacheBlockSize: pageSize,
-			paginationPageSizeSelector: [
-				5,
-				10,
-				20,
-				50
-			],
-			localeText: texts,
-			enableCellTextSelection: true,
-			theme,
-			getRowId: rowId,
-			domLayout: autoHeight ? "autoHeight" : void 0,
-			onGridSizeChanged: (params) => {
-				this.resizeGrid(component, params.api);
-			},
-			onModelUpdated: (params) => {
-				this.resizeGrid(component, params.api);
-				this.onRowSelecting(component, formGroup, params);
-			}
-		};
-		this.setRowStyle(component, options, formGroup);
-		return options;
-	}
-	getColumnDefs(component, columns, formGroup) {
-		if (Array.isArray(columns)) {
-			const groupedColumns = this.groupColumns(columns);
-			const columnDefs = this.groupsToColumnDefs(groupedColumns, (cs) => this.createColumnDefs(component, cs, formGroup));
-			this.addActionColumnDef(component, columnDefs, formGroup);
-			this.addRowNumbersColumnDef(component, columnDefs);
-			return columnDefs;
-		} else return [];
-	}
-	onSelectionChanged(component, formGroup, gridEvent) {
-		if (component.selectionChanged) {
-			const event = { selectedRows: gridEvent.api.getSelectedRows() };
-			return this.programmability.evaluate(formGroup, component.selectionChanged, {
-				cacheable: false,
-				extendContext: () => ({ "event": event }),
-				invokeArgs: [event]
-			});
-		}
-	}
-	getCacheKey() {
-		return `getGridOptions_${this.language}`;
-	}
-	invalidateOptions(component) {
-		this.weak.invalidate(component, this.getCacheKey());
-	}
-	onRowDataChanged(component, api, rowData) {
-		if (this.hasRowNumbers(component) && this.hasRowId(component)) this.refreshRowNumbers(api);
-	}
-	onDataSourceChanged(component, api, dataSource) {}
-	get language() {
-		return this.languageService.getLanguage();
-	}
-	locale(component, key) {
-		return localize(this.language, component, key);
-	}
-	resizeGrid(component, api) {
-		const columnsToResize = [];
-		if (this.hasActions(component)) columnsToResize.push("actions");
-		if (this.hasRowNumbers(component)) columnsToResize.push("rowNumbers");
-		if (columnsToResize.length > 0) api.autoSizeColumns(columnsToResize);
-	}
-	hasActions(component) {
-		return Array.isArray(component.actions) && component.actions.length > 0;
-	}
-	hasRowNumbers(component) {
-		return component.rowNumbers;
-	}
-	createColumnDefs(component, columns, formGroup) {
-		if (Array.isArray(columns)) return columns.map((column) => {
-			const colDef = {
-				field: column.key,
-				headerName: this.locale(column, "label")
-			};
-			this.setCellDataType(column, colDef);
-			const map = this.getMap(column, colDef, formGroup);
-			this.setCellRenderer(column, colDef, map, formGroup);
-			this.setValueGetter(column, colDef, formGroup);
-			this.setColStyles(column, colDef, formGroup);
-			this.setAutoHeight(column, colDef);
-			this.setResizable(column, colDef);
-			this.setSortable(column, colDef);
-			this.setFilter(column, colDef, map);
-			this.setFilterParams(column, colDef, map);
-			this.setSuppressMovable(column, colDef);
-			this.setFlex(column, colDef);
-			this.setAlign(column, colDef);
-			this.setPinned(column, colDef);
-			this.setWidth(column, colDef);
-			this.setValueFormatter(column, colDef, map);
-			this.setCellChangeFlash(column, colDef);
-			return colDef;
-		});
-		else return [];
-	}
-	addActionColumnDef(component, columnDefs, formGroup) {
-		if (this.hasActions(component)) columnDefs.push({
-			colId: "actions",
-			headerName: this.locale(Texts, "Actions"),
-			resizable: false,
-			sortable: false,
-			filter: false,
-			cellDataType: false,
-			hide: this.suppressActions(component, formGroup),
-			pinned: "right",
-			cellRendererParams: {
-				component,
-				formGroup
-			},
-			cellRenderer: ActionsCellRendererComponent,
-			suppressKeyboardEvent: this.navigateInsideCell.bind(this)
-		});
-	}
-	addRowNumbersColumnDef(component, columnDefs) {
-		if (this.hasRowNumbers(component)) columnDefs.unshift({
-			colId: "rowNumbers",
-			headerName: "#",
-			pinned: "left",
-			headerClass: "row-numbers-header",
-			cellClass: "row-numbers-cell",
-			resizable: false,
-			sortable: false,
-			valueGetter: (n) => n.node.rowIndex + 1
-		});
-	}
-	refreshRowNumbers(api) {
-		if (api) {
-			const rowNumbers = ["rowNumbers"];
-			api.setColumnsVisible(rowNumbers, false);
-			api.setColumnsVisible(rowNumbers, true);
-		}
-	}
-	groupColumns(columns) {
-		const rootItemsOrdered = [];
-		function findOrCreateGroup(groups, name) {
-			let group = groups.find((item) => item.type === "group" && item.name === name);
-			if (!group) {
-				group = {
-					name,
-					type: "group",
-					columns: []
-				};
-				groups.push(group);
-			}
-			return group;
-		}
-		for (const column of columns) {
-			const groupParts = (column.group ?? "").split(/[\\/]/).map((part) => part.trim()).filter((part) => part.length > 0);
-			if (groupParts.length === 0) rootItemsOrdered.push(column);
-			else {
-				let currentLevel = rootItemsOrdered;
-				for (let i = 0; i < groupParts.length; i++) {
-					const part = groupParts[i];
-					currentLevel = findOrCreateGroup(currentLevel, part).columns;
-				}
-				currentLevel.push(column);
-			}
-		}
-		return rootItemsOrdered;
-	}
-	groupsToColumnDefs(grouped, getColumnsDef) {
-		return grouped.map((item) => {
-			if ("type" in item && item.type === "group") return {
-				headerName: item.name,
-				children: this.groupsToColumnDefs(item.columns, getColumnsDef)
-			};
-			else return getColumnsDef([item])[0];
-		});
-	}
-	setCellDataType(column, colDef) {
-		if (column.dataType === "component" || column.dataType === "template" || column.dataType === "formatted" || column.dataType === "auto") return;
-		if (typeof column.dataType === "string" && column.dataType.trim() !== "") colDef.cellDataType = column.dataType;
-	}
-	setRowStyle(component, gridOptions, formGroup) {
-		this.applyStyle(gridOptions, formGroup, component.rowClass, "getRowClass", "rowClass");
-		this.applyStyle(gridOptions, formGroup, component.rowStyle, "getRowStyle", "rowStyle");
-		this.applyStyle(gridOptions, formGroup, component.rowClassRules, "rowClassRules", "rowClassRules");
-	}
-	setColStyles(column, colDef, formGroup) {
-		this.applyStyle(colDef, formGroup, column.headerClass, "headerClass", "headerClass");
-		this.applyStyle(colDef, formGroup, column.headerStyle, "headerStyle", "headerStyle");
-		this.applyStyle(colDef, formGroup, column.cellClass, "cellClass", "cellClass");
-		this.applyStyle(colDef, formGroup, column.cellStyle, "cellStyle", "cellStyle");
-		this.applyStyle(colDef, formGroup, column.cellClassRules, "cellClassRules", "cellClassRules");
-	}
-	setCellRenderer(column, colDef, map, formGroup) {
-		if (column.format === "objectURL") colDef.cellRenderer = ObjectURLRendererComponent;
-		if (column.format === "deleteRow") colDef.cellRenderer = DeleteRowRendererComponent;
-		if (colDef.cellDataType === "boolean" && map) colDef.cellRenderer = (params) => {
-			return this.formatMap(params.value, map);
-		};
-		if (column.dataType === "formatted") colDef.cellRenderer = (params) => {
-			return this.markdownService.toHtml(params.value);
-		};
-		if (column.dataType === "component") {
-			colDef.cellRenderer = HostCellRendererComponent;
-			colDef.cellRendererParams = {
-				componentType: column.component,
-				properties: column.properties,
-				formGroup
-			};
-			colDef.cellClass = "cell-component";
-		}
-		if (column.dataType === "template") {
-			const template = this.metadata.getTemplateByName(column.template);
-			if (template) {
-				colDef.cellRenderer = HostCellRendererComponent;
-				colDef.cellRendererParams = {
-					componentType: "form-host",
-					properties: {
-						schema: template,
-						showNav: false,
-						showProgress: false,
-						showNavButton: false,
-						showFormTitle: false
-					},
-					onPropertiesResolved: (props, params) => ({ value: params.data })
-				};
-				colDef.cellClass = "cell-component";
-			}
-		}
-		if (column.dataType === "custom") this.applyExpression(colDef, formGroup, column.customRenderer, "cellRenderer");
-	}
-	setValueGetter(column, colDef, formGroup) {
-		this.applyExpression(colDef, formGroup, column.valueGetter, "valueGetter");
-	}
-	setCellChangeFlash(column, colDef) {
-		colDef.enableCellChangeFlash = true;
-	}
-	setAutoHeight(column, colDef) {
-		if (column.autoHeight) {
-			colDef.autoHeight = true;
-			colDef.wrapText = true;
-		}
-	}
-	setResizable(column, colDef) {
-		colDef.resizable = column.resize === true;
-	}
-	setSortable(column, colDef) {
-		colDef.sortable = column.sort === true;
-	}
-	setFilter(column, colDef, map) {
-		if (column.filter === true) {
-			colDef.filter = true;
-			if (map) colDef.filter = SetFilterComponent;
-		}
-	}
-	setFilterParams(column, colDef, map) {
-		const filterParams = {};
-		if (column.dataType === "uuid") this.setUuidFilterParams(filterParams);
-		else if (column.dataType === "integer") this.setIntegerFilterParams(filterParams);
-		else if (column.dataType === "date") this.setDateFilterParams(filterParams);
-		else if (column.dataType === "boolean") this.setBooleanFilterParams(filterParams);
-		if (map) filterParams.map = map;
-		colDef.filterParams = filterParams;
-	}
-	setUuidFilterParams(filterParams) {
-		filterParams.filterOptions = ["equals", "notEqual"];
-	}
-	setIntegerFilterParams(filterParams) {
-		filterParams.allowedCharPattern = "\\d";
-	}
-	setDateFilterParams(filterParams) {
-		filterParams.comparator = (filterLocalDateAtMidnight, cellValue) => {
-			if (!cellValue) return -1;
-			const cellDate = new Date(cellValue);
-			if (isNaN(cellDate.getTime())) return -1;
-			const cellDateNoTime = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
-			if (cellDateNoTime < filterLocalDateAtMidnight) return -1;
-			if (cellDateNoTime > filterLocalDateAtMidnight) return 1;
-			return 0;
-		};
-	}
-	setBooleanFilterParams(filterParams) {
-		filterParams.filterOptions = [
-			{
-				displayKey: "includeAll",
-				displayName: Texts.ChooseOne,
-				numberOfInputs: 0,
-				predicate: ([filter], value) => true
-			},
-			{
-				displayKey: "true",
-				displayName: Texts.True,
-				numberOfInputs: 0,
-				predicate: ([filter], value) => value === true
-			},
-			{
-				displayKey: "false",
-				displayName: Texts.False,
-				numberOfInputs: 0,
-				predicate: ([filter], value) => value === false
-			},
-			{
-				displayKey: "blank",
-				displayName: Texts.Blank,
-				numberOfInputs: 0,
-				predicate: ([filter], value) => value === null
-			},
-			{
-				displayKey: "notBlank",
-				displayName: Texts.NotBlank,
-				numberOfInputs: 0,
-				predicate: ([filter], value) => value !== null
-			}
-		];
-		filterParams.suppressAndOrCondition = true;
-	}
-	setSuppressMovable(column, colDef) {
-		if (!(column.move === true)) colDef.suppressMovable = true;
-	}
-	setFlex(column, colDef) {
-		if (column.flex === true) colDef.flex = 1;
-	}
-	setAlign(column, colDef) {
-		if (column.align === "left") colDef.cellStyle = { textAlign: "left" };
-		else if (column.align === "center") colDef.cellStyle = { textAlign: "center" };
-		else if (column.align === "right") colDef.cellStyle = { textAlign: "right" };
-	}
-	setPinned(column, colDef) {
-		if (typeof column.pinned === "string") colDef.pinned = column.pinned;
-	}
-	setWidth(column, colDef) {
-		if (typeof column.width === "number") colDef.width = column.width;
-		if (typeof column.minWidth === "number") colDef.minWidth = column.minWidth;
-		if (typeof column.maxWidth === "number") colDef.maxWidth = column.maxWidth;
-	}
-	setValueFormatter(column, colDef, map) {
-		if (map) colDef.valueFormatter = (params) => this.formatMap(params.value, map);
-	}
-	getRowSelection(component, formGroup) {
-		let options = void 0;
-		if (this.selectable(component, formGroup)) {
-			const trigger = this.selectionTrigger(component);
-			const checkboxes = trigger !== "click";
-			const click = trigger !== "checkbox";
-			if (this.multiSelect(component, formGroup)) options = {
-				mode: "multiRow",
-				selectAll: "filtered",
-				hideDisabledCheckboxes: true,
-				checkboxes,
-				headerCheckbox: checkboxes,
-				enableClickSelection: click,
-				enableSelectionWithoutKeys: click
-			};
-			else options = {
-				mode: "singleRow",
-				checkboxes,
-				enableClickSelection: click
-			};
-			if (component.rowSelectable) options = {
-				...options,
-				isRowSelectable: (rowNode) => this.onRowSelectable(component, formGroup, rowNode.data)
-			};
-		}
-		return options;
-	}
-	hasRowId(component) {
-		return typeof component.rowId === "string" && component.rowId.trim() !== "";
-	}
-	getRowId(component) {
-		if (this.hasRowId(component)) return (params) => params.data[component.rowId];
-		else return;
-	}
-	applyStyle(target, formGroup, styleExpression, funcName, staticName) {
-		if (styleExpression) {
-			const value = this.programmability.evaluate(formGroup, styleExpression);
-			if (typeof value === "function") target[funcName] = value;
-			else target[staticName] = value;
-		}
-	}
-	applyExpression(target, formGroup, expression, propertyName) {
-		if (expression) {
-			const value = this.programmability.evaluate(formGroup, expression);
-			if (typeof value === "function") target[propertyName] = (n) => value(n.data);
-			else target[propertyName] = () => value;
-		}
-	}
-	onRowSelectable(component, formGroup, data) {
-		if (!data) return false;
-		const event = { data };
-		return this.programmability.evaluate(formGroup, component.rowSelectable, {
-			cacheable: false,
-			extendContext: () => ({ "event": event }),
-			invokeArgs: [event]
-		}) === true;
-	}
-	onRowSelected(component, formGroup, data) {
-		if (!data) return false;
-		const event = { data };
-		return this.programmability.evaluate(formGroup, component.rowSelected, {
-			cacheable: false,
-			extendContext: () => ({ "event": event }),
-			invokeArgs: [event]
-		}) === true;
-	}
-	onRowSelecting(component, formGroup, params) {
-		if (params.newData && component.rowSelected && this.selectable(component, formGroup)) params.api.forEachNode((node) => {
-			if (this.onRowSelected(component, formGroup, node.data)) node.setSelected(true);
-		});
-	}
-	suppressActions(component, formGroup) {
-		return this.programmability.evaluateBoolean(formGroup, component.suppressActions, { cacheable: false }) ?? false;
-	}
-	selectable(component, formGroup) {
-		return this.programmability.evaluateBoolean(formGroup, component.selectable, { cacheable: false }) ?? false;
-	}
-	multiSelect(component, formGroup) {
-		return this.programmability.evaluateBoolean(formGroup, component.multiSelect, { cacheable: false }) ?? false;
-	}
-	selectionTrigger(component) {
-		const value = component.selectionTrigger;
-		const trigger = typeof value === "string" ? value.trim().toLowerCase() : "";
-		return trigger === "click" || trigger === "both" ? trigger : "checkbox";
-	}
-	getPaginable(component) {
-		return typeof component.rowCount === "number" && component.rowCount > 0;
-	}
-	getPageSize(component) {
-		if (typeof component.rowCount === "number") return component.rowCount;
-	}
-	getTexts() {
-		if (this.language === "it") return AG_GRID_LOCALE_IT;
-		else if (this.language === "en") return AG_GRID_LOCALE_EN;
-		else if (this.language === "de") return AG_GRID_LOCALE_DE;
-		else if (this.language === "fr") return AG_GRID_LOCALE_FR;
-		else if (this.language === "es") return AG_GRID_LOCALE_ES;
-		else if (this.language === "pt") return AG_GRID_LOCALE_PT;
-		else if (this.language === "") return AG_GRID_LOCALE_IT;
-		else return AG_GRID_LOCALE_EN;
-	}
-	getTheme() {
-		return themeQuartz.withPart(iconSetAlpine).withParams({
-			backgroundColor: "#FAFAFA",
-			borderColor: "#D9E4F7",
-			browserColorScheme: "light",
-			cellTextColor: "#00121A",
-			columnBorder: true,
-			fontFamily: "inherit",
-			fontSize: 16,
-			headerBackgroundColor: "#002460",
-			headerColumnBorder: true,
-			headerColumnResizeHandleColor: "#F2F6FC",
-			headerColumnResizeHandleWidth: 2,
-			headerFontSize: 16,
-			headerFontWeight: 600,
-			headerRowBorder: true,
-			headerTextColor: "#F2F6FC",
-			rowBorder: true
-		});
-	}
-	getDataTypeDefinitions() {
-		return {
-			uuid: {
-				baseDataType: "text",
-				extendsDataType: "text"
-			},
-			date: {
-				baseDataType: "dateString",
-				extendsDataType: "dateString",
-				dateParser: (value) => {
-					return value ? new Date(value) : void 0;
-				},
-				valueFormatter: (params) => {
-					return this.formatter.formatDate(params.value);
-				}
-			},
-			dateTime: {
-				baseDataType: "dateString",
-				extendsDataType: "dateString",
-				dateParser: (value) => {
-					return value ? new Date(value) : void 0;
-				},
-				valueFormatter: (params) => {
-					return this.formatter.formatDateTime(params.value);
-				}
-			},
-			time: {
-				baseDataType: "dateString",
-				extendsDataType: "dateString",
-				dateParser: (value) => {
-					return value ? new Date(value) : void 0;
-				},
-				valueFormatter: (params) => {
-					return this.formatter.formatTime(params.value);
-				}
-			},
-			currency: {
-				extendsDataType: "number",
-				baseDataType: "number",
-				valueFormatter: (params) => params.value == null ? "" : this.formatter.formatCurrency(params.value)
-			},
-			decimal: {
-				extendsDataType: "number",
-				baseDataType: "number",
-				valueFormatter: (params) => params.value == null ? "" : this.formatter.formatNumber(params.value)
-			},
-			integer: {
-				extendsDataType: "number",
-				baseDataType: "number",
-				valueFormatter: (params) => params.value == null ? "" : this.formatter.formatNumber(params.value, 0)
-			},
-			percentage: {
-				extendsDataType: "number",
-				baseDataType: "number",
-				valueFormatter: (params) => params.value == null ? "" : `${Math.round(params.value * 100)}%`
-			},
-			flags: {
-				extendsDataType: "number",
-				baseDataType: "number"
-			}
-		};
-	}
-	getMap(column, colDef, formGroup) {
-		if ((colDef.cellDataType === "boolean" || colDef.cellDataType === "text" || colDef.cellDataType === "number" || colDef.cellDataType === "flags") && column.map) {
-			const map = this.programmability.evaluate(formGroup, column.mapValues);
-			if (!isRecord(map, (key) => typeof key === "string" || typeof key === "number", (val) => typeof val === "string")) return null;
-			if (colDef.cellDataType === "flags") map[getLabelSymbol] = (key) => this.formatFlags(key, map);
-			return map;
-		} else return null;
-	}
-	formatMap(value, map) {
-		if (value == null) return map?.["null"] ?? "";
-		if (map) {
-			var result = map[value];
-			if (result === void 0) {
-				if (isLabeledRecord(map, (key) => typeof key === "string" || typeof key === "number", (val) => typeof val === "string", getLabelSymbol)) result = map[getLabelSymbol](value);
-			}
-			return result ?? value.toString();
-		} else return value.toString();
-	}
-	formatFlags(value, map) {
-		if (typeof value === "number" && isRecord(map, isNumericKey, (val) => typeof val === "string")) {
-			if (value == 0) return map[0] ?? "0";
-			const flags = Object.keys(map).map(Number).filter((flag) => flag !== 0).filter((flag) => (value & flag) === flag);
-			if ((value & flags.reduce((sum, f) => sum | f, 0)) !== value) return null;
-			return flags.map((flag) => map[flag]).filter((label) => !!label).join(", ");
-		} else return null;
-	}
-	navigateInsideCell({ event }) {
-		const GRID_CELL_CLASSNAME = "ag-cell";
-		const { key, shiftKey } = event;
-		const path = this.getEventPath(event);
-		const isTabForward = key === "Tab" && shiftKey === false;
-		const isTabBackward = key === "Tab" && shiftKey === true;
-		let suppressEvent = false;
-		if (isTabForward || isTabBackward) {
-			const eGridCell = path.find((el) => {
-				if (el.classList === void 0) return false;
-				return el.classList.contains(GRID_CELL_CLASSNAME);
-			});
-			if (!eGridCell) return suppressEvent;
-			const focusableChildrenElements = getFocusables(eGridCell);
-			const lastCellChildEl = focusableChildrenElements[focusableChildrenElements.length - 1];
-			const firstCellChildEl = focusableChildrenElements[0];
-			if (focusableChildrenElements.length === 0) return false;
-			const currentIndex = focusableChildrenElements.indexOf(document.activeElement);
-			if (isTabForward) {
-				if (!(lastCellChildEl && document.activeElement === lastCellChildEl)) {
-					suppressEvent = true;
-					if (currentIndex !== -1 || document.activeElement === eGridCell) {
-						event.preventDefault();
-						focusableChildrenElements[currentIndex + 1].focus();
-					}
-				}
-			} else {
-				if (!(eGridCell.contains(document.activeElement) && eGridCell !== document.activeElement)) {
-					lastCellChildEl.focus();
-					event.preventDefault();
-				}
-				if (!(firstCellChildEl && document.activeElement === firstCellChildEl)) {
-					suppressEvent = true;
-					if (currentIndex !== -1 || document.activeElement === eGridCell) {
-						event.preventDefault();
-						focusableChildrenElements[currentIndex - 1].focus();
-					}
-				}
-			}
-		}
-		return suppressEvent;
-	}
-	getEventPath(event) {
-		const path = [];
-		let currentTarget = event.target;
-		while (currentTarget) {
-			path.push(currentTarget);
-			currentTarget = currentTarget.parentElement;
-		}
-		return path;
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.2",
-		ngImport: i0,
-		type: GridService,
-		deps: [
-			{ token: FormatterService },
-			{ token: i1$4.LanguageService },
-			{ token: ProgrammabilityService },
-			{ token: MetadataService },
-			{ token: MarkdownService },
-			{ token: WeakService }
-		],
-		target: i0.ɵɵFactoryTarget.Injectable
-	});
-	static ɵprov = i0.ɵɵngDeclareInjectable({
-		minVersion: "12.0.0",
-		version: "22.2.2",
-		ngImport: i0,
-		type: GridService
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: GridService,
-	decorators: [{ type: Injectable }],
-	ctorParameters: () => [
-		{ type: FormatterService },
-		{ type: i1$4.LanguageService },
-		{ type: ProgrammabilityService },
-		{ type: MetadataService },
-		{ type: MarkdownService },
-		{ type: WeakService }
-	]
-});
-var CacheContextService = class CacheContextService {
-	programmability;
-	constructor(programmability) {
-		this.programmability = programmability;
-	}
-	isExpression(text) {
-		return this.programmability.isExpression(text);
-	}
-	getExpression(text) {
-		return this.programmability.getExpression(text);
-	}
-	evaluateString(cacheControl, formGroup, value, options = {}) {
-		if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluateString(formGroup, value, this.getOptions(options)));
-		return value ?? "";
-	}
-	evaluateBoolean(cacheControl, formGroup, value, options = {}) {
-		if (typeof value === "boolean") return value;
-		else if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluateBoolean(formGroup, value, this.getOptions(options)));
-		return null;
-	}
-	evaluateNumber(cacheControl, formGroup, value, options = {}) {
-		if (typeof value === "number") return value;
-		else if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluateNumber(formGroup, value, this.getOptions(options)));
-		return null;
-	}
-	evaluate(cacheControl, formGroup, value, options = {}) {
-		if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluate(formGroup, value, this.getOptions(options)));
-		return value;
-	}
-	evaluateTemplate(cacheControl, formGroup, value, options = {}) {
-		return this.call(cacheControl, value, () => this.programmability.evaluateTemplate(formGroup, value, this.getOptions(options)));
-	}
-	evaluateUnary(cacheControl, formGroup, value, input, options = {}) {
-		if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluateUnary(formGroup, value, input, this.getOptions(options)));
-		return null;
-	}
-	invalidate(cacheControl) {
-		if (this.cache.has(cacheControl)) this.cache.delete(cacheControl);
-	}
-	invalidateAll() {
-		this.cache = /* @__PURE__ */ new WeakMap();
-	}
-	getOptions(options) {
-		return {
-			...options,
-			cacheable: false
-		};
-	}
-	call(cacheControl, value, evaluate) {
-		if (value === null) return null;
-		if (!this.cache.has(cacheControl)) this.cache.set(cacheControl, {});
-		const cachedObject = this.cache.get(cacheControl);
-		if (value in cachedObject) return cachedObject[value];
-		const result = evaluate();
-		cachedObject[value] = result;
-		return result;
-	}
-	cache = /* @__PURE__ */ new WeakMap();
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.2",
-		ngImport: i0,
-		type: CacheContextService,
-		deps: [{ token: ProgrammabilityService }],
-		target: i0.ɵɵFactoryTarget.Injectable
-	});
-	static ɵprov = i0.ɵɵngDeclareInjectable({
-		minVersion: "12.0.0",
-		version: "22.2.2",
-		ngImport: i0,
-		type: CacheContextService
+const getLabelSymbol = Symbol("getLabel");
+function isLabeledRecord(obj, isKey, isValue, getLabelSymbol) {
+	if (!isRecord(obj, isKey, isValue)) return false;
+	const getLabel = obj[getLabelSymbol];
+	return getLabel !== void 0 && typeof getLabel === "function";
+}
+function isRecord(obj, isKey, isValue) {
+	if (typeof obj !== "object" || obj === null || Array.isArray(obj)) return false;
+	return Object.entries(obj).every(([key, val]) => {
+		return isKey(key) && isValue(val);
 	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: CacheContextService,
-	decorators: [{ type: Injectable }],
-	ctorParameters: () => [{ type: ProgrammabilityService }]
-});
+}
+function isNumericKey(key) {
+	return typeof key === "string" && !isNaN(Number(key));
+}
 const FROM_AG = {
 	notEqual: "notEquals",
 	inRange: "between"
@@ -5858,7 +4923,7 @@ const TO_AG = {
 };
 const isoDay = (value) => typeof value === "string" && value.length >= 10 ? value.slice(0, 10) : null;
 const agDate = (value) => typeof value === "string" && value.length >= 10 ? `${value.slice(0, 10)} 00:00:00` : null;
-function agFiltersToSirio(model, columns) {
+function filterModelToSirio(model, columns) {
 	const result = {};
 	if (!model) return result;
 	for (const [key, filter] of Object.entries(model)) {
@@ -5924,14 +4989,12 @@ function agFilterToCondition(filter, type, key) {
 		value: filter["filter"] ?? null
 	};
 }
-function sirioFiltersToAg(filters, columns, byField = false) {
+function sirioFiltersToModel(filters, columns) {
 	const result = {};
 	for (const [key, value] of Object.entries(filters ?? {})) {
 		if (!sirioGridFilterActive(value)) continue;
-		const column = columns.find((c) => c.key === key);
-		const filter = sirioValueToAg(value, column?.filter ?? "text");
-		const target = byField ? column?.field || key : key;
-		if (filter && !(target in result)) result[target] = filter;
+		const filter = sirioValueToAg(value, columns.find((c) => c.key === key)?.filter ?? "text");
+		if (filter) result[key] = filter;
 	}
 	return result;
 }
@@ -6022,13 +5085,13 @@ function agFilterType(type, value) {
 		default: return "text";
 	}
 }
-function agOrderToSirio(order) {
+function orderModelToSirio(order) {
 	return (order ?? []).filter((o) => o && (o.sort === "asc" || o.sort === "desc")).map((o) => ({
 		field: o.colId,
 		direction: o.sort
 	}));
 }
-function sirioSortToAg(sort) {
+function sirioSortToOrderModel(sort) {
 	return sort.map((s) => ({
 		colId: s.field,
 		sort: s.direction
@@ -6066,8 +5129,8 @@ function rowsSourceToDataSource(source, columns) {
 			const params = {
 				startRow: query.offset,
 				endRow: query.offset + size,
-				sortModel: sirioSortToAg(query.sort),
-				filterModel: sirioFiltersToAg(query.filters, columns(), true),
+				sortModel: sirioSortToOrderModel(query.sort),
+				filterModel: serverFilterModel(query.filters, columns()),
 				context: void 0,
 				successCallback: (rows, lastRow) => {
 					const list = Array.isArray(rows) ? rows : [];
@@ -6102,6 +5165,63 @@ function rowsSourceToDataSource(source, columns) {
 		pagedSize
 	};
 }
+function serverFilterModel(filters, columns) {
+	const filterTypes = {};
+	for (const column of columns) if (column.filter) filterTypes[column.key] = column.filter;
+	const result = {};
+	for (const [key, filter] of Object.entries(sirioToFilterModel(filters, filterTypes))) {
+		const field = columns.find((c) => c.key === key)?.field || key;
+		if (!(field in result)) result[field] = filter;
+	}
+	return result;
+}
+var MarkdownService = class MarkdownService {
+	constructor() {
+		marked.use({
+			async: false,
+			gfm: true,
+			breaks: true
+		});
+		const renderer = new marked.Renderer();
+		renderer.link = function(args) {
+			if (args.href?.startsWith("action://")) return `<a href="#" data-action="${args.href.substring(9)}">${args.text}</a>`;
+			return `<a href="${args.href}" target="_blank">${args.text}</a>`;
+		};
+		marked.setOptions({ renderer });
+	}
+	toHtml(text) {
+		return marked.parse(text ?? "");
+	}
+	toInlineHtml(text) {
+		return marked.parseInline(text ?? "");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: MarkdownService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: MarkdownService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: MarkdownService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
 const NO_PAGED_SIZE = signal(null).asReadonly();
 var SirioGridService = class SirioGridService {
 	formatter;
@@ -6162,11 +5282,18 @@ var SirioGridService = class SirioGridService {
 		};
 	}
 	getRows(source, config, onData) {
-		if (!source || typeof source !== "object") return this.staticRows([]);
+		if (!source || typeof source !== "object" && typeof source !== "function") return this.staticRows([]);
 		const cached = this.rowsCache.get(source);
 		if (cached) return cached;
 		let rows;
-		if (Array.isArray(source)) {
+		if (typeof source === "function") rows = {
+			data: signal(null),
+			dataSource: source,
+			loading: signal(false),
+			failed: signal(false),
+			pagedSize: NO_PAGED_SIZE
+		};
+		else if (Array.isArray(source)) {
 			rows = this.staticRows(source);
 			onData(source);
 		} else if (isRowsSource(source)) {
@@ -6625,7 +5752,7 @@ var SirioGridService = class SirioGridService {
 		type: SirioGridService,
 		deps: [
 			{ token: FormatterService },
-			{ token: i1$4.LanguageService },
+			{ token: i1$3.LanguageService },
 			{ token: ProgrammabilityService },
 			{ token: MetadataService },
 			{ token: MarkdownService }
@@ -6647,7 +5774,7 @@ i0.ɵɵngDeclareClassMetadata({
 	decorators: [{ type: Injectable }],
 	ctorParameters: () => [
 		{ type: FormatterService },
-		{ type: i1$4.LanguageService },
+		{ type: i1$3.LanguageService },
 		{ type: ProgrammabilityService },
 		{ type: MetadataService },
 		{ type: MarkdownService }
@@ -6989,7 +6116,7 @@ var ChartService = class ChartService {
 		version: "22.2.2",
 		ngImport: i0,
 		type: ChartService,
-		deps: [{ token: ProgrammabilityService }, { token: i1$4.LanguageService }],
+		deps: [{ token: ProgrammabilityService }, { token: i1$3.LanguageService }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
@@ -7005,7 +6132,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ngImport: i0,
 	type: ChartService,
 	decorators: [{ type: Injectable }],
-	ctorParameters: () => [{ type: ProgrammabilityService }, { type: i1$4.LanguageService }]
+	ctorParameters: () => [{ type: ProgrammabilityService }, { type: i1$3.LanguageService }]
 });
 var RecursionDirective = class RecursionDirective {
 	controlContainer;
@@ -7130,337 +6257,38 @@ var RecursionDirective = class RecursionDirective {
 	}
 	prepareChildArray(formItem, childArray) {
 		if (childArray.createNewArray) return childArray;
-		const parentArray = formItem.parent;
-		if (parentArray instanceof FormArray && parentArray.createNewArray) {
-			var newArray = parentArray.createNewArray();
-			this.formService.patch(newArray, childArray.value, { strict: false });
-			return newArray;
-		}
-		return childArray;
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.2",
-		ngImport: i0,
-		type: RecursionDirective,
-		deps: [
-			{ token: i1$3.ControlContainer },
-			{ token: FormService },
-			{ token: CacheContextService }
-		],
-		target: i0.ɵɵFactoryTarget.Directive
-	});
-	static ɵdir = i0.ɵɵngDeclareDirective({
-		minVersion: "14.0.0",
-		version: "22.2.2",
-		type: RecursionDirective,
-		isStandalone: true,
-		selector: "[recursion]",
-		inputs: {
-			formGroup: "formGroup",
-			component: ["recursion", "component"]
-		},
-		providers: [CacheContextService],
-		exportAs: ["recursion"],
-		usesOnChanges: true,
-		ngImport: i0
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: RecursionDirective,
-	decorators: [{
-		type: Directive,
-		args: [{
-			selector: "[recursion]",
-			exportAs: "recursion",
-			standalone: true,
-			providers: [CacheContextService]
-		}]
-	}],
-	ctorParameters: () => [
-		{ type: i1$3.ControlContainer },
-		{ type: FormService },
-		{ type: CacheContextService }
-	],
-	propDecorators: {
-		formGroup: [{ type: Input }],
-		component: [{
-			type: Input,
-			args: ["recursion"]
-		}]
-	}
-});
-var FrameSecurityDirective = class FrameSecurityDirective {
-	el;
-	renderer;
-	frameSecurity = null;
-	constructor(el, renderer) {
-		this.el = el;
-		this.renderer = renderer;
-	}
-	ngAfterViewInit() {
-		const frame = this.el.nativeElement;
-		const sandbox = this.getSandBox(this.frameSecurity);
-		if (sandbox) this.renderer.setAttribute(frame, "sandbox", sandbox);
-		const allow = this.getAllow(this.frameSecurity);
-		if (allow) this.renderer.setAttribute(frame, "allow", allow);
-	}
-	getSandBox(security) {
-		let allowedProperties = [
-			"allowScripts",
-			"allowSameOrigin",
-			"allowForms",
-			"allowModals",
-			"allowPopups",
-			"allowTopNavigation",
-			"allowStorageAccessByUserActivation"
-		];
-		return Object.entries(security).filter(([key, value]) => value === true && allowedProperties.includes(key)).map(([key]) => this.camelToKebabCase(key)).join(" ");
-	}
-	getAllow(security) {
-		let allowedProperties = [
-			"fullscreen",
-			"geolocation",
-			"camera",
-			"microphone"
-		];
-		return Object.entries(security).filter(([key, value]) => value === true && allowedProperties.includes(key)).map(([key]) => key).join(" ");
-	}
-	camelToKebabCase(str) {
-		return str.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.2",
-		ngImport: i0,
-		type: FrameSecurityDirective,
-		deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }],
-		target: i0.ɵɵFactoryTarget.Directive
-	});
-	static ɵdir = i0.ɵɵngDeclareDirective({
-		minVersion: "14.0.0",
-		version: "22.2.2",
-		type: FrameSecurityDirective,
-		isStandalone: true,
-		selector: "[frameSecurity]",
-		inputs: { frameSecurity: "frameSecurity" },
-		ngImport: i0
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: FrameSecurityDirective,
-	decorators: [{
-		type: Directive,
-		args: [{
-			selector: "[frameSecurity]",
-			standalone: true
-		}]
-	}],
-	ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }],
-	propDecorators: { frameSecurity: [{ type: Input }] }
-});
-var GridDirective = class GridDirective {
-	grid;
-	gridService;
-	cacheContext;
-	languageService;
-	destroyRef;
-	rowSource;
-	columns = null;
-	selectable = null;
-	multiSelect = null;
-	suppressActions = null;
-	formGroup;
-	component = null;
-	constructor(grid, gridService, cacheContext, languageService, destroyRef) {
-		this.grid = grid;
-		this.gridService = gridService;
-		this.cacheContext = cacheContext;
-		this.languageService = languageService;
-		this.destroyRef = destroyRef;
-		grid.gridReady.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
-			this.gridApi = params.api;
-			this.prepareContext();
-			this.isGridReady = true;
-			this.onGridReady();
-		});
-	}
-	ngOnChanges(changes) {
-		if (this.isRowSourceChanged(changes)) this.onRowSourceChanged();
-		if (this.isColumnDefsChanged(changes)) this.onColumnDefsChanged();
-		if (this.isSelectionChanged(changes)) this.onSelectionChanged();
-		if (this.isSuppressActionChanged(changes)) this.onSuppressAction();
-	}
-	gridApi;
-	isGridReady = false;
-	noData = of([]);
-	prepareContext() {
-		const context = this.gridApi.getGridOption("context") ?? {};
-		context["cacheContext"] = this.cacheContext;
-		this.gridApi.setGridOption("context", context);
-	}
-	applyResult(data) {
-		if (this.isArray(data)) this.setRowData(data);
-		else if (this.isDataSource(data)) this.setDataSource(data);
-		else this.setRowData([]);
-	}
-	setRowData(rowSource) {
-		this.grid.rowModelType = "clientSide";
-		if (this.isGridReady) this.grid.api.setGridOption("rowData", rowSource);
-		else this.grid.rowData = rowSource;
-		this.gridService.onRowDataChanged(this.component, this.gridApi, rowSource);
-	}
-	setDataSource(rowSource) {
-		this.grid.rowModelType = "infinite";
-		if (this.isGridReady) this.grid.api.setGridOption("datasource", rowSource);
-		else this.grid.datasource = rowSource;
-		this.gridService.onDataSourceChanged(this.component, this.gridApi, rowSource);
-	}
-	isArray(rowSource) {
-		return Array.isArray(rowSource);
-	}
-	isDataSource(obj) {
-		return obj && typeof obj.getRows === "function";
-	}
-	onGridReady() {
-		this.onColumnDefsChanged();
-	}
-	isRowSourceChanged(changes) {
-		return ["rowSource"].some((key) => !!changes[key]);
-	}
-	onRowSourceChanged() {
-		this.cacheContext.invalidateAll();
-		if (isObservable(this.rowSource)) this.wrapObservable(this.rowSource).pipe(take$1(1), takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
-			this.applyResult(value ?? []);
-		});
-		else if (this.isDataSource(this.rowSource)) this.applyResult(this.wrapRowsSource(this.rowSource));
-		else this.applyResult(this.rowSource);
-	}
-	isColumnDefsChanged(changes) {
-		return ["columnDefs"].some((key) => !!changes[key]);
-	}
-	onColumnDefsChanged() {
-		if (this.gridApi) {
-			const columnDef = this.gridService.getColumnDefs(this.component, this.columns, this.formGroup);
-			this.gridApi.setGridOption("columnDefs", columnDef);
-		}
-	}
-	isSelectionChanged(changes) {
-		return ["selectable", "multiSelect"].some((key) => !!changes[key] && !changes[key].isFirstChange());
-	}
-	onSelectionChanged() {
-		if (this.gridApi) {
-			const rowSelection = this.gridService.getRowSelection(this.component, this.formGroup);
-			this.gridApi.setGridOption("rowSelection", rowSelection);
-		}
-	}
-	isSuppressActionChanged(changes) {
-		return ["suppressActions"].some((key) => !!changes[key] && !changes[key].isFirstChange());
-	}
-	onSuppressAction() {
-		if (this.gridApi) {
-			this.gridApi.setColumnsVisible(["actions"], !(this.suppressActions ?? false));
-			this.gridService.resizeGrid(this.component, this.gridApi);
-		}
-	}
-	showLoading(value) {
-		if (this.gridApi) this.gridApi.setGridOption("loading", value);
-	}
-	showLoadError(value) {
-		if (!this.gridApi) return;
-		if (value) {
-			this.grid.api.setGridOption("overlayNoRowsTemplate", this.locale(Texts, "LoadingFailed"));
-			this.grid.api.showNoRowsOverlay();
-		} else this.grid.api.setGridOption("overlayNoRowsTemplate", void 0);
-	}
-	get language() {
-		return this.languageService.getLanguage();
-	}
-	locale(component, key) {
-		return localize(this.language, component, key);
-	}
-	wrapObservable(source) {
-		this.showLoading(true);
-		this.showLoadError(false);
-		return source.pipe(tap$1(() => this.showLoadError(false)), catchError$1((err) => {
-			this.showLoadError(true);
-			return this.noData;
-		}), finalize$1(() => this.showLoading(false)));
-	}
-	wrapRowsSource(source) {
-		const thisRef = this;
-		function calculateLastRow(params, rows, lastRow) {
-			if (lastRow === void 0 && Array.isArray(rows)) {
-				if (rows.length < params.endRow - params.startRow) return params.startRow + rows.length;
-			}
-			return lastRow;
-		}
-		function wrapParams(params) {
-			thisRef.showLoading(true);
-			thisRef.showLoadError(false);
-			return {
-				...params,
-				successCallback: (rows, lastRow) => {
-					try {
-						params.successCallback(rows, calculateLastRow(params, rows, lastRow));
-					} finally {
-						thisRef.showLoading(false);
-					}
-				},
-				failCallback: () => {
-					try {
-						params.failCallback();
-					} finally {
-						thisRef.showLoading(false);
-						thisRef.showLoadError(true);
-					}
-				}
-			};
+		const parentArray = formItem.parent;
+		if (parentArray instanceof FormArray && parentArray.createNewArray) {
+			var newArray = parentArray.createNewArray();
+			this.formService.patch(newArray, childArray.value, { strict: false });
+			return newArray;
 		}
-		return { getRows: (params) => {
-			const wrapped = wrapParams(params);
-			source.getRows(wrapped);
-		} };
+		return childArray;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.2",
 		ngImport: i0,
-		type: GridDirective,
+		type: RecursionDirective,
 		deps: [
-			{
-				token: i1$2.AgGridAngular,
-				host: true
-			},
-			{ token: GridService },
-			{ token: CacheContextService },
-			{ token: i1$4.LanguageService },
-			{ token: i0.DestroyRef }
+			{ token: i1$2.ControlContainer },
+			{ token: FormService },
+			{ token: CacheContextService }
 		],
 		target: i0.ɵɵFactoryTarget.Directive
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
 		version: "22.2.2",
-		type: GridDirective,
+		type: RecursionDirective,
 		isStandalone: true,
-		selector: "[rowSource], [columns], [selectable], [multiSelect], [suppressActions]",
+		selector: "[recursion]",
 		inputs: {
-			rowSource: "rowSource",
-			columns: "columns",
-			selectable: "selectable",
-			multiSelect: "multiSelect",
-			suppressActions: "suppressActions",
 			formGroup: "formGroup",
-			component: ["register", "component"]
+			component: ["recursion", "component"]
 		},
 		providers: [CacheContextService],
+		exportAs: ["recursion"],
 		usesOnChanges: true,
 		ngImport: i0
 	});
@@ -7469,41 +6297,101 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: GridDirective,
+	type: RecursionDirective,
 	decorators: [{
 		type: Directive,
 		args: [{
-			selector: "[rowSource], [columns], [selectable], [multiSelect], [suppressActions]",
+			selector: "[recursion]",
+			exportAs: "recursion",
 			standalone: true,
 			providers: [CacheContextService]
 		}]
 	}],
 	ctorParameters: () => [
-		{
-			type: i1$2.AgGridAngular,
-			decorators: [{ type: Host }]
-		},
-		{ type: GridService },
-		{ type: CacheContextService },
-		{ type: i1$4.LanguageService },
-		{ type: i0.DestroyRef }
+		{ type: i1$2.ControlContainer },
+		{ type: FormService },
+		{ type: CacheContextService }
 	],
 	propDecorators: {
-		rowSource: [{ type: Input }],
-		columns: [{
-			type: Input,
-			args: ["columns"]
-		}],
-		selectable: [{ type: Input }],
-		multiSelect: [{ type: Input }],
-		suppressActions: [{ type: Input }],
 		formGroup: [{ type: Input }],
 		component: [{
 			type: Input,
-			args: ["register"]
+			args: ["recursion"]
 		}]
 	}
 });
+var FrameSecurityDirective = class FrameSecurityDirective {
+	el;
+	renderer;
+	frameSecurity = null;
+	constructor(el, renderer) {
+		this.el = el;
+		this.renderer = renderer;
+	}
+	ngAfterViewInit() {
+		const frame = this.el.nativeElement;
+		const sandbox = this.getSandBox(this.frameSecurity);
+		if (sandbox) this.renderer.setAttribute(frame, "sandbox", sandbox);
+		const allow = this.getAllow(this.frameSecurity);
+		if (allow) this.renderer.setAttribute(frame, "allow", allow);
+	}
+	getSandBox(security) {
+		let allowedProperties = [
+			"allowScripts",
+			"allowSameOrigin",
+			"allowForms",
+			"allowModals",
+			"allowPopups",
+			"allowTopNavigation",
+			"allowStorageAccessByUserActivation"
+		];
+		return Object.entries(security).filter(([key, value]) => value === true && allowedProperties.includes(key)).map(([key]) => this.camelToKebabCase(key)).join(" ");
+	}
+	getAllow(security) {
+		let allowedProperties = [
+			"fullscreen",
+			"geolocation",
+			"camera",
+			"microphone"
+		];
+		return Object.entries(security).filter(([key, value]) => value === true && allowedProperties.includes(key)).map(([key]) => key).join(" ");
+	}
+	camelToKebabCase(str) {
+		return str.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: FrameSecurityDirective,
+		deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: FrameSecurityDirective,
+		isStandalone: true,
+		selector: "[frameSecurity]",
+		inputs: { frameSecurity: "frameSecurity" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FrameSecurityDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[frameSecurity]",
+			standalone: true
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }],
+	propDecorators: { frameSecurity: [{ type: Input }] }
+});
 var ChangeDirective = class ChangeDirective {
 	observe;
 	callback;
@@ -7746,119 +6634,21 @@ var AccordionControl = class extends ContainerControl {
 };
 var DynamicListControl = class extends ContainerControl {};
 var GroupControl = class extends ContainerControl {};
-function subscribeOnce(source$, next, error, complete) {
-	source$.pipe(take$1(1)).subscribe({
-		next,
-		error,
-		complete
-	});
-}
 var TableControl = class extends Control {
 	setFilter(filter) {
-		this.grid.api.setFilterModel(filter);
-	}
-	getFilter() {
-		return this.grid.api.getFilterModel();
-	}
-	clearFilter() {
-		this.grid.api.setFilterModel(null);
-	}
-	getOrder() {
-		return this.grid.api.getColumnState().filter((col) => col.sort === "asc" || col.sort === "desc").sort((a, b) => (a.sortIndex ?? 0) - (b.sortIndex ?? 0)).map((col) => ({
-			colId: col.colId,
-			sort: col.sort
-		}));
-	}
-	setOrder(order) {
-		this.grid.api.applyColumnState({
-			state: order.map((o, i) => ({
-				colId: o.colId,
-				sort: o.sort,
-				sortIndex: i
-			})),
-			defaultState: { sort: null }
-		});
-	}
-	refresh() {
-		this.grid._refresh();
-	}
-	redraw() {
-		this.grid.api.redrawRows();
-	}
-	currentState = null;
-	onLoadState() {
-		const destroyRef = this.getDestroyRef();
-		merge(this.grid.filterChanged, this.grid.sortChanged, this.grid.columnResized, this.grid.paginationChanged).pipe(takeUntilDestroyed(destroyRef)).subscribe(() => {
-			this.currentState = this.createState();
-		});
-		this.grid.gridReady.pipe(takeUntilDestroyed(destroyRef)).subscribe((event) => {
-			this.applyState();
-		});
-	}
-	onSaveState() {
-		this.setState(this.currentState);
-	}
-	createState() {
-		return {
-			columns: this.grid.api.getColumnState(),
-			filter: this.grid.api.getFilterModel(),
-			pagination: this.paginationEnabled() ? {
-				page: this.grid.api.paginationGetCurrentPage(),
-				pageSize: this.grid.api.paginationGetPageSize()
-			} : null
-		};
-	}
-	applyState() {
-		const state = this.getState();
-		if (state) {
-			if (state.columns) this.grid.api.applyColumnState({
-				state: state.columns,
-				applyOrder: true
-			});
-			if (state.filter) this.grid.api.setFilterModel(state.filter);
-			if (state.pagination) this.applyPagination(state.pagination);
-		}
-	}
-	applyPagination(pagination) {
-		if (!this.paginationEnabled()) return;
-		this.applyPageSize(pagination.pageSize);
-		this.applyPageNumber(pagination.page);
-	}
-	applyPageSize(pageSize) {
-		if (this.grid.api.paginationGetPageSize() != pageSize) this.grid.api.setGridOption("paginationPageSize", pageSize);
-	}
-	applyPageNumber(pageNumber, subscribe = true) {
-		if (this.grid.api.paginationGetCurrentPage() != pageNumber) {
-			this.grid.api.paginationGoToPage(pageNumber);
-			if (subscribe) subscribeOnce(this.grid.firstDataRendered, () => {
-				this.applyPageNumber(pageNumber, false);
-			});
-		}
-	}
-	get grid() {
-		const ref = this.getComponentRef();
-		if (!(ref instanceof AgGridAngular)) throw new Error("ComponentRef is not a AgGridAngular");
-		return ref;
-	}
-	paginationEnabled() {
-		return this.grid.api.getGridOption("pagination") === true;
-	}
-};
-var DataGridControl = class extends TableControl {
-	setFilter(filter) {
-		this.dataGrid.filters.set(agFiltersToSirio(filter, this.modelColumns()));
+		this.dataGrid.filters.set(filterModelToSirio(filter, this.modelColumns()));
 	}
 	getFilter() {
-		return sirioFiltersToAg(this.dataGrid.filters(), this.modelColumns());
+		return sirioFiltersToModel(this.dataGrid.filters(), this.modelColumns());
 	}
 	clearFilter() {
 		this.dataGrid.clearFilters();
 	}
 	getOrder() {
-		return sirioSortToAg(this.dataGrid.sort());
+		return sirioSortToOrderModel(this.dataGrid.sort());
 	}
 	setOrder(order) {
-		this.dataGrid.sort.set(agOrderToSirio(order));
+		this.dataGrid.sort.set(orderModelToSirio(order));
 	}
 	refresh() {
 		this.dataGrid._refresh?.();
@@ -7941,7 +6731,7 @@ function createControl(context) {
 			default: return new DynamicListControl(context);
 		}
 		case "group": return new GroupControl(context);
-		case "table": return context.componentRef instanceof SirioDataGrid ? new DataGridControl(context) : new TableControl(context);
+		case "table": return new TableControl(context);
 		case "chart": return new ChartControl(context);
 		case "button": return new ButtonControl(context);
 		case "separator": return new SeparatorControl(context);
@@ -8411,7 +7201,7 @@ var CollapseDirective = class CollapseDirective {
 			{ token: i0.Renderer2 },
 			{ token: i0.DestroyRef },
 			{ token: ListenerService },
-			{ token: i1$4.LanguageService }
+			{ token: i1$3.LanguageService }
 		],
 		target: i0.ɵɵFactoryTarget.Directive
 	});
@@ -8450,7 +7240,7 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: i0.Renderer2 },
 		{ type: i0.DestroyRef },
 		{ type: ListenerService },
-		{ type: i1$4.LanguageService }
+		{ type: i1$3.LanguageService }
 	],
 	propDecorators: {
 		maxHeight: [{
@@ -8803,7 +7593,7 @@ var JsonFileDirective = class JsonFileDirective {
 		type: JsonFileDirective,
 		deps: [
 			{
-				token: i1$3.NgControl,
+				token: i1$2.NgControl,
 				self: true
 			},
 			{ token: SubscribeService },
@@ -8834,7 +7624,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{
-			type: i1$3.NgControl,
+			type: i1$2.NgControl,
 			decorators: [{ type: Self }]
 		},
 		{ type: SubscribeService },
@@ -8950,7 +7740,7 @@ var RequiredOnInputDirective = class RequiredOnInputDirective {
 			{ token: ValidationService },
 			{ token: i0.ElementRef },
 			{
-				token: i1$3.NgControl,
+				token: i1$2.NgControl,
 				optional: true
 			}
 		],
@@ -8982,7 +7772,7 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: ValidationService },
 		{ type: i0.ElementRef },
 		{
-			type: i1$3.NgControl,
+			type: i1$2.NgControl,
 			decorators: [{ type: Optional }]
 		}
 	],
@@ -9022,7 +7812,7 @@ var RequiredOnBlurDirective = class RequiredOnBlurDirective {
 		deps: [
 			{ token: i0.ElementRef },
 			{
-				token: i1$3.NgControl,
+				token: i1$2.NgControl,
 				optional: true,
 				self: true
 			},
@@ -9056,7 +7846,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [
 		{ type: i0.ElementRef },
 		{
-			type: i1$3.NgControl,
+			type: i1$2.NgControl,
 			decorators: [{ type: Optional }, { type: Self }]
 		},
 		{ type: ValidationService }
@@ -9105,7 +7895,7 @@ var MarkdownDirective = class MarkdownDirective {
 		type: MarkdownDirective,
 		isStandalone: true,
 		selector: "[markdown]",
-		inputs: { onAnchorClick: "onAnchorClick" },
+		inputs: { onAnchorClick: ["markdown", "onAnchorClick"] },
 		host: { listeners: { "click": "onClick($event)" } },
 		ngImport: i0
 	});
@@ -9123,7 +7913,10 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	propDecorators: {
-		onAnchorClick: [{ type: Input }],
+		onAnchorClick: [{
+			type: Input,
+			args: ["markdown"]
+		}],
 		onClick: [{
 			type: HostListener,
 			args: ["click", ["$event"]]
@@ -9576,6 +8369,45 @@ function isMeaningful(x) {
 	if (typeof x === "object") return Object.keys(x).length > 0;
 	return !!x;
 }
+function getCandidate(element) {
+	return Array.from(element.querySelectorAll("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex]:not([tabindex=\"-1\"]), [contenteditable]"));
+}
+function isVisible(element) {
+	let el = element;
+	while (el) {
+		const style = window.getComputedStyle(el);
+		if (style.display === "none" || style.visibility === "hidden") return false;
+		el = el.parentElement;
+	}
+	return true;
+}
+function isFocusable(element) {
+	const style = window.getComputedStyle(element);
+	const hasTabIndex = element.tabIndex >= 0;
+	const isContentEditable = element.hasAttribute("contenteditable") && element.getAttribute("contenteditable") !== "false";
+	if (element.contentEditable === "true") return true;
+	return (hasTabIndex || isContentEditable) && style.visibility !== "hidden" && style.display !== "none" && !element.hasAttribute("disabled") && isVisible(element);
+}
+function getFocusables(el, firstOnly = false) {
+	const candidates = getCandidate(el);
+	const result = [];
+	for (const focusableEl of candidates) if (isFocusable(focusableEl)) {
+		result.push(focusableEl);
+		if (firstOnly) break;
+	}
+	return result;
+}
+function setFocus(el, preventScroll = false) {
+	const focusables = getFocusables(el, true);
+	if (focusables.length === 0) return null;
+	const target = focusables[0];
+	target.focus({ preventScroll });
+	return target;
+}
+function hasFieldFocus(container) {
+	const active = container.ownerDocument.activeElement;
+	return !!active && active !== container && container.contains(active) && active.matches("input, select, textarea, [contenteditable]:not([contenteditable=\"false\"])");
+}
 function flattenTree(nodes, options) {
 	if (nodes == null) return [];
 	if (!Array.isArray(nodes)) {
@@ -9675,9 +8507,11 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ providedIn: "root" }]
 	}]
 });
+const CONTROL_PARSE_ERROR_KEYS = ["sirioDateTime"];
 const formPlayerValidationPresenter = (control) => {
 	const errors = control.errors;
 	if (!errors) return null;
+	if (CONTROL_PARSE_ERROR_KEYS.some((key) => key in errors)) return null;
 	if (errors["silent"]) return { state: "none" };
 	const message = typeof errors["message"] === "string" ? errors["message"] : null;
 	if (errors["warning"]) return {
@@ -9689,26 +8523,108 @@ const formPlayerValidationPresenter = (control) => {
 		message
 	} : null;
 };
+const ALLOWED_TAGS = [
+	"address",
+	"article",
+	"aside",
+	"footer",
+	"header",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"hgroup",
+	"main",
+	"nav",
+	"section",
+	"blockquote",
+	"dd",
+	"div",
+	"dl",
+	"dt",
+	"figcaption",
+	"figure",
+	"hr",
+	"li",
+	"menu",
+	"ol",
+	"p",
+	"pre",
+	"ul",
+	"a",
+	"abbr",
+	"b",
+	"bdi",
+	"bdo",
+	"br",
+	"cite",
+	"code",
+	"data",
+	"dfn",
+	"em",
+	"i",
+	"kbd",
+	"mark",
+	"q",
+	"rb",
+	"rp",
+	"rt",
+	"rtc",
+	"ruby",
+	"s",
+	"samp",
+	"small",
+	"span",
+	"strong",
+	"sub",
+	"sup",
+	"time",
+	"u",
+	"var",
+	"wbr",
+	"caption",
+	"col",
+	"colgroup",
+	"table",
+	"tbody",
+	"td",
+	"tfoot",
+	"th",
+	"thead",
+	"tr",
+	"img"
+];
+const ALLOWED_ATTR = [
+	"href",
+	"name",
+	"target",
+	"src",
+	"srcset",
+	"alt",
+	"title",
+	"width",
+	"height",
+	"loading",
+	"style",
+	"align",
+	"class",
+	"id",
+	"data-action"
+];
+const ALLOWED_URI_REGEXP = /^(?:(?:https?|ftp|mailto|tel):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i;
 var SanitizeService = class SanitizeService {
 	sanitizer;
 	constructor(sanitizer) {
 		this.sanitizer = sanitizer;
-		this.sanitizeOption = {
-			allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
-			allowedAttributes: {
-				...sanitizeHtml.defaults.allowedAttributes,
-				"*": [
-					"style",
-					"align",
-					"class",
-					"id",
-					"data-action"
-				]
-			}
-		};
+		this.purify = DOMPurify(window);
+		this.purify.addHook("uponSanitizeAttribute", (_node, data) => {
+			if (data.attrName === "src" && /^\s*data:/i.test(data.attrValue)) data.keepAttr = false;
+		});
 	}
 	sanitizeHtml(html) {
-		return sanitizeHtml(html, this.sanitizeOption);
+		return this.purify.sanitize(html ?? "", this.sanitizeOption);
 	}
 	sanitizeSafeHtml(html) {
 		return this.sanitizer.bypassSecurityTrustHtml(this.sanitizeHtml(html));
@@ -9719,7 +8635,13 @@ var SanitizeService = class SanitizeService {
 	toString(safeHtml) {
 		return this.sanitizer.sanitize(1, safeHtml) || "";
 	}
-	sanitizeOption;
+	purify;
+	sanitizeOption = {
+		ALLOWED_TAGS,
+		ALLOWED_ATTR,
+		ALLOW_DATA_ATTR: false,
+		ALLOWED_URI_REGEXP
+	};
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.2",
@@ -9748,14 +8670,8 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [{ type: i1$1.DomSanitizer }]
 });
 var MimeService = class MimeService {
-	constructor() {}
-	getMimeTypes(extensions) {
-		return (extensions ?? "").split(",").map((ext) => this.getMimeType(ext.trim())).filter((mime) => mime !== null).join(", ");
-	}
-	getMimeType(extension) {
-		const ext = extension.startsWith(".") ? extension.slice(1) : extension;
-		for (const [mimeType, info] of Object.entries(mimeDb)) if (info.extensions && info.extensions.includes(ext)) return mimeType;
-		return null;
+	getAccept(accept) {
+		return (accept ?? "").split(",").map((token) => token.trim()).filter((token) => token.length > 0).map((token) => token.startsWith(".") || token.includes("/") ? token : `.${token}`).join(",");
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -9781,8 +8697,7 @@ i0.ɵɵngDeclareClassMetadata({
 	decorators: [{
 		type: Injectable,
 		args: [{ providedIn: "root" }]
-	}],
-	ctorParameters: () => []
+	}]
 });
 var AutoFocusService = class AutoFocusService {
 	map = /* @__PURE__ */ new WeakMap();
@@ -9842,7 +8757,6 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 	languageService;
 	global;
 	formService;
-	grid;
 	sirioGrid;
 	chart;
 	dialog;
@@ -9858,12 +8772,10 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 	identity;
 	identityIndex;
 	disableAutoFocus;
-	static useDataGrid = true;
-	useDataGrid = DynamicFieldsComponent.useDataGrid;
 	Texts = Texts;
 	toastService = inject(ToastService);
 	announcer = inject(AnnouncerService);
-	constructor(cdr, destroyRef, sanitizer, markdown, mime, programmability, validation, weak, register, metadata, languageService, global, formService, grid, sirioGrid, chart, dialog, autoFocus, formBuilder, el) {
+	constructor(cdr, destroyRef, sanitizer, markdown, mime, programmability, validation, weak, register, metadata, languageService, global, formService, sirioGrid, chart, dialog, autoFocus, formBuilder, el) {
 		this.cdr = cdr;
 		this.destroyRef = destroyRef;
 		this.sanitizer = sanitizer;
@@ -9877,7 +8789,6 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 		this.languageService = languageService;
 		this.global = global;
 		this.formService = formService;
-		this.grid = grid;
 		this.sirioGrid = sirioGrid;
 		this.chart = chart;
 		this.dialog = dialog;
@@ -9927,13 +8838,15 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 	evaluateNumber(value) {
 		return this.programmability.evaluateNumber(this.formGroup, value);
 	}
+	isFieldRequired(component) {
+		if (this.suppressRequiredIndicator) return false;
+		const readOnly = this.readOnly || this.evaluateBoolean(component?.readonly);
+		return !!component?.validate?.required && !readOnly;
+	}
 	evaluateLabel(value, component) {
 		const label = this.asString(this.programmability.evaluateString(this.formGroup, value));
-		const required = component?.validate?.required;
-		const readOnly = this.readOnly || this.evaluateBoolean(component.readonly);
-		if (this.suppressRequiredIndicator) return label;
-		const trimmed = label?.trim();
-		return required && !readOnly && !!trimmed && !trimmed.endsWith("*") ? `${label}*` : label;
+		if (!label || !this.isFieldRequired(component)) return label;
+		return label.replace(/\s*\*\s*$/, "");
 	}
 	evaluateUrl(value) {
 		const url = this.programmability.evaluateString(this.formGroup, value);
@@ -10066,8 +8979,8 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 	sanitize(html) {
 		return this.sanitizer.sanitizeSafeHtml(html);
 	}
-	getMimeTypes(extensions) {
-		return this.mime.getMimeTypes(extensions);
+	getAccept(accept) {
+		return this.mime.getAccept(accept);
 	}
 	clickButton(component, event) {
 		if (component.click) this.evaluate(component.click, false);
@@ -10153,15 +9066,6 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 		const expression = this.chart.getDataExpression(component);
 		return this.programmability.evaluate(this.formGroup, expression);
 	}
-	getGridOptions(component) {
-		return this.weak.call(component, this.grid.getCacheKey(), () => this.grid.getOptions(component, this.formGroup));
-	}
-	getGridModules(component) {
-		return this.weak.call(component, "getGridModules", () => this.grid.getModules());
-	}
-	onGridSelectionChanged(component, event) {
-		this.grid.onSelectionChanged(component, this.formGroup, event);
-	}
 	getSirioGrid(component) {
 		const columns = component.columns || this.evaluateWithHydratation(component.columnsExpression) || [];
 		return this.weak.call(component, this.sirioGrid.getCacheKey(), () => this.sirioGrid.getConfig(component, columns, this.formGroup), (config) => config.source === columns);
@@ -10496,10 +9400,9 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			{ token: WeakService },
 			{ token: RegisterService },
 			{ token: MetadataService },
-			{ token: i1$4.LanguageService },
+			{ token: i1$3.LanguageService },
 			{ token: GlobalService },
 			{ token: FormService },
-			{ token: GridService },
 			{ token: SirioGridService },
 			{ token: ChartService },
 			{ token: DialogService },
@@ -10529,16 +9432,15 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 		providers: [
 			RegisterService,
 			ProgrammabilityService,
-			GridService,
 			SirioGridService,
 			ChartService,
 			provideSirioValidationPresenter(formPlayerValidationPresenter)
 		],
 		usesOnChanges: true,
 		ngImport: i0,
-		template: "<div [ngClass]=\"getFormClass()\">\r\n  <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n    <div class=\"row field-set\">\r\n      <ng-container *ngFor=\"let component of row.components\">\r\n        <ng-container [ngSwitch]=\"component.type\">\r\n          <div [ngClass]=\"getComponentClass(component)\"\r\n               [style]=\"getComponentStyle(component)\"\r\n               [ngAttrs]=\"getComponentAttrs(component)\"\r\n               *ngIf=\"shouldRender(component)\">\r\n            <div *ngIf=\"canShow(component)\">\r\n              <!-- #region textfield -->\r\n              <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-textbox type=\"text\"\r\n                               [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                               [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                               [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                               [placeholder]=\"locale(component, 'placeholder')\"\r\n                               [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                               [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n                               [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n                               [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                               [formControlName]=\"component.key\"\r\n                               [textCase]=\"toTextCase(component.textCase)\"\r\n                               [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                               [textAlign]=\"component.textAlign || null\"\r\n                               [requiredOnInput]=\"component.validate?.required\"\r\n                               [requiredOnBlur]=\"component.validate?.required\"\r\n                               [valueSync]=\"component.valueSync\"\r\n                               #textfield\r\n                               [register]=\"component\"\r\n                               [componentRef]=\"textfield\">\r\n                </wm-sirio-textbox>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region select -->\r\n              <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n                @let selectValues = getSirioValues(component);\r\n                @let selectOptions = selectValues.values$ | async;\r\n                <!-- @wemake4u/form-controls: strict = the value must be one of the options (was the dropdown directive);\r\n                     searchable shows the selection in the search field (was prefillSearch).\r\n                     Errors/warnings come from the validation presenter. -->\r\n                <wm-sirio-select\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(selectOptions)\"\r\n                              [loading]=\"selectValues.state.loading\"\r\n                              [loadingText]=\"locale(Texts, 'Loading')\"\r\n                              [searchable]=\"component.searchable\"\r\n                              [strict]=\"true\"\r\n                              (optionSelected)=\"selectionChanged(component, $event)\"\r\n                              [refresh]=\"refreshValues(component)\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #select\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"select\">\r\n                </wm-sirio-select>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region taglist -->\r\n              <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n                @let taglistValues = getSirioValues(component);\r\n                @let taglistOptions = taglistValues.values$ | async;\r\n                <!-- @wemake4u/form-controls: multiple select with \"select all\" and the \"n selected\" summary\r\n                     (was the tag directive). Errors/warnings come from the validation presenter. -->\r\n                <wm-sirio-select\r\n                              multiple\r\n                              selectAll\r\n                              [selectAllLabel]=\"locale(Texts, 'SelectAll')\"\r\n                              [maxVisibleSelections]=\"component.maxVisibleTags\"\r\n                              [selectionSummary]=\"sirioSelectionSummary\"\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(taglistOptions)\"\r\n                              [loading]=\"taglistValues.state.loading\"\r\n                              [loadingText]=\"locale(Texts, 'Loading')\"\r\n                              [searchable]=\"component.searchable\"\r\n                              [refresh]=\"refreshValues(component)\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #taglist\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"taglist\">\r\n                </wm-sirio-select>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region number -->\r\n              <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-number\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n                              [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [textAlign]=\"component.textAlign || null\"\r\n                              [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n                              [min]=\"evaluateNumber(component.minimum)\"\r\n                              [max]=\"evaluateNumber(component.maximum)\"\r\n                              [decimals]=\"evaluateNumber(component.decimalDigits)\"\r\n                              [requiredOnInput]=\"component.validate?.required\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              #number\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"number\">\r\n                </wm-sirio-number>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region datetime -->\r\n              <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: date 'yyyy-MM-dd', time 'HH:mm', date and time 'yyyy-MM-ddTHH:mm:ss'.\r\n                     min/max only limit the pickers (typed values outside are moved to the nearest limit).\r\n                     Errors/warnings come from the validation presenter. -->\r\n                <ng-container [ngSwitch]=\"component.subtype\">\r\n                  <!-- #region date -->\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    <wm-sirio-date\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [pickLevel]=\"component.pick || 'date'\"\r\n                                [min]=\"evaluateString(component.range?.min) || null\"\r\n                                [max]=\"evaluateString(component.range?.max) || null\"\r\n                                [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                #date\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"date\">\r\n                    </wm-sirio-date>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region time -->\r\n                  <ng-container *ngSwitchCase=\"'time'\">\r\n                    <wm-sirio-time\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'timeLabel'), component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [minuteStep]=\"component.timeInterval || 1\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                #time\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"time\">\r\n                    </wm-sirio-time>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region datetime -->\r\n                  <ng-container *ngSwitchCase=\"'datetime'\">\r\n                    <!-- fieldLabels: dateLabel above the date, timeLabel above the time (as before);\r\n                         completeParts: date only -> 00:00, time only -> today (was the dateTimeCoordinator). -->\r\n                    <wm-sirio-datetime\r\n                                    valueType=\"iso-seconds\"\r\n                                    fieldLabels\r\n                                    completeParts\r\n                                    [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n                                    [timeLabel]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                    [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                    [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                    [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                    [formControlName]=\"component.key\"\r\n                                    [textAlign]=\"component.textAlign || null\"\r\n                                    [min]=\"evaluateString(component.range?.min) || null\"\r\n                                    [max]=\"evaluateString(component.range?.max) || null\"\r\n                                    [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n                                    [minuteStep]=\"component.timeInterval || 1\"\r\n                                    [valueSync]=\"component.valueSync\"\r\n                                    [requiredOnBlur]=\"component.validate?.required\"\r\n                                    #datetime\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"datetime\">\r\n                    </wm-sirio-datetime>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region checkbox -->\r\n              <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: checkbox and toggle (subtype 'toggle'); the markdown label is projected\r\n                       inside the kit <label> as inline HTML. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-checkbox\r\n                                  [toggle]=\"component.subtype === 'toggle'\"\r\n                                  [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                  [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  [requiredOnBlur]=\"component.validate?.required\"\r\n                                  #checkbox\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"checkbox\"><span [innerHTML]=\"toInlineHTML(evaluateTemplate(locale(component, 'label')))\"></span></wm-sirio-checkbox>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region radio -->\r\n              <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: radio buttons and chips (subtype 'chip'); markdown option labels are\r\n                       rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-radio-group\r\n                                     [chips]=\"component.subtype === 'chip'\"\r\n                                     [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                     [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                     [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                     [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                     [formControlName]=\"component.key\"\r\n                                     [options]=\"sirioOptions(getValues(component) | async)\"\r\n                                     [inline]=\"component.displayInline\"\r\n                                     [refresh]=\"refreshValues(component)\"\r\n                                     [valueSync]=\"component.valueSync\"\r\n                                     [requiredOnBlur]=\"component.validate?.required\"\r\n                                     #radio\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"radio\">\r\n                    <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n                  </wm-sirio-radio-group>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region checklist -->\r\n              <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: checkbox list and chips (subtype 'chip'); markdown option labels are\r\n                       rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-checklist\r\n                                   [chips]=\"component.subtype === 'chip'\"\r\n                                   [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                   [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                   [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                   [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                   [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                   [formControlName]=\"component.key\"\r\n                                   [options]=\"sirioOptions(getValues(component) | async)\"\r\n                                   [inline]=\"component.displayInline\"\r\n                                   [refresh]=\"refreshValues(component)\"\r\n                                   [valueSync]=\"component.valueSync\"\r\n                                   [requiredOnBlur]=\"component.validate?.required\"\r\n                                   #checklist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"checklist\">\r\n                    <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n                  </wm-sirio-checklist>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region textarea -->\r\n              <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-textarea\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textCase]=\"toTextCase(component.textCase)\"\r\n                                [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [requiredOnInput]=\"component.validate?.required\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                #textarea\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"textarea\">\r\n                </wm-sirio-textarea>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region filepicker -->\r\n              <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers);\r\n                       upload, delete and download of the stored files are handled by the control. -->\r\n                  <wm-sirio-file-upload class=\"w-100\"\r\n                                     [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                     [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                     [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                     [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                     [buttonLabel]=\"evaluateString(locale(component, 'text')) || locale(Texts, 'Upload')\"\r\n                                     [accept]=\"getMimeTypes(component.accept)\"\r\n                                     [multiple]=\"evaluateBoolean(component.multiple)\"\r\n                                     valueType=\"array\"\r\n                                     details\r\n                                     downloadable\r\n                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                     [instantUpload]=\"evaluateBoolean(component.instantUpload)\"\r\n                                     [uploadHandler]=\"evaluate(component.uploadHandler)\"\r\n                                     [deleteHandler]=\"evaluate(component.deleteHandler)\"\r\n                                     [downloadHandler]=\"evaluate(component.downloadHandler)\"\r\n                                     [removeLabel]=\"locale(Texts, 'Remove')\"\r\n                                     [downloadLabel]=\"locale(Texts, 'Download')\"\r\n                                     [uploadingLabel]=\"locale(Texts, 'Uploading')\"\r\n                                     [deletingLabel]=\"locale(Texts, 'Deleting')\"\r\n                                     [downloadingLabel]=\"locale(Texts, 'Downloading')\"\r\n                                     [formControlName]=\"component.key\"\r\n                                     [requiredOnBlur]=\"component.validate?.required\"\r\n                                     [valueSync]=\"component.valueSync\"\r\n                                     (filesAdded)=\"filesAdded($event, filepicker)\"\r\n                                     (fileError)=\"fileError($event)\"\r\n                                     #filepicker\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"filepicker\">\r\n                  </wm-sirio-file-upload>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region range -->\r\n              <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-slider\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n                              [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #range\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"range\">\r\n                </wm-sirio-slider>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region displayfield -->\r\n              <ng-container *ngSwitchCase=\"'displayfield'\">\r\n                <div class=\"display-field\"\r\n                     #displayfield\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"displayfield\">\r\n                  <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n                    {{ evaluateString(locale(component, 'label')) }}\r\n                    <!-- @wemake4u/form-controls: kit info button with popover, as next to the labels of the controls. -->\r\n                    <wm-sirio-info-button *ngIf=\"component.tooltip\"\r\n                                       [content]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                       [title]=\"evaluateString(locale(component, 'label'))\"\r\n                                       [label]=\"locale(Texts, 'InformationAbout') + ' ' + evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"></wm-sirio-info-button>\r\n                  </div>\r\n                  <div [class.sirio-form-control]=\"component.fieldtype !== 'filelist'\"\r\n                       [style.text-align]=\"component.fieldtype !== 'filelist' ? (component.textAlign || null) : null\"\r\n                       class=\"data-display\" [ngClass]=\"component.fieldtype\">\r\n                    <ng-container [ngSwitch]=\"component.fieldtype\">\r\n                      <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                        <ng-container *ngTemplateOutlet=\"checkboxTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchCase=\"'text'\">\r\n                        <ng-container *ngTemplateOutlet=\"formattedTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchCase=\"'filelist'\">\r\n                        <ng-container *ngTemplateOutlet=\"filelistTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchDefault>\r\n                        <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #checkboxTemplate>\r\n                      <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n                    </ng-template>\r\n                    <ng-template #defaultTemplate>\r\n                      <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n                        <ng-container *ngIf=\"getValues(component) | async as values\">\r\n                          {{ toLabel(evaluate(component.expression), values) }}\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                    <ng-template #simpleTemplate>\r\n                      {{ evaluate(component.expression) }}\r\n                    </ng-template>\r\n                    <ng-template #formattedTemplate>\r\n                      <div class=\"text-paragraph\" style=\"margin-top: -6px;\"\r\n                           [innerHTML]=\"toHTML(evaluateTemplate(component.expression))\">\r\n                      </div>\r\n                    </ng-template>\r\n                    <ng-template #filelistTemplate>\r\n                      <ng-container *ngIf=\"{ files: evaluate(component.expression) } as expr\"\r\n                                    fileHandler\r\n                                    #fileHandlerRef=\"fileHandler\"\r\n                                    [downloadHandler]=\"evaluate(component.downloadHandler)\">\r\n                        <ng-container *ngIf=\"expr.files?.length > 0\">\r\n                          <div *ngFor=\"let file of expr.files\" class=\"row w-100 p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n                            <div class=\"col-auto ms-auto\">\r\n                              <span [ngClass]=\"fileHandlerRef.getIcon(file)\" class=\"fas fa-24 mt-1 me-3 ms-1\" aria-hidden=\"true\"></span>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                              <p class=\"mb-0\"><span class=\"h6 sirio-text-link sirio-font-weight-700\">{{ file.name }}</span></p>\r\n                              {{ fileHandlerRef.getExtension(file) }}, {{ fileHandlerRef.getSize(file) }}\r\n                            </div>\r\n                            <div class=\"col-auto ms-auto d-lg-flex flex-column align-items-end\">\r\n                              <ng-container *ngIf=\"fileHandlerRef.canDownload(file)\">\r\n                                <div *ngIf=\"fileHandlerRef.isDownloading(file)\" class=\"mt-2\">\r\n                                  <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Downloading') }}</span>\r\n                                  <span class=\"fas fa-arrows-rotate fa-spin ms-2\" aria-hidden=\"true\"></span>\r\n                                </div>\r\n                                <!-- Buttons, not links: announced as buttons, activated also with Space. -->\r\n                                <button *ngIf=\"fileHandlerRef.isLocal(file)\"\r\n                                   type=\"button\"\r\n                                   class=\"sirio-text-link fp-link-button\"\r\n                                   (click)=\"fileHandlerRef.downloadLocal(file)\"\r\n                                   [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n                                   [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n                                  <span class=\"d-none d-sm-inline-block\">\r\n                                    {{ locale(Texts, 'Download') }}\r\n                                  </span>\r\n                                  <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n                                </button>\r\n                                <button *ngIf=\"fileHandlerRef.isHandled(file)\"\r\n                                   type=\"button\"\r\n                                   class=\"sirio-text-link fp-link-button\"\r\n                                   (click)=\"fileHandlerRef.downloadHandled(file)\"\r\n                                   [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n                                   [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n                                  <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Download') }}</span>\r\n                                  <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n                                </button>\r\n                              </ng-container>\r\n                            </div>\r\n                          </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!(expr.files?.length > 0)\">\r\n                          <div class=\"row p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n                            <div class=\"col\">\r\n                              <p class=\"mb-0\">\r\n                                <span class=\"h6 sirio-text-link sirio-font-weight-700\">Nessun file presente</span>\r\n                              </p>\r\n                            </div>\r\n                          </div>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                  </div>\r\n                  <p *ngIf=\"component.description\" class=\"sirio-form-text-help\">\r\n                    {{ evaluateString(locale(component, 'description')) }}\r\n                  </p>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region dynamiclist -->\r\n              <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n                <ng-container *ngIf=\"resolvePath(component.path) as formGroup\">\r\n                  <ng-container [formGroup]=\"formGroup\">\r\n                    <!-- data-fp-repeater: root of the repeater, where the focus goes after add / remove / move. -->\r\n                    <div [formArrayName]=\"component.key\"\r\n                                  data-fp-repeater\r\n                                  [formGroup]=\"formGroup\"\r\n                                  [recursion]=\"component\"\r\n                                  #recursion=\"recursion\">\r\n                      <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n                      <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n                        <ng-template navigatorState\r\n                                     [total]=\"formArray.controls.length\"\r\n                                     #state=\"navigatorState\"></ng-template>\r\n                        <ng-container *ngIf=\"component.subtype == 'navigation'\">\r\n                          <ng-container *ngTemplateOutlet=\"navigation; context: { formArray: formArray, state: state }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n                          <ng-container [ngSwitch]=\"component.subtype\">\r\n                            <!-- #region tab -->\r\n                            <ng-container *ngSwitchCase=\"'tab'\">\r\n                              <!-- @wemake4u/form-controls: activateAdded selects the added tab (after a removal the library selects the one\r\n                                   taking its place); focusContent moves the focus to the first field of the panel. -->\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"tabInstance\">\r\n                                <wm-sirio-tabs [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                            [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                            [focusablePanels]=\"false\"\r\n                                            activateAdded\r\n                                            focusContent\r\n                                            #tabInstance>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                      <wm-sirio-tab [label]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n                                                 [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n                                        <ng-template wmSirioTabContent>\r\n                                          <div>\r\n                                            <div>\r\n                                              <app-dynamic-fields [form]=\"form\"\r\n                                                                  [formGroup]=\"getFormGroup(item)\"\r\n                                                                  [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                  [rows]=\"component.rows\"\r\n                                                                  [identity]=\"component.id\"\r\n                                                                  [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                  [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                            </div>\r\n                                            <div style=\"text-align:right\">\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                            </div>\r\n                                          </div>\r\n                                        </ng-template>\r\n                                      </wm-sirio-tab>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </wm-sirio-tabs>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region accordion -->\r\n                            <ng-container *ngSwitchCase=\"'accordion'\">\r\n                              <!-- @wemake4u/form-controls: activateAdded opens the first section at the start and the added one (after a removal\r\n                                   the library opens the one taking its place); focusContent moves the focus to its first field. -->\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclistaccordion\">\r\n                                <wm-sirio-accordion exclusive\r\n                                                 activateAdded\r\n                                                 focusContent\r\n                                                 #dynamiclistaccordion>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                      <wm-sirio-accordion-item [title]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n                                                            [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n                                        <ng-template wmSirioAccordionContent>\r\n                                          <div>\r\n                                            <div>\r\n                                              <app-dynamic-fields [form]=\"form\"\r\n                                                                  [formGroup]=\"getFormGroup(item)\"\r\n                                                                  [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                  [rows]=\"component.rows\"\r\n                                                                  [identity]=\"component.id\"\r\n                                                                  [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                  [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                            </div>\r\n                                            <div style=\"text-align:right\">\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                            </div>\r\n                                          </div>\r\n                                        </ng-template>\r\n                                      </wm-sirio-accordion-item>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </wm-sirio-accordion>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region table -->\r\n                            <ng-container *ngSwitchCase=\"'table'\">\r\n                              <div #dynamiclist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclist\">\r\n                                <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n                                      <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n                                        <tr>\r\n                                          <td class=\"content-cell\">\r\n                                            <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n                                              <div>\r\n                                                <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                                  <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                                  <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                                </div>\r\n                                                <div>\r\n                                                  <app-dynamic-fields [form]=\"form\"\r\n                                                                      [formGroup]=\"formItem\"\r\n                                                                      [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                      [rows]=\"component.rows\"\r\n                                                                      [identity]=\"component.id\"\r\n                                                                      [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                      [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                                </div>\r\n                                              </div>\r\n                                            </div>\r\n                                          </td>\r\n                                          <td class=\"command-cell\">\r\n                                            <div>\r\n                                              <ng-container *ngIf=\"recursionData.itemsArray\">\r\n                                                <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n                                              </ng-container>\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i, compact: true }\"></ng-container>\r\n                                            </div>\r\n                                          </td>\r\n                                        </tr>\r\n                                        <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n                                          <td colspan=\"2\" class=\"recursion-cell\">\r\n                                            <div class=\"layout\">\r\n                                              <div class=\"recursion-toggle\">\r\n                                                <!-- @wemake4u/form-controls: open at the start (as before); label for screen readers. -->\r\n                                                <button type=\"button\" wmSirioButton=\"ghost\"\r\n                                                        [wmSirioCollapseToggle]=\"collapse\"\r\n                                                        iconOnly\r\n                                                        [icon]=\"collapse.expanded() ? 'fa-chevron-down' : 'fa-chevron-right'\"\r\n                                                        [label]=\"recursionData.itemsArray.length + ' elementi presenti'\"></button>\r\n                                              </div>\r\n                                              <div *ngIf=\"!collapse.expanded()\" class=\"recursion-title\">\r\n                                                <div class=\"recursion-text\">\r\n                                                  {{ recursionData.itemsArray.length }} elementi presenti\r\n                                                </div>\r\n                                              </div>\r\n                                              <div class=\"recursion-content\">\r\n                                                <div wmSirioCollapse #collapse=\"wmSirioCollapse\" [expanded]=\"true\">\r\n                                                  <div *ngIf=\"collapse.expanded()\" style=\"margin-bottom: -11px;\">\r\n                                                    <app-dynamic-fields [form]=\"form\"\r\n                                                                        [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n                                                                        [readOnly]=\"readOnly\"\r\n                                                                        [recursionLevel]=\"recursionLevel+1\"\r\n                                                                        [rows]=\"recursion.getComponentRows()\"\r\n                                                                        [identity]=\"component.id\"\r\n                                                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                                  </div>\r\n                                                </div>\r\n                                              </div>\r\n                                            </div>\r\n                                          </td>\r\n                                        </tr>\r\n                                      </ng-container>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </table>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region navigation -->\r\n                            <ng-container *ngSwitchCase=\"'navigation'\">\r\n                              <div>\r\n                                <ng-container *ngIf=\"formArray.controls[state.index] as item\">\r\n                                  <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: state.index } as event\">\r\n                                        <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                        <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                      </div>\r\n                                      <div>\r\n                                        <app-dynamic-fields [form]=\"form\"\r\n                                                            [formGroup]=\"getFormGroup(item)\"\r\n                                                            [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                            [rows]=\"component.rows\"\r\n                                                            [identity]=\"component.id\"\r\n                                                            [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                            [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                      </div>\r\n                                    </div>\r\n                                  </div>\r\n                                </ng-container>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region default -->\r\n                            <ng-container *ngSwitchDefault>\r\n                              <div #dynamiclist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclist\"\r\n                                   selectionGroup\r\n                                   [selectionMode]=\"evaluateString(component.selection?.mode)\"\r\n                                   [selectableClass]=\"evaluateString(component.selection?.selectableClass)\"\r\n                                   [selectedClass]=\"evaluateString(component.selection?.selectedClass)\"\r\n                                   [onSelectionChanged]=\"callExpression(component.selection?.selectionChanged)\">\r\n                                <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                  <div [selectionItem]=\"item\"\r\n                                       [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                        <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                        <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                      </div>\r\n                                      <div>\r\n                                        <app-dynamic-fields [form]=\"form\"\r\n                                                            [formGroup]=\"getFormGroup(item)\"\r\n                                                            [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                            [rows]=\"component.rows\"\r\n                                                            [identity]=\"component.id\"\r\n                                                            [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                            [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                      </div>\r\n                                      <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n                                        <div style=\"text-align:right\">\r\n                                          <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n                                          <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                        </div>\r\n                                      </ng-container>\r\n                                    </div>\r\n                                  </div>\r\n                                </ng-container>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                          </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n                          <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n                        </ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"feedback\"></ng-container>\r\n                        <ng-container *ngIf=\"recursionLevel == 0 && component.subtype !== 'navigation'\">\r\n                          <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <!-- #region templates -->\r\n                <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n                    <!-- Name with the position (\"Sposta Sù elemento 3 di 5\"): the visible text first, the rest for screen readers. -->\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"moveUpItem(formArray, i, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"up\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-arrow-up\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"upLabel + ' ' + itemPosition(i, formArray.length)\">{{ upLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"moveDownItem(formArray, i, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"down\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-arrow-down\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"downLabel + ' ' + itemPosition(i, formArray.length)\">{{ downLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"removeItem(formArray, i, true, state, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"remove\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-trash\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"removeLabel + ' ' + itemPosition(i, formArray.length)\">{{ removeLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"addItem(formArray, state)\"\r\n                            data-fp-action=\"add\"\r\n                            class=\"add-item\"\r\n                            icon=\"fa-plus\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"addLabel\">{{ addLabel }}</button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowReorder\">\r\n                    <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { item: formArray.at(i)?.value, index: i, total: state.total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, state: state, i: i, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: state.total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, state: state, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #feedback>\r\n                  <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                    <div>\r\n                      <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                    <div>\r\n                      <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #navigation let-formArray=\"formArray\" let-state=\"state\">\r\n                  <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n                  <wm-sirio-pagination [showItems]=\"false\"\r\n                                    [pageSize]=\"1\"\r\n                                    [total]=\"state.total\"\r\n                                    [page]=\"state.index + 1\"\r\n                                    (pageChange)=\"state.index = $event - 1\"\r\n                                    [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n                                    [ofLabel]=\"locale(Texts, 'Of')\"\r\n                                    [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n                                    [pageLabel]=\"locale(Texts, 'Element')\"\r\n                                    [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n                                    [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n                                    [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n                    <div class=\"actions\">\r\n                      <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n                      <ng-container *ngIf=\"state.total && state.index != -1\">\r\n                        <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: state.index }\"></ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </wm-sirio-pagination>\r\n                </ng-template>\r\n                <!-- #endregion -->\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region group -->\r\n              <ng-container *ngSwitchCase=\"'group'\">\r\n                <div *ngIf=\"resolveBoundGroup(component) as resolvedGroup\"\r\n                     [ngClass]=\"getGroupOutline(component)\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n                    <label>{{ labelText }}</label>\r\n                  </ng-container>\r\n                  <div #group\r\n                       [register]=\"component\"\r\n                       [componentRef]=\"group\">\r\n                    <app-dynamic-fields [form]=\"form\"\r\n                                        [formGroup]=\"resolvedGroup\"\r\n                                        [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [rows]=\"component.rows\"\r\n                                        [identity]=\"component.id\"\r\n                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tab -->\r\n              <ng-container *ngSwitchCase=\"'tab'\">\r\n                <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n                  <ng-container *ngIf=\"panels.length > 0\">\r\n                    <!-- @wemake4u/form-controls: focusContent moves the focus into the panel shown at the start or selected (not for the\r\n                         arrow keys), except for the panels with disableAutoFocus. -->\r\n                    <wm-sirio-tabs #tabInstance\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"tabInstance\"\r\n                                [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                [line]=\"!!component.navigation\"\r\n                                [vertical]=\"!!component.vertical\"\r\n                                [focusablePanels]=\"false\"\r\n                                focusContent>\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <wm-sirio-tab *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                   [label]=\"evaluateString(locale(panel, 'label'))\"\r\n                                   [icon]=\"evaluateString(panel.icon) || null\"\r\n                                   [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n                                   [badge]=\"evaluate(panel.badge)\"\r\n                                   [focusContent]=\"panel.disableAutoFocus !== true\">\r\n                          <ng-template wmSirioTabContent>\r\n                            <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                              <app-dynamic-fields [form]=\"form\"\r\n                                                  [formGroup]=\"resolvePath(panel.path)\"\r\n                                                  [rows]=\"template.rows\"\r\n                                                  [identity]=\"component.id\"\r\n                                                  [identityIndex]=\"i\"\r\n                                                  [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n                                                  [disableAutoFocus]=\"template.disableAutoFocus\"\r\n                                                  [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n                            </ng-container>\r\n                          </ng-template>\r\n                        </wm-sirio-tab>\r\n                      </ng-container>\r\n                    </wm-sirio-tabs>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region accordion -->\r\n              <ng-container *ngSwitchCase=\"'accordion'\">\r\n                <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n                  <ng-container *ngIf=\"panels.length > 0\">\r\n                    <!-- exclusive: one section open at a time, as with ngx-sirio-lib. -->\r\n                    <wm-sirio-accordion exclusive\r\n                                     #accordion\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"accordion\">\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <ng-container *ngIf=\"resolvePath(panel.path) as formGroup\">\r\n                          <!-- Content not lazy (as before): the fields of closed sections stay in the form. -->\r\n                          <wm-sirio-accordion-item *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                                [title]=\"evaluateString(locale(panel, 'label'))\"\r\n                                                [badge]=\"evaluate(panel.badge)\"\r\n                                                [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n                            <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                              <app-dynamic-fields [form]=\"form\"\r\n                                                  [formGroup]=\"formGroup\"\r\n                                                  [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n                                                  [rows]=\"template.rows\"\r\n                                                  [identity]=\"component.id\"\r\n                                                  [identityIndex]=\"i\"\r\n                                                  [disableAutoFocus]=\"template.disableAutoFocus\"\r\n                                                  [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n                            </ng-container>\r\n                          </wm-sirio-accordion-item>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </wm-sirio-accordion>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region text -->\r\n              <ng-container *ngSwitchCase=\"'text'\">\r\n                <div [collapse]=\"component.collapseTo\"\r\n                     [onCollapse]=\"callExpression(component.onCollapse)\"\r\n                     [onExpand]=\"callExpression(component.onExpand)\"\r\n                     #text\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"text\">\r\n                  <!--Reset View Context-->\r\n                  <div tabindex=\"0\" style=\"display:none\"></div>\r\n                  <div class=\"flex\">\r\n                    <div class=\"text-paragraph\" markdown\r\n                         [onAnchorClick]=\"callExpression(component.anchorClick)\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                    <ng-container *ngIf=\"component.tooltip\">\r\n                      <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n                                         [label]=\"locale(Texts, 'Information')\"></wm-sirio-info-button>\r\n                      <ng-template #tooltipTemplate>\r\n                        <div class=\"sirio-tooltip-body\">\r\n                          <div class=\"text-paragraph\"\r\n                               [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n                          </div>\r\n                        </div>\r\n                      </ng-template>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region html -->\r\n              <ng-container *ngSwitchCase=\"'html'\">\r\n                <div class=\"html-paragraph\"\r\n                     [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n                     #html\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"html\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region image -->\r\n              <ng-container *ngSwitchCase=\"'image'\">\r\n                <!-- || '': an alt expression giving null would be read aloud as \"null\". -->\r\n                <img [src]=\"evaluateString(component.source)\"\r\n                     [alt]=\"evaluateString(locale(component, 'alt')) || ''\"\r\n                     style=\"width: 100%;height: 100%;\"\r\n                     #image\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"image\">\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region table -->\r\n              <ng-container *ngSwitchCase=\"'table'\">\r\n                <label *ngIf=\"evaluateString(locale(component, 'label')) as tableLabel\">{{ tableLabel }}</label>\r\n                @if (useDataGrid) {\r\n                  <!-- Sirio data grid (DynamicFieldsComponent.useDataGrid): configuration from SirioGridService. -->\r\n                  @let grid = getSirioGrid(component);\r\n                  @let rows = getSirioRows(component, grid);\r\n                  <!-- Paginator with rowCount > 0, or when the server source pages its rows. -->\r\n                  @let pagedSize = grid.pageable ? null : rows.pagedSize();\r\n                  @let gridHeight = component.autoHeight ? null : evaluateSize(component.height);\r\n                  <wm-sirio-data-grid #table\r\n                                      class=\"fp-data-grid\"\r\n                                      variant=\"dark\"\r\n                                      size=\"sm\"\r\n                                      [filterButton]=\"component.floatingFilter === true ? 'always' : 'none'\"\r\n                                      [showFilterChips]=\"false\"\r\n                                      paginationVariant=\"compact\"\r\n                                      [caption]=\"evaluateString(locale(component, 'label'))\"\r\n                                      [data]=\"rows.data()\"\r\n                                      [dataSource]=\"rows.dataSource\"\r\n                                      [loading]=\"rows.loading()\"\r\n                                      [emptyText]=\"rows.failed() ? locale(Texts, 'LoadingFailed') : 'Nessun risultato'\"\r\n                                      [loadErrorText]=\"locale(Texts, 'LoadingFailed')\"\r\n                                      [rowId]=\"grid.rowId\"\r\n                                      [selection]=\"sirioSelection(component)\"\r\n                                      singleSelectionControl=\"checkbox\"\r\n                                      [selectionColumn]=\"grid.checkboxes\"\r\n                                      [selectOnRowClick]=\"grid.checkboxes && grid.clickSelect\"\r\n                                      selectAll=\"filtered\"\r\n                                      hideUnselectable\r\n                                      [rowSelectable]=\"grid.rowSelectable\"\r\n                                      [selected]=\"grid.selected()\"\r\n                                      (selectedChange)=\"onSirioSelectionChanged(component, grid, $event)\"\r\n                                      [rowClass]=\"grid.rowClass\"\r\n                                      [rowStyle]=\"grid.rowStyle\"\r\n                                      [pageable]=\"grid.pageable || pagedSize !== null\"\r\n                                      [pageSize]=\"pagedSize ?? grid.pageSize\"\r\n                                      [pageSizeOptions]=\"sirioPageSizes(pagedSize)\"\r\n                                      [rowNumbers]=\"grid.rowNumbers\"\r\n                                      rowNumberHeader=\"#\"\r\n                                      [resizable]=\"grid.resizable\"\r\n                                      [reorderable]=\"grid.reorderable\"\r\n                                      filterOperators\r\n                                      [filterRow]=\"component.floatingFilter === true\"\r\n                                      [filterYesLabel]=\"locale(Texts, 'True')\"\r\n                                      [filterNoLabel]=\"locale(Texts, 'False')\"\r\n                                      [height]=\"gridHeight\"\r\n                                      [stickyHeader]=\"!!gridHeight\"\r\n                                      [minHeight]=\"evaluateSize(component.minHeight)\"\r\n                                      [refresh]=\"refreshRowSource(component)\"\r\n                                      [register]=\"component\"\r\n                                      [componentRef]=\"table\">\r\n                    @for (col of grid.columns; track col.id) {\r\n                      <wm-sirio-grid-column [field]=\"col.field\"\r\n                                            [header]=\"col.header\"\r\n                                            [value]=\"col.value\"\r\n                                            [format]=\"col.format\"\r\n                                            [align]=\"col.align\"\r\n                                            [filter]=\"col.filter\"\r\n                                            [filterOptions]=\"col.filterOptions\"\r\n                                            [filterMultiple]=\"col.filterMultiple\"\r\n                                            [filterOperators]=\"col.filterOperators\"\r\n                                            [sortable]=\"col.sortable\"\r\n                                            [resizable]=\"col.resizable\"\r\n                                            [wrap]=\"col.wrap\"\r\n                                            [mono]=\"col.mono\"\r\n                                            [fit]=\"col.fit\"\r\n                                            [fixed]=\"col.fixed\"\r\n                                            [flex]=\"col.flex\"\r\n                                            [width]=\"col.width\"\r\n                                            [minWidth]=\"col.minWidth\"\r\n                                            [maxWidth]=\"col.maxWidth\"\r\n                                            [group]=\"col.group\"\r\n                                            [hidden]=\"col.actions && evaluateBoolean(component.suppressActions) === true\"\r\n                                            [cellClass]=\"col.cellClass\"\r\n                                            [cellStyle]=\"col.cellStyle\"\r\n                                            [headerClass]=\"col.headerClass\"\r\n                                            [headerStyle]=\"col.headerStyle\">\r\n                        @if (col.renderer; as renderer) {\r\n                          <ng-template wmSirioGridCell let-row let-value=\"value\" let-index=\"index\">\r\n                            @if (renderer.kind === 'html') {\r\n                              <span [innerHTML]=\"renderer.html(row, value)\"></span>\r\n                            } @else {\r\n                              <fp-sirio-cell-host [renderer]=\"renderer.type\" [params]=\"renderer.params(row, value, index)\" />\r\n                            }\r\n                          </ng-template>\r\n                        }\r\n                      </wm-sirio-grid-column>\r\n                    }\r\n                  </wm-sirio-data-grid>\r\n                } @else {\r\n                <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n                                 [gridOptions]=\"getGridOptions(component)\"\r\n                                 [selectable]=\"evaluateBoolean(component.selectable)\"\r\n                                 [multiSelect]=\"evaluateBoolean(component.multiSelect)\"\r\n                                 (selectionChanged)=\"onGridSelectionChanged(component, $event)\"\r\n                                 [suppressActions]=\"evaluateBoolean(component.suppressActions)\"\r\n                                 [columns]=\"component.columns || evaluateWithHydratation(component.columnsExpression) || []\"\r\n                                 [rowSource]=\"getRowSource(component)\"\r\n                                 [refresh]=\"refreshRowSource(component)\"\r\n                                 [style.height]=\"component.autoHeight ? null : evaluateSize(component.height)\"\r\n                                 [style.min-height]=\"evaluateSize(component.minHeight)\"\r\n                                 [formGroup]=\"formGroup\"\r\n                                 #table\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"table\" />\r\n                }\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region button -->\r\n              <ng-container *ngSwitchCase=\"'button'\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: color \"ghost\" = plain sirio-btn; icon on the left unless iconPosition \"right\". -->\r\n                  <button type=\"button\"\r\n                          [wmSirioButton]=\"evaluateVariant(component.color)\"\r\n                          [disabled]=\"evaluateBoolean(component.disabled) ?? false\"\r\n                          [icon]=\"evaluateString(component.icon) || null\"\r\n                          [iconPosition]=\"component.iconPosition == 'right' ? 'end' : 'start'\"\r\n                          (click)=\"clickButton(component, $event)\"\r\n                          #button\r\n                          [register]=\"component\"\r\n                          [componentRef]=\"button\">{{ evaluateString(locale(component, 'label')) }}</button>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region separator -->\r\n              <ng-container *ngSwitchCase=\"'separator'\">\r\n                <div class=\"separator\"\r\n                     #separator\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"separator\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region spacer -->\r\n              <ng-container *ngSwitchCase=\"'spacer'\">\r\n                <div style=\"width: 100%\"\r\n                     [style.height.px]=\"component.height\"\r\n                     #spacer\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"spacer\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region iframe -->\r\n              <ng-container *ngSwitchCase=\"'iframe'\">\r\n                <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <iframe [src]=\"evaluateUrl(component.url)\"\r\n                        [title]=\"evaluateString(locale(component, 'label'))\"\r\n                        [style.width]=\"'100%'\"\r\n                        [style.height.px]=\"component.height\"\r\n                        [frameSecurity]=\"component.security\"\r\n                        #iframe\r\n                        [register]=\"component\"\r\n                        [componentRef]=\"iframe\">\r\n                </iframe>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region alert -->\r\n              <ng-container *ngSwitchCase=\"'alert'\">\r\n                <!-- @wemake4u/form-controls: preventClose → no close button; markdown as block content. -->\r\n                <wm-sirio-alert [type]=\"component.role || 'info'\"\r\n                             [closeLabel]=\"locale(Texts, 'Close')\"\r\n                             [dismissible]=\"!evaluateBoolean(component.preventClose)\"\r\n                             #alert\r\n                             [register]=\"component\"\r\n                             [componentRef]=\"alert\">\r\n                  <div wmSirioAlertContent\r\n                       class=\"text-paragraph\"\r\n                       [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                  </div>\r\n                </wm-sirio-alert>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region notice -->\r\n              <ng-container *ngSwitchCase=\"'notice'\">\r\n                <!-- @wemake4u/form-controls: light notice (kit default); markdown as block content. -->\r\n                <wm-sirio-notify #notice\r\n                              [title]=\"evaluateString(locale(component, 'title'))\"\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"notice\">\r\n                  <div wmSirioNotifyContent\r\n                       class=\"text-paragraph\"\r\n                       [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                  </div>\r\n                </wm-sirio-notify>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tooltip -->\r\n              <ng-container *ngSwitchCase=\"'tooltip'\">\r\n                <!-- @wemake4u/form-controls: the title is the popover title of the kit. -->\r\n                <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n                                   [title]=\"evaluateString(locale(component, 'title'))\"\r\n                                   [label]=\"evaluateString(locale(component, 'title')) || locale(Texts, 'Information')\"\r\n                                   #tooltip\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"tooltip\"></wm-sirio-info-button>\r\n                <ng-template #tooltipTemplate>\r\n                  <div class=\"sirio-tooltip-body\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </div>\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region chart -->\r\n              <ng-container *ngSwitchCase=\"'chart'\">\r\n                <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <ng-container [observe]=\"getChartData(component)\"\r\n                     [callback]=\"invalidateChart(component)\">\r\n                  <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n                             [style.height.px]=\"component.height\"\r\n                             #chart\r\n                             [register]=\"component\"\r\n                             [componentRef]=\"chart\" />\r\n                </ng-container> \r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region component -->\r\n              <ng-container *ngSwitchCase=\"'component'\">\r\n                <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n                  <label>{{ labelText }}</label>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n                  <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n                                    [formGroup]=\"resolvePath(component.path)\"\r\n                                    #componentHost\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"componentHost\" />\r\n                  <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                    <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                  <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n                </ng-container>\r\n                <ng-template #noInputTemplate>\r\n                  <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n                                    #componentHost\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"componentHost\" />\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region templatehost -->\r\n              <ng-container *ngSwitchCase=\"'templatehost'\">\r\n                <ng-container *ngIf=\"getTemplate(component.template) as template\">\r\n                  <div #template\r\n                       [register]=\"component\"\r\n                       [componentRef]=\"template\">\r\n                    <app-dynamic-fields [form]=\"form\"\r\n                                        [formGroup]=\"resolvePath(component.path)\"\r\n                                        [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [rows]=\"template?.rows\"\r\n                                        [identity]=\"component.id\"\r\n                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region treelist -->\r\n              <ng-container *ngSwitchCase=\"'treelist'\">\r\n                <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <div class=\"treelist\"\r\n                     [style.height]=\"component.height ? evaluateSize(component.height): null\"\r\n                     *ngIf=\"getTreeColumns(component) as columns\">\r\n                  <ng-container *ngIf=\"((getTreeSource(component) | async) ?? []) as rows\">\r\n                    <table #treelist\r\n                           [register]=\"component\"\r\n                           [componentRef]=\"treelist\"\r\n                           [treelist]=\"rows\">\r\n                      <colgroup>\r\n                        <col *ngFor=\"let column of columns\"\r\n                             [style.width]=\"evaluateSize(column.width)\">\r\n                      </colgroup>\r\n                      <thead>\r\n                        <tr>\r\n                          <th scope=\"col\" *ngFor=\"let column of columns\"\r\n                              [ngClass]=\"getClass(column)\"\r\n                              [style.text-align]=\"column.align\">\r\n                            {{column.label}}\r\n                          </th>\r\n                        </tr>\r\n                      </thead>\r\n                      <tbody>\r\n                        <ng-container>\r\n                          <tr *ngFor=\"let row of rows\"\r\n                              [attr.data-id]=\"row.id\"\r\n                              [attr.data-parent]=\"row.parentId\"\r\n                              [attr.data-expanded]=\"row.expanded ? 'true': 'false'\"\r\n                              [ngClass]=\"row.meta?.['cssClass']\">\r\n                            <td *ngFor=\"let column of columns; let i = index\"\r\n                                [ngClass]=\"getClass(column)\">\r\n                              <div [style.justify-content]=\"getJustify(column.align)\">\r\n                                <span *ngIf=\"i==component.expanderColumn\"\r\n                                      [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\r\n                                      [style.padding-left]=\"evaluateSize(20 * row.level)\"\r\n                                      class=\"toggle\"></span>\r\n                                <span class=\"text\"\r\n                                      [title]=\"row.data[column.key]\">\r\n                                  {{ row.data[column.key] }}\r\n                                </span>\r\n                              </div>\r\n                            </td>\r\n                          </tr>\r\n                        </ng-container>\r\n                      </tbody>\r\n                    </table>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region navigator -->\r\n              <ng-container *ngSwitchCase=\"'navigator'\">\r\n                <div  #navigator\r\n                      [register]=\"component\"\r\n                      [componentRef]=\"navigator\">\r\n                  <div navigatorState\r\n                       [index]=\"evaluateNumber(component.index) ?? 0\"\r\n                       [total]=\"evaluateNumber(component.total) ?? 0\"\r\n                       (indexChange)=\"evaluateWithEventAsHandler(component.selectionChanged, { index: $event, count: state.total })\"\r\n                       #state=\"navigatorState\">\r\n                    <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n                    <wm-sirio-pagination [showItems]=\"false\"\r\n                                      [pageSize]=\"1\"\r\n                                      [total]=\"state.total\"\r\n                                      [page]=\"state.index + 1\"\r\n                                      (pageChange)=\"state.index = $event - 1\"\r\n                                      [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n                                      [ofLabel]=\"locale(Texts, 'Of')\"\r\n                                      [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n                                      [pageLabel]=\"locale(Texts, 'Element')\"\r\n                                      [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n                                      [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n                                      [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n                      <div class=\"actions\">\r\n                        <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { total: state.total }\"></ng-container>\r\n                        <ng-container *ngIf=\"state.total && state.index != -1\">\r\n                          <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { i: state.index, total: state.total }\"></ng-container>\r\n                        </ng-container>\r\n                      </div>\r\n                    </wm-sirio-pagination>\r\n                  </div>\r\n                </div>\r\n                <ng-template #buttonsAdd let-total=\"total\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnAdd; context: { total: total }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsRemove let-i=\"i\" let-total=\"total\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { index: i, total: total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnRemove; context: { i: i, total: total }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnAdd let-total=\"total\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            class=\"add-item\"\r\n                            (click)=\"evaluateWithEventAsHandler(component.addExpression, { total: total })\"\r\n                            icon=\"fa-plus\" iconPosition=\"start\">{{ addLabel }}</button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnRemove let-i=\"i\" let-total=\"total\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            class=\"remove-item\"\r\n                            (click)=\"evaluateWithEventAsHandler(component.removeExpression, { index: i, total: total })\"\r\n                            icon=\"fa-trash\" iconPosition=\"start\">{{ removeLabel }}<span class=\"sr-only\"> {{ itemPosition(i, total) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n",
+		template: "<div [ngClass]=\"getFormClass()\">\r\n  <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n    <div class=\"row field-set\">\r\n      <ng-container *ngFor=\"let component of row.components\">\r\n        <ng-container [ngSwitch]=\"component.type\">\r\n          <div [ngClass]=\"getComponentClass(component)\"\r\n               [style]=\"getComponentStyle(component)\"\r\n               [ngAttrs]=\"getComponentAttrs(component)\"\r\n               *ngIf=\"shouldRender(component)\">\r\n            <div *ngIf=\"canShow(component)\">\r\n              <!-- #region textfield -->\r\n              <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-textbox type=\"text\"\r\n                               [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                               [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                               [requiredIndicator]=\"isFieldRequired(component)\"\r\n                               [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                               [placeholder]=\"locale(component, 'placeholder')\"\r\n                               [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                               [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n                               [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n                               [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                               [formControlName]=\"component.key\"\r\n                               [textCase]=\"toTextCase(component.textCase)\"\r\n                               [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                               [textAlign]=\"component.textAlign || null\"\r\n                               [requiredOnInput]=\"component.validate?.required\"\r\n                               [requiredOnBlur]=\"component.validate?.required\"\r\n                               [valueSync]=\"component.valueSync\"\r\n                               #textfield\r\n                               [register]=\"component\"\r\n                               [componentRef]=\"textfield\">\r\n                </wm-sirio-textbox>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region select -->\r\n              <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n                @let selectValues = getSirioValues(component);\r\n                @let selectOptions = selectValues.values$ | async;\r\n                <!-- @wemake4u/form-controls: strict = the value must be one of the options (was the dropdown directive);\r\n                     searchable shows the selection in the search field (was prefillSearch).\r\n                     Errors/warnings come from the validation presenter. -->\r\n                <wm-sirio-select\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [requiredIndicator]=\"isFieldRequired(component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(selectOptions)\"\r\n                              [loading]=\"selectValues.state.loading\"\r\n                              [loadingText]=\"locale(Texts, 'Loading')\"\r\n                              [searchable]=\"component.searchable\"\r\n                              [strict]=\"true\"\r\n                              (optionSelected)=\"selectionChanged(component, $event)\"\r\n                              [refresh]=\"refreshValues(component)\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #select\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"select\">\r\n                </wm-sirio-select>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region taglist -->\r\n              <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n                @let taglistValues = getSirioValues(component);\r\n                @let taglistOptions = taglistValues.values$ | async;\r\n                <!-- @wemake4u/form-controls: multiple select with \"select all\" and the \"n selected\" summary\r\n                     (was the tag directive). Errors/warnings come from the validation presenter. -->\r\n                <wm-sirio-select\r\n                              multiple\r\n                              selectAll\r\n                              [selectAllLabel]=\"locale(Texts, 'SelectAll')\"\r\n                              [maxVisibleSelections]=\"component.maxVisibleTags\"\r\n                              [selectionSummary]=\"sirioSelectionSummary\"\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [requiredIndicator]=\"isFieldRequired(component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(taglistOptions)\"\r\n                              [loading]=\"taglistValues.state.loading\"\r\n                              [loadingText]=\"locale(Texts, 'Loading')\"\r\n                              [searchable]=\"component.searchable\"\r\n                              [refresh]=\"refreshValues(component)\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #taglist\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"taglist\">\r\n                </wm-sirio-select>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region number -->\r\n              <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-number\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [requiredIndicator]=\"isFieldRequired(component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n                              [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [textAlign]=\"component.textAlign || null\"\r\n                              [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n                              [min]=\"evaluateNumber(component.minimum)\"\r\n                              [max]=\"evaluateNumber(component.maximum)\"\r\n                              [decimals]=\"evaluateNumber(component.decimalDigits)\"\r\n                              [requiredOnInput]=\"component.validate?.required\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              #number\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"number\">\r\n                </wm-sirio-number>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region datetime -->\r\n              <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: date 'yyyy-MM-dd', time 'HH:mm', date and time 'yyyy-MM-ddTHH:mm:ss'.\r\n                     min/max only limit the pickers (typed values outside are moved to the nearest limit).\r\n                     Errors/warnings come from the validation presenter. -->\r\n                <ng-container [ngSwitch]=\"component.subtype\">\r\n                  <!-- #region date -->\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    <wm-sirio-date\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n                                [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [pickLevel]=\"component.pick || 'date'\"\r\n                                [min]=\"evaluateString(component.range?.min) || null\"\r\n                                [max]=\"evaluateString(component.range?.max) || null\"\r\n                                [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                #date\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"date\">\r\n                    </wm-sirio-date>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region time -->\r\n                  <ng-container *ngSwitchCase=\"'time'\">\r\n                    <wm-sirio-time\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'timeLabel'), component)\"\r\n                                [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [minuteStep]=\"component.timeInterval || 1\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                #time\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"time\">\r\n                    </wm-sirio-time>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region datetime -->\r\n                  <ng-container *ngSwitchCase=\"'datetime'\">\r\n                    <!-- fieldLabels: dateLabel above the date, timeLabel above the time (as before);\r\n                         completeParts: date only -> 00:00, time only -> today (was the dateTimeCoordinator). -->\r\n                    <wm-sirio-datetime\r\n                                    valueType=\"iso-seconds\"\r\n                                    fieldLabels\r\n                                    completeParts\r\n                                    [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n                                    [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                    [timeLabel]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                    [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                    [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                    [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                    [formControlName]=\"component.key\"\r\n                                    [textAlign]=\"component.textAlign || null\"\r\n                                    [min]=\"evaluateString(component.range?.min) || null\"\r\n                                    [max]=\"evaluateString(component.range?.max) || null\"\r\n                                    [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n                                    [minuteStep]=\"component.timeInterval || 1\"\r\n                                    [valueSync]=\"component.valueSync\"\r\n                                    [requiredOnBlur]=\"component.validate?.required\"\r\n                                    #datetime\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"datetime\">\r\n                    </wm-sirio-datetime>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region checkbox -->\r\n              <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: checkbox and toggle (subtype 'toggle'); the markdown label is projected\r\n                       inside the kit <label> as inline HTML. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-checkbox\r\n                                  [toggle]=\"component.subtype === 'toggle'\"\r\n                                  [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                  [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                  [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  [requiredOnBlur]=\"component.validate?.required\"\r\n                                  #checkbox\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"checkbox\"><span [innerHTML]=\"toInlineHTML(evaluateTemplate(locale(component, 'label')))\"></span></wm-sirio-checkbox>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region radio -->\r\n              <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: radio buttons and chips (subtype 'chip'); markdown option labels are\r\n                       rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-radio-group\r\n                                     [chips]=\"component.subtype === 'chip'\"\r\n                                     [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                     [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                     [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                     [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                     [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                     [formControlName]=\"component.key\"\r\n                                     [options]=\"sirioOptions(getValues(component) | async)\"\r\n                                     [inline]=\"component.displayInline\"\r\n                                     [refresh]=\"refreshValues(component)\"\r\n                                     [valueSync]=\"component.valueSync\"\r\n                                     [requiredOnBlur]=\"component.validate?.required\"\r\n                                     #radio\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"radio\">\r\n                    <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n                  </wm-sirio-radio-group>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region checklist -->\r\n              <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: checkbox list and chips (subtype 'chip'); markdown option labels are\r\n                       rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-checklist\r\n                                   [chips]=\"component.subtype === 'chip'\"\r\n                                   [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                   [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                   [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                   [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                   [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                   [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                   [formControlName]=\"component.key\"\r\n                                   [options]=\"sirioOptions(getValues(component) | async)\"\r\n                                   [inline]=\"component.displayInline\"\r\n                                   [refresh]=\"refreshValues(component)\"\r\n                                   [valueSync]=\"component.valueSync\"\r\n                                   [requiredOnBlur]=\"component.validate?.required\"\r\n                                   #checklist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"checklist\">\r\n                    <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n                  </wm-sirio-checklist>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region textarea -->\r\n              <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-textarea\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textCase]=\"toTextCase(component.textCase)\"\r\n                                [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [requiredOnInput]=\"component.validate?.required\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                #textarea\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"textarea\">\r\n                </wm-sirio-textarea>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region filepicker -->\r\n              <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers);\r\n                       upload, delete and download of the stored files are handled by the control. -->\r\n                  <wm-sirio-file-upload class=\"w-100\"\r\n                                     [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                     [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                     [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                     [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                     [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                     [buttonLabel]=\"evaluateString(locale(component, 'text')) || locale(Texts, 'Upload')\"\r\n                                     [accept]=\"getAccept(component.accept)\"\r\n                                     [multiple]=\"evaluateBoolean(component.multiple)\"\r\n                                     valueType=\"array\"\r\n                                     details\r\n                                     downloadable\r\n                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                     [instantUpload]=\"evaluateBoolean(component.instantUpload)\"\r\n                                     [uploadHandler]=\"evaluate(component.uploadHandler)\"\r\n                                     [deleteHandler]=\"evaluate(component.deleteHandler)\"\r\n                                     [downloadHandler]=\"evaluate(component.downloadHandler)\"\r\n                                     [removeLabel]=\"locale(Texts, 'Remove')\"\r\n                                     [downloadLabel]=\"locale(Texts, 'Download')\"\r\n                                     [uploadingLabel]=\"locale(Texts, 'Uploading')\"\r\n                                     [deletingLabel]=\"locale(Texts, 'Deleting')\"\r\n                                     [downloadingLabel]=\"locale(Texts, 'Downloading')\"\r\n                                     [formControlName]=\"component.key\"\r\n                                     [requiredOnBlur]=\"component.validate?.required\"\r\n                                     [valueSync]=\"component.valueSync\"\r\n                                     (filesAdded)=\"filesAdded($event, filepicker)\"\r\n                                     (fileError)=\"fileError($event)\"\r\n                                     #filepicker\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"filepicker\">\r\n                  </wm-sirio-file-upload>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region range -->\r\n              <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-slider\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [requiredIndicator]=\"isFieldRequired(component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n                              [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #range\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"range\">\r\n                </wm-sirio-slider>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region displayfield -->\r\n              <ng-container *ngSwitchCase=\"'displayfield'\">\r\n                <div class=\"display-field\"\r\n                     #displayfield\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"displayfield\">\r\n                  <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n                    {{ evaluateString(locale(component, 'label')) }}\r\n                    <!-- @wemake4u/form-controls: kit info button with popover, as next to the labels of the controls. -->\r\n                    <wm-sirio-info-button *ngIf=\"component.tooltip\"\r\n                                       [content]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                       [title]=\"evaluateString(locale(component, 'label'))\"\r\n                                       [label]=\"locale(Texts, 'InformationAbout') + ' ' + evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"></wm-sirio-info-button>\r\n                  </div>\r\n                  <div [class.sirio-form-control]=\"component.fieldtype !== 'filelist'\"\r\n                       [style.text-align]=\"component.fieldtype !== 'filelist' ? (component.textAlign || null) : null\"\r\n                       class=\"data-display\" [ngClass]=\"component.fieldtype\">\r\n                    <ng-container [ngSwitch]=\"component.fieldtype\">\r\n                      <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                        <ng-container *ngTemplateOutlet=\"checkboxTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchCase=\"'text'\">\r\n                        <ng-container *ngTemplateOutlet=\"formattedTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchCase=\"'filelist'\">\r\n                        <ng-container *ngTemplateOutlet=\"filelistTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchDefault>\r\n                        <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #checkboxTemplate>\r\n                      <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n                    </ng-template>\r\n                    <ng-template #defaultTemplate>\r\n                      <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n                        <ng-container *ngIf=\"getValues(component) | async as values\">\r\n                          {{ toLabel(evaluate(component.expression), values) }}\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                    <ng-template #simpleTemplate>\r\n                      {{ evaluate(component.expression) }}\r\n                    </ng-template>\r\n                    <ng-template #formattedTemplate>\r\n                      <div class=\"text-paragraph\" style=\"margin-top: -6px;\"\r\n                           [innerHTML]=\"toHTML(evaluateTemplate(component.expression))\">\r\n                      </div>\r\n                    </ng-template>\r\n                    <ng-template #filelistTemplate>\r\n                      <ng-container *ngIf=\"{ files: evaluate(component.expression) } as expr\"\r\n                                    fileHandler\r\n                                    #fileHandlerRef=\"fileHandler\"\r\n                                    [downloadHandler]=\"evaluate(component.downloadHandler)\">\r\n                        <ng-container *ngIf=\"expr.files?.length > 0\">\r\n                          <div *ngFor=\"let file of expr.files\" class=\"row w-100 p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n                            <div class=\"col-auto ms-auto\">\r\n                              <span [ngClass]=\"fileHandlerRef.getIcon(file)\" class=\"fas fa-24 mt-1 me-3 ms-1\" aria-hidden=\"true\"></span>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                              <p class=\"mb-0\"><span class=\"h6 sirio-text-link sirio-font-weight-700\">{{ file.name }}</span></p>\r\n                              {{ fileHandlerRef.getExtension(file) }}, {{ fileHandlerRef.getSize(file) }}\r\n                            </div>\r\n                            <div class=\"col-auto ms-auto d-lg-flex flex-column align-items-end\">\r\n                              <ng-container *ngIf=\"fileHandlerRef.canDownload(file)\">\r\n                                <div *ngIf=\"fileHandlerRef.isDownloading(file)\" class=\"mt-2\">\r\n                                  <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Downloading') }}</span>\r\n                                  <span class=\"fas fa-arrows-rotate fa-spin ms-2\" aria-hidden=\"true\"></span>\r\n                                </div>\r\n                                <!-- Buttons, not links: announced as buttons, activated also with Space. -->\r\n                                <button *ngIf=\"fileHandlerRef.isLocal(file)\"\r\n                                   type=\"button\"\r\n                                   class=\"sirio-text-link fp-link-button\"\r\n                                   (click)=\"fileHandlerRef.downloadLocal(file)\"\r\n                                   [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n                                   [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n                                  <span class=\"d-none d-sm-inline-block\">\r\n                                    {{ locale(Texts, 'Download') }}\r\n                                  </span>\r\n                                  <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n                                </button>\r\n                                <button *ngIf=\"fileHandlerRef.isHandled(file)\"\r\n                                   type=\"button\"\r\n                                   class=\"sirio-text-link fp-link-button\"\r\n                                   (click)=\"fileHandlerRef.downloadHandled(file)\"\r\n                                   [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n                                   [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n                                  <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Download') }}</span>\r\n                                  <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n                                </button>\r\n                              </ng-container>\r\n                            </div>\r\n                          </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!(expr.files?.length > 0)\">\r\n                          <div class=\"row p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n                            <div class=\"col\">\r\n                              <p class=\"mb-0\">\r\n                                <span class=\"h6 sirio-text-link sirio-font-weight-700\">Nessun file presente</span>\r\n                              </p>\r\n                            </div>\r\n                          </div>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                  </div>\r\n                  <p *ngIf=\"component.description\" class=\"sirio-form-text-help\">\r\n                    {{ evaluateString(locale(component, 'description')) }}\r\n                  </p>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region dynamiclist -->\r\n              <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n                <ng-container *ngIf=\"resolvePath(component.path) as formGroup\">\r\n                  <ng-container [formGroup]=\"formGroup\">\r\n                    <!-- data-fp-repeater: root of the repeater, where the focus goes after add / remove / move. -->\r\n                    <div [formArrayName]=\"component.key\"\r\n                                  data-fp-repeater\r\n                                  [formGroup]=\"formGroup\"\r\n                                  [recursion]=\"component\"\r\n                                  #recursion=\"recursion\">\r\n                      <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n                      <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n                        <ng-template navigatorState\r\n                                     [total]=\"formArray.controls.length\"\r\n                                     #state=\"navigatorState\"></ng-template>\r\n                        <ng-container *ngIf=\"component.subtype == 'navigation'\">\r\n                          <ng-container *ngTemplateOutlet=\"navigation; context: { formArray: formArray, state: state }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n                          <ng-container [ngSwitch]=\"component.subtype\">\r\n                            <!-- #region tab -->\r\n                            <ng-container *ngSwitchCase=\"'tab'\">\r\n                              <!-- @wemake4u/form-controls: activateAdded selects the added tab (after a removal the library selects the one\r\n                                   taking its place); focusContent moves the focus to the first field of the panel. -->\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"tabInstance\">\r\n                                <wm-sirio-tabs [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                            [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                            [focusablePanels]=\"false\"\r\n                                            activateAdded\r\n                                            focusContent\r\n                                            #tabInstance>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                      <wm-sirio-tab [label]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n                                                 [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n                                        <ng-template wmSirioTabContent>\r\n                                          <div>\r\n                                            <div>\r\n                                              <app-dynamic-fields [form]=\"form\"\r\n                                                                  [formGroup]=\"getFormGroup(item)\"\r\n                                                                  [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                  [rows]=\"component.rows\"\r\n                                                                  [identity]=\"component.id\"\r\n                                                                  [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                  [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                            </div>\r\n                                            <div style=\"text-align:right\">\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                            </div>\r\n                                          </div>\r\n                                        </ng-template>\r\n                                      </wm-sirio-tab>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </wm-sirio-tabs>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region accordion -->\r\n                            <ng-container *ngSwitchCase=\"'accordion'\">\r\n                              <!-- @wemake4u/form-controls: activateAdded opens the first section at the start and the added one (after a removal\r\n                                   the library opens the one taking its place); focusContent moves the focus to its first field. -->\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclistaccordion\">\r\n                                <wm-sirio-accordion exclusive\r\n                                                 activateAdded\r\n                                                 focusContent\r\n                                                 #dynamiclistaccordion>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                      <wm-sirio-accordion-item [title]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n                                                            [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n                                        <ng-template wmSirioAccordionContent>\r\n                                          <div>\r\n                                            <div>\r\n                                              <app-dynamic-fields [form]=\"form\"\r\n                                                                  [formGroup]=\"getFormGroup(item)\"\r\n                                                                  [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                  [rows]=\"component.rows\"\r\n                                                                  [identity]=\"component.id\"\r\n                                                                  [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                  [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                            </div>\r\n                                            <div style=\"text-align:right\">\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                            </div>\r\n                                          </div>\r\n                                        </ng-template>\r\n                                      </wm-sirio-accordion-item>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </wm-sirio-accordion>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region table -->\r\n                            <ng-container *ngSwitchCase=\"'table'\">\r\n                              <div #dynamiclist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclist\">\r\n                                <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n                                      <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n                                        <tr>\r\n                                          <td class=\"content-cell\">\r\n                                            <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n                                              <div>\r\n                                                <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                                  <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                                  <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                                </div>\r\n                                                <div>\r\n                                                  <app-dynamic-fields [form]=\"form\"\r\n                                                                      [formGroup]=\"formItem\"\r\n                                                                      [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                      [rows]=\"component.rows\"\r\n                                                                      [identity]=\"component.id\"\r\n                                                                      [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                      [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                                </div>\r\n                                              </div>\r\n                                            </div>\r\n                                          </td>\r\n                                          <td class=\"command-cell\">\r\n                                            <div>\r\n                                              <ng-container *ngIf=\"recursionData.itemsArray\">\r\n                                                <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n                                              </ng-container>\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i, compact: true }\"></ng-container>\r\n                                            </div>\r\n                                          </td>\r\n                                        </tr>\r\n                                        <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n                                          <td colspan=\"2\" class=\"recursion-cell\">\r\n                                            <div class=\"layout\">\r\n                                              <div class=\"recursion-toggle\">\r\n                                                <!-- @wemake4u/form-controls: open at the start (as before); label for screen readers. -->\r\n                                                <button type=\"button\" wmSirioButton=\"ghost\"\r\n                                                        [wmSirioCollapseToggle]=\"collapse\"\r\n                                                        iconOnly\r\n                                                        [icon]=\"collapse.expanded() ? 'fa-chevron-down' : 'fa-chevron-right'\"\r\n                                                        [label]=\"recursionData.itemsArray.length + ' elementi presenti'\"></button>\r\n                                              </div>\r\n                                              <div *ngIf=\"!collapse.expanded()\" class=\"recursion-title\">\r\n                                                <div class=\"recursion-text\">\r\n                                                  {{ recursionData.itemsArray.length }} elementi presenti\r\n                                                </div>\r\n                                              </div>\r\n                                              <div class=\"recursion-content\">\r\n                                                <div wmSirioCollapse #collapse=\"wmSirioCollapse\" [expanded]=\"true\">\r\n                                                  <div *ngIf=\"collapse.expanded()\" style=\"margin-bottom: -11px;\">\r\n                                                    <app-dynamic-fields [form]=\"form\"\r\n                                                                        [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n                                                                        [readOnly]=\"readOnly\"\r\n                                                                        [recursionLevel]=\"recursionLevel+1\"\r\n                                                                        [rows]=\"recursion.getComponentRows()\"\r\n                                                                        [identity]=\"component.id\"\r\n                                                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                                  </div>\r\n                                                </div>\r\n                                              </div>\r\n                                            </div>\r\n                                          </td>\r\n                                        </tr>\r\n                                      </ng-container>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </table>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region navigation -->\r\n                            <ng-container *ngSwitchCase=\"'navigation'\">\r\n                              <div>\r\n                                <ng-container *ngIf=\"formArray.controls[state.index] as item\">\r\n                                  <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: state.index } as event\">\r\n                                        <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                        <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                      </div>\r\n                                      <div>\r\n                                        <app-dynamic-fields [form]=\"form\"\r\n                                                            [formGroup]=\"getFormGroup(item)\"\r\n                                                            [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                            [rows]=\"component.rows\"\r\n                                                            [identity]=\"component.id\"\r\n                                                            [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                            [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                      </div>\r\n                                    </div>\r\n                                  </div>\r\n                                </ng-container>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region default -->\r\n                            <ng-container *ngSwitchDefault>\r\n                              <div #dynamiclist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclist\"\r\n                                   selectionGroup\r\n                                   [selectionMode]=\"evaluateString(component.selection?.mode)\"\r\n                                   [selectableClass]=\"evaluateString(component.selection?.selectableClass)\"\r\n                                   [selectedClass]=\"evaluateString(component.selection?.selectedClass)\"\r\n                                   [onSelectionChanged]=\"callExpression(component.selection?.selectionChanged)\">\r\n                                <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                  <div [selectionItem]=\"item\"\r\n                                       [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                        <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                        <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                      </div>\r\n                                      <div>\r\n                                        <app-dynamic-fields [form]=\"form\"\r\n                                                            [formGroup]=\"getFormGroup(item)\"\r\n                                                            [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                            [rows]=\"component.rows\"\r\n                                                            [identity]=\"component.id\"\r\n                                                            [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                            [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                      </div>\r\n                                      <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n                                        <div style=\"text-align:right\">\r\n                                          <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n                                          <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                        </div>\r\n                                      </ng-container>\r\n                                    </div>\r\n                                  </div>\r\n                                </ng-container>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                          </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n                          <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n                        </ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"feedback\"></ng-container>\r\n                        <ng-container *ngIf=\"recursionLevel == 0 && component.subtype !== 'navigation'\">\r\n                          <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <!-- #region templates -->\r\n                <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n                    <!-- Name with the position (\"Sposta Sù elemento 3 di 5\"): the visible text first, the rest for screen readers. -->\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"moveUpItem(formArray, i, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"up\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-arrow-up\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"upLabel + ' ' + itemPosition(i, formArray.length)\">{{ upLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"moveDownItem(formArray, i, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"down\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-arrow-down\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"downLabel + ' ' + itemPosition(i, formArray.length)\">{{ downLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"removeItem(formArray, i, true, state, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"remove\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-trash\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"removeLabel + ' ' + itemPosition(i, formArray.length)\">{{ removeLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"addItem(formArray, state)\"\r\n                            data-fp-action=\"add\"\r\n                            class=\"add-item\"\r\n                            icon=\"fa-plus\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"addLabel\">{{ addLabel }}</button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowReorder\">\r\n                    <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { item: formArray.at(i)?.value, index: i, total: state.total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, state: state, i: i, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: state.total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, state: state, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #feedback>\r\n                  <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                    <div>\r\n                      <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                    <div>\r\n                      <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #navigation let-formArray=\"formArray\" let-state=\"state\">\r\n                  <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n                  <wm-sirio-pagination [showItems]=\"false\"\r\n                                    [pageSize]=\"1\"\r\n                                    [total]=\"state.total\"\r\n                                    [page]=\"state.index + 1\"\r\n                                    (pageChange)=\"state.index = $event - 1\"\r\n                                    [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n                                    [ofLabel]=\"locale(Texts, 'Of')\"\r\n                                    [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n                                    [pageLabel]=\"locale(Texts, 'Element')\"\r\n                                    [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n                                    [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n                                    [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n                    <div class=\"actions\">\r\n                      <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n                      <ng-container *ngIf=\"state.total && state.index != -1\">\r\n                        <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: state.index }\"></ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </wm-sirio-pagination>\r\n                </ng-template>\r\n                <!-- #endregion -->\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region group -->\r\n              <ng-container *ngSwitchCase=\"'group'\">\r\n                <div *ngIf=\"resolveBoundGroup(component) as resolvedGroup\"\r\n                     [ngClass]=\"getGroupOutline(component)\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n                    <label>{{ labelText }}</label>\r\n                  </ng-container>\r\n                  <div #group\r\n                       [register]=\"component\"\r\n                       [componentRef]=\"group\">\r\n                    <app-dynamic-fields [form]=\"form\"\r\n                                        [formGroup]=\"resolvedGroup\"\r\n                                        [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [rows]=\"component.rows\"\r\n                                        [identity]=\"component.id\"\r\n                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tab -->\r\n              <ng-container *ngSwitchCase=\"'tab'\">\r\n                <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n                  <ng-container *ngIf=\"panels.length > 0\">\r\n                    <!-- @wemake4u/form-controls: focusContent moves the focus into the panel shown at the start or selected (not for the\r\n                         arrow keys), except for the panels with disableAutoFocus. -->\r\n                    <wm-sirio-tabs #tabInstance\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"tabInstance\"\r\n                                [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                [line]=\"!!component.navigation\"\r\n                                [vertical]=\"!!component.vertical\"\r\n                                [focusablePanels]=\"false\"\r\n                                focusContent>\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <wm-sirio-tab *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                   [label]=\"evaluateString(locale(panel, 'label'))\"\r\n                                   [icon]=\"evaluateString(panel.icon) || null\"\r\n                                   [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n                                   [badge]=\"evaluate(panel.badge)\"\r\n                                   [focusContent]=\"panel.disableAutoFocus !== true\">\r\n                          <ng-template wmSirioTabContent>\r\n                            <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                              <app-dynamic-fields [form]=\"form\"\r\n                                                  [formGroup]=\"resolvePath(panel.path)\"\r\n                                                  [rows]=\"template.rows\"\r\n                                                  [identity]=\"component.id\"\r\n                                                  [identityIndex]=\"i\"\r\n                                                  [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n                                                  [disableAutoFocus]=\"template.disableAutoFocus\"\r\n                                                  [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n                            </ng-container>\r\n                          </ng-template>\r\n                        </wm-sirio-tab>\r\n                      </ng-container>\r\n                    </wm-sirio-tabs>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region accordion -->\r\n              <ng-container *ngSwitchCase=\"'accordion'\">\r\n                <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n                  <ng-container *ngIf=\"panels.length > 0\">\r\n                    <!-- exclusive: one section open at a time, as with ngx-sirio-lib. -->\r\n                    <wm-sirio-accordion exclusive\r\n                                     #accordion\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"accordion\">\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <ng-container *ngIf=\"resolvePath(panel.path) as formGroup\">\r\n                          <!-- Content not lazy (as before): the fields of closed sections stay in the form. -->\r\n                          <wm-sirio-accordion-item *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                                [title]=\"evaluateString(locale(panel, 'label'))\"\r\n                                                [badge]=\"evaluate(panel.badge)\"\r\n                                                [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n                            <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                              <app-dynamic-fields [form]=\"form\"\r\n                                                  [formGroup]=\"formGroup\"\r\n                                                  [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n                                                  [rows]=\"template.rows\"\r\n                                                  [identity]=\"component.id\"\r\n                                                  [identityIndex]=\"i\"\r\n                                                  [disableAutoFocus]=\"template.disableAutoFocus\"\r\n                                                  [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n                            </ng-container>\r\n                          </wm-sirio-accordion-item>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </wm-sirio-accordion>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region text -->\r\n              <ng-container *ngSwitchCase=\"'text'\">\r\n                <div [collapse]=\"component.collapseTo\"\r\n                     [onCollapse]=\"callExpression(component.onCollapse)\"\r\n                     [onExpand]=\"callExpression(component.onExpand)\"\r\n                     #text\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"text\">\r\n                  <!--Reset View Context-->\r\n                  <div tabindex=\"0\" style=\"display:none\"></div>\r\n                  <div class=\"flex\">\r\n                    <div class=\"text-paragraph\"\r\n                         [markdown]=\"callExpression(component.anchorClick)\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                    <ng-container *ngIf=\"component.tooltip\">\r\n                      <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n                                         [label]=\"locale(Texts, 'Information')\"></wm-sirio-info-button>\r\n                      <ng-template #tooltipTemplate>\r\n                        <div class=\"sirio-tooltip-body\">\r\n                          <div class=\"text-paragraph\"\r\n                               [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n                          </div>\r\n                        </div>\r\n                      </ng-template>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region html -->\r\n              <ng-container *ngSwitchCase=\"'html'\">\r\n                <div class=\"html-paragraph\"\r\n                     [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n                     #html\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"html\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region image -->\r\n              <ng-container *ngSwitchCase=\"'image'\">\r\n                <!-- || '': an alt expression giving null would be read aloud as \"null\". -->\r\n                <img [src]=\"evaluateString(component.source)\"\r\n                     [alt]=\"evaluateString(locale(component, 'alt')) || ''\"\r\n                     style=\"width: 100%;height: 100%;\"\r\n                     #image\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"image\">\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region table -->\r\n              <ng-container *ngSwitchCase=\"'table'\">\r\n                <label *ngIf=\"evaluateString(locale(component, 'label')) as tableLabel\">{{ tableLabel }}</label>\r\n                <!-- Sirio data grid: configuration from SirioGridService. -->\r\n                @let grid = getSirioGrid(component);\r\n                @let rows = getSirioRows(component, grid);\r\n                <!-- Paginator with rowCount > 0, or when the server source pages its rows. -->\r\n                @let pagedSize = grid.pageable ? null : rows.pagedSize();\r\n                @let gridHeight = component.autoHeight ? null : evaluateSize(component.height);\r\n                <wm-sirio-data-grid #table\r\n                                    class=\"fp-data-grid\"\r\n                                    variant=\"dark\"\r\n                                    size=\"sm\"\r\n                                    [filterButton]=\"component.floatingFilter === true ? 'always' : 'none'\"\r\n                                    [showFilterChips]=\"false\"\r\n                                    paginationVariant=\"compact\"\r\n                                    [caption]=\"evaluateString(locale(component, 'label'))\"\r\n                                    [keyboardNavigation]=\"component.keyboardNavigation !== false\"\r\n                                    [navigationHint]=\"evaluateString(locale(component, 'navigationHint')) || locale(Texts, 'GridNavigationHint')\"\r\n                                    [data]=\"rows.data()\"\r\n                                    [dataSource]=\"rows.dataSource\"\r\n                                    [loading]=\"rows.loading()\"\r\n                                    [emptyText]=\"rows.failed() ? locale(Texts, 'LoadingFailed') : locale(Texts, 'NoData')\"\r\n                                    [loadErrorText]=\"locale(Texts, 'LoadingFailed')\"\r\n                                    [rowId]=\"grid.rowId\"\r\n                                    [selection]=\"sirioSelection(component)\"\r\n                                    singleSelectionControl=\"checkbox\"\r\n                                    [selectionColumn]=\"grid.checkboxes\"\r\n                                    [selectOnRowClick]=\"grid.checkboxes && grid.clickSelect\"\r\n                                    selectAll=\"filtered\"\r\n                                    hideUnselectable\r\n                                    [rowSelectable]=\"grid.rowSelectable\"\r\n                                    [selected]=\"grid.selected()\"\r\n                                    (selectedChange)=\"onSirioSelectionChanged(component, grid, $event)\"\r\n                                    [rowClass]=\"grid.rowClass\"\r\n                                    [rowStyle]=\"grid.rowStyle\"\r\n                                    [pageable]=\"grid.pageable || pagedSize !== null\"\r\n                                    [pageSize]=\"pagedSize ?? grid.pageSize\"\r\n                                    [pageSizeOptions]=\"sirioPageSizes(pagedSize)\"\r\n                                    [rowNumbers]=\"grid.rowNumbers\"\r\n                                    rowNumberHeader=\"#\"\r\n                                    [resizable]=\"grid.resizable\"\r\n                                    [reorderable]=\"grid.reorderable\"\r\n                                    filterOperators\r\n                                    [filterRow]=\"component.floatingFilter === true\"\r\n                                    [filterYesLabel]=\"locale(Texts, 'True')\"\r\n                                    [filterNoLabel]=\"locale(Texts, 'False')\"\r\n                                    [height]=\"gridHeight\"\r\n                                    [stickyHeader]=\"!!gridHeight\"\r\n                                    [minHeight]=\"evaluateSize(component.minHeight)\"\r\n                                    [refresh]=\"refreshRowSource(component)\"\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"table\">\r\n                  @for (col of grid.columns; track col.id) {\r\n                    <wm-sirio-grid-column [field]=\"col.field\"\r\n                                          [header]=\"col.header\"\r\n                                          [value]=\"col.value\"\r\n                                          [format]=\"col.format\"\r\n                                          [align]=\"col.align\"\r\n                                          [filter]=\"col.filter\"\r\n                                          [filterOptions]=\"col.filterOptions\"\r\n                                          [filterMultiple]=\"col.filterMultiple\"\r\n                                          [filterOperators]=\"col.filterOperators\"\r\n                                          [sortable]=\"col.sortable\"\r\n                                          [resizable]=\"col.resizable\"\r\n                                          [wrap]=\"col.wrap\"\r\n                                          [mono]=\"col.mono\"\r\n                                          [fit]=\"col.fit\"\r\n                                          [fixed]=\"col.fixed\"\r\n                                          [flex]=\"col.flex\"\r\n                                          [width]=\"col.width\"\r\n                                          [minWidth]=\"col.minWidth\"\r\n                                          [maxWidth]=\"col.maxWidth\"\r\n                                          [group]=\"col.group\"\r\n                                          [hidden]=\"col.actions && evaluateBoolean(component.suppressActions) === true\"\r\n                                          [cellClass]=\"col.cellClass\"\r\n                                          [cellStyle]=\"col.cellStyle\"\r\n                                          [headerClass]=\"col.headerClass\"\r\n                                          [headerStyle]=\"col.headerStyle\">\r\n                      @if (col.renderer; as renderer) {\r\n                        <ng-template wmSirioGridCell let-row let-value=\"value\" let-index=\"index\">\r\n                          @if (renderer.kind === 'html') {\r\n                            <span [innerHTML]=\"renderer.html(row, value)\"></span>\r\n                          } @else {\r\n                            <fp-sirio-cell-host [renderer]=\"renderer.type\" [params]=\"renderer.params(row, value, index)\" />\r\n                          }\r\n                        </ng-template>\r\n                      }\r\n                    </wm-sirio-grid-column>\r\n                  }\r\n                </wm-sirio-data-grid>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region button -->\r\n              <ng-container *ngSwitchCase=\"'button'\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: color \"ghost\" = plain sirio-btn; icon on the left unless iconPosition \"right\". -->\r\n                  <button type=\"button\"\r\n                          [wmSirioButton]=\"evaluateVariant(component.color)\"\r\n                          [disabled]=\"evaluateBoolean(component.disabled) ?? false\"\r\n                          [icon]=\"evaluateString(component.icon) || null\"\r\n                          [iconPosition]=\"component.iconPosition == 'right' ? 'end' : 'start'\"\r\n                          (click)=\"clickButton(component, $event)\"\r\n                          #button\r\n                          [register]=\"component\"\r\n                          [componentRef]=\"button\">{{ evaluateString(locale(component, 'label')) }}</button>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region separator -->\r\n              <ng-container *ngSwitchCase=\"'separator'\">\r\n                <div class=\"separator\"\r\n                     #separator\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"separator\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region spacer -->\r\n              <ng-container *ngSwitchCase=\"'spacer'\">\r\n                <div style=\"width: 100%\"\r\n                     [style.height.px]=\"component.height\"\r\n                     #spacer\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"spacer\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region iframe -->\r\n              <ng-container *ngSwitchCase=\"'iframe'\">\r\n                <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <iframe [src]=\"evaluateUrl(component.url)\"\r\n                        [title]=\"evaluateString(locale(component, 'label'))\"\r\n                        [style.width]=\"'100%'\"\r\n                        [style.height.px]=\"component.height\"\r\n                        [frameSecurity]=\"component.security\"\r\n                        #iframe\r\n                        [register]=\"component\"\r\n                        [componentRef]=\"iframe\">\r\n                </iframe>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region alert -->\r\n              <ng-container *ngSwitchCase=\"'alert'\">\r\n                <!-- @wemake4u/form-controls: preventClose → no close button; markdown as block content. -->\r\n                <wm-sirio-alert [type]=\"component.role || 'info'\"\r\n                             [closeLabel]=\"locale(Texts, 'Close')\"\r\n                             [dismissible]=\"!evaluateBoolean(component.preventClose)\"\r\n                             #alert\r\n                             [register]=\"component\"\r\n                             [componentRef]=\"alert\">\r\n                  <div wmSirioAlertContent\r\n                       class=\"text-paragraph\"\r\n                       [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                  </div>\r\n                </wm-sirio-alert>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region notice -->\r\n              <ng-container *ngSwitchCase=\"'notice'\">\r\n                <!-- @wemake4u/form-controls: light notice (kit default); markdown as block content. -->\r\n                <wm-sirio-notify #notice\r\n                              [title]=\"evaluateString(locale(component, 'title'))\"\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"notice\">\r\n                  <div wmSirioNotifyContent\r\n                       class=\"text-paragraph\"\r\n                       [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                  </div>\r\n                </wm-sirio-notify>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tooltip -->\r\n              <ng-container *ngSwitchCase=\"'tooltip'\">\r\n                <!-- @wemake4u/form-controls: the title is the popover title of the kit. -->\r\n                <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n                                   [title]=\"evaluateString(locale(component, 'title'))\"\r\n                                   [label]=\"evaluateString(locale(component, 'title')) || locale(Texts, 'Information')\"\r\n                                   #tooltip\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"tooltip\"></wm-sirio-info-button>\r\n                <ng-template #tooltipTemplate>\r\n                  <div class=\"sirio-tooltip-body\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </div>\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region chart -->\r\n              <ng-container *ngSwitchCase=\"'chart'\">\r\n                <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <ng-container [observe]=\"getChartData(component)\"\r\n                     [callback]=\"invalidateChart(component)\">\r\n                  <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n                             [style.height.px]=\"component.height\"\r\n                             #chart\r\n                             [register]=\"component\"\r\n                             [componentRef]=\"chart\" />\r\n                </ng-container> \r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region component -->\r\n              <ng-container *ngSwitchCase=\"'component'\">\r\n                <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n                  <label>{{ labelText }}</label>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n                  <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n                                    [formGroup]=\"resolvePath(component.path)\"\r\n                                    #componentHost\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"componentHost\" />\r\n                  <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                    <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                  <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n                </ng-container>\r\n                <ng-template #noInputTemplate>\r\n                  <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n                                    #componentHost\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"componentHost\" />\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region templatehost -->\r\n              <ng-container *ngSwitchCase=\"'templatehost'\">\r\n                <ng-container *ngIf=\"getTemplate(component.template) as template\">\r\n                  <div #template\r\n                       [register]=\"component\"\r\n                       [componentRef]=\"template\">\r\n                    <app-dynamic-fields [form]=\"form\"\r\n                                        [formGroup]=\"resolvePath(component.path)\"\r\n                                        [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [rows]=\"template?.rows\"\r\n                                        [identity]=\"component.id\"\r\n                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region treelist -->\r\n              <ng-container *ngSwitchCase=\"'treelist'\">\r\n                <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <div class=\"treelist\"\r\n                     [style.height]=\"component.height ? evaluateSize(component.height): null\"\r\n                     *ngIf=\"getTreeColumns(component) as columns\">\r\n                  <ng-container *ngIf=\"((getTreeSource(component) | async) ?? []) as rows\">\r\n                    <table #treelist\r\n                           [register]=\"component\"\r\n                           [componentRef]=\"treelist\"\r\n                           [treelist]=\"rows\">\r\n                      <colgroup>\r\n                        <col *ngFor=\"let column of columns\"\r\n                             [style.width]=\"evaluateSize(column.width)\">\r\n                      </colgroup>\r\n                      <thead>\r\n                        <tr>\r\n                          <th scope=\"col\" *ngFor=\"let column of columns\"\r\n                              [ngClass]=\"getClass(column)\"\r\n                              [style.text-align]=\"column.align\">\r\n                            {{column.label}}\r\n                          </th>\r\n                        </tr>\r\n                      </thead>\r\n                      <tbody>\r\n                        <ng-container>\r\n                          <tr *ngFor=\"let row of rows\"\r\n                              [attr.data-id]=\"row.id\"\r\n                              [attr.data-parent]=\"row.parentId\"\r\n                              [attr.data-expanded]=\"row.expanded ? 'true': 'false'\"\r\n                              [ngClass]=\"row.meta?.['cssClass']\">\r\n                            <td *ngFor=\"let column of columns; let i = index\"\r\n                                [ngClass]=\"getClass(column)\">\r\n                              <div [style.justify-content]=\"getJustify(column.align)\">\r\n                                <span *ngIf=\"i==component.expanderColumn\"\r\n                                      [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\r\n                                      [style.padding-left]=\"evaluateSize(20 * row.level)\"\r\n                                      class=\"toggle\"></span>\r\n                                <span class=\"text\"\r\n                                      [title]=\"row.data[column.key]\">\r\n                                  {{ row.data[column.key] }}\r\n                                </span>\r\n                              </div>\r\n                            </td>\r\n                          </tr>\r\n                        </ng-container>\r\n                      </tbody>\r\n                    </table>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region navigator -->\r\n              <ng-container *ngSwitchCase=\"'navigator'\">\r\n                <div  #navigator\r\n                      [register]=\"component\"\r\n                      [componentRef]=\"navigator\">\r\n                  <div navigatorState\r\n                       [index]=\"evaluateNumber(component.index) ?? 0\"\r\n                       [total]=\"evaluateNumber(component.total) ?? 0\"\r\n                       (indexChange)=\"evaluateWithEventAsHandler(component.selectionChanged, { index: $event, count: state.total })\"\r\n                       #state=\"navigatorState\">\r\n                    <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n                    <wm-sirio-pagination [showItems]=\"false\"\r\n                                      [pageSize]=\"1\"\r\n                                      [total]=\"state.total\"\r\n                                      [page]=\"state.index + 1\"\r\n                                      (pageChange)=\"state.index = $event - 1\"\r\n                                      [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n                                      [ofLabel]=\"locale(Texts, 'Of')\"\r\n                                      [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n                                      [pageLabel]=\"locale(Texts, 'Element')\"\r\n                                      [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n                                      [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n                                      [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n                      <div class=\"actions\">\r\n                        <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { total: state.total }\"></ng-container>\r\n                        <ng-container *ngIf=\"state.total && state.index != -1\">\r\n                          <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { i: state.index, total: state.total }\"></ng-container>\r\n                        </ng-container>\r\n                      </div>\r\n                    </wm-sirio-pagination>\r\n                  </div>\r\n                </div>\r\n                <ng-template #buttonsAdd let-total=\"total\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnAdd; context: { total: total }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsRemove let-i=\"i\" let-total=\"total\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { index: i, total: total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnRemove; context: { i: i, total: total }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnAdd let-total=\"total\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            class=\"add-item\"\r\n                            (click)=\"evaluateWithEventAsHandler(component.addExpression, { total: total })\"\r\n                            icon=\"fa-plus\" iconPosition=\"start\">{{ addLabel }}</button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnRemove let-i=\"i\" let-total=\"total\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            class=\"remove-item\"\r\n                            (click)=\"evaluateWithEventAsHandler(component.removeExpression, { index: i, total: total })\"\r\n                            icon=\"fa-trash\" iconPosition=\"start\">{{ removeLabel }}<span class=\"sr-only\"> {{ itemPosition(i, total) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n",
 		styles: [
-			".flex{display:flex}.field-set{align-items:start}.field-set>.col-host>*{margin-bottom:10px}.separator{border-bottom:2px solid #d9e4f7;width:100%;margin:10px 0}.group-outline{border:1px solid #d9e4f7;padding:15px;margin-top:2px;margin-bottom:2px}.group-outline-repeat{margin-top:8px;margin-bottom:8px}.valign-start>.row{align-items:start}.valign-center>.row{align-items:center}.valign-end>.row{align-items:end}.component-start{align-self:start}.component-center{align-self:center}.component-end{align-self:end}.text-paragraph p{margin-bottom:0!important}.sirio-tab.sirio-tab-vertical .sirio-tab-body{margin-left:10px;margin-right:10px}.sirio-tab:not(.sirio-tab-vertical) .sirio-tab-body{margin-top:10px;margin-bottom:10px}.sirio-label{cursor:default}.w-100{width:100%!important}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.sirio-dialog-title{display:flex;margin-top:0}.sirio-dialog-title span{margin-right:10px;margin-bottom:0!important}.ag-header-cell.hide-filter .ag-header-cell-filter-button{display:none}.sirio-tab.sirio-tab-scroll{display:block}.sirio-btn.add-item,.sirio-btn.remove-item{padding:.875rem .9375rem}.ag-cell-value .btn-small-group{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.fp-data-grid .btn-small-group{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center}.fp-data-grid .btn-small-group .btn-small.sirio-btn{flex:none;padding:.25rem .0625rem;margin:2px}.ag-cell-value .btn-small.sirio-btn{padding:.25rem .0625rem;margin:2px}.ag-selection-checkbox .ag-checkbox-input-wrapper.ag-disabled{display:none}ag-charts{display:block;height:100%;border-radius:8px;background-color:var(--chart-bg);border:1px solid var(--chart-border);overflow:hidden}.ag-cell.cell-component{padding:1px}.ag-cell.row-numbers-cell{text-align:center;background:#f2f6fc}.ag-header-cell.row-numbers-header .ag-header-cell-label{justify-content:center;text-align:center}.ag-cell-auto-height .ag-cell-value{line-height:normal}.badge-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-right:10px}.badge-header .badge-header-tag{margin-left:10px}wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-date,wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-time{flex:1 1 0;min-width:0}.horizontal-left{display:flex;justify-content:left}.horizontal-center{display:flex;justify-content:center}.horizontal-right{display:flex;justify-content:right}.horizontal-fill button{width:100%}.horizontal-left legend,.horizontal-center legend,.horizontal-right legend,.horizontal-fill legend{float:none}.fp-link-button{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;cursor:pointer}.fp-link-button:hover{color:#00368f;text-decoration:underline}\n",
+			".flex{display:flex}.field-set{align-items:start}.field-set>.col-host>*{margin-bottom:10px}.separator{border-bottom:2px solid #d9e4f7;width:100%;margin:10px 0}.group-outline{border:1px solid #d9e4f7;padding:15px;margin-top:2px;margin-bottom:2px}.group-outline-repeat{margin-top:8px;margin-bottom:8px}.valign-start>.row{align-items:start}.valign-center>.row{align-items:center}.valign-end>.row{align-items:end}.component-start{align-self:start}.component-center{align-self:center}.component-end{align-self:end}.text-paragraph p{margin-bottom:0!important}.sirio-tab.sirio-tab-vertical .sirio-tab-body{margin-left:10px;margin-right:10px}.sirio-tab:not(.sirio-tab-vertical) .sirio-tab-body{margin-top:10px;margin-bottom:10px}.sirio-label{cursor:default}.w-100{width:100%!important}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.sirio-dialog-title{display:flex;margin-top:0}.sirio-dialog-title span{margin-right:10px;margin-bottom:0!important}.sirio-tab.sirio-tab-scroll{display:block}.sirio-btn.add-item,.sirio-btn.remove-item{padding:.875rem .9375rem}.fp-data-grid .btn-small-group{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center}.fp-data-grid .btn-small-group .btn-small.sirio-btn{flex:none;padding:.25rem .0625rem;margin:2px}ag-charts{display:block;height:100%;border-radius:8px;background-color:var(--chart-bg);border:1px solid var(--chart-border);overflow:hidden}.badge-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-right:10px}.badge-header .badge-header-tag{margin-left:10px}wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-date,wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-time{flex:1 1 0;min-width:0}.horizontal-left{display:flex;justify-content:left}.horizontal-center{display:flex;justify-content:center}.horizontal-right{display:flex;justify-content:right}.horizontal-fill button{width:100%}.horizontal-left legend,.horizontal-center legend,.horizontal-right legend,.horizontal-fill legend{float:none}.fp-link-button{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;cursor:pointer}.fp-link-button:hover{color:#00368f;text-decoration:underline}\n",
 			".display-field .sirio-form-control.data-display{border-color:#e3e5e8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.display-field .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.display-field .sirio-form-control.data-display.text,.display-field .sirio-form-control:hover.data-display.text{overflow:auto;height:auto;margin-top:-6px;color:#454d56}.display-field .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.display-field .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n",
 			".light-readonly label:hover,.light-view div.sirio-label:hover{color:#454d56}.light-readonly input.sirio-form-control,.light-readonly .sirio-dropdown .sirio-dropdown-select,.light-readonly textarea.sirio-form-control,.light-view div.sirio-form-control{background:none!important;border:0px;padding-left:0}.light-readonly .sirio-input-group .sirio-input-group-text{background:none}.light-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.light-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}wm-sirio-number.light-readonly .sirio-number-spinner{display:none}\n",
 			":root{--dynamiclist-border: 1px solid #ccc}.dynamiclist-no-data{text-align:center;padding:20px;font-style:italic;border:var(--dynamiclist-border)}.dynamiclist-table{width:100%;border-collapse:collapse;border:none}.dynamiclist-table.main{border:var(--dynamiclist-border)}.dynamiclist-table.main .dynamiclist-table{border-left:var(--dynamiclist-border);border-bottom:var(--dynamiclist-border)}.dynamiclist-table td{border:var(--dynamiclist-border)}.dynamiclist-table tr:first-child td{border-top:none}.dynamiclist-table tr:last-child td{border-bottom:none}.dynamiclist-table tr td:first-child{border-left:none}.dynamiclist-table tr td:last-child{border-right:none}.dynamiclist-table td.content-cell{width:100%;padding-left:8px;padding-right:8px;border-left:var(--dynamiclist-border)}.dynamiclist-table td.content-cell .group-outline-repeat{margin-bottom:0}.dynamiclist-table td.command-cell{vertical-align:middle}.dynamiclist-table td.command-cell>div{display:flex;justify-content:right}.dynamiclist-table td.recursion-cell .layout{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;width:100%;height:100%}.dynamiclist-table td.recursion-cell .recursion-toggle{grid-row:1 / span 2;grid-column:1;background-color:#f5f5f5;align-items:center}.dynamiclist-table td.recursion-cell .recursion-title{grid-row:1;grid-column:2;background:#f5f5f5;display:flex;align-items:center;min-height:34px}.dynamiclist-table td.recursion-cell .recursion-title .recursion-text{flex:1;text-align:center}.dynamiclist-table td.recursion-cell .recursion-title .recursion-add{margin-left:auto}.dynamiclist-table td.recursion-cell .recursion-content{grid-row:2;grid-column:2}.dynamiclist-table td.recursion-cell .recursion-content [data-sirio-visible=true]{overflow:visible!important}.dynamiclist-table .sirio-btn{padding:7px}\n",
@@ -10570,13 +9472,13 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$6.NgClass,
+				type: i1$5.NgClass,
 				selector: "[ngClass]",
 				inputs: ["class", "ngClass"]
 			},
 			{
 				kind: "directive",
-				type: i1$6.NgForOf,
+				type: i1$5.NgForOf,
 				selector: "[ngFor][ngForOf]",
 				inputs: [
 					"ngForOf",
@@ -10586,7 +9488,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$6.NgIf,
+				type: i1$5.NgIf,
 				selector: "[ngIf]",
 				inputs: [
 					"ngIf",
@@ -10596,7 +9498,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$6.NgTemplateOutlet,
+				type: i1$5.NgTemplateOutlet,
 				selector: "[ngTemplateOutlet]",
 				inputs: [
 					"ngTemplateOutletContext",
@@ -10606,19 +9508,19 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$6.NgSwitch,
+				type: i1$5.NgSwitch,
 				selector: "[ngSwitch]",
 				inputs: ["ngSwitch"]
 			},
 			{
 				kind: "directive",
-				type: i1$6.NgSwitchCase,
+				type: i1$5.NgSwitchCase,
 				selector: "[ngSwitchCase]",
 				inputs: ["ngSwitchCase"]
 			},
 			{
 				kind: "directive",
-				type: i1$6.NgSwitchDefault,
+				type: i1$5.NgSwitchDefault,
 				selector: "[ngSwitchDefault]"
 			},
 			{
@@ -10627,23 +9529,23 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgControlStatus,
+				type: i1$2.NgControlStatus,
 				selector: "[formControlName],[ngModel],[formControl]"
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgControlStatusGroup,
+				type: i1$2.NgControlStatusGroup,
 				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
 			},
 			{
 				kind: "directive",
-				type: i1$3.MaxLengthValidator,
+				type: i1$2.MaxLengthValidator,
 				selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
 				inputs: ["maxlength"]
 			},
 			{
 				kind: "directive",
-				type: i1$3.FormGroupDirective,
+				type: i1$2.FormGroupDirective,
 				selector: "[formGroup]",
 				inputs: ["formGroup"],
 				outputs: ["ngSubmit"],
@@ -10651,7 +9553,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.FormControlName,
+				type: i1$2.FormControlName,
 				selector: "[formControlName]",
 				inputs: [
 					"formControlName",
@@ -10662,13 +9564,13 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.FormGroupName,
+				type: i1$2.FormGroupName,
 				selector: "[formGroupName]",
 				inputs: ["formGroupName"]
 			},
 			{
 				kind: "directive",
-				type: i1$3.FormArrayName,
+				type: i1$2.FormArrayName,
 				selector: "[formArrayName]",
 				inputs: ["formArrayName"]
 			},
@@ -10689,20 +9591,6 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 				inputs: ["formGroup", "recursion"],
 				exportAs: ["recursion"]
 			},
-			{
-				kind: "directive",
-				type: GridDirective,
-				selector: "[rowSource], [columns], [selectable], [multiSelect], [suppressActions]",
-				inputs: [
-					"rowSource",
-					"columns",
-					"selectable",
-					"multiSelect",
-					"suppressActions",
-					"formGroup",
-					"register"
-				]
-			},
 			{
 				kind: "directive",
 				type: ChangeDirective,
@@ -10797,7 +9685,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 				kind: "directive",
 				type: MarkdownDirective,
 				selector: "[markdown]",
-				inputs: ["onAnchorClick"]
+				inputs: ["markdown"]
 			},
 			{
 				kind: "component",
@@ -10823,6 +9711,8 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"padDecimals",
 					"grouping",
 					"showSpinner",
+					"incrementLabel",
+					"decrementLabel",
 					"step"
 				]
 			},
@@ -10834,6 +9724,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"rows",
 					"maxlength",
 					"showCounter",
+					"emptyAsNull",
 					"textCase",
 					"textAlign"
 				]
@@ -10845,7 +9736,10 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 				inputs: [
 					"toggle",
 					"togglePosition",
-					"inline"
+					"inline",
+					"trueLabel",
+					"falseLabel",
+					"nullOptionLabel"
 				]
 			},
 			{
@@ -10869,7 +9763,8 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"options",
 					"inline",
 					"chips",
-					"compareWith"
+					"compareWith",
+					"nullOptionLabel"
 				]
 			},
 			{
@@ -10883,6 +9778,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"searchable",
 					"searchMinLength",
 					"noResultsText",
+					"noDataText",
 					"loading",
 					"loadingText",
 					"resetLabel",
@@ -10908,7 +9804,8 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 				inputs: [
 					"valueType",
 					"hideOnFocus",
-					"pickLevel"
+					"pickLevel",
+					"keyboardHint"
 				]
 			},
 			{
@@ -10927,7 +9824,8 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"minuteStep",
 					"timeLabel",
 					"fieldLabels",
-					"completeParts"
+					"completeParts",
+					"keyboardHint"
 				]
 			},
 			{
@@ -11060,6 +9958,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"content",
 					"title",
 					"label",
+					"labelledBy",
 					"placement"
 				]
 			},
@@ -11179,7 +10078,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			},
 			{
 				kind: "component",
-				type: i1$7.SirioDataGrid,
+				type: i1$6.SirioDataGrid,
 				selector: "wm-sirio-data-grid",
 				inputs: [
 					"data",
@@ -11219,6 +10118,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"grouping",
 					"expanded",
 					"rowExpandable",
+					"expandAllTools",
 					"rowNumbers",
 					"selectOnRowClick",
 					"selectionColumn",
@@ -11283,6 +10183,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"expandRowLabel",
 					"collapseRowLabel",
 					"resizeColumnLabel",
+					"navigationHint",
 					"reorderHint",
 					"resizeHint",
 					"filterHint",
@@ -11326,7 +10227,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			},
 			{
 				kind: "component",
-				type: i1$7.SirioGridColumn,
+				type: i1$6.SirioGridColumn,
 				selector: "wm-sirio-grid-column",
 				inputs: [
 					"field",
@@ -11366,7 +10267,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$7.SirioGridCell,
+				type: i1$6.SirioGridCell,
 				selector: "ng-template[wmSirioGridCell]"
 			},
 			{
@@ -11375,430 +10276,6 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 				selector: "fp-sirio-cell-host",
 				inputs: ["renderer", "params"]
 			},
-			{
-				kind: "component",
-				type: AgGridAngular,
-				selector: "ag-grid-angular",
-				inputs: [
-					"gridOptions",
-					"modules",
-					"statusBar",
-					"sideBar",
-					"suppressContextMenu",
-					"preventDefaultOnContextMenu",
-					"allowContextMenuWithControlKey",
-					"columnMenu",
-					"suppressMenuHide",
-					"enableBrowserTooltips",
-					"tooltipTrigger",
-					"tooltipShowDelay",
-					"tooltipHideDelay",
-					"tooltipMouseTrack",
-					"tooltipShowMode",
-					"tooltipInteraction",
-					"popupParent",
-					"copyHeadersToClipboard",
-					"copyGroupHeadersToClipboard",
-					"clipboardDelimiter",
-					"suppressCopyRowsToClipboard",
-					"suppressCopySingleCellRanges",
-					"suppressLastEmptyLineOnPaste",
-					"suppressClipboardPaste",
-					"suppressClipboardApi",
-					"suppressCutToClipboard",
-					"columnDefs",
-					"defaultColDef",
-					"defaultColGroupDef",
-					"columnTypes",
-					"dataTypeDefinitions",
-					"maintainColumnOrder",
-					"enableStrictPivotColumnOrder",
-					"suppressFieldDotNotation",
-					"headerHeight",
-					"groupHeaderHeight",
-					"floatingFiltersHeight",
-					"pivotHeaderHeight",
-					"pivotGroupHeaderHeight",
-					"allowDragFromColumnsToolPanel",
-					"suppressMovableColumns",
-					"suppressColumnMoveAnimation",
-					"suppressMoveWhenColumnDragging",
-					"suppressDragLeaveHidesColumns",
-					"suppressGroupChangesColumnVisibility",
-					"suppressMakeColumnVisibleAfterUnGroup",
-					"suppressRowGroupHidesColumns",
-					"colResizeDefault",
-					"suppressAutoSize",
-					"autoSizePadding",
-					"skipHeaderOnAutoSize",
-					"autoSizeStrategy",
-					"components",
-					"editType",
-					"singleClickEdit",
-					"suppressClickEdit",
-					"readOnlyEdit",
-					"stopEditingWhenCellsLoseFocus",
-					"enterNavigatesVertically",
-					"enterNavigatesVerticallyAfterEdit",
-					"enableCellEditingOnBackspace",
-					"undoRedoCellEditing",
-					"undoRedoCellEditingLimit",
-					"defaultCsvExportParams",
-					"suppressCsvExport",
-					"defaultExcelExportParams",
-					"suppressExcelExport",
-					"excelStyles",
-					"findSearchValue",
-					"findOptions",
-					"quickFilterText",
-					"cacheQuickFilter",
-					"includeHiddenColumnsInQuickFilter",
-					"quickFilterParser",
-					"quickFilterMatcher",
-					"applyQuickFilterBeforePivotOrAgg",
-					"excludeChildrenWhenTreeDataFiltering",
-					"enableAdvancedFilter",
-					"alwaysPassFilter",
-					"includeHiddenColumnsInAdvancedFilter",
-					"advancedFilterParent",
-					"advancedFilterBuilderParams",
-					"suppressAdvancedFilterEval",
-					"suppressSetFilterByDefault",
-					"enableCharts",
-					"chartThemes",
-					"customChartThemes",
-					"chartThemeOverrides",
-					"chartToolPanelsDef",
-					"chartMenuItems",
-					"loadingCellRenderer",
-					"loadingCellRendererParams",
-					"loadingCellRendererSelector",
-					"localeText",
-					"masterDetail",
-					"keepDetailRows",
-					"keepDetailRowsCount",
-					"detailCellRenderer",
-					"detailCellRendererParams",
-					"detailRowHeight",
-					"detailRowAutoHeight",
-					"context",
-					"alignedGrids",
-					"tabIndex",
-					"rowBuffer",
-					"valueCache",
-					"valueCacheNeverExpires",
-					"enableCellExpressions",
-					"suppressTouch",
-					"suppressFocusAfterRefresh",
-					"suppressBrowserResizeObserver",
-					"suppressPropertyNamesCheck",
-					"suppressChangeDetection",
-					"debug",
-					"loading",
-					"overlayLoadingTemplate",
-					"loadingOverlayComponent",
-					"loadingOverlayComponentParams",
-					"suppressLoadingOverlay",
-					"overlayNoRowsTemplate",
-					"noRowsOverlayComponent",
-					"noRowsOverlayComponentParams",
-					"suppressNoRowsOverlay",
-					"pagination",
-					"paginationPageSize",
-					"paginationPageSizeSelector",
-					"paginationAutoPageSize",
-					"paginateChildRows",
-					"suppressPaginationPanel",
-					"pivotMode",
-					"pivotPanelShow",
-					"pivotMaxGeneratedColumns",
-					"pivotDefaultExpanded",
-					"pivotColumnGroupTotals",
-					"pivotRowTotals",
-					"pivotSuppressAutoColumn",
-					"suppressExpandablePivotGroups",
-					"functionsReadOnly",
-					"aggFuncs",
-					"suppressAggFuncInHeader",
-					"alwaysAggregateAtRootLevel",
-					"aggregateOnlyChangedColumns",
-					"suppressAggFilteredOnly",
-					"removePivotHeaderRowWhenSingleValueColumn",
-					"animateRows",
-					"cellFlashDuration",
-					"cellFadeDuration",
-					"allowShowChangeAfterFilter",
-					"domLayout",
-					"ensureDomOrder",
-					"enableCellSpan",
-					"enableRtl",
-					"suppressColumnVirtualisation",
-					"suppressMaxRenderedRowRestriction",
-					"suppressRowVirtualisation",
-					"rowDragManaged",
-					"suppressRowDrag",
-					"suppressMoveWhenRowDragging",
-					"rowDragEntireRow",
-					"rowDragMultiRow",
-					"rowDragText",
-					"dragAndDropImageComponent",
-					"dragAndDropImageComponentParams",
-					"fullWidthCellRenderer",
-					"fullWidthCellRendererParams",
-					"embedFullWidthRows",
-					"groupDisplayType",
-					"groupDefaultExpanded",
-					"autoGroupColumnDef",
-					"groupMaintainOrder",
-					"groupSelectsChildren",
-					"groupLockGroupColumns",
-					"groupAggFiltering",
-					"groupTotalRow",
-					"grandTotalRow",
-					"suppressStickyTotalRow",
-					"groupSuppressBlankHeader",
-					"groupSelectsFiltered",
-					"showOpenedGroup",
-					"groupHideParentOfSingleChild",
-					"groupRemoveSingleChildren",
-					"groupRemoveLowestSingleChildren",
-					"groupHideOpenParents",
-					"groupAllowUnbalanced",
-					"rowGroupPanelShow",
-					"groupRowRenderer",
-					"groupRowRendererParams",
-					"treeData",
-					"treeDataChildrenField",
-					"treeDataParentIdField",
-					"rowGroupPanelSuppressSort",
-					"suppressGroupRowsSticky",
-					"pinnedTopRowData",
-					"pinnedBottomRowData",
-					"enableRowPinning",
-					"isRowPinnable",
-					"isRowPinned",
-					"rowModelType",
-					"rowData",
-					"asyncTransactionWaitMillis",
-					"suppressModelUpdateAfterUpdateTransaction",
-					"datasource",
-					"cacheOverflowSize",
-					"infiniteInitialRowCount",
-					"serverSideInitialRowCount",
-					"suppressServerSideFullWidthLoadingRow",
-					"cacheBlockSize",
-					"maxBlocksInCache",
-					"maxConcurrentDatasourceRequests",
-					"blockLoadDebounceMillis",
-					"purgeClosedRowNodes",
-					"serverSideDatasource",
-					"serverSideSortAllLevels",
-					"serverSideEnableClientSideSort",
-					"serverSideOnlyRefreshFilteredGroups",
-					"serverSidePivotResultFieldSeparator",
-					"viewportDatasource",
-					"viewportRowModelPageSize",
-					"viewportRowModelBufferSize",
-					"alwaysShowHorizontalScroll",
-					"alwaysShowVerticalScroll",
-					"debounceVerticalScrollbar",
-					"suppressHorizontalScroll",
-					"suppressScrollOnNewData",
-					"suppressScrollWhenPopupsAreOpen",
-					"suppressAnimationFrame",
-					"suppressMiddleClickScrolls",
-					"suppressPreventDefaultOnMouseWheel",
-					"scrollbarWidth",
-					"rowSelection",
-					"cellSelection",
-					"rowMultiSelectWithClick",
-					"suppressRowDeselection",
-					"suppressRowClickSelection",
-					"suppressCellFocus",
-					"suppressHeaderFocus",
-					"selectionColumnDef",
-					"rowNumbers",
-					"suppressMultiRangeSelection",
-					"enableCellTextSelection",
-					"enableRangeSelection",
-					"enableRangeHandle",
-					"enableFillHandle",
-					"fillHandleDirection",
-					"suppressClearOnFillReduction",
-					"sortingOrder",
-					"accentedSort",
-					"unSortIcon",
-					"suppressMultiSort",
-					"alwaysMultiSort",
-					"multiSortKey",
-					"suppressMaintainUnsortedOrder",
-					"icons",
-					"rowHeight",
-					"rowStyle",
-					"rowClass",
-					"rowClassRules",
-					"suppressRowHoverHighlight",
-					"suppressRowTransform",
-					"columnHoverHighlight",
-					"gridId",
-					"deltaSort",
-					"treeDataDisplayType",
-					"enableGroupEdit",
-					"initialState",
-					"theme",
-					"loadThemeGoogleFonts",
-					"themeCssLayer",
-					"styleNonce",
-					"themeStyleContainer",
-					"getContextMenuItems",
-					"getMainMenuItems",
-					"postProcessPopup",
-					"processUnpinnedColumns",
-					"processCellForClipboard",
-					"processHeaderForClipboard",
-					"processGroupHeaderForClipboard",
-					"processCellFromClipboard",
-					"sendToClipboard",
-					"processDataFromClipboard",
-					"isExternalFilterPresent",
-					"doesExternalFilterPass",
-					"getChartToolbarItems",
-					"createChartContainer",
-					"focusGridInnerElement",
-					"navigateToNextHeader",
-					"tabToNextHeader",
-					"navigateToNextCell",
-					"tabToNextCell",
-					"getLocaleText",
-					"getDocument",
-					"paginationNumberFormatter",
-					"getGroupRowAgg",
-					"isGroupOpenByDefault",
-					"initialGroupOrderComparator",
-					"processPivotResultColDef",
-					"processPivotResultColGroupDef",
-					"getDataPath",
-					"getChildCount",
-					"getServerSideGroupLevelParams",
-					"isServerSideGroupOpenByDefault",
-					"isApplyServerSideTransaction",
-					"isServerSideGroup",
-					"getServerSideGroupKey",
-					"getBusinessKeyForNode",
-					"getRowId",
-					"resetRowDataOnUpdate",
-					"processRowPostCreate",
-					"isRowSelectable",
-					"isRowMaster",
-					"fillOperation",
-					"postSortRows",
-					"getRowStyle",
-					"getRowClass",
-					"getRowHeight",
-					"isFullWidthRow"
-				],
-				outputs: [
-					"toolPanelVisibleChanged",
-					"toolPanelSizeChanged",
-					"columnMenuVisibleChanged",
-					"contextMenuVisibleChanged",
-					"cutStart",
-					"cutEnd",
-					"pasteStart",
-					"pasteEnd",
-					"columnVisible",
-					"columnPinned",
-					"columnResized",
-					"columnMoved",
-					"columnValueChanged",
-					"columnPivotModeChanged",
-					"columnPivotChanged",
-					"columnGroupOpened",
-					"newColumnsLoaded",
-					"gridColumnsChanged",
-					"displayedColumnsChanged",
-					"virtualColumnsChanged",
-					"columnEverythingChanged",
-					"columnHeaderMouseOver",
-					"columnHeaderMouseLeave",
-					"columnHeaderClicked",
-					"columnHeaderContextMenu",
-					"componentStateChanged",
-					"cellValueChanged",
-					"cellEditRequest",
-					"rowValueChanged",
-					"cellEditingStarted",
-					"cellEditingStopped",
-					"rowEditingStarted",
-					"rowEditingStopped",
-					"undoStarted",
-					"undoEnded",
-					"redoStarted",
-					"redoEnded",
-					"cellSelectionDeleteStart",
-					"cellSelectionDeleteEnd",
-					"rangeDeleteStart",
-					"rangeDeleteEnd",
-					"fillStart",
-					"fillEnd",
-					"filterOpened",
-					"filterChanged",
-					"filterModified",
-					"advancedFilterBuilderVisibleChanged",
-					"findChanged",
-					"chartCreated",
-					"chartRangeSelectionChanged",
-					"chartOptionsChanged",
-					"chartDestroyed",
-					"cellKeyDown",
-					"gridReady",
-					"firstDataRendered",
-					"gridSizeChanged",
-					"modelUpdated",
-					"virtualRowRemoved",
-					"viewportChanged",
-					"bodyScroll",
-					"bodyScrollEnd",
-					"dragStarted",
-					"dragStopped",
-					"dragCancelled",
-					"stateUpdated",
-					"paginationChanged",
-					"rowDragEnter",
-					"rowDragMove",
-					"rowDragLeave",
-					"rowDragEnd",
-					"rowDragCancel",
-					"rowResizeStarted",
-					"rowResizeEnded",
-					"columnRowGroupChanged",
-					"rowGroupOpened",
-					"expandOrCollapseAll",
-					"pivotMaxColumnsExceeded",
-					"pinnedRowDataChanged",
-					"pinnedRowsChanged",
-					"rowDataUpdated",
-					"asyncTransactionsFlushed",
-					"storeRefreshed",
-					"headerFocused",
-					"cellClicked",
-					"cellDoubleClicked",
-					"cellFocused",
-					"cellMouseOver",
-					"cellMouseOut",
-					"cellMouseDown",
-					"rowClicked",
-					"rowDoubleClicked",
-					"rowSelected",
-					"selectionChanged",
-					"cellContextMenu",
-					"rangeSelectionChanged",
-					"cellSelectionChanged",
-					"tooltipShow",
-					"tooltipHide",
-					"sortChanged"
-				]
-			},
 			{
 				kind: "component",
 				type: AgCharts,
@@ -11808,7 +10285,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			},
 			{
 				kind: "pipe",
-				type: i1$6.AsyncPipe,
+				type: i1$5.AsyncPipe,
 				name: "async"
 			}
 		],
@@ -11831,7 +10308,6 @@ i0.ɵɵngDeclareClassMetadata({
 				FormsModule,
 				FrameSecurityDirective,
 				RecursionDirective,
-				GridDirective,
 				ChangeDirective,
 				RegisterDirective,
 				RefreshDirective,
@@ -11878,22 +10354,20 @@ i0.ɵɵngDeclareClassMetadata({
 				DynamicHostComponent,
 				SIRIO_DATA_GRID,
 				SirioCellHostComponent,
-				AgGridAngular,
 				AgCharts
 			],
 			providers: [
 				RegisterService,
 				ProgrammabilityService,
-				GridService,
 				SirioGridService,
 				ChartService,
 				provideSirioValidationPresenter(formPlayerValidationPresenter)
 			],
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div [ngClass]=\"getFormClass()\">\r\n  <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n    <div class=\"row field-set\">\r\n      <ng-container *ngFor=\"let component of row.components\">\r\n        <ng-container [ngSwitch]=\"component.type\">\r\n          <div [ngClass]=\"getComponentClass(component)\"\r\n               [style]=\"getComponentStyle(component)\"\r\n               [ngAttrs]=\"getComponentAttrs(component)\"\r\n               *ngIf=\"shouldRender(component)\">\r\n            <div *ngIf=\"canShow(component)\">\r\n              <!-- #region textfield -->\r\n              <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-textbox type=\"text\"\r\n                               [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                               [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                               [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                               [placeholder]=\"locale(component, 'placeholder')\"\r\n                               [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                               [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n                               [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n                               [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                               [formControlName]=\"component.key\"\r\n                               [textCase]=\"toTextCase(component.textCase)\"\r\n                               [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                               [textAlign]=\"component.textAlign || null\"\r\n                               [requiredOnInput]=\"component.validate?.required\"\r\n                               [requiredOnBlur]=\"component.validate?.required\"\r\n                               [valueSync]=\"component.valueSync\"\r\n                               #textfield\r\n                               [register]=\"component\"\r\n                               [componentRef]=\"textfield\">\r\n                </wm-sirio-textbox>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region select -->\r\n              <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n                @let selectValues = getSirioValues(component);\r\n                @let selectOptions = selectValues.values$ | async;\r\n                <!-- @wemake4u/form-controls: strict = the value must be one of the options (was the dropdown directive);\r\n                     searchable shows the selection in the search field (was prefillSearch).\r\n                     Errors/warnings come from the validation presenter. -->\r\n                <wm-sirio-select\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(selectOptions)\"\r\n                              [loading]=\"selectValues.state.loading\"\r\n                              [loadingText]=\"locale(Texts, 'Loading')\"\r\n                              [searchable]=\"component.searchable\"\r\n                              [strict]=\"true\"\r\n                              (optionSelected)=\"selectionChanged(component, $event)\"\r\n                              [refresh]=\"refreshValues(component)\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #select\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"select\">\r\n                </wm-sirio-select>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region taglist -->\r\n              <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n                @let taglistValues = getSirioValues(component);\r\n                @let taglistOptions = taglistValues.values$ | async;\r\n                <!-- @wemake4u/form-controls: multiple select with \"select all\" and the \"n selected\" summary\r\n                     (was the tag directive). Errors/warnings come from the validation presenter. -->\r\n                <wm-sirio-select\r\n                              multiple\r\n                              selectAll\r\n                              [selectAllLabel]=\"locale(Texts, 'SelectAll')\"\r\n                              [maxVisibleSelections]=\"component.maxVisibleTags\"\r\n                              [selectionSummary]=\"sirioSelectionSummary\"\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(taglistOptions)\"\r\n                              [loading]=\"taglistValues.state.loading\"\r\n                              [loadingText]=\"locale(Texts, 'Loading')\"\r\n                              [searchable]=\"component.searchable\"\r\n                              [refresh]=\"refreshValues(component)\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #taglist\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"taglist\">\r\n                </wm-sirio-select>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region number -->\r\n              <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-number\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n                              [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [textAlign]=\"component.textAlign || null\"\r\n                              [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n                              [min]=\"evaluateNumber(component.minimum)\"\r\n                              [max]=\"evaluateNumber(component.maximum)\"\r\n                              [decimals]=\"evaluateNumber(component.decimalDigits)\"\r\n                              [requiredOnInput]=\"component.validate?.required\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              #number\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"number\">\r\n                </wm-sirio-number>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region datetime -->\r\n              <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: date 'yyyy-MM-dd', time 'HH:mm', date and time 'yyyy-MM-ddTHH:mm:ss'.\r\n                     min/max only limit the pickers (typed values outside are moved to the nearest limit).\r\n                     Errors/warnings come from the validation presenter. -->\r\n                <ng-container [ngSwitch]=\"component.subtype\">\r\n                  <!-- #region date -->\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    <wm-sirio-date\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [pickLevel]=\"component.pick || 'date'\"\r\n                                [min]=\"evaluateString(component.range?.min) || null\"\r\n                                [max]=\"evaluateString(component.range?.max) || null\"\r\n                                [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                #date\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"date\">\r\n                    </wm-sirio-date>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region time -->\r\n                  <ng-container *ngSwitchCase=\"'time'\">\r\n                    <wm-sirio-time\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'timeLabel'), component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [minuteStep]=\"component.timeInterval || 1\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                #time\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"time\">\r\n                    </wm-sirio-time>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region datetime -->\r\n                  <ng-container *ngSwitchCase=\"'datetime'\">\r\n                    <!-- fieldLabels: dateLabel above the date, timeLabel above the time (as before);\r\n                         completeParts: date only -> 00:00, time only -> today (was the dateTimeCoordinator). -->\r\n                    <wm-sirio-datetime\r\n                                    valueType=\"iso-seconds\"\r\n                                    fieldLabels\r\n                                    completeParts\r\n                                    [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n                                    [timeLabel]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                    [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                    [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                    [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                    [formControlName]=\"component.key\"\r\n                                    [textAlign]=\"component.textAlign || null\"\r\n                                    [min]=\"evaluateString(component.range?.min) || null\"\r\n                                    [max]=\"evaluateString(component.range?.max) || null\"\r\n                                    [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n                                    [minuteStep]=\"component.timeInterval || 1\"\r\n                                    [valueSync]=\"component.valueSync\"\r\n                                    [requiredOnBlur]=\"component.validate?.required\"\r\n                                    #datetime\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"datetime\">\r\n                    </wm-sirio-datetime>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region checkbox -->\r\n              <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: checkbox and toggle (subtype 'toggle'); the markdown label is projected\r\n                       inside the kit <label> as inline HTML. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-checkbox\r\n                                  [toggle]=\"component.subtype === 'toggle'\"\r\n                                  [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                  [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  [requiredOnBlur]=\"component.validate?.required\"\r\n                                  #checkbox\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"checkbox\"><span [innerHTML]=\"toInlineHTML(evaluateTemplate(locale(component, 'label')))\"></span></wm-sirio-checkbox>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region radio -->\r\n              <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: radio buttons and chips (subtype 'chip'); markdown option labels are\r\n                       rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-radio-group\r\n                                     [chips]=\"component.subtype === 'chip'\"\r\n                                     [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                     [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                     [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                     [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                     [formControlName]=\"component.key\"\r\n                                     [options]=\"sirioOptions(getValues(component) | async)\"\r\n                                     [inline]=\"component.displayInline\"\r\n                                     [refresh]=\"refreshValues(component)\"\r\n                                     [valueSync]=\"component.valueSync\"\r\n                                     [requiredOnBlur]=\"component.validate?.required\"\r\n                                     #radio\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"radio\">\r\n                    <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n                  </wm-sirio-radio-group>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region checklist -->\r\n              <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: checkbox list and chips (subtype 'chip'); markdown option labels are\r\n                       rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-checklist\r\n                                   [chips]=\"component.subtype === 'chip'\"\r\n                                   [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                   [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                   [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                   [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                   [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                   [formControlName]=\"component.key\"\r\n                                   [options]=\"sirioOptions(getValues(component) | async)\"\r\n                                   [inline]=\"component.displayInline\"\r\n                                   [refresh]=\"refreshValues(component)\"\r\n                                   [valueSync]=\"component.valueSync\"\r\n                                   [requiredOnBlur]=\"component.validate?.required\"\r\n                                   #checklist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"checklist\">\r\n                    <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n                  </wm-sirio-checklist>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region textarea -->\r\n              <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-textarea\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textCase]=\"toTextCase(component.textCase)\"\r\n                                [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [requiredOnInput]=\"component.validate?.required\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                #textarea\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"textarea\">\r\n                </wm-sirio-textarea>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region filepicker -->\r\n              <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers);\r\n                       upload, delete and download of the stored files are handled by the control. -->\r\n                  <wm-sirio-file-upload class=\"w-100\"\r\n                                     [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                     [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                     [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                     [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                     [buttonLabel]=\"evaluateString(locale(component, 'text')) || locale(Texts, 'Upload')\"\r\n                                     [accept]=\"getMimeTypes(component.accept)\"\r\n                                     [multiple]=\"evaluateBoolean(component.multiple)\"\r\n                                     valueType=\"array\"\r\n                                     details\r\n                                     downloadable\r\n                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                     [instantUpload]=\"evaluateBoolean(component.instantUpload)\"\r\n                                     [uploadHandler]=\"evaluate(component.uploadHandler)\"\r\n                                     [deleteHandler]=\"evaluate(component.deleteHandler)\"\r\n                                     [downloadHandler]=\"evaluate(component.downloadHandler)\"\r\n                                     [removeLabel]=\"locale(Texts, 'Remove')\"\r\n                                     [downloadLabel]=\"locale(Texts, 'Download')\"\r\n                                     [uploadingLabel]=\"locale(Texts, 'Uploading')\"\r\n                                     [deletingLabel]=\"locale(Texts, 'Deleting')\"\r\n                                     [downloadingLabel]=\"locale(Texts, 'Downloading')\"\r\n                                     [formControlName]=\"component.key\"\r\n                                     [requiredOnBlur]=\"component.validate?.required\"\r\n                                     [valueSync]=\"component.valueSync\"\r\n                                     (filesAdded)=\"filesAdded($event, filepicker)\"\r\n                                     (fileError)=\"fileError($event)\"\r\n                                     #filepicker\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"filepicker\">\r\n                  </wm-sirio-file-upload>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region range -->\r\n              <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-slider\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n                              [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #range\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"range\">\r\n                </wm-sirio-slider>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region displayfield -->\r\n              <ng-container *ngSwitchCase=\"'displayfield'\">\r\n                <div class=\"display-field\"\r\n                     #displayfield\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"displayfield\">\r\n                  <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n                    {{ evaluateString(locale(component, 'label')) }}\r\n                    <!-- @wemake4u/form-controls: kit info button with popover, as next to the labels of the controls. -->\r\n                    <wm-sirio-info-button *ngIf=\"component.tooltip\"\r\n                                       [content]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                       [title]=\"evaluateString(locale(component, 'label'))\"\r\n                                       [label]=\"locale(Texts, 'InformationAbout') + ' ' + evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"></wm-sirio-info-button>\r\n                  </div>\r\n                  <div [class.sirio-form-control]=\"component.fieldtype !== 'filelist'\"\r\n                       [style.text-align]=\"component.fieldtype !== 'filelist' ? (component.textAlign || null) : null\"\r\n                       class=\"data-display\" [ngClass]=\"component.fieldtype\">\r\n                    <ng-container [ngSwitch]=\"component.fieldtype\">\r\n                      <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                        <ng-container *ngTemplateOutlet=\"checkboxTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchCase=\"'text'\">\r\n                        <ng-container *ngTemplateOutlet=\"formattedTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchCase=\"'filelist'\">\r\n                        <ng-container *ngTemplateOutlet=\"filelistTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchDefault>\r\n                        <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #checkboxTemplate>\r\n                      <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n                    </ng-template>\r\n                    <ng-template #defaultTemplate>\r\n                      <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n                        <ng-container *ngIf=\"getValues(component) | async as values\">\r\n                          {{ toLabel(evaluate(component.expression), values) }}\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                    <ng-template #simpleTemplate>\r\n                      {{ evaluate(component.expression) }}\r\n                    </ng-template>\r\n                    <ng-template #formattedTemplate>\r\n                      <div class=\"text-paragraph\" style=\"margin-top: -6px;\"\r\n                           [innerHTML]=\"toHTML(evaluateTemplate(component.expression))\">\r\n                      </div>\r\n                    </ng-template>\r\n                    <ng-template #filelistTemplate>\r\n                      <ng-container *ngIf=\"{ files: evaluate(component.expression) } as expr\"\r\n                                    fileHandler\r\n                                    #fileHandlerRef=\"fileHandler\"\r\n                                    [downloadHandler]=\"evaluate(component.downloadHandler)\">\r\n                        <ng-container *ngIf=\"expr.files?.length > 0\">\r\n                          <div *ngFor=\"let file of expr.files\" class=\"row w-100 p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n                            <div class=\"col-auto ms-auto\">\r\n                              <span [ngClass]=\"fileHandlerRef.getIcon(file)\" class=\"fas fa-24 mt-1 me-3 ms-1\" aria-hidden=\"true\"></span>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                              <p class=\"mb-0\"><span class=\"h6 sirio-text-link sirio-font-weight-700\">{{ file.name }}</span></p>\r\n                              {{ fileHandlerRef.getExtension(file) }}, {{ fileHandlerRef.getSize(file) }}\r\n                            </div>\r\n                            <div class=\"col-auto ms-auto d-lg-flex flex-column align-items-end\">\r\n                              <ng-container *ngIf=\"fileHandlerRef.canDownload(file)\">\r\n                                <div *ngIf=\"fileHandlerRef.isDownloading(file)\" class=\"mt-2\">\r\n                                  <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Downloading') }}</span>\r\n                                  <span class=\"fas fa-arrows-rotate fa-spin ms-2\" aria-hidden=\"true\"></span>\r\n                                </div>\r\n                                <!-- Buttons, not links: announced as buttons, activated also with Space. -->\r\n                                <button *ngIf=\"fileHandlerRef.isLocal(file)\"\r\n                                   type=\"button\"\r\n                                   class=\"sirio-text-link fp-link-button\"\r\n                                   (click)=\"fileHandlerRef.downloadLocal(file)\"\r\n                                   [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n                                   [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n                                  <span class=\"d-none d-sm-inline-block\">\r\n                                    {{ locale(Texts, 'Download') }}\r\n                                  </span>\r\n                                  <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n                                </button>\r\n                                <button *ngIf=\"fileHandlerRef.isHandled(file)\"\r\n                                   type=\"button\"\r\n                                   class=\"sirio-text-link fp-link-button\"\r\n                                   (click)=\"fileHandlerRef.downloadHandled(file)\"\r\n                                   [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n                                   [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n                                  <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Download') }}</span>\r\n                                  <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n                                </button>\r\n                              </ng-container>\r\n                            </div>\r\n                          </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!(expr.files?.length > 0)\">\r\n                          <div class=\"row p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n                            <div class=\"col\">\r\n                              <p class=\"mb-0\">\r\n                                <span class=\"h6 sirio-text-link sirio-font-weight-700\">Nessun file presente</span>\r\n                              </p>\r\n                            </div>\r\n                          </div>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                  </div>\r\n                  <p *ngIf=\"component.description\" class=\"sirio-form-text-help\">\r\n                    {{ evaluateString(locale(component, 'description')) }}\r\n                  </p>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region dynamiclist -->\r\n              <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n                <ng-container *ngIf=\"resolvePath(component.path) as formGroup\">\r\n                  <ng-container [formGroup]=\"formGroup\">\r\n                    <!-- data-fp-repeater: root of the repeater, where the focus goes after add / remove / move. -->\r\n                    <div [formArrayName]=\"component.key\"\r\n                                  data-fp-repeater\r\n                                  [formGroup]=\"formGroup\"\r\n                                  [recursion]=\"component\"\r\n                                  #recursion=\"recursion\">\r\n                      <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n                      <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n                        <ng-template navigatorState\r\n                                     [total]=\"formArray.controls.length\"\r\n                                     #state=\"navigatorState\"></ng-template>\r\n                        <ng-container *ngIf=\"component.subtype == 'navigation'\">\r\n                          <ng-container *ngTemplateOutlet=\"navigation; context: { formArray: formArray, state: state }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n                          <ng-container [ngSwitch]=\"component.subtype\">\r\n                            <!-- #region tab -->\r\n                            <ng-container *ngSwitchCase=\"'tab'\">\r\n                              <!-- @wemake4u/form-controls: activateAdded selects the added tab (after a removal the library selects the one\r\n                                   taking its place); focusContent moves the focus to the first field of the panel. -->\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"tabInstance\">\r\n                                <wm-sirio-tabs [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                            [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                            [focusablePanels]=\"false\"\r\n                                            activateAdded\r\n                                            focusContent\r\n                                            #tabInstance>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                      <wm-sirio-tab [label]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n                                                 [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n                                        <ng-template wmSirioTabContent>\r\n                                          <div>\r\n                                            <div>\r\n                                              <app-dynamic-fields [form]=\"form\"\r\n                                                                  [formGroup]=\"getFormGroup(item)\"\r\n                                                                  [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                  [rows]=\"component.rows\"\r\n                                                                  [identity]=\"component.id\"\r\n                                                                  [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                  [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                            </div>\r\n                                            <div style=\"text-align:right\">\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                            </div>\r\n                                          </div>\r\n                                        </ng-template>\r\n                                      </wm-sirio-tab>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </wm-sirio-tabs>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region accordion -->\r\n                            <ng-container *ngSwitchCase=\"'accordion'\">\r\n                              <!-- @wemake4u/form-controls: activateAdded opens the first section at the start and the added one (after a removal\r\n                                   the library opens the one taking its place); focusContent moves the focus to its first field. -->\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclistaccordion\">\r\n                                <wm-sirio-accordion exclusive\r\n                                                 activateAdded\r\n                                                 focusContent\r\n                                                 #dynamiclistaccordion>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                      <wm-sirio-accordion-item [title]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n                                                            [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n                                        <ng-template wmSirioAccordionContent>\r\n                                          <div>\r\n                                            <div>\r\n                                              <app-dynamic-fields [form]=\"form\"\r\n                                                                  [formGroup]=\"getFormGroup(item)\"\r\n                                                                  [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                  [rows]=\"component.rows\"\r\n                                                                  [identity]=\"component.id\"\r\n                                                                  [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                  [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                            </div>\r\n                                            <div style=\"text-align:right\">\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                            </div>\r\n                                          </div>\r\n                                        </ng-template>\r\n                                      </wm-sirio-accordion-item>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </wm-sirio-accordion>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region table -->\r\n                            <ng-container *ngSwitchCase=\"'table'\">\r\n                              <div #dynamiclist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclist\">\r\n                                <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n                                      <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n                                        <tr>\r\n                                          <td class=\"content-cell\">\r\n                                            <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n                                              <div>\r\n                                                <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                                  <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                                  <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                                </div>\r\n                                                <div>\r\n                                                  <app-dynamic-fields [form]=\"form\"\r\n                                                                      [formGroup]=\"formItem\"\r\n                                                                      [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                      [rows]=\"component.rows\"\r\n                                                                      [identity]=\"component.id\"\r\n                                                                      [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                      [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                                </div>\r\n                                              </div>\r\n                                            </div>\r\n                                          </td>\r\n                                          <td class=\"command-cell\">\r\n                                            <div>\r\n                                              <ng-container *ngIf=\"recursionData.itemsArray\">\r\n                                                <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n                                              </ng-container>\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i, compact: true }\"></ng-container>\r\n                                            </div>\r\n                                          </td>\r\n                                        </tr>\r\n                                        <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n                                          <td colspan=\"2\" class=\"recursion-cell\">\r\n                                            <div class=\"layout\">\r\n                                              <div class=\"recursion-toggle\">\r\n                                                <!-- @wemake4u/form-controls: open at the start (as before); label for screen readers. -->\r\n                                                <button type=\"button\" wmSirioButton=\"ghost\"\r\n                                                        [wmSirioCollapseToggle]=\"collapse\"\r\n                                                        iconOnly\r\n                                                        [icon]=\"collapse.expanded() ? 'fa-chevron-down' : 'fa-chevron-right'\"\r\n                                                        [label]=\"recursionData.itemsArray.length + ' elementi presenti'\"></button>\r\n                                              </div>\r\n                                              <div *ngIf=\"!collapse.expanded()\" class=\"recursion-title\">\r\n                                                <div class=\"recursion-text\">\r\n                                                  {{ recursionData.itemsArray.length }} elementi presenti\r\n                                                </div>\r\n                                              </div>\r\n                                              <div class=\"recursion-content\">\r\n                                                <div wmSirioCollapse #collapse=\"wmSirioCollapse\" [expanded]=\"true\">\r\n                                                  <div *ngIf=\"collapse.expanded()\" style=\"margin-bottom: -11px;\">\r\n                                                    <app-dynamic-fields [form]=\"form\"\r\n                                                                        [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n                                                                        [readOnly]=\"readOnly\"\r\n                                                                        [recursionLevel]=\"recursionLevel+1\"\r\n                                                                        [rows]=\"recursion.getComponentRows()\"\r\n                                                                        [identity]=\"component.id\"\r\n                                                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                                  </div>\r\n                                                </div>\r\n                                              </div>\r\n                                            </div>\r\n                                          </td>\r\n                                        </tr>\r\n                                      </ng-container>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </table>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region navigation -->\r\n                            <ng-container *ngSwitchCase=\"'navigation'\">\r\n                              <div>\r\n                                <ng-container *ngIf=\"formArray.controls[state.index] as item\">\r\n                                  <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: state.index } as event\">\r\n                                        <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                        <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                      </div>\r\n                                      <div>\r\n                                        <app-dynamic-fields [form]=\"form\"\r\n                                                            [formGroup]=\"getFormGroup(item)\"\r\n                                                            [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                            [rows]=\"component.rows\"\r\n                                                            [identity]=\"component.id\"\r\n                                                            [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                            [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                      </div>\r\n                                    </div>\r\n                                  </div>\r\n                                </ng-container>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region default -->\r\n                            <ng-container *ngSwitchDefault>\r\n                              <div #dynamiclist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclist\"\r\n                                   selectionGroup\r\n                                   [selectionMode]=\"evaluateString(component.selection?.mode)\"\r\n                                   [selectableClass]=\"evaluateString(component.selection?.selectableClass)\"\r\n                                   [selectedClass]=\"evaluateString(component.selection?.selectedClass)\"\r\n                                   [onSelectionChanged]=\"callExpression(component.selection?.selectionChanged)\">\r\n                                <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                  <div [selectionItem]=\"item\"\r\n                                       [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                        <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                        <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                      </div>\r\n                                      <div>\r\n                                        <app-dynamic-fields [form]=\"form\"\r\n                                                            [formGroup]=\"getFormGroup(item)\"\r\n                                                            [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                            [rows]=\"component.rows\"\r\n                                                            [identity]=\"component.id\"\r\n                                                            [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                            [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                      </div>\r\n                                      <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n                                        <div style=\"text-align:right\">\r\n                                          <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n                                          <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                        </div>\r\n                                      </ng-container>\r\n                                    </div>\r\n                                  </div>\r\n                                </ng-container>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                          </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n                          <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n                        </ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"feedback\"></ng-container>\r\n                        <ng-container *ngIf=\"recursionLevel == 0 && component.subtype !== 'navigation'\">\r\n                          <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <!-- #region templates -->\r\n                <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n                    <!-- Name with the position (\"Sposta Sù elemento 3 di 5\"): the visible text first, the rest for screen readers. -->\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"moveUpItem(formArray, i, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"up\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-arrow-up\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"upLabel + ' ' + itemPosition(i, formArray.length)\">{{ upLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"moveDownItem(formArray, i, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"down\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-arrow-down\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"downLabel + ' ' + itemPosition(i, formArray.length)\">{{ downLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"removeItem(formArray, i, true, state, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"remove\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-trash\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"removeLabel + ' ' + itemPosition(i, formArray.length)\">{{ removeLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"addItem(formArray, state)\"\r\n                            data-fp-action=\"add\"\r\n                            class=\"add-item\"\r\n                            icon=\"fa-plus\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"addLabel\">{{ addLabel }}</button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowReorder\">\r\n                    <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { item: formArray.at(i)?.value, index: i, total: state.total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, state: state, i: i, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: state.total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, state: state, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #feedback>\r\n                  <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                    <div>\r\n                      <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                    <div>\r\n                      <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #navigation let-formArray=\"formArray\" let-state=\"state\">\r\n                  <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n                  <wm-sirio-pagination [showItems]=\"false\"\r\n                                    [pageSize]=\"1\"\r\n                                    [total]=\"state.total\"\r\n                                    [page]=\"state.index + 1\"\r\n                                    (pageChange)=\"state.index = $event - 1\"\r\n                                    [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n                                    [ofLabel]=\"locale(Texts, 'Of')\"\r\n                                    [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n                                    [pageLabel]=\"locale(Texts, 'Element')\"\r\n                                    [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n                                    [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n                                    [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n                    <div class=\"actions\">\r\n                      <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n                      <ng-container *ngIf=\"state.total && state.index != -1\">\r\n                        <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: state.index }\"></ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </wm-sirio-pagination>\r\n                </ng-template>\r\n                <!-- #endregion -->\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region group -->\r\n              <ng-container *ngSwitchCase=\"'group'\">\r\n                <div *ngIf=\"resolveBoundGroup(component) as resolvedGroup\"\r\n                     [ngClass]=\"getGroupOutline(component)\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n                    <label>{{ labelText }}</label>\r\n                  </ng-container>\r\n                  <div #group\r\n                       [register]=\"component\"\r\n                       [componentRef]=\"group\">\r\n                    <app-dynamic-fields [form]=\"form\"\r\n                                        [formGroup]=\"resolvedGroup\"\r\n                                        [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [rows]=\"component.rows\"\r\n                                        [identity]=\"component.id\"\r\n                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tab -->\r\n              <ng-container *ngSwitchCase=\"'tab'\">\r\n                <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n                  <ng-container *ngIf=\"panels.length > 0\">\r\n                    <!-- @wemake4u/form-controls: focusContent moves the focus into the panel shown at the start or selected (not for the\r\n                         arrow keys), except for the panels with disableAutoFocus. -->\r\n                    <wm-sirio-tabs #tabInstance\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"tabInstance\"\r\n                                [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                [line]=\"!!component.navigation\"\r\n                                [vertical]=\"!!component.vertical\"\r\n                                [focusablePanels]=\"false\"\r\n                                focusContent>\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <wm-sirio-tab *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                   [label]=\"evaluateString(locale(panel, 'label'))\"\r\n                                   [icon]=\"evaluateString(panel.icon) || null\"\r\n                                   [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n                                   [badge]=\"evaluate(panel.badge)\"\r\n                                   [focusContent]=\"panel.disableAutoFocus !== true\">\r\n                          <ng-template wmSirioTabContent>\r\n                            <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                              <app-dynamic-fields [form]=\"form\"\r\n                                                  [formGroup]=\"resolvePath(panel.path)\"\r\n                                                  [rows]=\"template.rows\"\r\n                                                  [identity]=\"component.id\"\r\n                                                  [identityIndex]=\"i\"\r\n                                                  [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n                                                  [disableAutoFocus]=\"template.disableAutoFocus\"\r\n                                                  [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n                            </ng-container>\r\n                          </ng-template>\r\n                        </wm-sirio-tab>\r\n                      </ng-container>\r\n                    </wm-sirio-tabs>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region accordion -->\r\n              <ng-container *ngSwitchCase=\"'accordion'\">\r\n                <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n                  <ng-container *ngIf=\"panels.length > 0\">\r\n                    <!-- exclusive: one section open at a time, as with ngx-sirio-lib. -->\r\n                    <wm-sirio-accordion exclusive\r\n                                     #accordion\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"accordion\">\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <ng-container *ngIf=\"resolvePath(panel.path) as formGroup\">\r\n                          <!-- Content not lazy (as before): the fields of closed sections stay in the form. -->\r\n                          <wm-sirio-accordion-item *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                                [title]=\"evaluateString(locale(panel, 'label'))\"\r\n                                                [badge]=\"evaluate(panel.badge)\"\r\n                                                [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n                            <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                              <app-dynamic-fields [form]=\"form\"\r\n                                                  [formGroup]=\"formGroup\"\r\n                                                  [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n                                                  [rows]=\"template.rows\"\r\n                                                  [identity]=\"component.id\"\r\n                                                  [identityIndex]=\"i\"\r\n                                                  [disableAutoFocus]=\"template.disableAutoFocus\"\r\n                                                  [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n                            </ng-container>\r\n                          </wm-sirio-accordion-item>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </wm-sirio-accordion>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region text -->\r\n              <ng-container *ngSwitchCase=\"'text'\">\r\n                <div [collapse]=\"component.collapseTo\"\r\n                     [onCollapse]=\"callExpression(component.onCollapse)\"\r\n                     [onExpand]=\"callExpression(component.onExpand)\"\r\n                     #text\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"text\">\r\n                  <!--Reset View Context-->\r\n                  <div tabindex=\"0\" style=\"display:none\"></div>\r\n                  <div class=\"flex\">\r\n                    <div class=\"text-paragraph\" markdown\r\n                         [onAnchorClick]=\"callExpression(component.anchorClick)\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                    <ng-container *ngIf=\"component.tooltip\">\r\n                      <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n                                         [label]=\"locale(Texts, 'Information')\"></wm-sirio-info-button>\r\n                      <ng-template #tooltipTemplate>\r\n                        <div class=\"sirio-tooltip-body\">\r\n                          <div class=\"text-paragraph\"\r\n                               [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n                          </div>\r\n                        </div>\r\n                      </ng-template>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region html -->\r\n              <ng-container *ngSwitchCase=\"'html'\">\r\n                <div class=\"html-paragraph\"\r\n                     [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n                     #html\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"html\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region image -->\r\n              <ng-container *ngSwitchCase=\"'image'\">\r\n                <!-- || '': an alt expression giving null would be read aloud as \"null\". -->\r\n                <img [src]=\"evaluateString(component.source)\"\r\n                     [alt]=\"evaluateString(locale(component, 'alt')) || ''\"\r\n                     style=\"width: 100%;height: 100%;\"\r\n                     #image\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"image\">\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region table -->\r\n              <ng-container *ngSwitchCase=\"'table'\">\r\n                <label *ngIf=\"evaluateString(locale(component, 'label')) as tableLabel\">{{ tableLabel }}</label>\r\n                @if (useDataGrid) {\r\n                  <!-- Sirio data grid (DynamicFieldsComponent.useDataGrid): configuration from SirioGridService. -->\r\n                  @let grid = getSirioGrid(component);\r\n                  @let rows = getSirioRows(component, grid);\r\n                  <!-- Paginator with rowCount > 0, or when the server source pages its rows. -->\r\n                  @let pagedSize = grid.pageable ? null : rows.pagedSize();\r\n                  @let gridHeight = component.autoHeight ? null : evaluateSize(component.height);\r\n                  <wm-sirio-data-grid #table\r\n                                      class=\"fp-data-grid\"\r\n                                      variant=\"dark\"\r\n                                      size=\"sm\"\r\n                                      [filterButton]=\"component.floatingFilter === true ? 'always' : 'none'\"\r\n                                      [showFilterChips]=\"false\"\r\n                                      paginationVariant=\"compact\"\r\n                                      [caption]=\"evaluateString(locale(component, 'label'))\"\r\n                                      [data]=\"rows.data()\"\r\n                                      [dataSource]=\"rows.dataSource\"\r\n                                      [loading]=\"rows.loading()\"\r\n                                      [emptyText]=\"rows.failed() ? locale(Texts, 'LoadingFailed') : 'Nessun risultato'\"\r\n                                      [loadErrorText]=\"locale(Texts, 'LoadingFailed')\"\r\n                                      [rowId]=\"grid.rowId\"\r\n                                      [selection]=\"sirioSelection(component)\"\r\n                                      singleSelectionControl=\"checkbox\"\r\n                                      [selectionColumn]=\"grid.checkboxes\"\r\n                                      [selectOnRowClick]=\"grid.checkboxes && grid.clickSelect\"\r\n                                      selectAll=\"filtered\"\r\n                                      hideUnselectable\r\n                                      [rowSelectable]=\"grid.rowSelectable\"\r\n                                      [selected]=\"grid.selected()\"\r\n                                      (selectedChange)=\"onSirioSelectionChanged(component, grid, $event)\"\r\n                                      [rowClass]=\"grid.rowClass\"\r\n                                      [rowStyle]=\"grid.rowStyle\"\r\n                                      [pageable]=\"grid.pageable || pagedSize !== null\"\r\n                                      [pageSize]=\"pagedSize ?? grid.pageSize\"\r\n                                      [pageSizeOptions]=\"sirioPageSizes(pagedSize)\"\r\n                                      [rowNumbers]=\"grid.rowNumbers\"\r\n                                      rowNumberHeader=\"#\"\r\n                                      [resizable]=\"grid.resizable\"\r\n                                      [reorderable]=\"grid.reorderable\"\r\n                                      filterOperators\r\n                                      [filterRow]=\"component.floatingFilter === true\"\r\n                                      [filterYesLabel]=\"locale(Texts, 'True')\"\r\n                                      [filterNoLabel]=\"locale(Texts, 'False')\"\r\n                                      [height]=\"gridHeight\"\r\n                                      [stickyHeader]=\"!!gridHeight\"\r\n                                      [minHeight]=\"evaluateSize(component.minHeight)\"\r\n                                      [refresh]=\"refreshRowSource(component)\"\r\n                                      [register]=\"component\"\r\n                                      [componentRef]=\"table\">\r\n                    @for (col of grid.columns; track col.id) {\r\n                      <wm-sirio-grid-column [field]=\"col.field\"\r\n                                            [header]=\"col.header\"\r\n                                            [value]=\"col.value\"\r\n                                            [format]=\"col.format\"\r\n                                            [align]=\"col.align\"\r\n                                            [filter]=\"col.filter\"\r\n                                            [filterOptions]=\"col.filterOptions\"\r\n                                            [filterMultiple]=\"col.filterMultiple\"\r\n                                            [filterOperators]=\"col.filterOperators\"\r\n                                            [sortable]=\"col.sortable\"\r\n                                            [resizable]=\"col.resizable\"\r\n                                            [wrap]=\"col.wrap\"\r\n                                            [mono]=\"col.mono\"\r\n                                            [fit]=\"col.fit\"\r\n                                            [fixed]=\"col.fixed\"\r\n                                            [flex]=\"col.flex\"\r\n                                            [width]=\"col.width\"\r\n                                            [minWidth]=\"col.minWidth\"\r\n                                            [maxWidth]=\"col.maxWidth\"\r\n                                            [group]=\"col.group\"\r\n                                            [hidden]=\"col.actions && evaluateBoolean(component.suppressActions) === true\"\r\n                                            [cellClass]=\"col.cellClass\"\r\n                                            [cellStyle]=\"col.cellStyle\"\r\n                                            [headerClass]=\"col.headerClass\"\r\n                                            [headerStyle]=\"col.headerStyle\">\r\n                        @if (col.renderer; as renderer) {\r\n                          <ng-template wmSirioGridCell let-row let-value=\"value\" let-index=\"index\">\r\n                            @if (renderer.kind === 'html') {\r\n                              <span [innerHTML]=\"renderer.html(row, value)\"></span>\r\n                            } @else {\r\n                              <fp-sirio-cell-host [renderer]=\"renderer.type\" [params]=\"renderer.params(row, value, index)\" />\r\n                            }\r\n                          </ng-template>\r\n                        }\r\n                      </wm-sirio-grid-column>\r\n                    }\r\n                  </wm-sirio-data-grid>\r\n                } @else {\r\n                <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n                                 [gridOptions]=\"getGridOptions(component)\"\r\n                                 [selectable]=\"evaluateBoolean(component.selectable)\"\r\n                                 [multiSelect]=\"evaluateBoolean(component.multiSelect)\"\r\n                                 (selectionChanged)=\"onGridSelectionChanged(component, $event)\"\r\n                                 [suppressActions]=\"evaluateBoolean(component.suppressActions)\"\r\n                                 [columns]=\"component.columns || evaluateWithHydratation(component.columnsExpression) || []\"\r\n                                 [rowSource]=\"getRowSource(component)\"\r\n                                 [refresh]=\"refreshRowSource(component)\"\r\n                                 [style.height]=\"component.autoHeight ? null : evaluateSize(component.height)\"\r\n                                 [style.min-height]=\"evaluateSize(component.minHeight)\"\r\n                                 [formGroup]=\"formGroup\"\r\n                                 #table\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"table\" />\r\n                }\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region button -->\r\n              <ng-container *ngSwitchCase=\"'button'\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: color \"ghost\" = plain sirio-btn; icon on the left unless iconPosition \"right\". -->\r\n                  <button type=\"button\"\r\n                          [wmSirioButton]=\"evaluateVariant(component.color)\"\r\n                          [disabled]=\"evaluateBoolean(component.disabled) ?? false\"\r\n                          [icon]=\"evaluateString(component.icon) || null\"\r\n                          [iconPosition]=\"component.iconPosition == 'right' ? 'end' : 'start'\"\r\n                          (click)=\"clickButton(component, $event)\"\r\n                          #button\r\n                          [register]=\"component\"\r\n                          [componentRef]=\"button\">{{ evaluateString(locale(component, 'label')) }}</button>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region separator -->\r\n              <ng-container *ngSwitchCase=\"'separator'\">\r\n                <div class=\"separator\"\r\n                     #separator\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"separator\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region spacer -->\r\n              <ng-container *ngSwitchCase=\"'spacer'\">\r\n                <div style=\"width: 100%\"\r\n                     [style.height.px]=\"component.height\"\r\n                     #spacer\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"spacer\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region iframe -->\r\n              <ng-container *ngSwitchCase=\"'iframe'\">\r\n                <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <iframe [src]=\"evaluateUrl(component.url)\"\r\n                        [title]=\"evaluateString(locale(component, 'label'))\"\r\n                        [style.width]=\"'100%'\"\r\n                        [style.height.px]=\"component.height\"\r\n                        [frameSecurity]=\"component.security\"\r\n                        #iframe\r\n                        [register]=\"component\"\r\n                        [componentRef]=\"iframe\">\r\n                </iframe>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region alert -->\r\n              <ng-container *ngSwitchCase=\"'alert'\">\r\n                <!-- @wemake4u/form-controls: preventClose → no close button; markdown as block content. -->\r\n                <wm-sirio-alert [type]=\"component.role || 'info'\"\r\n                             [closeLabel]=\"locale(Texts, 'Close')\"\r\n                             [dismissible]=\"!evaluateBoolean(component.preventClose)\"\r\n                             #alert\r\n                             [register]=\"component\"\r\n                             [componentRef]=\"alert\">\r\n                  <div wmSirioAlertContent\r\n                       class=\"text-paragraph\"\r\n                       [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                  </div>\r\n                </wm-sirio-alert>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region notice -->\r\n              <ng-container *ngSwitchCase=\"'notice'\">\r\n                <!-- @wemake4u/form-controls: light notice (kit default); markdown as block content. -->\r\n                <wm-sirio-notify #notice\r\n                              [title]=\"evaluateString(locale(component, 'title'))\"\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"notice\">\r\n                  <div wmSirioNotifyContent\r\n                       class=\"text-paragraph\"\r\n                       [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                  </div>\r\n                </wm-sirio-notify>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tooltip -->\r\n              <ng-container *ngSwitchCase=\"'tooltip'\">\r\n                <!-- @wemake4u/form-controls: the title is the popover title of the kit. -->\r\n                <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n                                   [title]=\"evaluateString(locale(component, 'title'))\"\r\n                                   [label]=\"evaluateString(locale(component, 'title')) || locale(Texts, 'Information')\"\r\n                                   #tooltip\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"tooltip\"></wm-sirio-info-button>\r\n                <ng-template #tooltipTemplate>\r\n                  <div class=\"sirio-tooltip-body\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </div>\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region chart -->\r\n              <ng-container *ngSwitchCase=\"'chart'\">\r\n                <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <ng-container [observe]=\"getChartData(component)\"\r\n                     [callback]=\"invalidateChart(component)\">\r\n                  <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n                             [style.height.px]=\"component.height\"\r\n                             #chart\r\n                             [register]=\"component\"\r\n                             [componentRef]=\"chart\" />\r\n                </ng-container> \r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region component -->\r\n              <ng-container *ngSwitchCase=\"'component'\">\r\n                <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n                  <label>{{ labelText }}</label>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n                  <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n                                    [formGroup]=\"resolvePath(component.path)\"\r\n                                    #componentHost\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"componentHost\" />\r\n                  <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                    <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                  <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n                </ng-container>\r\n                <ng-template #noInputTemplate>\r\n                  <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n                                    #componentHost\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"componentHost\" />\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region templatehost -->\r\n              <ng-container *ngSwitchCase=\"'templatehost'\">\r\n                <ng-container *ngIf=\"getTemplate(component.template) as template\">\r\n                  <div #template\r\n                       [register]=\"component\"\r\n                       [componentRef]=\"template\">\r\n                    <app-dynamic-fields [form]=\"form\"\r\n                                        [formGroup]=\"resolvePath(component.path)\"\r\n                                        [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [rows]=\"template?.rows\"\r\n                                        [identity]=\"component.id\"\r\n                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region treelist -->\r\n              <ng-container *ngSwitchCase=\"'treelist'\">\r\n                <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <div class=\"treelist\"\r\n                     [style.height]=\"component.height ? evaluateSize(component.height): null\"\r\n                     *ngIf=\"getTreeColumns(component) as columns\">\r\n                  <ng-container *ngIf=\"((getTreeSource(component) | async) ?? []) as rows\">\r\n                    <table #treelist\r\n                           [register]=\"component\"\r\n                           [componentRef]=\"treelist\"\r\n                           [treelist]=\"rows\">\r\n                      <colgroup>\r\n                        <col *ngFor=\"let column of columns\"\r\n                             [style.width]=\"evaluateSize(column.width)\">\r\n                      </colgroup>\r\n                      <thead>\r\n                        <tr>\r\n                          <th scope=\"col\" *ngFor=\"let column of columns\"\r\n                              [ngClass]=\"getClass(column)\"\r\n                              [style.text-align]=\"column.align\">\r\n                            {{column.label}}\r\n                          </th>\r\n                        </tr>\r\n                      </thead>\r\n                      <tbody>\r\n                        <ng-container>\r\n                          <tr *ngFor=\"let row of rows\"\r\n                              [attr.data-id]=\"row.id\"\r\n                              [attr.data-parent]=\"row.parentId\"\r\n                              [attr.data-expanded]=\"row.expanded ? 'true': 'false'\"\r\n                              [ngClass]=\"row.meta?.['cssClass']\">\r\n                            <td *ngFor=\"let column of columns; let i = index\"\r\n                                [ngClass]=\"getClass(column)\">\r\n                              <div [style.justify-content]=\"getJustify(column.align)\">\r\n                                <span *ngIf=\"i==component.expanderColumn\"\r\n                                      [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\r\n                                      [style.padding-left]=\"evaluateSize(20 * row.level)\"\r\n                                      class=\"toggle\"></span>\r\n                                <span class=\"text\"\r\n                                      [title]=\"row.data[column.key]\">\r\n                                  {{ row.data[column.key] }}\r\n                                </span>\r\n                              </div>\r\n                            </td>\r\n                          </tr>\r\n                        </ng-container>\r\n                      </tbody>\r\n                    </table>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region navigator -->\r\n              <ng-container *ngSwitchCase=\"'navigator'\">\r\n                <div  #navigator\r\n                      [register]=\"component\"\r\n                      [componentRef]=\"navigator\">\r\n                  <div navigatorState\r\n                       [index]=\"evaluateNumber(component.index) ?? 0\"\r\n                       [total]=\"evaluateNumber(component.total) ?? 0\"\r\n                       (indexChange)=\"evaluateWithEventAsHandler(component.selectionChanged, { index: $event, count: state.total })\"\r\n                       #state=\"navigatorState\">\r\n                    <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n                    <wm-sirio-pagination [showItems]=\"false\"\r\n                                      [pageSize]=\"1\"\r\n                                      [total]=\"state.total\"\r\n                                      [page]=\"state.index + 1\"\r\n                                      (pageChange)=\"state.index = $event - 1\"\r\n                                      [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n                                      [ofLabel]=\"locale(Texts, 'Of')\"\r\n                                      [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n                                      [pageLabel]=\"locale(Texts, 'Element')\"\r\n                                      [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n                                      [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n                                      [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n                      <div class=\"actions\">\r\n                        <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { total: state.total }\"></ng-container>\r\n                        <ng-container *ngIf=\"state.total && state.index != -1\">\r\n                          <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { i: state.index, total: state.total }\"></ng-container>\r\n                        </ng-container>\r\n                      </div>\r\n                    </wm-sirio-pagination>\r\n                  </div>\r\n                </div>\r\n                <ng-template #buttonsAdd let-total=\"total\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnAdd; context: { total: total }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsRemove let-i=\"i\" let-total=\"total\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { index: i, total: total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnRemove; context: { i: i, total: total }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnAdd let-total=\"total\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            class=\"add-item\"\r\n                            (click)=\"evaluateWithEventAsHandler(component.addExpression, { total: total })\"\r\n                            icon=\"fa-plus\" iconPosition=\"start\">{{ addLabel }}</button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnRemove let-i=\"i\" let-total=\"total\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            class=\"remove-item\"\r\n                            (click)=\"evaluateWithEventAsHandler(component.removeExpression, { index: i, total: total })\"\r\n                            icon=\"fa-trash\" iconPosition=\"start\">{{ removeLabel }}<span class=\"sr-only\"> {{ itemPosition(i, total) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n",
+			template: "<div [ngClass]=\"getFormClass()\">\r\n  <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n    <div class=\"row field-set\">\r\n      <ng-container *ngFor=\"let component of row.components\">\r\n        <ng-container [ngSwitch]=\"component.type\">\r\n          <div [ngClass]=\"getComponentClass(component)\"\r\n               [style]=\"getComponentStyle(component)\"\r\n               [ngAttrs]=\"getComponentAttrs(component)\"\r\n               *ngIf=\"shouldRender(component)\">\r\n            <div *ngIf=\"canShow(component)\">\r\n              <!-- #region textfield -->\r\n              <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-textbox type=\"text\"\r\n                               [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                               [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                               [requiredIndicator]=\"isFieldRequired(component)\"\r\n                               [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                               [placeholder]=\"locale(component, 'placeholder')\"\r\n                               [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                               [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n                               [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n                               [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                               [formControlName]=\"component.key\"\r\n                               [textCase]=\"toTextCase(component.textCase)\"\r\n                               [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                               [textAlign]=\"component.textAlign || null\"\r\n                               [requiredOnInput]=\"component.validate?.required\"\r\n                               [requiredOnBlur]=\"component.validate?.required\"\r\n                               [valueSync]=\"component.valueSync\"\r\n                               #textfield\r\n                               [register]=\"component\"\r\n                               [componentRef]=\"textfield\">\r\n                </wm-sirio-textbox>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region select -->\r\n              <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n                @let selectValues = getSirioValues(component);\r\n                @let selectOptions = selectValues.values$ | async;\r\n                <!-- @wemake4u/form-controls: strict = the value must be one of the options (was the dropdown directive);\r\n                     searchable shows the selection in the search field (was prefillSearch).\r\n                     Errors/warnings come from the validation presenter. -->\r\n                <wm-sirio-select\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [requiredIndicator]=\"isFieldRequired(component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(selectOptions)\"\r\n                              [loading]=\"selectValues.state.loading\"\r\n                              [loadingText]=\"locale(Texts, 'Loading')\"\r\n                              [searchable]=\"component.searchable\"\r\n                              [strict]=\"true\"\r\n                              (optionSelected)=\"selectionChanged(component, $event)\"\r\n                              [refresh]=\"refreshValues(component)\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #select\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"select\">\r\n                </wm-sirio-select>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region taglist -->\r\n              <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n                @let taglistValues = getSirioValues(component);\r\n                @let taglistOptions = taglistValues.values$ | async;\r\n                <!-- @wemake4u/form-controls: multiple select with \"select all\" and the \"n selected\" summary\r\n                     (was the tag directive). Errors/warnings come from the validation presenter. -->\r\n                <wm-sirio-select\r\n                              multiple\r\n                              selectAll\r\n                              [selectAllLabel]=\"locale(Texts, 'SelectAll')\"\r\n                              [maxVisibleSelections]=\"component.maxVisibleTags\"\r\n                              [selectionSummary]=\"sirioSelectionSummary\"\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [requiredIndicator]=\"isFieldRequired(component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(taglistOptions)\"\r\n                              [loading]=\"taglistValues.state.loading\"\r\n                              [loadingText]=\"locale(Texts, 'Loading')\"\r\n                              [searchable]=\"component.searchable\"\r\n                              [refresh]=\"refreshValues(component)\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #taglist\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"taglist\">\r\n                </wm-sirio-select>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region number -->\r\n              <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-number\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [requiredIndicator]=\"isFieldRequired(component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [placeholder]=\"locale(component, 'placeholder')\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n                              [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [textAlign]=\"component.textAlign || null\"\r\n                              [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n                              [min]=\"evaluateNumber(component.minimum)\"\r\n                              [max]=\"evaluateNumber(component.maximum)\"\r\n                              [decimals]=\"evaluateNumber(component.decimalDigits)\"\r\n                              [requiredOnInput]=\"component.validate?.required\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              #number\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"number\">\r\n                </wm-sirio-number>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region datetime -->\r\n              <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: date 'yyyy-MM-dd', time 'HH:mm', date and time 'yyyy-MM-ddTHH:mm:ss'.\r\n                     min/max only limit the pickers (typed values outside are moved to the nearest limit).\r\n                     Errors/warnings come from the validation presenter. -->\r\n                <ng-container [ngSwitch]=\"component.subtype\">\r\n                  <!-- #region date -->\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    <wm-sirio-date\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n                                [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [pickLevel]=\"component.pick || 'date'\"\r\n                                [min]=\"evaluateString(component.range?.min) || null\"\r\n                                [max]=\"evaluateString(component.range?.max) || null\"\r\n                                [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                #date\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"date\">\r\n                    </wm-sirio-date>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region time -->\r\n                  <ng-container *ngSwitchCase=\"'time'\">\r\n                    <wm-sirio-time\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'timeLabel'), component)\"\r\n                                [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [minuteStep]=\"component.timeInterval || 1\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                #time\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"time\">\r\n                    </wm-sirio-time>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region datetime -->\r\n                  <ng-container *ngSwitchCase=\"'datetime'\">\r\n                    <!-- fieldLabels: dateLabel above the date, timeLabel above the time (as before);\r\n                         completeParts: date only -> 00:00, time only -> today (was the dateTimeCoordinator). -->\r\n                    <wm-sirio-datetime\r\n                                    valueType=\"iso-seconds\"\r\n                                    fieldLabels\r\n                                    completeParts\r\n                                    [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n                                    [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                    [timeLabel]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                    [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                    [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                    [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                    [formControlName]=\"component.key\"\r\n                                    [textAlign]=\"component.textAlign || null\"\r\n                                    [min]=\"evaluateString(component.range?.min) || null\"\r\n                                    [max]=\"evaluateString(component.range?.max) || null\"\r\n                                    [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n                                    [minuteStep]=\"component.timeInterval || 1\"\r\n                                    [valueSync]=\"component.valueSync\"\r\n                                    [requiredOnBlur]=\"component.validate?.required\"\r\n                                    #datetime\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"datetime\">\r\n                    </wm-sirio-datetime>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region checkbox -->\r\n              <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: checkbox and toggle (subtype 'toggle'); the markdown label is projected\r\n                       inside the kit <label> as inline HTML. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-checkbox\r\n                                  [toggle]=\"component.subtype === 'toggle'\"\r\n                                  [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                  [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                  [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  [requiredOnBlur]=\"component.validate?.required\"\r\n                                  #checkbox\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"checkbox\"><span [innerHTML]=\"toInlineHTML(evaluateTemplate(locale(component, 'label')))\"></span></wm-sirio-checkbox>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region radio -->\r\n              <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: radio buttons and chips (subtype 'chip'); markdown option labels are\r\n                       rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-radio-group\r\n                                     [chips]=\"component.subtype === 'chip'\"\r\n                                     [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                     [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                     [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                     [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                     [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                     [formControlName]=\"component.key\"\r\n                                     [options]=\"sirioOptions(getValues(component) | async)\"\r\n                                     [inline]=\"component.displayInline\"\r\n                                     [refresh]=\"refreshValues(component)\"\r\n                                     [valueSync]=\"component.valueSync\"\r\n                                     [requiredOnBlur]=\"component.validate?.required\"\r\n                                     #radio\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"radio\">\r\n                    <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n                  </wm-sirio-radio-group>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region checklist -->\r\n              <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: checkbox list and chips (subtype 'chip'); markdown option labels are\r\n                       rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n                  <wm-sirio-checklist\r\n                                   [chips]=\"component.subtype === 'chip'\"\r\n                                   [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                   [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                   [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                   [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                   [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                   [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                   [formControlName]=\"component.key\"\r\n                                   [options]=\"sirioOptions(getValues(component) | async)\"\r\n                                   [inline]=\"component.displayInline\"\r\n                                   [refresh]=\"refreshValues(component)\"\r\n                                   [valueSync]=\"component.valueSync\"\r\n                                   [requiredOnBlur]=\"component.validate?.required\"\r\n                                   #checklist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"checklist\">\r\n                    <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n                  </wm-sirio-checklist>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region textarea -->\r\n              <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-textarea\r\n                                [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                [placeholder]=\"locale(component, 'placeholder')\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [formControlName]=\"component.key\"\r\n                                [textCase]=\"toTextCase(component.textCase)\"\r\n                                [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                [textAlign]=\"component.textAlign || null\"\r\n                                [requiredOnInput]=\"component.validate?.required\"\r\n                                [requiredOnBlur]=\"component.validate?.required\"\r\n                                [valueSync]=\"component.valueSync\"\r\n                                #textarea\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"textarea\">\r\n                </wm-sirio-textarea>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region filepicker -->\r\n              <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers);\r\n                       upload, delete and download of the stored files are handled by the control. -->\r\n                  <wm-sirio-file-upload class=\"w-100\"\r\n                                     [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                                     [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                                     [requiredIndicator]=\"isFieldRequired(component)\"\r\n                                     [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                                     [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                     [buttonLabel]=\"evaluateString(locale(component, 'text')) || locale(Texts, 'Upload')\"\r\n                                     [accept]=\"getAccept(component.accept)\"\r\n                                     [multiple]=\"evaluateBoolean(component.multiple)\"\r\n                                     valueType=\"array\"\r\n                                     details\r\n                                     downloadable\r\n                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                     [instantUpload]=\"evaluateBoolean(component.instantUpload)\"\r\n                                     [uploadHandler]=\"evaluate(component.uploadHandler)\"\r\n                                     [deleteHandler]=\"evaluate(component.deleteHandler)\"\r\n                                     [downloadHandler]=\"evaluate(component.downloadHandler)\"\r\n                                     [removeLabel]=\"locale(Texts, 'Remove')\"\r\n                                     [downloadLabel]=\"locale(Texts, 'Download')\"\r\n                                     [uploadingLabel]=\"locale(Texts, 'Uploading')\"\r\n                                     [deletingLabel]=\"locale(Texts, 'Deleting')\"\r\n                                     [downloadingLabel]=\"locale(Texts, 'Downloading')\"\r\n                                     [formControlName]=\"component.key\"\r\n                                     [requiredOnBlur]=\"component.validate?.required\"\r\n                                     [valueSync]=\"component.valueSync\"\r\n                                     (filesAdded)=\"filesAdded($event, filepicker)\"\r\n                                     (fileError)=\"fileError($event)\"\r\n                                     #filepicker\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"filepicker\">\r\n                  </wm-sirio-file-upload>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region range -->\r\n              <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n                <wm-sirio-slider\r\n                              [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n                              [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n                              [requiredIndicator]=\"isFieldRequired(component)\"\r\n                              [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [formControlName]=\"component.key\"\r\n                              [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n                              [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n                              [valueSync]=\"component.valueSync\"\r\n                              [requiredOnBlur]=\"component.validate?.required\"\r\n                              #range\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"range\">\r\n                </wm-sirio-slider>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region displayfield -->\r\n              <ng-container *ngSwitchCase=\"'displayfield'\">\r\n                <div class=\"display-field\"\r\n                     #displayfield\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"displayfield\">\r\n                  <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n                    {{ evaluateString(locale(component, 'label')) }}\r\n                    <!-- @wemake4u/form-controls: kit info button with popover, as next to the labels of the controls. -->\r\n                    <wm-sirio-info-button *ngIf=\"component.tooltip\"\r\n                                       [content]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                       [title]=\"evaluateString(locale(component, 'label'))\"\r\n                                       [label]=\"locale(Texts, 'InformationAbout') + ' ' + evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"></wm-sirio-info-button>\r\n                  </div>\r\n                  <div [class.sirio-form-control]=\"component.fieldtype !== 'filelist'\"\r\n                       [style.text-align]=\"component.fieldtype !== 'filelist' ? (component.textAlign || null) : null\"\r\n                       class=\"data-display\" [ngClass]=\"component.fieldtype\">\r\n                    <ng-container [ngSwitch]=\"component.fieldtype\">\r\n                      <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                        <ng-container *ngTemplateOutlet=\"checkboxTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchCase=\"'text'\">\r\n                        <ng-container *ngTemplateOutlet=\"formattedTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchCase=\"'filelist'\">\r\n                        <ng-container *ngTemplateOutlet=\"filelistTemplate\"></ng-container>\r\n                      </ng-container>\r\n                      <ng-container *ngSwitchDefault>\r\n                        <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #checkboxTemplate>\r\n                      <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n                    </ng-template>\r\n                    <ng-template #defaultTemplate>\r\n                      <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n                        <ng-container *ngIf=\"getValues(component) | async as values\">\r\n                          {{ toLabel(evaluate(component.expression), values) }}\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                    <ng-template #simpleTemplate>\r\n                      {{ evaluate(component.expression) }}\r\n                    </ng-template>\r\n                    <ng-template #formattedTemplate>\r\n                      <div class=\"text-paragraph\" style=\"margin-top: -6px;\"\r\n                           [innerHTML]=\"toHTML(evaluateTemplate(component.expression))\">\r\n                      </div>\r\n                    </ng-template>\r\n                    <ng-template #filelistTemplate>\r\n                      <ng-container *ngIf=\"{ files: evaluate(component.expression) } as expr\"\r\n                                    fileHandler\r\n                                    #fileHandlerRef=\"fileHandler\"\r\n                                    [downloadHandler]=\"evaluate(component.downloadHandler)\">\r\n                        <ng-container *ngIf=\"expr.files?.length > 0\">\r\n                          <div *ngFor=\"let file of expr.files\" class=\"row w-100 p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n                            <div class=\"col-auto ms-auto\">\r\n                              <span [ngClass]=\"fileHandlerRef.getIcon(file)\" class=\"fas fa-24 mt-1 me-3 ms-1\" aria-hidden=\"true\"></span>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                              <p class=\"mb-0\"><span class=\"h6 sirio-text-link sirio-font-weight-700\">{{ file.name }}</span></p>\r\n                              {{ fileHandlerRef.getExtension(file) }}, {{ fileHandlerRef.getSize(file) }}\r\n                            </div>\r\n                            <div class=\"col-auto ms-auto d-lg-flex flex-column align-items-end\">\r\n                              <ng-container *ngIf=\"fileHandlerRef.canDownload(file)\">\r\n                                <div *ngIf=\"fileHandlerRef.isDownloading(file)\" class=\"mt-2\">\r\n                                  <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Downloading') }}</span>\r\n                                  <span class=\"fas fa-arrows-rotate fa-spin ms-2\" aria-hidden=\"true\"></span>\r\n                                </div>\r\n                                <!-- Buttons, not links: announced as buttons, activated also with Space. -->\r\n                                <button *ngIf=\"fileHandlerRef.isLocal(file)\"\r\n                                   type=\"button\"\r\n                                   class=\"sirio-text-link fp-link-button\"\r\n                                   (click)=\"fileHandlerRef.downloadLocal(file)\"\r\n                                   [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n                                   [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n                                  <span class=\"d-none d-sm-inline-block\">\r\n                                    {{ locale(Texts, 'Download') }}\r\n                                  </span>\r\n                                  <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n                                </button>\r\n                                <button *ngIf=\"fileHandlerRef.isHandled(file)\"\r\n                                   type=\"button\"\r\n                                   class=\"sirio-text-link fp-link-button\"\r\n                                   (click)=\"fileHandlerRef.downloadHandled(file)\"\r\n                                   [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n                                   [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n                                  <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Download') }}</span>\r\n                                  <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n                                </button>\r\n                              </ng-container>\r\n                            </div>\r\n                          </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!(expr.files?.length > 0)\">\r\n                          <div class=\"row p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n                            <div class=\"col\">\r\n                              <p class=\"mb-0\">\r\n                                <span class=\"h6 sirio-text-link sirio-font-weight-700\">Nessun file presente</span>\r\n                              </p>\r\n                            </div>\r\n                          </div>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                  </div>\r\n                  <p *ngIf=\"component.description\" class=\"sirio-form-text-help\">\r\n                    {{ evaluateString(locale(component, 'description')) }}\r\n                  </p>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region dynamiclist -->\r\n              <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n                <ng-container *ngIf=\"resolvePath(component.path) as formGroup\">\r\n                  <ng-container [formGroup]=\"formGroup\">\r\n                    <!-- data-fp-repeater: root of the repeater, where the focus goes after add / remove / move. -->\r\n                    <div [formArrayName]=\"component.key\"\r\n                                  data-fp-repeater\r\n                                  [formGroup]=\"formGroup\"\r\n                                  [recursion]=\"component\"\r\n                                  #recursion=\"recursion\">\r\n                      <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n                      <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n                        <ng-template navigatorState\r\n                                     [total]=\"formArray.controls.length\"\r\n                                     #state=\"navigatorState\"></ng-template>\r\n                        <ng-container *ngIf=\"component.subtype == 'navigation'\">\r\n                          <ng-container *ngTemplateOutlet=\"navigation; context: { formArray: formArray, state: state }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n                          <ng-container [ngSwitch]=\"component.subtype\">\r\n                            <!-- #region tab -->\r\n                            <ng-container *ngSwitchCase=\"'tab'\">\r\n                              <!-- @wemake4u/form-controls: activateAdded selects the added tab (after a removal the library selects the one\r\n                                   taking its place); focusContent moves the focus to the first field of the panel. -->\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"tabInstance\">\r\n                                <wm-sirio-tabs [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                            [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                            [focusablePanels]=\"false\"\r\n                                            activateAdded\r\n                                            focusContent\r\n                                            #tabInstance>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                      <wm-sirio-tab [label]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n                                                 [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n                                        <ng-template wmSirioTabContent>\r\n                                          <div>\r\n                                            <div>\r\n                                              <app-dynamic-fields [form]=\"form\"\r\n                                                                  [formGroup]=\"getFormGroup(item)\"\r\n                                                                  [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                  [rows]=\"component.rows\"\r\n                                                                  [identity]=\"component.id\"\r\n                                                                  [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                  [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                            </div>\r\n                                            <div style=\"text-align:right\">\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                            </div>\r\n                                          </div>\r\n                                        </ng-template>\r\n                                      </wm-sirio-tab>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </wm-sirio-tabs>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region accordion -->\r\n                            <ng-container *ngSwitchCase=\"'accordion'\">\r\n                              <!-- @wemake4u/form-controls: activateAdded opens the first section at the start and the added one (after a removal\r\n                                   the library opens the one taking its place); focusContent moves the focus to its first field. -->\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclistaccordion\">\r\n                                <wm-sirio-accordion exclusive\r\n                                                 activateAdded\r\n                                                 focusContent\r\n                                                 #dynamiclistaccordion>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                      <wm-sirio-accordion-item [title]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n                                                            [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n                                        <ng-template wmSirioAccordionContent>\r\n                                          <div>\r\n                                            <div>\r\n                                              <app-dynamic-fields [form]=\"form\"\r\n                                                                  [formGroup]=\"getFormGroup(item)\"\r\n                                                                  [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                  [rows]=\"component.rows\"\r\n                                                                  [identity]=\"component.id\"\r\n                                                                  [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                  [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                            </div>\r\n                                            <div style=\"text-align:right\">\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                            </div>\r\n                                          </div>\r\n                                        </ng-template>\r\n                                      </wm-sirio-accordion-item>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </wm-sirio-accordion>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region table -->\r\n                            <ng-container *ngSwitchCase=\"'table'\">\r\n                              <div #dynamiclist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclist\">\r\n                                <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n                                      <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n                                        <tr>\r\n                                          <td class=\"content-cell\">\r\n                                            <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n                                              <div>\r\n                                                <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                                  <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                                  <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                                </div>\r\n                                                <div>\r\n                                                  <app-dynamic-fields [form]=\"form\"\r\n                                                                      [formGroup]=\"formItem\"\r\n                                                                      [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                                      [rows]=\"component.rows\"\r\n                                                                      [identity]=\"component.id\"\r\n                                                                      [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                      [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                                </div>\r\n                                              </div>\r\n                                            </div>\r\n                                          </td>\r\n                                          <td class=\"command-cell\">\r\n                                            <div>\r\n                                              <ng-container *ngIf=\"recursionData.itemsArray\">\r\n                                                <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n                                              </ng-container>\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n                                              <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i, compact: true }\"></ng-container>\r\n                                            </div>\r\n                                          </td>\r\n                                        </tr>\r\n                                        <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n                                          <td colspan=\"2\" class=\"recursion-cell\">\r\n                                            <div class=\"layout\">\r\n                                              <div class=\"recursion-toggle\">\r\n                                                <!-- @wemake4u/form-controls: open at the start (as before); label for screen readers. -->\r\n                                                <button type=\"button\" wmSirioButton=\"ghost\"\r\n                                                        [wmSirioCollapseToggle]=\"collapse\"\r\n                                                        iconOnly\r\n                                                        [icon]=\"collapse.expanded() ? 'fa-chevron-down' : 'fa-chevron-right'\"\r\n                                                        [label]=\"recursionData.itemsArray.length + ' elementi presenti'\"></button>\r\n                                              </div>\r\n                                              <div *ngIf=\"!collapse.expanded()\" class=\"recursion-title\">\r\n                                                <div class=\"recursion-text\">\r\n                                                  {{ recursionData.itemsArray.length }} elementi presenti\r\n                                                </div>\r\n                                              </div>\r\n                                              <div class=\"recursion-content\">\r\n                                                <div wmSirioCollapse #collapse=\"wmSirioCollapse\" [expanded]=\"true\">\r\n                                                  <div *ngIf=\"collapse.expanded()\" style=\"margin-bottom: -11px;\">\r\n                                                    <app-dynamic-fields [form]=\"form\"\r\n                                                                        [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n                                                                        [readOnly]=\"readOnly\"\r\n                                                                        [recursionLevel]=\"recursionLevel+1\"\r\n                                                                        [rows]=\"recursion.getComponentRows()\"\r\n                                                                        [identity]=\"component.id\"\r\n                                                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                                  </div>\r\n                                                </div>\r\n                                              </div>\r\n                                            </div>\r\n                                          </td>\r\n                                        </tr>\r\n                                      </ng-container>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </table>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region navigation -->\r\n                            <ng-container *ngSwitchCase=\"'navigation'\">\r\n                              <div>\r\n                                <ng-container *ngIf=\"formArray.controls[state.index] as item\">\r\n                                  <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: state.index } as event\">\r\n                                        <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                        <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                      </div>\r\n                                      <div>\r\n                                        <app-dynamic-fields [form]=\"form\"\r\n                                                            [formGroup]=\"getFormGroup(item)\"\r\n                                                            [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                            [rows]=\"component.rows\"\r\n                                                            [identity]=\"component.id\"\r\n                                                            [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                            [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                      </div>\r\n                                    </div>\r\n                                  </div>\r\n                                </ng-container>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region default -->\r\n                            <ng-container *ngSwitchDefault>\r\n                              <div #dynamiclist\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclist\"\r\n                                   selectionGroup\r\n                                   [selectionMode]=\"evaluateString(component.selection?.mode)\"\r\n                                   [selectableClass]=\"evaluateString(component.selection?.selectableClass)\"\r\n                                   [selectedClass]=\"evaluateString(component.selection?.selectedClass)\"\r\n                                   [onSelectionChanged]=\"callExpression(component.selection?.selectionChanged)\">\r\n                                <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                  <div [selectionItem]=\"item\"\r\n                                       [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                        <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n                                        <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n                                      </div>\r\n                                      <div>\r\n                                        <app-dynamic-fields [form]=\"form\"\r\n                                                            [formGroup]=\"getFormGroup(item)\"\r\n                                                            [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                            [rows]=\"component.rows\"\r\n                                                            [identity]=\"component.id\"\r\n                                                            [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                                            [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                                      </div>\r\n                                      <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n                                        <div style=\"text-align:right\">\r\n                                          <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n                                          <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n                                        </div>\r\n                                      </ng-container>\r\n                                    </div>\r\n                                  </div>\r\n                                </ng-container>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                          </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n                          <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n                        </ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"feedback\"></ng-container>\r\n                        <ng-container *ngIf=\"recursionLevel == 0 && component.subtype !== 'navigation'\">\r\n                          <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <!-- #region templates -->\r\n                <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n                    <!-- Name with the position (\"Sposta Sù elemento 3 di 5\"): the visible text first, the rest for screen readers. -->\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"moveUpItem(formArray, i, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"up\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-arrow-up\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"upLabel + ' ' + itemPosition(i, formArray.length)\">{{ upLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"moveDownItem(formArray, i, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"down\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-arrow-down\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"downLabel + ' ' + itemPosition(i, formArray.length)\">{{ downLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"removeItem(formArray, i, true, state, $event)\"\r\n                            class=\"remove-item\"\r\n                            data-fp-action=\"remove\" [attr.data-fp-index]=\"i\"\r\n                            icon=\"fa-trash\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"removeLabel + ' ' + itemPosition(i, formArray.length)\">{{ removeLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"addItem(formArray, state)\"\r\n                            data-fp-action=\"add\"\r\n                            class=\"add-item\"\r\n                            icon=\"fa-plus\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"addLabel\">{{ addLabel }}</button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowReorder\">\r\n                    <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { item: formArray.at(i)?.value, index: i, total: state.total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, state: state, i: i, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: state.total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, state: state, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #feedback>\r\n                  <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                    <div>\r\n                      <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                    <div>\r\n                      <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #navigation let-formArray=\"formArray\" let-state=\"state\">\r\n                  <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n                  <wm-sirio-pagination [showItems]=\"false\"\r\n                                    [pageSize]=\"1\"\r\n                                    [total]=\"state.total\"\r\n                                    [page]=\"state.index + 1\"\r\n                                    (pageChange)=\"state.index = $event - 1\"\r\n                                    [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n                                    [ofLabel]=\"locale(Texts, 'Of')\"\r\n                                    [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n                                    [pageLabel]=\"locale(Texts, 'Element')\"\r\n                                    [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n                                    [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n                                    [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n                    <div class=\"actions\">\r\n                      <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n                      <ng-container *ngIf=\"state.total && state.index != -1\">\r\n                        <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: state.index }\"></ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </wm-sirio-pagination>\r\n                </ng-template>\r\n                <!-- #endregion -->\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region group -->\r\n              <ng-container *ngSwitchCase=\"'group'\">\r\n                <div *ngIf=\"resolveBoundGroup(component) as resolvedGroup\"\r\n                     [ngClass]=\"getGroupOutline(component)\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n                    <label>{{ labelText }}</label>\r\n                  </ng-container>\r\n                  <div #group\r\n                       [register]=\"component\"\r\n                       [componentRef]=\"group\">\r\n                    <app-dynamic-fields [form]=\"form\"\r\n                                        [formGroup]=\"resolvedGroup\"\r\n                                        [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [rows]=\"component.rows\"\r\n                                        [identity]=\"component.id\"\r\n                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tab -->\r\n              <ng-container *ngSwitchCase=\"'tab'\">\r\n                <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n                  <ng-container *ngIf=\"panels.length > 0\">\r\n                    <!-- @wemake4u/form-controls: focusContent moves the focus into the panel shown at the start or selected (not for the\r\n                         arrow keys), except for the panels with disableAutoFocus. -->\r\n                    <wm-sirio-tabs #tabInstance\r\n                                [register]=\"component\"\r\n                                [componentRef]=\"tabInstance\"\r\n                                [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                [line]=\"!!component.navigation\"\r\n                                [vertical]=\"!!component.vertical\"\r\n                                [focusablePanels]=\"false\"\r\n                                focusContent>\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <wm-sirio-tab *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                   [label]=\"evaluateString(locale(panel, 'label'))\"\r\n                                   [icon]=\"evaluateString(panel.icon) || null\"\r\n                                   [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n                                   [badge]=\"evaluate(panel.badge)\"\r\n                                   [focusContent]=\"panel.disableAutoFocus !== true\">\r\n                          <ng-template wmSirioTabContent>\r\n                            <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                              <app-dynamic-fields [form]=\"form\"\r\n                                                  [formGroup]=\"resolvePath(panel.path)\"\r\n                                                  [rows]=\"template.rows\"\r\n                                                  [identity]=\"component.id\"\r\n                                                  [identityIndex]=\"i\"\r\n                                                  [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n                                                  [disableAutoFocus]=\"template.disableAutoFocus\"\r\n                                                  [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n                            </ng-container>\r\n                          </ng-template>\r\n                        </wm-sirio-tab>\r\n                      </ng-container>\r\n                    </wm-sirio-tabs>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region accordion -->\r\n              <ng-container *ngSwitchCase=\"'accordion'\">\r\n                <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n                  <ng-container *ngIf=\"panels.length > 0\">\r\n                    <!-- exclusive: one section open at a time, as with ngx-sirio-lib. -->\r\n                    <wm-sirio-accordion exclusive\r\n                                     #accordion\r\n                                     [register]=\"component\"\r\n                                     [componentRef]=\"accordion\">\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <ng-container *ngIf=\"resolvePath(panel.path) as formGroup\">\r\n                          <!-- Content not lazy (as before): the fields of closed sections stay in the form. -->\r\n                          <wm-sirio-accordion-item *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                                [title]=\"evaluateString(locale(panel, 'label'))\"\r\n                                                [badge]=\"evaluate(panel.badge)\"\r\n                                                [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n                            <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                              <app-dynamic-fields [form]=\"form\"\r\n                                                  [formGroup]=\"formGroup\"\r\n                                                  [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n                                                  [rows]=\"template.rows\"\r\n                                                  [identity]=\"component.id\"\r\n                                                  [identityIndex]=\"i\"\r\n                                                  [disableAutoFocus]=\"template.disableAutoFocus\"\r\n                                                  [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n                            </ng-container>\r\n                          </wm-sirio-accordion-item>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </wm-sirio-accordion>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region text -->\r\n              <ng-container *ngSwitchCase=\"'text'\">\r\n                <div [collapse]=\"component.collapseTo\"\r\n                     [onCollapse]=\"callExpression(component.onCollapse)\"\r\n                     [onExpand]=\"callExpression(component.onExpand)\"\r\n                     #text\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"text\">\r\n                  <!--Reset View Context-->\r\n                  <div tabindex=\"0\" style=\"display:none\"></div>\r\n                  <div class=\"flex\">\r\n                    <div class=\"text-paragraph\"\r\n                         [markdown]=\"callExpression(component.anchorClick)\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                    <ng-container *ngIf=\"component.tooltip\">\r\n                      <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n                                         [label]=\"locale(Texts, 'Information')\"></wm-sirio-info-button>\r\n                      <ng-template #tooltipTemplate>\r\n                        <div class=\"sirio-tooltip-body\">\r\n                          <div class=\"text-paragraph\"\r\n                               [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n                          </div>\r\n                        </div>\r\n                      </ng-template>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region html -->\r\n              <ng-container *ngSwitchCase=\"'html'\">\r\n                <div class=\"html-paragraph\"\r\n                     [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n                     #html\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"html\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region image -->\r\n              <ng-container *ngSwitchCase=\"'image'\">\r\n                <!-- || '': an alt expression giving null would be read aloud as \"null\". -->\r\n                <img [src]=\"evaluateString(component.source)\"\r\n                     [alt]=\"evaluateString(locale(component, 'alt')) || ''\"\r\n                     style=\"width: 100%;height: 100%;\"\r\n                     #image\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"image\">\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region table -->\r\n              <ng-container *ngSwitchCase=\"'table'\">\r\n                <label *ngIf=\"evaluateString(locale(component, 'label')) as tableLabel\">{{ tableLabel }}</label>\r\n                <!-- Sirio data grid: configuration from SirioGridService. -->\r\n                @let grid = getSirioGrid(component);\r\n                @let rows = getSirioRows(component, grid);\r\n                <!-- Paginator with rowCount > 0, or when the server source pages its rows. -->\r\n                @let pagedSize = grid.pageable ? null : rows.pagedSize();\r\n                @let gridHeight = component.autoHeight ? null : evaluateSize(component.height);\r\n                <wm-sirio-data-grid #table\r\n                                    class=\"fp-data-grid\"\r\n                                    variant=\"dark\"\r\n                                    size=\"sm\"\r\n                                    [filterButton]=\"component.floatingFilter === true ? 'always' : 'none'\"\r\n                                    [showFilterChips]=\"false\"\r\n                                    paginationVariant=\"compact\"\r\n                                    [caption]=\"evaluateString(locale(component, 'label'))\"\r\n                                    [keyboardNavigation]=\"component.keyboardNavigation !== false\"\r\n                                    [navigationHint]=\"evaluateString(locale(component, 'navigationHint')) || locale(Texts, 'GridNavigationHint')\"\r\n                                    [data]=\"rows.data()\"\r\n                                    [dataSource]=\"rows.dataSource\"\r\n                                    [loading]=\"rows.loading()\"\r\n                                    [emptyText]=\"rows.failed() ? locale(Texts, 'LoadingFailed') : locale(Texts, 'NoData')\"\r\n                                    [loadErrorText]=\"locale(Texts, 'LoadingFailed')\"\r\n                                    [rowId]=\"grid.rowId\"\r\n                                    [selection]=\"sirioSelection(component)\"\r\n                                    singleSelectionControl=\"checkbox\"\r\n                                    [selectionColumn]=\"grid.checkboxes\"\r\n                                    [selectOnRowClick]=\"grid.checkboxes && grid.clickSelect\"\r\n                                    selectAll=\"filtered\"\r\n                                    hideUnselectable\r\n                                    [rowSelectable]=\"grid.rowSelectable\"\r\n                                    [selected]=\"grid.selected()\"\r\n                                    (selectedChange)=\"onSirioSelectionChanged(component, grid, $event)\"\r\n                                    [rowClass]=\"grid.rowClass\"\r\n                                    [rowStyle]=\"grid.rowStyle\"\r\n                                    [pageable]=\"grid.pageable || pagedSize !== null\"\r\n                                    [pageSize]=\"pagedSize ?? grid.pageSize\"\r\n                                    [pageSizeOptions]=\"sirioPageSizes(pagedSize)\"\r\n                                    [rowNumbers]=\"grid.rowNumbers\"\r\n                                    rowNumberHeader=\"#\"\r\n                                    [resizable]=\"grid.resizable\"\r\n                                    [reorderable]=\"grid.reorderable\"\r\n                                    filterOperators\r\n                                    [filterRow]=\"component.floatingFilter === true\"\r\n                                    [filterYesLabel]=\"locale(Texts, 'True')\"\r\n                                    [filterNoLabel]=\"locale(Texts, 'False')\"\r\n                                    [height]=\"gridHeight\"\r\n                                    [stickyHeader]=\"!!gridHeight\"\r\n                                    [minHeight]=\"evaluateSize(component.minHeight)\"\r\n                                    [refresh]=\"refreshRowSource(component)\"\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"table\">\r\n                  @for (col of grid.columns; track col.id) {\r\n                    <wm-sirio-grid-column [field]=\"col.field\"\r\n                                          [header]=\"col.header\"\r\n                                          [value]=\"col.value\"\r\n                                          [format]=\"col.format\"\r\n                                          [align]=\"col.align\"\r\n                                          [filter]=\"col.filter\"\r\n                                          [filterOptions]=\"col.filterOptions\"\r\n                                          [filterMultiple]=\"col.filterMultiple\"\r\n                                          [filterOperators]=\"col.filterOperators\"\r\n                                          [sortable]=\"col.sortable\"\r\n                                          [resizable]=\"col.resizable\"\r\n                                          [wrap]=\"col.wrap\"\r\n                                          [mono]=\"col.mono\"\r\n                                          [fit]=\"col.fit\"\r\n                                          [fixed]=\"col.fixed\"\r\n                                          [flex]=\"col.flex\"\r\n                                          [width]=\"col.width\"\r\n                                          [minWidth]=\"col.minWidth\"\r\n                                          [maxWidth]=\"col.maxWidth\"\r\n                                          [group]=\"col.group\"\r\n                                          [hidden]=\"col.actions && evaluateBoolean(component.suppressActions) === true\"\r\n                                          [cellClass]=\"col.cellClass\"\r\n                                          [cellStyle]=\"col.cellStyle\"\r\n                                          [headerClass]=\"col.headerClass\"\r\n                                          [headerStyle]=\"col.headerStyle\">\r\n                      @if (col.renderer; as renderer) {\r\n                        <ng-template wmSirioGridCell let-row let-value=\"value\" let-index=\"index\">\r\n                          @if (renderer.kind === 'html') {\r\n                            <span [innerHTML]=\"renderer.html(row, value)\"></span>\r\n                          } @else {\r\n                            <fp-sirio-cell-host [renderer]=\"renderer.type\" [params]=\"renderer.params(row, value, index)\" />\r\n                          }\r\n                        </ng-template>\r\n                      }\r\n                    </wm-sirio-grid-column>\r\n                  }\r\n                </wm-sirio-data-grid>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region button -->\r\n              <ng-container *ngSwitchCase=\"'button'\">\r\n                <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n                  <!-- @wemake4u/form-controls: color \"ghost\" = plain sirio-btn; icon on the left unless iconPosition \"right\". -->\r\n                  <button type=\"button\"\r\n                          [wmSirioButton]=\"evaluateVariant(component.color)\"\r\n                          [disabled]=\"evaluateBoolean(component.disabled) ?? false\"\r\n                          [icon]=\"evaluateString(component.icon) || null\"\r\n                          [iconPosition]=\"component.iconPosition == 'right' ? 'end' : 'start'\"\r\n                          (click)=\"clickButton(component, $event)\"\r\n                          #button\r\n                          [register]=\"component\"\r\n                          [componentRef]=\"button\">{{ evaluateString(locale(component, 'label')) }}</button>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region separator -->\r\n              <ng-container *ngSwitchCase=\"'separator'\">\r\n                <div class=\"separator\"\r\n                     #separator\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"separator\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region spacer -->\r\n              <ng-container *ngSwitchCase=\"'spacer'\">\r\n                <div style=\"width: 100%\"\r\n                     [style.height.px]=\"component.height\"\r\n                     #spacer\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"spacer\">\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region iframe -->\r\n              <ng-container *ngSwitchCase=\"'iframe'\">\r\n                <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <iframe [src]=\"evaluateUrl(component.url)\"\r\n                        [title]=\"evaluateString(locale(component, 'label'))\"\r\n                        [style.width]=\"'100%'\"\r\n                        [style.height.px]=\"component.height\"\r\n                        [frameSecurity]=\"component.security\"\r\n                        #iframe\r\n                        [register]=\"component\"\r\n                        [componentRef]=\"iframe\">\r\n                </iframe>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region alert -->\r\n              <ng-container *ngSwitchCase=\"'alert'\">\r\n                <!-- @wemake4u/form-controls: preventClose → no close button; markdown as block content. -->\r\n                <wm-sirio-alert [type]=\"component.role || 'info'\"\r\n                             [closeLabel]=\"locale(Texts, 'Close')\"\r\n                             [dismissible]=\"!evaluateBoolean(component.preventClose)\"\r\n                             #alert\r\n                             [register]=\"component\"\r\n                             [componentRef]=\"alert\">\r\n                  <div wmSirioAlertContent\r\n                       class=\"text-paragraph\"\r\n                       [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                  </div>\r\n                </wm-sirio-alert>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region notice -->\r\n              <ng-container *ngSwitchCase=\"'notice'\">\r\n                <!-- @wemake4u/form-controls: light notice (kit default); markdown as block content. -->\r\n                <wm-sirio-notify #notice\r\n                              [title]=\"evaluateString(locale(component, 'title'))\"\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"notice\">\r\n                  <div wmSirioNotifyContent\r\n                       class=\"text-paragraph\"\r\n                       [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                  </div>\r\n                </wm-sirio-notify>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tooltip -->\r\n              <ng-container *ngSwitchCase=\"'tooltip'\">\r\n                <!-- @wemake4u/form-controls: the title is the popover title of the kit. -->\r\n                <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n                                   [title]=\"evaluateString(locale(component, 'title'))\"\r\n                                   [label]=\"evaluateString(locale(component, 'title')) || locale(Texts, 'Information')\"\r\n                                   #tooltip\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"tooltip\"></wm-sirio-info-button>\r\n                <ng-template #tooltipTemplate>\r\n                  <div class=\"sirio-tooltip-body\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </div>\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region chart -->\r\n              <ng-container *ngSwitchCase=\"'chart'\">\r\n                <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <ng-container [observe]=\"getChartData(component)\"\r\n                     [callback]=\"invalidateChart(component)\">\r\n                  <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n                             [style.height.px]=\"component.height\"\r\n                             #chart\r\n                             [register]=\"component\"\r\n                             [componentRef]=\"chart\" />\r\n                </ng-container> \r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region component -->\r\n              <ng-container *ngSwitchCase=\"'component'\">\r\n                <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n                  <label>{{ labelText }}</label>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n                  <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n                                    [formGroup]=\"resolvePath(component.path)\"\r\n                                    #componentHost\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"componentHost\" />\r\n                  <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                    <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                  <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n                </ng-container>\r\n                <ng-template #noInputTemplate>\r\n                  <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n                                    #componentHost\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"componentHost\" />\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region templatehost -->\r\n              <ng-container *ngSwitchCase=\"'templatehost'\">\r\n                <ng-container *ngIf=\"getTemplate(component.template) as template\">\r\n                  <div #template\r\n                       [register]=\"component\"\r\n                       [componentRef]=\"template\">\r\n                    <app-dynamic-fields [form]=\"form\"\r\n                                        [formGroup]=\"resolvePath(component.path)\"\r\n                                        [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [rows]=\"template?.rows\"\r\n                                        [identity]=\"component.id\"\r\n                                        [disableAutoFocus]=\"component.disableAutoFocus\"\r\n                                        [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region treelist -->\r\n              <ng-container *ngSwitchCase=\"'treelist'\">\r\n                <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n                <div class=\"treelist\"\r\n                     [style.height]=\"component.height ? evaluateSize(component.height): null\"\r\n                     *ngIf=\"getTreeColumns(component) as columns\">\r\n                  <ng-container *ngIf=\"((getTreeSource(component) | async) ?? []) as rows\">\r\n                    <table #treelist\r\n                           [register]=\"component\"\r\n                           [componentRef]=\"treelist\"\r\n                           [treelist]=\"rows\">\r\n                      <colgroup>\r\n                        <col *ngFor=\"let column of columns\"\r\n                             [style.width]=\"evaluateSize(column.width)\">\r\n                      </colgroup>\r\n                      <thead>\r\n                        <tr>\r\n                          <th scope=\"col\" *ngFor=\"let column of columns\"\r\n                              [ngClass]=\"getClass(column)\"\r\n                              [style.text-align]=\"column.align\">\r\n                            {{column.label}}\r\n                          </th>\r\n                        </tr>\r\n                      </thead>\r\n                      <tbody>\r\n                        <ng-container>\r\n                          <tr *ngFor=\"let row of rows\"\r\n                              [attr.data-id]=\"row.id\"\r\n                              [attr.data-parent]=\"row.parentId\"\r\n                              [attr.data-expanded]=\"row.expanded ? 'true': 'false'\"\r\n                              [ngClass]=\"row.meta?.['cssClass']\">\r\n                            <td *ngFor=\"let column of columns; let i = index\"\r\n                                [ngClass]=\"getClass(column)\">\r\n                              <div [style.justify-content]=\"getJustify(column.align)\">\r\n                                <span *ngIf=\"i==component.expanderColumn\"\r\n                                      [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\r\n                                      [style.padding-left]=\"evaluateSize(20 * row.level)\"\r\n                                      class=\"toggle\"></span>\r\n                                <span class=\"text\"\r\n                                      [title]=\"row.data[column.key]\">\r\n                                  {{ row.data[column.key] }}\r\n                                </span>\r\n                              </div>\r\n                            </td>\r\n                          </tr>\r\n                        </ng-container>\r\n                      </tbody>\r\n                    </table>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region navigator -->\r\n              <ng-container *ngSwitchCase=\"'navigator'\">\r\n                <div  #navigator\r\n                      [register]=\"component\"\r\n                      [componentRef]=\"navigator\">\r\n                  <div navigatorState\r\n                       [index]=\"evaluateNumber(component.index) ?? 0\"\r\n                       [total]=\"evaluateNumber(component.total) ?? 0\"\r\n                       (indexChange)=\"evaluateWithEventAsHandler(component.selectionChanged, { index: $event, count: state.total })\"\r\n                       #state=\"navigatorState\">\r\n                    <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n                    <wm-sirio-pagination [showItems]=\"false\"\r\n                                      [pageSize]=\"1\"\r\n                                      [total]=\"state.total\"\r\n                                      [page]=\"state.index + 1\"\r\n                                      (pageChange)=\"state.index = $event - 1\"\r\n                                      [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n                                      [ofLabel]=\"locale(Texts, 'Of')\"\r\n                                      [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n                                      [pageLabel]=\"locale(Texts, 'Element')\"\r\n                                      [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n                                      [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n                                      [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n                      <div class=\"actions\">\r\n                        <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { total: state.total }\"></ng-container>\r\n                        <ng-container *ngIf=\"state.total && state.index != -1\">\r\n                          <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { i: state.index, total: state.total }\"></ng-container>\r\n                        </ng-container>\r\n                      </div>\r\n                    </wm-sirio-pagination>\r\n                  </div>\r\n                </div>\r\n                <ng-template #buttonsAdd let-total=\"total\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnAdd; context: { total: total }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsRemove let-i=\"i\" let-total=\"total\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { index: i, total: total }, true)\">\r\n                    <ng-container *ngTemplateOutlet=\"btnRemove; context: { i: i, total: total }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnAdd let-total=\"total\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            class=\"add-item\"\r\n                            (click)=\"evaluateWithEventAsHandler(component.addExpression, { total: total })\"\r\n                            icon=\"fa-plus\" iconPosition=\"start\">{{ addLabel }}</button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnRemove let-i=\"i\" let-total=\"total\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            class=\"remove-item\"\r\n                            (click)=\"evaluateWithEventAsHandler(component.removeExpression, { index: i, total: total })\"\r\n                            icon=\"fa-trash\" iconPosition=\"start\">{{ removeLabel }}<span class=\"sr-only\"> {{ itemPosition(i, total) }}</span></button>\r\n                  </ng-container>\r\n                </ng-template>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n",
 			styles: [
-				".flex{display:flex}.field-set{align-items:start}.field-set>.col-host>*{margin-bottom:10px}.separator{border-bottom:2px solid #d9e4f7;width:100%;margin:10px 0}.group-outline{border:1px solid #d9e4f7;padding:15px;margin-top:2px;margin-bottom:2px}.group-outline-repeat{margin-top:8px;margin-bottom:8px}.valign-start>.row{align-items:start}.valign-center>.row{align-items:center}.valign-end>.row{align-items:end}.component-start{align-self:start}.component-center{align-self:center}.component-end{align-self:end}.text-paragraph p{margin-bottom:0!important}.sirio-tab.sirio-tab-vertical .sirio-tab-body{margin-left:10px;margin-right:10px}.sirio-tab:not(.sirio-tab-vertical) .sirio-tab-body{margin-top:10px;margin-bottom:10px}.sirio-label{cursor:default}.w-100{width:100%!important}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.sirio-dialog-title{display:flex;margin-top:0}.sirio-dialog-title span{margin-right:10px;margin-bottom:0!important}.ag-header-cell.hide-filter .ag-header-cell-filter-button{display:none}.sirio-tab.sirio-tab-scroll{display:block}.sirio-btn.add-item,.sirio-btn.remove-item{padding:.875rem .9375rem}.ag-cell-value .btn-small-group{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.fp-data-grid .btn-small-group{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center}.fp-data-grid .btn-small-group .btn-small.sirio-btn{flex:none;padding:.25rem .0625rem;margin:2px}.ag-cell-value .btn-small.sirio-btn{padding:.25rem .0625rem;margin:2px}.ag-selection-checkbox .ag-checkbox-input-wrapper.ag-disabled{display:none}ag-charts{display:block;height:100%;border-radius:8px;background-color:var(--chart-bg);border:1px solid var(--chart-border);overflow:hidden}.ag-cell.cell-component{padding:1px}.ag-cell.row-numbers-cell{text-align:center;background:#f2f6fc}.ag-header-cell.row-numbers-header .ag-header-cell-label{justify-content:center;text-align:center}.ag-cell-auto-height .ag-cell-value{line-height:normal}.badge-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-right:10px}.badge-header .badge-header-tag{margin-left:10px}wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-date,wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-time{flex:1 1 0;min-width:0}.horizontal-left{display:flex;justify-content:left}.horizontal-center{display:flex;justify-content:center}.horizontal-right{display:flex;justify-content:right}.horizontal-fill button{width:100%}.horizontal-left legend,.horizontal-center legend,.horizontal-right legend,.horizontal-fill legend{float:none}.fp-link-button{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;cursor:pointer}.fp-link-button:hover{color:#00368f;text-decoration:underline}\n",
+				".flex{display:flex}.field-set{align-items:start}.field-set>.col-host>*{margin-bottom:10px}.separator{border-bottom:2px solid #d9e4f7;width:100%;margin:10px 0}.group-outline{border:1px solid #d9e4f7;padding:15px;margin-top:2px;margin-bottom:2px}.group-outline-repeat{margin-top:8px;margin-bottom:8px}.valign-start>.row{align-items:start}.valign-center>.row{align-items:center}.valign-end>.row{align-items:end}.component-start{align-self:start}.component-center{align-self:center}.component-end{align-self:end}.text-paragraph p{margin-bottom:0!important}.sirio-tab.sirio-tab-vertical .sirio-tab-body{margin-left:10px;margin-right:10px}.sirio-tab:not(.sirio-tab-vertical) .sirio-tab-body{margin-top:10px;margin-bottom:10px}.sirio-label{cursor:default}.w-100{width:100%!important}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.sirio-dialog-title{display:flex;margin-top:0}.sirio-dialog-title span{margin-right:10px;margin-bottom:0!important}.sirio-tab.sirio-tab-scroll{display:block}.sirio-btn.add-item,.sirio-btn.remove-item{padding:.875rem .9375rem}.fp-data-grid .btn-small-group{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center}.fp-data-grid .btn-small-group .btn-small.sirio-btn{flex:none;padding:.25rem .0625rem;margin:2px}ag-charts{display:block;height:100%;border-radius:8px;background-color:var(--chart-bg);border:1px solid var(--chart-border);overflow:hidden}.badge-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-right:10px}.badge-header .badge-header-tag{margin-left:10px}wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-date,wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-time{flex:1 1 0;min-width:0}.horizontal-left{display:flex;justify-content:left}.horizontal-center{display:flex;justify-content:center}.horizontal-right{display:flex;justify-content:right}.horizontal-fill button{width:100%}.horizontal-left legend,.horizontal-center legend,.horizontal-right legend,.horizontal-fill legend{float:none}.fp-link-button{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;cursor:pointer}.fp-link-button:hover{color:#00368f;text-decoration:underline}\n",
 				".display-field .sirio-form-control.data-display{border-color:#e3e5e8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.display-field .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.display-field .sirio-form-control.data-display.text,.display-field .sirio-form-control:hover.data-display.text{overflow:auto;height:auto;margin-top:-6px;color:#454d56}.display-field .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.display-field .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n",
 				".light-readonly label:hover,.light-view div.sirio-label:hover{color:#454d56}.light-readonly input.sirio-form-control,.light-readonly .sirio-dropdown .sirio-dropdown-select,.light-readonly textarea.sirio-form-control,.light-view div.sirio-form-control{background:none!important;border:0px;padding-left:0}.light-readonly .sirio-input-group .sirio-input-group-text{background:none}.light-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.light-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}wm-sirio-number.light-readonly .sirio-number-spinner{display:none}\n",
 				":root{--dynamiclist-border: 1px solid #ccc}.dynamiclist-no-data{text-align:center;padding:20px;font-style:italic;border:var(--dynamiclist-border)}.dynamiclist-table{width:100%;border-collapse:collapse;border:none}.dynamiclist-table.main{border:var(--dynamiclist-border)}.dynamiclist-table.main .dynamiclist-table{border-left:var(--dynamiclist-border);border-bottom:var(--dynamiclist-border)}.dynamiclist-table td{border:var(--dynamiclist-border)}.dynamiclist-table tr:first-child td{border-top:none}.dynamiclist-table tr:last-child td{border-bottom:none}.dynamiclist-table tr td:first-child{border-left:none}.dynamiclist-table tr td:last-child{border-right:none}.dynamiclist-table td.content-cell{width:100%;padding-left:8px;padding-right:8px;border-left:var(--dynamiclist-border)}.dynamiclist-table td.content-cell .group-outline-repeat{margin-bottom:0}.dynamiclist-table td.command-cell{vertical-align:middle}.dynamiclist-table td.command-cell>div{display:flex;justify-content:right}.dynamiclist-table td.recursion-cell .layout{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;width:100%;height:100%}.dynamiclist-table td.recursion-cell .recursion-toggle{grid-row:1 / span 2;grid-column:1;background-color:#f5f5f5;align-items:center}.dynamiclist-table td.recursion-cell .recursion-title{grid-row:1;grid-column:2;background:#f5f5f5;display:flex;align-items:center;min-height:34px}.dynamiclist-table td.recursion-cell .recursion-title .recursion-text{flex:1;text-align:center}.dynamiclist-table td.recursion-cell .recursion-title .recursion-add{margin-left:auto}.dynamiclist-table td.recursion-cell .recursion-content{grid-row:2;grid-column:2}.dynamiclist-table td.recursion-cell .recursion-content [data-sirio-visible=true]{overflow:visible!important}.dynamiclist-table .sirio-btn{padding:7px}\n",
@@ -11915,10 +10389,9 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: WeakService },
 		{ type: RegisterService },
 		{ type: MetadataService },
-		{ type: i1$4.LanguageService },
+		{ type: i1$3.LanguageService },
 		{ type: GlobalService },
 		{ type: FormService },
-		{ type: GridService },
 		{ type: SirioGridService },
 		{ type: ChartService },
 		{ type: DialogService },
@@ -12095,7 +10568,7 @@ var StyleDirective = class StyleDirective {
 	doc = inject(DOCUMENT);
 	host = inject(ElementRef);
 	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-	scopeAttr = `df-style-${nextId++}`;
+	scopeAttr = `data-df-style-${nextId++}`;
 	sheet;
 	styleEl;
 	constructor() {
@@ -12675,6 +11148,7 @@ var DynamicFormComponent = class DynamicFormComponent {
 	}
 	hasPreviousErrors(index) {
 		for (let i = index - 1; i >= 0; i--) {
+			if (this.isDisabled(i)) continue;
 			const previousForm = this.getFormByIndex(i);
 			if (previousForm && this.statusService.countErrors(previousForm, true) > 0) return true;
 		}
@@ -12776,14 +11250,14 @@ var DynamicFormComponent = class DynamicFormComponent {
 			{ token: StatusService },
 			{ token: EventService },
 			{ token: RegisterService },
-			{ token: i1$4.LanguageService },
+			{ token: i1$3.LanguageService },
 			{ token: SubscribeService },
 			{ token: MetadataService },
 			{ token: FormService },
 			{ token: DialogService },
 			{ token: i0.Injector },
-			{ token: i1$5.Router },
-			{ token: i1$5.ActivatedRoute },
+			{ token: i1$4.Router },
+			{ token: i1$4.ActivatedRoute },
 			{
 				token: ScopeService,
 				optional: true
@@ -12860,7 +11334,7 @@ var DynamicFormComponent = class DynamicFormComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$6.NgClass,
+				type: i1$5.NgClass,
 				selector: "[ngClass]",
 				inputs: ["class", "ngClass"]
 			},
@@ -12870,12 +11344,12 @@ var DynamicFormComponent = class DynamicFormComponent {
 			},
 			{
 				kind: "directive",
-				type: i1$3.NgControlStatusGroup,
+				type: i1$2.NgControlStatusGroup,
 				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
 			},
 			{
 				kind: "directive",
-				type: i1$3.FormGroupDirective,
+				type: i1$2.FormGroupDirective,
 				selector: "[formGroup]",
 				inputs: ["formGroup"],
 				outputs: ["ngSubmit"],
@@ -13021,14 +11495,14 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: StatusService },
 		{ type: EventService },
 		{ type: RegisterService },
-		{ type: i1$4.LanguageService },
+		{ type: i1$3.LanguageService },
 		{ type: SubscribeService },
 		{ type: MetadataService },
 		{ type: FormService },
 		{ type: DialogService },
 		{ type: i0.Injector },
-		{ type: i1$5.Router },
-		{ type: i1$5.ActivatedRoute },
+		{ type: i1$4.Router },
+		{ type: i1$4.ActivatedRoute },
 		{
 			type: ScopeService,
 			decorators: [{ type: Optional }]
@@ -13139,6 +11613,13 @@ async function resolveRefsAsync(input, resolver, options = {}) {
 	}
 	return visit(input, null, null, input);
 }
+function subscribeOnce(source$, next, error, complete) {
+	source$.pipe(take$1(1)).subscribe({
+		next,
+		error,
+		complete
+	});
+}
 function deepEqual(a, b, options, visited) {
 	if (options?.handleCircular && !visited) visited = /* @__PURE__ */ new WeakMap();
 	if (a === b) return true;
@@ -13220,7 +11701,7 @@ var ODataSource = class {
 	}
 	addOrderBy(params, queryParams) {
 		if (!params.sortModel || params.sortModel.length === 0) return queryParams;
-		const orderByParams = params.sortModel.map((sort) => `${sort.colId} ${sort.sort}`).join(",");
+		const orderByParams = params.sortModel.map((sort) => `${this.resolveColumn(sort.colId)} ${sort.sort}`).join(",");
 		return queryParams.set("$orderby", orderByParams);
 	}
 	addFilterBy(params, queryParams) {
@@ -13232,17 +11713,21 @@ var ODataSource = class {
 			const condition = this.getCondition(column, filter);
 			if (condition) filters.push(condition);
 		}
-		return queryParams.set("$filter", filters.join(" and "));
+		return filters.length ? queryParams.set("$filter", filters.join(" and ")) : queryParams;
 	}
 	getCondition(column, filter) {
 		if (filter.operator === "AND" || filter.operator === "OR") {
-			if (Array.isArray(filter.conditions)) return "(" + filter.conditions.map((subfilter) => this.getCondition(column, subfilter)).join(` ${filter.operator.toLowerCase()} `) + ")";
+			if (Array.isArray(filter.conditions)) {
+				const conditions = filter.conditions.map((subfilter) => this.getCondition(column, subfilter)).filter((condition) => !!condition);
+				return conditions.length ? "(" + conditions.join(` ${filter.operator.toLowerCase()} `) + ")" : null;
+			}
 			return null;
 		}
 		const value = filter.filter;
+		column = this.resolveColumn(column);
 		switch (filter.filterType) {
 			case "text":
-				const text = (value ?? "").replace(/'/g, "''");
+				const text = (value ?? "").toString().replace(/'/g, "''");
 				if (filter.type === "contains") return `contains(${column}, '${text}')`;
 				else if (filter.type === "notContains") return `not contains(${column}, '${text}')`;
 				else if (filter.type === "equals") return `${column} eq '${text}'`;
@@ -13253,18 +11738,52 @@ var ODataSource = class {
 				else if (filter.type === "notBlank") return `${column} ne null`;
 				else if (filter.type === "true") return `${column} eq true`;
 				else if (filter.type === "false") return `${column} eq false`;
+				else if (filter.type === "includeAll") return `${column} eq ${column}`;
+				else if (filter.type === "excludeAll") return `${column} ne ${column}`;
 				break;
 			case "number":
 				if (filter.type === "equals") return `${column} eq ${value}`;
+				else if (filter.type === "notEqual") return `${column} ne ${value}`;
 				else if (filter.type === "greaterThan") return `${column} gt ${value}`;
 				else if (filter.type === "lessThan") return `${column} lt ${value}`;
 				else if (filter.type === "greaterThanOrEqual") return `${column} ge ${value}`;
 				else if (filter.type === "lessThanOrEqual") return `${column} le ${value}`;
+				else if (filter.type === "inRange") return `(${column} ge ${value} and ${column} le ${filter.filterTo})`;
+				else if (filter.type === "blank") return `${column} eq null`;
+				else if (filter.type === "notBlank") return `${column} ne null`;
 				break;
-			case "date": return `${column} eq ${value}`;
+			case "date":
+				const dateFrom = this.getDateValue(filter.dateFrom);
+				const dateTo = this.getDateValue(filter.dateTo);
+				if (filter.type === "blank") return `${column} eq null`;
+				else if (filter.type === "notBlank") return `${column} ne null`;
+				else if (!dateFrom) return null;
+				else if (filter.type === "equals") return `${column} eq ${dateFrom}`;
+				else if (filter.type === "notEqual") return `${column} ne ${dateFrom}`;
+				else if (filter.type === "greaterThan") return `${column} gt ${dateFrom}`;
+				else if (filter.type === "lessThan") return `${column} lt ${dateFrom}`;
+				else if (filter.type === "greaterThanOrEqual") return `${column} ge ${dateFrom}`;
+				else if (filter.type === "lessThanOrEqual") return `${column} le ${dateFrom}`;
+				else if (filter.type === "inRange" && dateTo) return `(${column} ge ${dateFrom} and ${column} le ${dateTo})`;
 		}
 		return null;
 	}
+	resolveColumn(column) {
+		return column.replace(/\./g, "/");
+	}
+	getDateValue(rawDate) {
+		if (!rawDate) return null;
+		const date = new Date(rawDate);
+		if (isNaN(date.getTime())) return null;
+		if (!this.hasTime(date)) return this.toDateString(date);
+		return date.toISOString();
+	}
+	hasTime(date) {
+		return date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0 || date.getMilliseconds() !== 0;
+	}
+	toDateString(date) {
+		return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+	}
 	toNumber(value) {
 		if (!value) return void 0;
 		const num = parseFloat(value);
@@ -13493,19 +12012,30 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [{ type: DialogService }]
 });
+const ERROR_TITLE_PROPERTY = "errorTitle";
+const ERROR_DETAIL_PROPERTY = "errorDetail";
 var DefaultMessageFactory = class DefaultMessageFactory {
 	languageService;
+	global = inject(GlobalService);
 	constructor(languageService) {
 		this.languageService = languageService;
 	}
 	createError(err) {
-		if (typeof err.error === "object" && err.error?.title) err = err.error;
+		if (typeof err?.error === "object" && (err.error?.title || err.error?.detail)) err = err.error;
 		const title = err?.title ?? this.getTitleText();
 		if (err instanceof TimeoutError) return {
 			title,
 			detail: this.getTimeoutText(),
 			severity: "error"
 		};
+		if (err instanceof HttpErrorResponse) {
+			console.error(err);
+			return {
+				title,
+				detail: err.status === 0 ? this.getUnreachableText() : this.getDetailText(),
+				severity: "error"
+			};
+		}
 		return {
 			title,
 			detail: err?.detail ?? err?.message ?? this.getDetailText(),
@@ -13519,20 +12049,23 @@ var DefaultMessageFactory = class DefaultMessageFactory {
 		return localize(this.language, component, key);
 	}
 	getTitleText() {
-		return this.locale(Texts, "SomethingWentWrong");
+		return this.global.getProperty("errorTitle") || this.locale(Texts, "SomethingWentWrong");
 	}
 	getTimeoutText() {
 		return this.locale(Texts, "TimeoutOccurred");
 	}
+	getUnreachableText() {
+		return this.locale(Texts, "ServiceUnreachable");
+	}
 	getDetailText() {
-		return this.locale(Texts, "GenericError");
+		return this.global.getProperty("errorDetail") || this.locale(Texts, "GenericError");
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.2",
 		ngImport: i0,
 		type: DefaultMessageFactory,
-		deps: [{ token: i1$4.LanguageService }],
+		deps: [{ token: i1$3.LanguageService }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
@@ -13552,7 +12085,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Injectable,
 		args: [{ providedIn: "root" }]
 	}],
-	ctorParameters: () => [{ type: i1$4.LanguageService }]
+	ctorParameters: () => [{ type: i1$3.LanguageService }]
 });
 var console_default = {
 	name: "console",
@@ -14654,6 +13187,7 @@ const builtIn = [
 		]
 	}
 ];
-export { AccordionControl, ButtonControl, ChartControl, CheckBoxControl, CheckListControl, ContainerControl, Control, DataGridControl, DataService, DateControl, DateTimeControl, DefaultConfirmationController, DefaultMessageFactory, DefaultNotificationController, DefaultPromptController, DialogService, DisplayFieldControl, DynamicFormComponent, DynamicListControl, FeelService, FilePickerControl, FormControl, FormService, GlobalService, GroupControl, HtmlControl, IFrameControl, ImageControl, ItemControl, MarkdownService, NavigationService, NumberControl, RadioControl, RangeControl, SanitizeService, ScopeService, SelectControl, SeparatorControl, SpacerControl, TabControl, TableControl, TagListControl, TextAreaControl, TextControl, TextFieldControl, TimeControl, ToastService, TooltipControl, builtIn, deepEqual, navigateTo, parseRoute, resolveRefs, resolveRefsAsync, subscribeOnce, syncronize };
+const DataGridControl = TableControl;
+export { AccordionControl, ButtonControl, ChartControl, CheckBoxControl, CheckListControl, ContainerControl, Control, DataGridControl, DataService, DateControl, DateTimeControl, DefaultConfirmationController, DefaultMessageFactory, DefaultNotificationController, DefaultPromptController, DialogService, DisplayFieldControl, DynamicFormComponent, DynamicListControl, ERROR_DETAIL_PROPERTY, ERROR_TITLE_PROPERTY, FeelService, FilePickerControl, FormControl, FormService, GlobalService, GroupControl, HtmlControl, IFrameControl, ImageControl, ItemControl, MarkdownService, NavigationService, NumberControl, RadioControl, RangeControl, SanitizeService, ScopeService, SelectControl, SeparatorControl, SpacerControl, TabControl, TableControl, TagListControl, TextAreaControl, TextControl, TextFieldControl, TimeControl, ToastService, TooltipControl, builtIn, deepEqual, navigateTo, parseRoute, resolveRefs, resolveRefsAsync, subscribeOnce, syncronize };
 
 //# sourceMappingURL=wemake4u-form-player.mjs.map