@wemake4u/form-player 2.0.0 → 2.0.1

package/fesm2022/wemake4u-form-player.mjs

@@ -1,20 +1,20 @@
 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, untracked } 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 { CommonModule, isPlatformBrowser } from "@angular/common";
+import { CommonModule, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from "@angular/common";
 import * as i1$3 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 } from "rxjs";
+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 { 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 } from "rxjs/operators";
+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 { 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 { SirioAccordion, SirioAccordionContent, SirioAccordionItem, SirioAlert, SirioAlertContent, SirioBadgeTag, SirioButton, SirioCheckbox, SirioChecklist, SirioCollapse, SirioCollapseToggle, SirioControlBase, SirioDate, SirioDateTime, SirioDialog, SirioDialogFooter, SirioDialogRef, SirioDialogService, SirioFileUpload, SirioInfoButton, SirioNotify, SirioNotifyContent, SirioNumber, SirioOptionLabel, SirioPagination, SirioRadioGroup, SirioSelect, SirioSidenav, SirioSlider, SirioStepper, SirioTab, SirioTabContent, SirioTabs, SirioTextarea, SirioTextbox, SirioTime, provideSirioValidationPresenter } 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 { marked } from "marked";
@@ -187,6 +187,7 @@ const Texts$6 = {
 	InformationAbout: "Informazioni su",
 	OpenMenu: "Apri Menu",
 	CloseMenu: "Chiudi Menu",
+	Loading: "Caricamento in corso",
 	LoadingFailed: "Si è verificato un errore durante il caricamento dei dati",
 	ConfirmDelete: "Confermi l’eliminazione ?\r\nL’operazione non può essere annullata",
 	MoveUp: "Sposta Sù",
@@ -209,7 +210,11 @@ const Texts$6 = {
 	SelectedPlural: "Selezionati",
 	SomethingWentWrong: "Si è verificato un problema",
 	TimeoutOccurred: "Il server non ha risposto in tempo. Riprova tra qualche istante",
-	GenericError: "Si è verificato un errore imprevisto"
+	GenericError: "Si è verificato un errore imprevisto",
+	ItemPosition: "elemento {0} di {1}",
+	ItemAdded: "Elemento {0} aggiunto",
+	ItemRemoved: "Elemento {0} rimosso",
+	ItemMoved: "Elemento spostato in posizione {0} di {1}"
 };
 const Texts$5 = {
 	TypeToSearch: "Type to search...",
@@ -249,6 +254,7 @@ const Texts$5 = {
 	InformationAbout: "Information about",
 	OpenMenu: "Open menu",
 	CloseMenu: "Close menu",
+	Loading: "Loading",
 	LoadingFailed: "An error occurred while loading data",
 	ConfirmDelete: "Do you confirm the deletion?\r\nThis action cannot be undone",
 	MoveUp: "Move Up",
@@ -271,7 +277,11 @@ const Texts$5 = {
 	SelectedPlural: "Selected",
 	SomethingWentWrong: "Something went wrong",
 	TimeoutOccurred: "The server did not respond in time. Please try again in a few moments",
-	GenericError: "An unexpected error occurred"
+	GenericError: "An unexpected error occurred",
+	ItemPosition: "item {0} of {1}",
+	ItemAdded: "Item {0} added",
+	ItemRemoved: "Item {0} removed",
+	ItemMoved: "Item moved to position {0} of {1}"
 };
 const Texts$4 = {
 	TypeToSearch: "Zum Suchen tippen...",
@@ -311,6 +321,7 @@ const Texts$4 = {
 	InformationAbout: "Informationen zu",
 	OpenMenu: "Menü öffnen",
 	CloseMenu: "Menü schließen",
+	Loading: "Wird geladen",
 	LoadingFailed: "Beim Laden der Daten ist ein Fehler aufgetreten",
 	ConfirmDelete: "Möchten Sie das Löschen bestätigen?\r\nDieser Vorgang kann nicht rückgängig gemacht werden",
 	MoveUp: "Nach oben verschieben",
@@ -333,7 +344,11 @@ const Texts$4 = {
 	SelectedPlural: "Ausgewählt",
 	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"
+	GenericError: "Ein unerwarteter Fehler ist aufgetreten",
+	ItemPosition: "Element {0} von {1}",
+	ItemAdded: "Element {0} hinzugefügt",
+	ItemRemoved: "Element {0} entfernt",
+	ItemMoved: "Element an Position {0} von {1} verschoben"
 };
 const Texts$3 = {
 	TypeToSearch: "Tapez pour rechercher...",
@@ -373,6 +388,7 @@ const Texts$3 = {
 	InformationAbout: "Informations sur",
 	OpenMenu: "Ouvrir le menu",
 	CloseMenu: "Fermer le menu",
+	Loading: "Chargement en cours",
 	LoadingFailed: "Erreur lors du chargement des données",
 	ConfirmDelete: "Confirmez-vous la suppression ?\r\nCette action ne peut pas être annulée",
 	MoveUp: "Déplacer vers le haut",
@@ -395,7 +411,11 @@ const Texts$3 = {
 	SelectedPlural: "Sélectionnés",
 	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"
+	GenericError: "Une erreur inattendue s'est produite",
+	ItemPosition: "élément {0} sur {1}",
+	ItemAdded: "Élément {0} ajouté",
+	ItemRemoved: "Élément {0} supprimé",
+	ItemMoved: "Élément déplacé en position {0} sur {1}"
 };
 const Texts$2 = {
 	TypeToSearch: "Escribe para buscar...",
@@ -435,6 +455,7 @@ const Texts$2 = {
 	InformationAbout: "Información sobre",
 	OpenMenu: "Abrir menú",
 	CloseMenu: "Cerrar menú",
+	Loading: "Cargando",
 	LoadingFailed: "Error al cargar los datos",
 	ConfirmDelete: "¿Confirma la eliminación?\r\nEsta acción no se puede deshacer",
 	MoveUp: "Mover arriba",
@@ -457,7 +478,11 @@ const Texts$2 = {
 	SelectedPlural: "Seleccionados",
 	SomethingWentWrong: "Algo salió mal",
 	TimeoutOccurred: "El servidor no respondió a tiempo. Inténtalo de nuevo en unos instantes",
-	GenericError: "Se produjo un error inesperado"
+	GenericError: "Se produjo un error inesperado",
+	ItemPosition: "elemento {0} de {1}",
+	ItemAdded: "Elemento {0} añadido",
+	ItemRemoved: "Elemento {0} eliminado",
+	ItemMoved: "Elemento movido a la posición {0} de {1}"
 };
 const Texts$1 = {
 	TypeToSearch: "Digite para pesquisar...",
@@ -497,6 +522,7 @@ const Texts$1 = {
 	InformationAbout: "Informações sobre",
 	OpenMenu: "Abrir menu",
 	CloseMenu: "Fechar menu",
+	Loading: "A carregar",
 	LoadingFailed: "Erro ao carregar os dados",
 	ConfirmDelete: "Confirma a eliminação?\r\nEsta ação não pode ser desfeita",
 	MoveUp: "Mover para cima",
@@ -519,7 +545,11 @@ const Texts$1 = {
 	SelectedPlural: "Selecionados",
 	SomethingWentWrong: "Algo deu errado",
 	TimeoutOccurred: "O servidor não respondeu a tempo. Tente novamente dentro de alguns instantes",
-	GenericError: "Ocorreu um erro inesperado"
+	GenericError: "Ocorreu um erro inesperado",
+	ItemPosition: "item {0} de {1}",
+	ItemAdded: "Item {0} adicionado",
+	ItemRemoved: "Item {0} removido",
+	ItemMoved: "Item movido para a posição {0} de {1}"
 };
 const Texts = {
 	...Texts$6,
@@ -1880,6 +1910,15 @@ var FormService = class FormService {
 		if (formArray instanceof FormArrayEx) return formArray.moveDown(index);
 		return false;
 	}
+	resize(control, path, newSize) {
+		if (!Number.isInteger(newSize) || newSize < 0) return false;
+		const formArray = this.applyPath(control, path);
+		if (formArray instanceof FormArrayEx) {
+			formArray.resize(newSize, () => this.createArrayItem(formArray));
+			return true;
+		}
+		return false;
+	}
 	status(control, path, pathOptions) {
 		return this.applyPath(control, path, pathOptions)?.status;
 	}
@@ -2036,6 +2075,7 @@ var FormService = class FormService {
 			remove: (path, index) => this.remove(formGroup, path, index),
 			moveUp: (path, index) => this.moveUp(formGroup, path, index),
 			moveDown: (path, index) => this.moveDown(formGroup, path, index),
+			resize: (path, newSize) => this.resize(formGroup, path, newSize),
 			buildControl: (value) => this.buildControl(value),
 			getInvalidControls: (control) => this.getInvalidControls(control)
 		};
@@ -3012,7 +3052,7 @@ var ProgrammabilityService = class ProgrammabilityService {
 		} else return evaluate();
 	}
 	onError(result) {
-		if (isObservable(result)) return result.pipe(tap({ error: (err) => {
+		if (isObservable(result)) return result.pipe(tap$1({ error: (err) => {
 			this.toastService.notifyError(err.message);
 		} }));
 		else return result;
@@ -3202,7 +3242,7 @@ var ProgrammabilityService = class ProgrammabilityService {
 	}
 	route = inject(ActivatedRoute);
 	queryParams = this.route.snapshot.queryParams;
-	queryParams$ = this.route.queryParams.pipe(tap((params) => this.queryParams = params), shareReplay$1({
+	queryParams$ = this.route.queryParams.pipe(tap$1((params) => this.queryParams = params), shareReplay$1({
 		bufferSize: 1,
 		refCount: true
 	}));
@@ -4413,7 +4453,23 @@ var ObjectURLRendererComponent = class ObjectURLRendererComponent {
 		isStandalone: true,
 		selector: "ng-component",
 		ngImport: i0,
-		template: "<a [attr.aria-label]=\"Texts.Show\" title=\"{{ Texts.Show }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-paperclip\"></span>\r\n</a>\r\n",
+		template: "<!-- Button (not a link): announced as a button, activated also with Space. -->\r\n<button type=\"button\" wmSirioButton=\"ghost\" class=\"btn-small\" iconOnly icon=\"fa-paperclip\" [label]=\"Texts.Show\" (click)=\"onClick($event)\"></button>\r\n",
+		dependencies: [{
+			kind: "component",
+			type: SirioButton,
+			selector: "button[wmSirioButton], a[wmSirioButton]",
+			inputs: [
+				"wmSirioButton",
+				"size",
+				"icon",
+				"iconPosition",
+				"iconOnly",
+				"label",
+				"block",
+				"white",
+				"disabled"
+			]
+		}],
 		changeDetection: i0.ChangeDetectionStrategy.Eager
 	});
 };
@@ -4427,7 +4483,8 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			changeDetection: ChangeDetectionStrategy.Eager,
 			standalone: true,
-			template: "<a [attr.aria-label]=\"Texts.Show\" title=\"{{ Texts.Show }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-paperclip\"></span>\r\n</a>\r\n"
+			imports: [SirioButton],
+			template: "<!-- Button (not a link): announced as a button, activated also with Space. -->\r\n<button type=\"button\" wmSirioButton=\"ghost\" class=\"btn-small\" iconOnly icon=\"fa-paperclip\" [label]=\"Texts.Show\" (click)=\"onClick($event)\"></button>\r\n"
 		}]
 	}]
 });
@@ -4458,7 +4515,23 @@ var DeleteRowRendererComponent = class DeleteRowRendererComponent {
 		isStandalone: true,
 		selector: "ng-component",
 		ngImport: i0,
-		template: "<a [attr.aria-label]=\"Texts.Remove\" title=\"{{ Texts.Remove }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-trash\"></span>\r\n</a>\r\n",
+		template: "<!-- Button (not a link): announced as a button, activated also with Space. -->\r\n<button type=\"button\" wmSirioButton=\"ghost\" class=\"btn-small\" iconOnly icon=\"fa-trash\" [label]=\"Texts.Remove\" (click)=\"onClick($event)\"></button>\r\n",
+		dependencies: [{
+			kind: "component",
+			type: SirioButton,
+			selector: "button[wmSirioButton], a[wmSirioButton]",
+			inputs: [
+				"wmSirioButton",
+				"size",
+				"icon",
+				"iconPosition",
+				"iconOnly",
+				"label",
+				"block",
+				"white",
+				"disabled"
+			]
+		}],
 		changeDetection: i0.ChangeDetectionStrategy.Eager
 	});
 };
@@ -4472,7 +4545,8 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			changeDetection: ChangeDetectionStrategy.Eager,
 			standalone: true,
-			template: "<a [attr.aria-label]=\"Texts.Remove\" title=\"{{ Texts.Remove }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-trash\"></span>\r\n</a>\r\n"
+			imports: [SirioButton],
+			template: "<!-- Button (not a link): announced as a button, activated also with Space. -->\r\n<button type=\"button\" wmSirioButton=\"ghost\" class=\"btn-small\" iconOnly icon=\"fa-trash\" [label]=\"Texts.Remove\" (click)=\"onClick($event)\"></button>\r\n"
 		}]
 	}]
 });
@@ -4817,12 +4891,21 @@ var HostCellRendererComponent = class HostCellRendererComponent {
 	}
 	setProperties() {
 		if (!this.componentRef) return;
-		const properties = this.resolveProperties();
+		const properties = this.applyPropertiesHandler(this.resolveProperties());
 		for (const key of Object.keys(properties)) {
 			const value = properties[key];
 			if (key in this.componentRef.instance) this.componentRef.setInput?.(key, value);
 		}
 	}
+	applyPropertiesHandler(properties) {
+		const handler = this.getPropertiesHandler();
+		if (typeof handler !== "function") return properties;
+		const extra = handler(properties, this.params);
+		return extra ? {
+			...properties,
+			...extra
+		} : properties;
+	}
 	evaluate(value) {
 		const event = {
 			params: this.params,
@@ -4843,6 +4926,9 @@ var HostCellRendererComponent = class HostCellRendererComponent {
 	getProperties() {
 		return this.params.properties;
 	}
+	getPropertiesHandler() {
+		return this.params.onPropertiesResolved;
+	}
 	getFormGroup() {
 		return this.params.formGroup;
 	}
@@ -5002,12 +5088,14 @@ var GridService = class GridService {
 	formatter;
 	languageService;
 	programmability;
+	metadata;
 	markdownService;
 	weak;
-	constructor(formatter, languageService, programmability, 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;
 	}
@@ -5222,7 +5310,7 @@ var GridService = class GridService {
 		});
 	}
 	setCellDataType(column, colDef) {
-		if (column.dataType === "component" || column.dataType === "formatted" || column.dataType === "auto") return;
+		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) {
@@ -5255,6 +5343,24 @@ var GridService = class GridService {
 			};
 			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) {
@@ -5367,12 +5473,23 @@ var GridService = class GridService {
 	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
+				hideDisabledCheckboxes: true,
+				checkboxes,
+				headerCheckbox: checkboxes,
+				enableClickSelection: click,
+				enableSelectionWithoutKeys: click
+			};
+			else options = {
+				mode: "singleRow",
+				checkboxes,
+				enableClickSelection: click
 			};
-			else options = { mode: "singleRow" };
 			if (component.rowSelectable) options = {
 				...options,
 				isRowSelectable: (rowNode) => this.onRowSelectable(component, formGroup, rowNode.data)
@@ -5433,6 +5550,11 @@ var GridService = class GridService {
 	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;
 	}
@@ -5617,6 +5739,7 @@ var GridService = class GridService {
 			{ token: FormatterService },
 			{ token: i1$4.LanguageService },
 			{ token: ProgrammabilityService },
+			{ token: MetadataService },
 			{ token: MarkdownService },
 			{ token: WeakService }
 		],
@@ -5639,470 +5762,1250 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: FormatterService },
 		{ type: i1$4.LanguageService },
 		{ type: ProgrammabilityService },
+		{ type: MetadataService },
 		{ type: MarkdownService },
 		{ type: WeakService }
 	]
 });
-function observableAll(obj) {
-	function collect(value) {
-		if (isObservable(value)) return value;
-		if (Array.isArray(value)) return combineLatest(value.map(collect));
-		if (typeof value === "object" && value !== null) {
-			const keys = Object.keys(value);
-			const observables = keys.map((k) => collect(value[k]));
-			return combineLatest(observables).pipe(map$1((resolvedValues) => {
-				const resolvedObject = {};
-				resolvedValues.forEach((v, i) => {
-					resolvedObject[keys[i]] = v;
-				});
-				return resolvedObject;
-			}));
-		}
-		return of(value);
-	}
-	return collect(obj);
-}
-var ChartService = class ChartService {
+var CacheContextService = class CacheContextService {
 	programmability;
-	languageService;
-	constructor(programmability, languageService) {
+	constructor(programmability) {
 		this.programmability = programmability;
-		this.languageService = languageService;
 	}
-	getOptions(component, formGroup) {
-		const expression = this.getDataExpression(component);
-		return observableAll(this.programmability.evaluate(formGroup, expression)).pipe(map$1((chartData) => {
-			const series = this.getSeries(component, formGroup);
-			const options = {
-				theme: this.getTheme(),
-				series,
-				...this.getProps(component)
-			};
-			this.bindData(options, chartData);
-			return options;
-		}));
+	isExpression(text) {
+		return this.programmability.isExpression(text);
 	}
-	getDataExpression(component) {
-		const getExpression = (expression) => {
-			return this.programmability.isExpression(expression) ? this.programmability.getExpression(expression) : "null";
-		};
-		return `={ data: (${getExpression(component.data)}), series: [${(component.series ?? []).map((serie) => getExpression(serie.data)).map((expr) => `(${expr})`).join(", ")}] }`;
+	getExpression(text) {
+		return this.programmability.getExpression(text);
 	}
-	bindData(options, chartData) {
-		if (chartData.data) options.data = chartData.data;
-		if (Array.isArray(options.series)) options.series.forEach((serie, index) => {
-			if (chartData.series[index]) serie.data = chartData.series[index];
-		});
+	evaluateString(cacheControl, formGroup, value, options = {}) {
+		if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluateString(formGroup, value, this.getOptions(options)));
+		return value ?? "";
 	}
-	get language() {
-		return this.languageService.getLanguage();
+	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;
 	}
-	locale(component, key) {
-		return localize(this.language, component, key);
+	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;
 	}
-	getTheme() {
-		return {
-			baseTheme: "ag-default",
-			params: {
-				fontFamily: "inherit",
-				textColor: "#00121A",
-				chromeFontFamily: "inherit",
-				chromeTextColor: "#00121A"
-			},
-			overrides: { common: { background: {
-				visible: true,
-				fill: "transparent"
-			} } }
-		};
+	evaluate(cacheControl, formGroup, value, options = {}) {
+		if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluate(formGroup, value, this.getOptions(options)));
+		return value;
 	}
-	getSeries(component, formGroup) {
-		if (Array.isArray(component.series)) return component.series.map((serie) => {
-			switch (serie.type) {
-				case "bar": return this.getBarSeriesOptions(serie, formGroup);
-				case "line": return this.getLineSeriesOptions(serie, formGroup);
-				case "area": return this.getAreaSeriesOptions(serie, formGroup);
-				case "scatter": return this.getScatterSeriesOptions(serie, formGroup);
-				case "bubble": return this.getBubbleSeriesOptions(serie, formGroup);
-				case "pie": return this.getPieSeriesOptions(serie, formGroup);
-				case "donut": return this.getDonutSeriesOptions(serie, formGroup);
-				default: return {};
-			}
-		});
-		else return [];
+	evaluateTemplate(cacheControl, formGroup, value, options = {}) {
+		return this.call(cacheControl, value, () => this.programmability.evaluateTemplate(formGroup, value, this.getOptions(options)));
 	}
-	getSeriesOptionsNames(serie) {
-		const options = {};
-		if (this.isString(serie.xName)) options.xName = this.locale(serie, "xName");
-		if (this.isString(serie.yName)) options.yName = this.locale(serie, "yName");
-		if (this.isString(serie.legendItemName)) options.legendItemName = this.locale(serie, "legendItemName");
-		return 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;
 	}
-	getBaseSeriesOptions(serie, formGroup) {
-		const options = {};
-		if (this.isBoolean(serie.visible)) options.visible = serie.visible;
-		return options;
+	invalidate(cacheControl) {
+		if (this.cache.has(cacheControl)) this.cache.delete(cacheControl);
 	}
-	getBarSeriesOptions(serie, formGroup) {
-		const options = {
-			type: "bar",
-			xKey: serie.xKey,
-			yKey: serie.yKey,
-			...this.getBaseSeriesOptions(serie, formGroup),
-			...this.getSeriesOptionsNames(serie)
-		};
-		if (this.isDirection(serie.direction)) options.direction = serie.direction;
-		if (this.isBoolean(serie.stacked)) options.stacked = serie.stacked;
-		if (this.isNumber(serie.normalizedTo)) options.normalizedTo = serie.normalizedTo;
-		if (this.isString(serie.stackGroup)) options.stackGroup = serie.stackGroup;
-		return options;
+	invalidateAll() {
+		this.cache = /* @__PURE__ */ new WeakMap();
 	}
-	getLineSeriesOptions(serie, formGroup) {
-		const options = {
-			type: "line",
-			xKey: serie.xKey,
-			yKey: serie.yKey,
-			...this.getBaseSeriesOptions(serie, formGroup),
-			...this.getSeriesOptionsNames(serie)
+	getOptions(options) {
+		return {
+			...options,
+			cacheable: false
 		};
-		if (this.isInterpolation(serie.interpolation)) options.interpolation = { type: serie.interpolation };
-		return options;
 	}
-	getAreaSeriesOptions(serie, formGroup) {
-		const options = {
-			type: "area",
-			xKey: serie.xKey,
-			yKey: serie.yKey,
-			...this.getBaseSeriesOptions(serie, formGroup),
-			...this.getAreaSeriesOptionsNames(serie)
-		};
-		if (this.isBoolean(serie.stacked)) options.stacked = serie.stacked;
-		if (this.isNumber(serie.normalizedTo)) options.normalizedTo = serie.normalizedTo;
-		return options;
+	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;
 	}
-	getAreaSeriesOptionsNames(serie) {
-		const options = {};
-		if (serie.xName) options.xName = this.locale(serie, "xName");
-		if (serie.yName) options.yName = this.locale(serie, "yName");
-		return options;
+	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
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CacheContextService,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => [{ type: ProgrammabilityService }]
+});
+const FROM_AG = {
+	notEqual: "notEquals",
+	inRange: "between"
+};
+const TO_AG = {
+	notEquals: "notEqual",
+	between: "inRange"
+};
+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) {
+	const result = {};
+	if (!model) return result;
+	for (const [key, filter] of Object.entries(model)) {
+		const condition = agFilterToCondition(filter, columns.find((c) => c.key === key)?.filter ?? null, key);
+		if (condition && sirioGridFilterActive(condition)) result[key] = condition;
 	}
-	getScatterSeriesOptions(serie, formGroup) {
-		return {
-			type: "scatter",
-			xKey: serie.xKey,
-			yKey: serie.yKey,
-			labelKey: serie.labelKey,
-			...this.getBaseSeriesOptions(serie, formGroup),
-			...this.getScatterSeriesOptionsNames(serie)
+	return result;
+}
+function agFilterToCondition(filter, type, key) {
+	if (!filter || typeof filter !== "object") return null;
+	if (Array.isArray(filter["conditions"])) {
+		const conditions = filter["conditions"];
+		if (filter["operator"] === "OR" && conditions.every((c) => c?.["type"] === "equals")) return {
+			operator: "in",
+			value: conditions.map((c) => c["filter"])
+		};
+		console.warn(`[form-player] Data grid: the ${filter["operator"]} filter of "${key}" keeps only its first condition.`);
+		return conditions.length ? agFilterToCondition(conditions[0], type, key) : null;
+	}
+	const agType = String(filter["type"] ?? "");
+	switch (agType) {
+		case "includeAll":
+		case "": return null;
+		case "excludeAll": return {
+			operator: "in",
+			value: []
+		};
+		case "true": return {
+			operator: "equals",
+			value: true
+		};
+		case "false": return {
+			operator: "equals",
+			value: false
+		};
+		case "blank":
+		case "notBlank": return { operator: agType };
+	}
+	const operator = FROM_AG[agType] ?? agType;
+	if (filter["filterType"] === "date") {
+		const from = isoDay(filter["dateFrom"]);
+		const to = isoDay(filter["dateTo"]);
+		const dateOperator = agType === "lessThan" ? "before" : agType === "greaterThan" ? "after" : operator;
+		return dateOperator === "between" ? {
+			operator: "between",
+			value: from,
+			to
+		} : {
+			operator: dateOperator,
+			value: from
 		};
 	}
-	getScatterSeriesOptionsNames(serie) {
-		const options = {};
-		if (serie.xName) options.xName = this.locale(serie, "xName");
-		if (serie.yName) options.yName = this.locale(serie, "yName");
-		if (serie.labelName) options.labelName = this.locale(serie, "labelName");
-		return options;
-	}
-	getBubbleSeriesOptions(serie, formGroup) {
+	if (type === "select" && operator === "equals") return {
+		operator: "in",
+		value: [filter["filter"]]
+	};
+	return operator === "between" ? {
+		operator,
+		value: filter["filter"] ?? null,
+		to: filter["filterTo"] ?? null
+	} : {
+		operator,
+		value: filter["filter"] ?? null
+	};
+}
+function sirioFiltersToAg(filters, columns, byField = false) {
+	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;
+	}
+	return result;
+}
+function sirioValueToAg(value, type) {
+	const condition = sirioIsFilterCondition(value) ? value : simpleToCondition(value, type);
+	const { operator } = condition;
+	if (operator === "blank" || operator === "notBlank") return {
+		filterType: agFilterType(type, null),
+		type: operator
+	};
+	if (type === "boolean") return {
+		filterType: "text",
+		type: condition.value ? "true" : "false"
+	};
+	if (operator === "in" || operator === "notIn") {
+		const conditions = (Array.isArray(condition.value) ? condition.value : [condition.value]).map((v) => ({
+			filterType: agFilterType(type, v),
+			type: operator === "in" ? "equals" : "notEqual",
+			filter: v
+		}));
+		if (conditions.length === 1) return conditions[0];
 		return {
-			type: "bubble",
-			xKey: serie.xKey,
-			yKey: serie.yKey,
-			sizeKey: serie.sizeKey,
-			labelKey: serie.labelKey,
-			...this.getBaseSeriesOptions(serie, formGroup),
-			...this.getBubbleSeriesOptionsNames(serie)
+			filterType: conditions[0]?.filterType ?? "text",
+			operator: operator === "in" ? "OR" : "AND",
+			conditions
 		};
 	}
-	getBubbleSeriesOptionsNames(serie) {
-		const options = {};
-		if (serie.xName) options.xName = this.locale(serie, "xName");
-		if (serie.yName) options.yName = this.locale(serie, "yName");
-		if (serie.sizeName) options.sizeName = this.locale(serie, "sizeName");
-		if (serie.labelName) options.labelName = this.locale(serie, "labelName");
-		return options;
+	if (type === "date") return {
+		filterType: "date",
+		type: operator === "before" ? "lessThan" : operator === "after" ? "greaterThan" : TO_AG[operator] ?? operator,
+		dateFrom: agDate(condition.value),
+		dateTo: operator === "between" ? agDate(condition.to) : null
+	};
+	const filter = {
+		filterType: agFilterType(type, condition.value),
+		type: TO_AG[operator] ?? operator,
+		filter: condition.value
+	};
+	if (operator === "between") filter["filterTo"] = condition.to;
+	return filter;
+}
+function simpleToCondition(value, type) {
+	if (Array.isArray(value)) return {
+		operator: "in",
+		value
+	};
+	if (typeof value === "boolean") return {
+		operator: "equals",
+		value
+	};
+	if (value && typeof value === "object") {
+		const range = value;
+		const hasFrom = sirioGridFilterActive(range.from);
+		const hasTo = sirioGridFilterActive(range.to);
+		if (hasFrom && hasTo) return {
+			operator: "between",
+			value: range.from,
+			to: range.to
+		};
+		if (type === "date") return hasFrom ? {
+			operator: "after",
+			value: range.from
+		} : {
+			operator: "before",
+			value: range.to
+		};
+		return hasFrom ? {
+			operator: "greaterThanOrEqual",
+			value: range.from
+		} : {
+			operator: "lessThanOrEqual",
+			value: range.to
+		};
 	}
-	getPieSeriesOptions(serie, formGroup) {
-		const options = {
-			type: "pie",
-			angleKey: serie.angleKey,
-			...this.getBaseSeriesOptions(serie, formGroup),
-			...this.getPieSeriesOptionsNames(serie)
+	return type === "select" ? {
+		operator: "in",
+		value: [value]
+	} : {
+		operator: type === "text" ? "contains" : "equals",
+		value
+	};
+}
+function agFilterType(type, value) {
+	switch (type) {
+		case "number": return "number";
+		case "date": return "date";
+		case "select": return typeof value === "number" ? "number" : "text";
+		default: return "text";
+	}
+}
+function agOrderToSirio(order) {
+	return (order ?? []).filter((o) => o && (o.sort === "asc" || o.sort === "desc")).map((o) => ({
+		field: o.colId,
+		direction: o.sort
+	}));
+}
+function sirioSortToAg(sort) {
+	return sort.map((s) => ({
+		colId: s.field,
+		sort: s.direction
+	}));
+}
+const UNPAGED_BLOCK = 100;
+function isRowsSource(value) {
+	return !!value && typeof value.getRows === "function";
+}
+function rowsSourceToDataSource(source, columns) {
+	const pagedSize = signal(null, ...ngDevMode ? [{ debugName: "pagedSize" }] : /* istanbul ignore next */ []);
+	let reuse = null;
+	const keyOf = (offset, size, query) => JSON.stringify([
+		offset,
+		size,
+		query.sort,
+		query.filters
+	]);
+	const dataSource = (query) => {
+		const paged = query.pageSize > 0;
+		const size = paged ? query.pageSize : UNPAGED_BLOCK;
+		const key = keyOf(query.offset, size, query);
+		if (reuse) {
+			const kept = reuse;
+			if (paged && kept.key === key) {
+				if (!kept.dropping) {
+					kept.dropping = true;
+					setTimeout(() => reuse === kept && (reuse = null));
+				}
+				return Promise.resolve(kept.result);
+			}
+			reuse = null;
+		}
+		return new Promise((resolve, reject) => {
+			const params = {
+				startRow: query.offset,
+				endRow: query.offset + size,
+				sortModel: sirioSortToAg(query.sort),
+				filterModel: sirioFiltersToAg(query.filters, columns(), true),
+				context: void 0,
+				successCallback: (rows, lastRow) => {
+					const list = Array.isArray(rows) ? rows : [];
+					const total = typeof lastRow === "number" && lastRow >= 0 ? lastRow : null;
+					const result = {
+						rows: list,
+						total
+					};
+					if (!paged && pagedSize() === null) {
+						if ((total !== null ? total > list.length : list.length >= size) && list.length > 0) {
+							const found = Math.min(size, list.length);
+							reuse = {
+								key: keyOf(0, found, query),
+								result
+							};
+							queueMicrotask(() => pagedSize.set(found));
+						}
+					}
+					resolve(result);
+				},
+				failCallback: () => reject(/* @__PURE__ */ new Error("Data source error"))
+			};
+			try {
+				source.getRows(params);
+			} catch (error) {
+				reject(error);
+			}
+		});
+	};
+	return {
+		dataSource,
+		pagedSize
+	};
+}
+const NO_PAGED_SIZE = signal(null).asReadonly();
+var SirioGridService = class SirioGridService {
+	formatter;
+	languageService;
+	programmability;
+	metadata;
+	markdownService;
+	constructor(formatter, languageService, programmability, metadata, markdownService) {
+		this.formatter = formatter;
+		this.languageService = languageService;
+		this.programmability = programmability;
+		this.metadata = metadata;
+		this.markdownService = markdownService;
+	}
+	rowsCache = /* @__PURE__ */ new WeakMap();
+	warnedRules = /* @__PURE__ */ new Set();
+	getCacheKey() {
+		return `getSirioGrid_${this.language}`;
+	}
+	getConfig(component, columns, formGroup) {
+		const list = Array.isArray(columns) ? columns : [];
+		const columnConfigs = list.map((column, index) => this.createColumn(column, index, formGroup));
+		const used = /* @__PURE__ */ new Set();
+		for (const config of columnConfigs) {
+			let id = config.id;
+			for (let n = 2; used.has(id); n++) id = `${config.id}~${n}`;
+			used.add(id);
+			config.id = id;
+		}
+		if (this.hasActions(component)) columnConfigs.push(this.createActionsColumn(component, formGroup));
+		const trigger = this.selectionTrigger(component);
+		const rowCount = typeof component.rowCount === "number" && component.rowCount > 0 ? component.rowCount : null;
+		const selectableCache = /* @__PURE__ */ new WeakMap();
+		return {
+			source: columns,
+			columns: columnConfigs,
+			modelColumns: columnConfigs.filter((c) => !c.actions).map((c) => ({
+				key: c.id,
+				field: c.field,
+				filter: c.filter
+			})),
+			rowId: typeof component.rowId === "string" && component.rowId.trim() !== "" ? component.rowId : null,
+			checkboxes: trigger !== "click",
+			clickSelect: trigger !== "checkbox",
+			rowSelectable: component.rowSelectable ? (row) => {
+				if (!row || typeof row !== "object") return false;
+				if (!selectableCache.has(row)) selectableCache.set(row, this.rowCallback(formGroup, component.rowSelectable, row));
+				return selectableCache.get(row);
+			} : null,
+			rowClass: this.rowClassOf(component, formGroup),
+			rowStyle: this.rowStyleOf(component, formGroup),
+			pageable: rowCount !== null,
+			pageSize: rowCount ?? 100,
+			rowNumbers: !!component.rowNumbers,
+			reorderable: list.some((c) => c?.move === true),
+			resizable: list.some((c) => c?.resize === true),
+			selected: signal([])
 		};
-		if (this.isString(serie.radiusKey)) options.radiusKey = serie.radiusKey;
-		if (this.isString(serie.calloutLabelKey)) options.calloutLabelKey = serie.calloutLabelKey;
-		if (this.isString(serie.sectorLabelKey)) options.sectorLabelKey = serie.sectorLabelKey;
-		if (this.isString(serie.legendItemKey)) options.legendItemKey = serie.legendItemKey;
-		return options;
 	}
-	getPieSeriesOptionsNames(serie) {
-		const options = {};
-		if (serie.angleName) options.angleName = this.locale(serie, "angleName");
-		if (serie.radiusName) options.radiusName = this.locale(serie, "radiusName");
-		if (serie.calloutLabelName) options.calloutLabelName = this.locale(serie, "calloutLabelName");
-		if (serie.sectorLabelName) options.sectorLabelName = this.locale(serie, "sectorLabelName");
-		return options;
+	getRows(source, config, onData) {
+		if (!source || typeof source !== "object") return this.staticRows([]);
+		const cached = this.rowsCache.get(source);
+		if (cached) return cached;
+		let rows;
+		if (Array.isArray(source)) {
+			rows = this.staticRows(source);
+			onData(source);
+		} else if (isRowsSource(source)) {
+			const { dataSource, pagedSize } = rowsSourceToDataSource(source, () => config.modelColumns);
+			rows = {
+				data: signal(null),
+				dataSource,
+				loading: signal(false),
+				failed: signal(false),
+				pagedSize
+			};
+		} else if (isObservable(source)) {
+			let sync = true;
+			let initial = {
+				list: null,
+				failed: false,
+				done: false
+			};
+			let state = null;
+			const receive = (list, failedLoad) => {
+				if (sync || !state) initial = {
+					list,
+					failed: failedLoad,
+					done: true
+				};
+				else {
+					state.data.set(list);
+					state.loading.set(false);
+					state.failed.set(failedLoad);
+				}
+			};
+			source.pipe(take(1)).subscribe({
+				next: (value) => {
+					const list = Array.isArray(value) ? value : [];
+					receive(list, false);
+					onData(list);
+				},
+				error: () => receive([], true),
+				complete: () => {
+					if (!sync && state) state.loading.set(false);
+					else if (!initial.done) initial = {
+						list: [],
+						failed: false,
+						done: true
+					};
+				}
+			});
+			sync = false;
+			state = {
+				data: signal(initial.list),
+				dataSource: null,
+				loading: signal(!initial.done),
+				failed: signal(initial.failed),
+				pagedSize: NO_PAGED_SIZE
+			};
+			rows = state;
+		} else rows = this.staticRows([]);
+		this.rowsCache.set(source, rows);
+		return rows;
 	}
-	getDonutSeriesOptions(serie, formGroup) {
-		const options = {
-			type: "donut",
-			angleKey: serie.angleKey,
-			...this.getBaseSeriesOptions(serie, formGroup),
-			...this.getDonutSeriesOptionsNames(serie)
+	onSelectionChanged(component, formGroup, selectedRows) {
+		if (component.selectionChanged) {
+			const event = { selectedRows: [...selectedRows] };
+			this.programmability.evaluate(formGroup, component.selectionChanged, {
+				cacheable: false,
+				extendContext: () => ({ event }),
+				invokeArgs: [event]
+			});
+		}
+	}
+	initialSelection(component, formGroup, selection, rows) {
+		if (!component.rowSelected || selection === "none") return null;
+		const selected = rows.filter((row) => row && this.rowCallback(formGroup, component.rowSelected, row));
+		return selection === "single" ? selected.slice(0, 1) : selected;
+	}
+	createColumn(column, index, formGroup) {
+		const dataType = typeof column.dataType === "string" ? column.dataType.trim() : "";
+		const map = this.getMap(column, dataType, formGroup);
+		const numeric = [
+			"number",
+			"integer",
+			"decimal",
+			"currency",
+			"percentage"
+		].includes(dataType);
+		const config = {
+			id: String(column.key ?? `column-${index}`),
+			field: column.key ?? "",
+			header: this.locale(column, "label"),
+			value: this.callbackOf(formGroup, column.valueGetter),
+			format: this.formatOf(dataType, map),
+			align: this.alignOf(column.align) ?? (numeric && !map ? "end" : null),
+			filter: null,
+			filterOptions: [],
+			filterMultiple: false,
+			filterOperators: null,
+			sortable: column.sort === true,
+			resizable: column.resize === true,
+			wrap: column.autoHeight === true,
+			mono: map ? false : numeric || [
+				"date",
+				"dateTime",
+				"time"
+			].includes(dataType) ? true : null,
+			fit: false,
+			fixed: column.pinned === "left" || column.pinned === "right" ? column.pinned : null,
+			flex: column.flex === true ? 1 : null,
+			width: typeof column.width === "number" ? `${column.width}px` : null,
+			minWidth: typeof column.minWidth === "number" ? column.minWidth : 60,
+			maxWidth: typeof column.maxWidth === "number" ? column.maxWidth : null,
+			group: typeof column.group === "string" && column.group.trim() ? column.group : null,
+			cellClass: this.cellClassOf(column, formGroup),
+			cellStyle: this.cellStyleOf(column, formGroup),
+			headerClass: this.staticStyle(formGroup, column.headerClass, (fn) => sirioGridClassText(fn({ colDef: { field: column.key } }))),
+			headerStyle: this.staticStyle(formGroup, column.headerStyle, (fn) => sirioGridStyleObject(fn({ colDef: { field: column.key } }))),
+			renderer: this.rendererOf(column, dataType, formGroup),
+			actions: false
 		};
-		if (this.isString(serie.radiusKey)) options.radiusKey = serie.radiusKey;
-		if (this.isString(serie.calloutLabelKey)) options.calloutLabelKey = serie.calloutLabelKey;
-		if (this.isString(serie.sectorLabelKey)) options.sectorLabelKey = serie.sectorLabelKey;
-		if (this.isString(serie.legendItemKey)) options.legendItemKey = serie.legendItemKey;
-		return options;
+		if (dataType === "component" || dataType === "template") config.cellStyle = this.withPadding(config.cellStyle, "1px");
+		if (column.filter === true) this.setFilter(config, dataType, map);
+		return config;
 	}
-	getDonutSeriesOptionsNames(serie) {
-		const options = {};
-		if (serie.angleName) options.angleName = this.locale(serie, "angleName");
-		if (serie.radiusName) options.radiusName = this.locale(serie, "radiusName");
-		if (serie.calloutLabelName) options.calloutLabelName = this.locale(serie, "calloutLabelName");
-		if (serie.sectorLabelName) options.sectorLabelName = this.locale(serie, "sectorLabelName");
-		return options;
+	setFilter(config, dataType, map) {
+		if (map) {
+			config.filter = "select";
+			config.filterMultiple = true;
+			config.filterOptions = Object.entries(map).map(([key, label]) => ({
+				value: this.parseKey(key),
+				label
+			}));
+			config.filterOperators = ["in"];
+			return;
+		}
+		switch (dataType) {
+			case "number":
+			case "integer":
+			case "decimal":
+			case "currency":
+			case "percentage":
+				config.filter = "number";
+				break;
+			case "date":
+			case "dateTime":
+				config.filter = "date";
+				break;
+			case "boolean":
+				config.filter = "boolean";
+				break;
+			case "uuid":
+				config.filter = "text";
+				config.filterOperators = ["equals", "notEquals"];
+				break;
+			default: config.filter = "text";
+		}
 	}
-	getProps(component) {
-		const props = {};
-		if (component && component.title) props.title = { text: component.title };
-		if (component && component.subtitle) props.subtitle = { text: component.subtitle };
-		return props;
+	createActionsColumn(component, formGroup) {
+		const cacheContext = new CacheContextService(this.programmability);
+		const params = this.paramsCache((row, _value, index) => ({
+			component,
+			formGroup,
+			data: row,
+			node: { rowIndex: index },
+			api: { getGridOption: () => ({ cacheContext }) }
+		}));
+		return {
+			id: "__fp-actions",
+			field: "",
+			header: this.locale(Texts, "Actions"),
+			value: null,
+			format: null,
+			align: null,
+			filter: null,
+			filterOptions: [],
+			filterMultiple: false,
+			filterOperators: null,
+			sortable: false,
+			resizable: false,
+			wrap: true,
+			mono: null,
+			fit: true,
+			fixed: "right",
+			flex: null,
+			width: null,
+			minWidth: 60,
+			maxWidth: null,
+			group: null,
+			cellClass: null,
+			cellStyle: null,
+			headerClass: null,
+			headerStyle: null,
+			renderer: {
+				kind: "component",
+				type: ActionsCellRendererComponent,
+				params
+			},
+			actions: true
+		};
 	}
-	isBoolean(value) {
-		return typeof value === "boolean" || value instanceof Boolean;
+	formatOf(dataType, map) {
+		if (map) return (value) => this.formatMap(value, map);
+		const empty = (fn) => (value) => value === null || value === void 0 ? "" : fn(value);
+		switch (dataType) {
+			case "date": return empty((v) => this.formatter.formatDate(v));
+			case "dateTime": return empty((v) => this.formatter.formatDateTime(v));
+			case "time": return empty((v) => this.formatter.formatTime(v));
+			case "currency": return empty((v) => this.formatter.formatCurrency(v));
+			case "decimal": return empty((v) => this.formatter.formatNumber(v));
+			case "integer": return empty((v) => this.formatter.formatNumber(v, 0));
+			case "percentage": return empty((v) => `${Math.round(Number(v) * 100)}%`);
+			case "boolean": return empty((v) => v === true ? this.locale(Texts, "True") : v === false ? this.locale(Texts, "False") : String(v));
+			default: return null;
+		}
 	}
-	isString(value) {
-		return typeof value === "string" || value instanceof String;
+	rendererOf(column, dataType, formGroup) {
+		if (column.format === "objectURL") return {
+			kind: "component",
+			type: ObjectURLRendererComponent,
+			params: this.paramsCache((row, value, index) => ({
+				data: row,
+				value,
+				node: { rowIndex: index }
+			}))
+		};
+		if (column.format === "deleteRow") return {
+			kind: "component",
+			type: DeleteRowRendererComponent,
+			params: this.paramsCache((row, value, index) => ({
+				data: row,
+				value,
+				node: { rowIndex: index }
+			}))
+		};
+		if (dataType === "formatted") return {
+			kind: "html",
+			html: (_row, value) => String(this.markdownService.toHtml(value) ?? "")
+		};
+		if (dataType === "component") return {
+			kind: "component",
+			type: HostCellRendererComponent,
+			params: this.paramsCache((row, value, index) => ({
+				componentType: column.component,
+				properties: column.properties,
+				formGroup,
+				data: row,
+				value,
+				node: { rowIndex: index }
+			}))
+		};
+		if (dataType === "template") {
+			const template = this.metadata.getTemplateByName(column.template);
+			if (template) return {
+				kind: "component",
+				type: HostCellRendererComponent,
+				params: this.paramsCache((row, value, index) => ({
+					componentType: "form-host",
+					properties: {
+						schema: template,
+						showNav: false,
+						showProgress: false,
+						showNavButton: false,
+						showFormTitle: false
+					},
+					onPropertiesResolved: (_props, params) => ({ value: params.data }),
+					formGroup,
+					data: row,
+					value,
+					node: { rowIndex: index }
+				}))
+			};
+		}
+		if (dataType === "custom") {
+			const render = this.callbackOf(formGroup, column.customRenderer);
+			if (render) return {
+				kind: "html",
+				html: (row) => String(render(row) ?? "")
+			};
+		}
+		return null;
 	}
-	isNumber(value) {
-		return typeof value === "number" && isFinite(value);
+	paramsCache(build) {
+		const cache = /* @__PURE__ */ new WeakMap();
+		return (row, value, index) => {
+			if (!row || typeof row !== "object") return build(row, value, index);
+			const cached = cache.get(row);
+			if (cached && cached.index === index && cached.value === value) return cached.params;
+			const params = build(row, value, index);
+			cache.set(row, {
+				index,
+				value,
+				params
+			});
+			return params;
+		};
 	}
-	isDirection(value) {
-		return value === "horizontal" || value === "vertical";
+	rowClassOf(component, formGroup) {
+		const rowClass = this.evaluateValue(formGroup, component.rowClass);
+		const rules = this.evaluateValue(formGroup, component.rowClassRules);
+		if (!rowClass && !rules) return null;
+		return (row, index) => {
+			const params = {
+				data: row,
+				rowIndex: index,
+				node: {
+					rowIndex: index,
+					data: row
+				}
+			};
+			return [sirioGridClassText(typeof rowClass === "function" ? rowClass(params) : rowClass), rules ? sirioGridClassText(this.applyRules(rules, params)) : ""].filter(Boolean).join(" ");
+		};
 	}
-	isInterpolation(value) {
-		return value === "linear" || value === "smooth" || value === "step";
+	rowStyleOf(component, formGroup) {
+		const rowStyle = this.evaluateValue(formGroup, component.rowStyle);
+		if (!rowStyle) return null;
+		return typeof rowStyle === "function" ? (row, index) => rowStyle({
+			data: row,
+			rowIndex: index,
+			node: {
+				rowIndex: index,
+				data: row
+			}
+		}) : rowStyle;
+	}
+	cellClassOf(column, formGroup) {
+		const cellClass = this.evaluateValue(formGroup, column.cellClass);
+		const rules = this.evaluateValue(formGroup, column.cellClassRules);
+		if (!cellClass && !rules) return null;
+		return (row, value) => {
+			const params = {
+				data: row,
+				value,
+				colDef: { field: column.key }
+			};
+			return [sirioGridClassText(typeof cellClass === "function" ? cellClass(params) : cellClass), rules ? sirioGridClassText(this.applyRules(rules, params)) : ""].filter(Boolean).join(" ");
+		};
+	}
+	withPadding(style, padding) {
+		if (typeof style === "function") return (row, value) => ({
+			padding,
+			...sirioGridStyleObject(style(row, value))
+		});
+		return {
+			padding,
+			...sirioGridStyleObject(style)
+		};
+	}
+	cellStyleOf(column, formGroup) {
+		const cellStyle = this.evaluateValue(formGroup, column.cellStyle);
+		if (!cellStyle) return null;
+		return typeof cellStyle === "function" ? (row, value) => cellStyle({
+			data: row,
+			value,
+			colDef: { field: column.key }
+		}) : cellStyle;
+	}
+	applyRules(rules, params) {
+		const result = {};
+		if (rules && typeof rules === "object") {
+			for (const [name, rule] of Object.entries(rules)) if (typeof rule === "function") result[name] = !!rule(params);
+			else if (typeof rule?.invoke === "function") result[name] = rule.invoke([params]) === true;
+			else if (typeof rule === "boolean") result[name] = rule;
+			else if (rule !== null && rule !== void 0 && !this.warnedRules.has(name)) {
+				this.warnedRules.add(name);
+				console.warn(`[form-player] Data grid: the class rule "${name}" must be a function.`);
+			}
+		}
+		return result;
+	}
+	staticStyle(formGroup, expression, call) {
+		const value = this.evaluateValue(formGroup, expression);
+		return typeof value === "function" ? call(value) : value ?? null;
+	}
+	get language() {
+		return this.languageService.getLanguage();
+	}
+	locale(source, key) {
+		return localize(this.language, source, key);
+	}
+	hasActions(component) {
+		return Array.isArray(component.actions) && component.actions.length > 0;
+	}
+	evaluateValue(formGroup, expression) {
+		return expression ? this.programmability.evaluate(formGroup, expression) : null;
+	}
+	callbackOf(formGroup, expression) {
+		if (!expression) return null;
+		const value = this.programmability.evaluate(formGroup, expression);
+		return typeof value === "function" ? (row) => value(row) : () => value;
+	}
+	rowCallback(formGroup, expression, row) {
+		const event = { data: row };
+		return this.programmability.evaluate(formGroup, expression, {
+			cacheable: false,
+			extendContext: () => ({ event }),
+			invokeArgs: [event]
+		}) === true;
+	}
+	selectionTrigger(component) {
+		const value = component.selectionTrigger;
+		const trigger = typeof value === "string" ? value.trim().toLowerCase() : "";
+		return trigger === "click" || trigger === "both" ? trigger : "checkbox";
+	}
+	alignOf(align) {
+		return align === "left" ? "start" : align === "center" ? "center" : align === "right" ? "end" : null;
+	}
+	staticRows(rows) {
+		return {
+			data: signal(rows),
+			dataSource: null,
+			loading: signal(false),
+			failed: signal(false),
+			pagedSize: NO_PAGED_SIZE
+		};
+	}
+	getMap(column, dataType, formGroup) {
+		if (![
+			"boolean",
+			"text",
+			"number",
+			"flags"
+		].includes(dataType) || !column.map) return null;
+		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 (dataType === "flags") map[getLabelSymbol] = (key) => this.formatFlags(key, map);
+		return map;
+	}
+	formatMap(value, map) {
+		if (value == null) return map?.["null"] ?? "";
+		if (map) {
+			let 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();
+		}
+		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 && (value & flag) === flag);
+			if ((value & flags.reduce((acc, f) => acc | f, 0)) !== value) return null;
+			return flags.map((flag) => map[flag]).filter((label) => !!label).join(", ");
+		}
+		return null;
+	}
+	parseKey(key) {
+		if (key === "true") return true;
+		if (key === "false") return false;
+		const num = Number(key);
+		return isNaN(num) ? key : num;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.2",
 		ngImport: i0,
-		type: ChartService,
-		deps: [{ token: ProgrammabilityService }, { token: i1$4.LanguageService }],
+		type: SirioGridService,
+		deps: [
+			{ token: FormatterService },
+			{ token: i1$4.LanguageService },
+			{ token: ProgrammabilityService },
+			{ token: MetadataService },
+			{ token: MarkdownService }
+		],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
 		version: "22.2.2",
 		ngImport: i0,
-		type: ChartService
+		type: SirioGridService
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: ChartService,
+	type: SirioGridService,
 	decorators: [{ type: Injectable }],
-	ctorParameters: () => [{ type: ProgrammabilityService }, { type: i1$4.LanguageService }]
+	ctorParameters: () => [
+		{ type: FormatterService },
+		{ type: i1$4.LanguageService },
+		{ type: ProgrammabilityService },
+		{ type: MetadataService },
+		{ type: MarkdownService }
+	]
 });
-var ReadOnlyDirective = class ReadOnlyDirective {
-	ngControl;
-	global;
-	destroyRef;
-	el;
-	renderer;
-	readonly = null;
-	placeholder = null;
-	componentRef;
-	properties;
-	constructor(ngControl, global, destroyRef, el, renderer) {
-		this.ngControl = ngControl;
-		this.global = global;
-		this.destroyRef = destroyRef;
-		this.el = el;
-		this.renderer = renderer;
-	}
-	disableClass = "is-disabled";
-	readonlyClass = "is-readonly";
-	lightReadonlyClass = "light-readonly";
-	ngOnInit() {
-		const control = this.ngControl.control;
-		if (control) control.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((_) => {
-			this.apply();
-		});
-	}
-	ngOnChanges(changes) {
-		if (changes["readonly"]) this.apply();
-	}
-	apply() {
-		const control = this.ngControl.control;
-		if (!control) return;
-		if (control.disabled) {
-			this.toggleClass(true, this.disableClass);
-			this.overridePlaceholder(false);
-		} else {
-			this.toggleClass(false, this.disableClass);
-			const readonly = this.readonly === true;
-			if (!this.isSirioControl()) this.ngControl.valueAccessor?.setDisabledState(readonly);
-			if (this.useLightReadonly()) {
-				this.toggleClass(readonly, this.lightReadonlyClass);
-				this.overridePlaceholder(readonly);
-			} else this.toggleClass(readonly, this.readonlyClass);
-		}
-	}
-	toggleClass(value, className) {
-		if (value) this.renderer.addClass(this.el.nativeElement, className);
-		else this.renderer.removeClass(this.el.nativeElement, className);
-	}
-	isSirioControl() {
-		return this.ngControl.valueAccessor instanceof SirioControlBase;
+var SirioCellHostComponent = class SirioCellHostComponent {
+	renderer = input.required(...ngDevMode ? [{ debugName: "renderer" }] : /* istanbul ignore next */ []);
+	params = input.required(...ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []);
+	container = inject(ViewContainerRef);
+	injector = inject(Injector);
+	componentRef = null;
+	ngOnChanges() {
+		this.destroy();
+		this.componentRef = this.container.createComponent(this.renderer(), { injector: this.injector });
+		this.componentRef.instance.agInit?.(this.params());
+		this.componentRef.changeDetectorRef.detectChanges();
 	}
-	overridePlaceholder(value) {
-		if (this.componentRef && !this.isSirioControl() && "placeholder" in this.componentRef) this.componentRef.placeholder = value ? "-" : this.placeholder;
+	ngOnDestroy() {
+		this.destroy();
 	}
-	useLightReadonly() {
-		const value = this.properties?.useLightReadonly || this.global.getProperty("useLightReadonly", "yes");
-		if (value !== "yes" && value !== "no") return true;
-		return value === "yes";
+	destroy() {
+		this.componentRef?.destroy();
+		this.componentRef = null;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.2",
 		ngImport: i0,
-		type: ReadOnlyDirective,
-		deps: [
-			{ token: i1$3.NgControl },
-			{ token: GlobalService },
-			{ token: i0.DestroyRef },
-			{ token: i0.ElementRef },
-			{ token: i0.Renderer2 }
-		],
-		target: i0.ɵɵFactoryTarget.Directive
+		type: SirioCellHostComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
 	});
-	static ɵdir = i0.ɵɵngDeclareDirective({
-		minVersion: "14.0.0",
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
 		version: "22.2.2",
-		type: ReadOnlyDirective,
+		type: SirioCellHostComponent,
 		isStandalone: true,
-		selector: "[readonly]",
+		selector: "fp-sirio-cell-host",
 		inputs: {
-			readonly: "readonly",
-			placeholder: "placeholder",
-			componentRef: "componentRef",
-			properties: "properties"
+			renderer: {
+				classPropertyName: "renderer",
+				publicName: "renderer",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			params: {
+				classPropertyName: "params",
+				publicName: "params",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
 		},
+		host: { styleAttribute: "display: contents" },
 		usesOnChanges: true,
-		ngImport: i0
+		ngImport: i0,
+		template: "",
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: ReadOnlyDirective,
+	type: SirioCellHostComponent,
 	decorators: [{
-		type: Directive,
+		type: Component,
 		args: [{
-			selector: "[readonly]",
-			standalone: true
+			selector: "fp-sirio-cell-host",
+			template: "",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { style: "display: contents" }
 		}]
 	}],
-	ctorParameters: () => [
-		{ type: i1$3.NgControl },
-		{ type: GlobalService },
-		{ type: i0.DestroyRef },
-		{ type: i0.ElementRef },
-		{ type: i0.Renderer2 }
-	],
 	propDecorators: {
-		readonly: [{ type: Input }],
-		placeholder: [{ type: Input }],
-		componentRef: [{ type: Input }],
-		properties: [{ type: Input }]
+		renderer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "renderer",
+				required: true
+			}]
+		}],
+		params: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "params",
+				required: true
+			}]
+		}]
 	}
 });
-var CacheContextService = class CacheContextService {
+function observableAll(obj) {
+	function collect(value) {
+		if (isObservable(value)) return value;
+		if (Array.isArray(value)) return combineLatest(value.map(collect));
+		if (typeof value === "object" && value !== null) {
+			const keys = Object.keys(value);
+			const observables = keys.map((k) => collect(value[k]));
+			return combineLatest(observables).pipe(map$1((resolvedValues) => {
+				const resolvedObject = {};
+				resolvedValues.forEach((v, i) => {
+					resolvedObject[keys[i]] = v;
+				});
+				return resolvedObject;
+			}));
+		}
+		return of(value);
+	}
+	return collect(obj);
+}
+var ChartService = class ChartService {
 	programmability;
-	constructor(programmability) {
+	languageService;
+	constructor(programmability, languageService) {
 		this.programmability = programmability;
+		this.languageService = languageService;
 	}
-	isExpression(text) {
-		return this.programmability.isExpression(text);
+	getOptions(component, formGroup) {
+		const expression = this.getDataExpression(component);
+		return observableAll(this.programmability.evaluate(formGroup, expression)).pipe(map$1((chartData) => {
+			const series = this.getSeries(component, formGroup);
+			const options = {
+				theme: this.getTheme(),
+				series,
+				...this.getProps(component)
+			};
+			this.bindData(options, chartData);
+			return options;
+		}));
 	}
-	getExpression(text) {
-		return this.programmability.getExpression(text);
+	getDataExpression(component) {
+		const getExpression = (expression) => {
+			return this.programmability.isExpression(expression) ? this.programmability.getExpression(expression) : "null";
+		};
+		return `={ data: (${getExpression(component.data)}), series: [${(component.series ?? []).map((serie) => getExpression(serie.data)).map((expr) => `(${expr})`).join(", ")}] }`;
 	}
-	evaluateString(cacheControl, formGroup, value, options = {}) {
-		if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluateString(formGroup, value, this.getOptions(options)));
-		return value ?? "";
+	bindData(options, chartData) {
+		if (chartData.data) options.data = chartData.data;
+		if (Array.isArray(options.series)) options.series.forEach((serie, index) => {
+			if (chartData.series[index]) serie.data = chartData.series[index];
+		});
+	}
+	get language() {
+		return this.languageService.getLanguage();
+	}
+	locale(component, key) {
+		return localize(this.language, component, key);
+	}
+	getTheme() {
+		return {
+			baseTheme: "ag-default",
+			params: {
+				fontFamily: "inherit",
+				textColor: "#00121A",
+				chromeFontFamily: "inherit",
+				chromeTextColor: "#00121A"
+			},
+			overrides: { common: { background: {
+				visible: true,
+				fill: "transparent"
+			} } }
+		};
+	}
+	getSeries(component, formGroup) {
+		if (Array.isArray(component.series)) return component.series.map((serie) => {
+			switch (serie.type) {
+				case "bar": return this.getBarSeriesOptions(serie, formGroup);
+				case "line": return this.getLineSeriesOptions(serie, formGroup);
+				case "area": return this.getAreaSeriesOptions(serie, formGroup);
+				case "scatter": return this.getScatterSeriesOptions(serie, formGroup);
+				case "bubble": return this.getBubbleSeriesOptions(serie, formGroup);
+				case "pie": return this.getPieSeriesOptions(serie, formGroup);
+				case "donut": return this.getDonutSeriesOptions(serie, formGroup);
+				default: return {};
+			}
+		});
+		else return [];
+	}
+	getSeriesOptionsNames(serie) {
+		const options = {};
+		if (this.isString(serie.xName)) options.xName = this.locale(serie, "xName");
+		if (this.isString(serie.yName)) options.yName = this.locale(serie, "yName");
+		if (this.isString(serie.legendItemName)) options.legendItemName = this.locale(serie, "legendItemName");
+		return options;
+	}
+	getBaseSeriesOptions(serie, formGroup) {
+		const options = {};
+		if (this.isBoolean(serie.visible)) options.visible = serie.visible;
+		return options;
+	}
+	getBarSeriesOptions(serie, formGroup) {
+		const options = {
+			type: "bar",
+			xKey: serie.xKey,
+			yKey: serie.yKey,
+			...this.getBaseSeriesOptions(serie, formGroup),
+			...this.getSeriesOptionsNames(serie)
+		};
+		if (this.isDirection(serie.direction)) options.direction = serie.direction;
+		if (this.isBoolean(serie.stacked)) options.stacked = serie.stacked;
+		if (this.isNumber(serie.normalizedTo)) options.normalizedTo = serie.normalizedTo;
+		if (this.isString(serie.stackGroup)) options.stackGroup = serie.stackGroup;
+		return options;
+	}
+	getLineSeriesOptions(serie, formGroup) {
+		const options = {
+			type: "line",
+			xKey: serie.xKey,
+			yKey: serie.yKey,
+			...this.getBaseSeriesOptions(serie, formGroup),
+			...this.getSeriesOptionsNames(serie)
+		};
+		if (this.isInterpolation(serie.interpolation)) options.interpolation = { type: serie.interpolation };
+		return options;
+	}
+	getAreaSeriesOptions(serie, formGroup) {
+		const options = {
+			type: "area",
+			xKey: serie.xKey,
+			yKey: serie.yKey,
+			...this.getBaseSeriesOptions(serie, formGroup),
+			...this.getAreaSeriesOptionsNames(serie)
+		};
+		if (this.isBoolean(serie.stacked)) options.stacked = serie.stacked;
+		if (this.isNumber(serie.normalizedTo)) options.normalizedTo = serie.normalizedTo;
+		return options;
+	}
+	getAreaSeriesOptionsNames(serie) {
+		const options = {};
+		if (serie.xName) options.xName = this.locale(serie, "xName");
+		if (serie.yName) options.yName = this.locale(serie, "yName");
+		return options;
+	}
+	getScatterSeriesOptions(serie, formGroup) {
+		return {
+			type: "scatter",
+			xKey: serie.xKey,
+			yKey: serie.yKey,
+			labelKey: serie.labelKey,
+			...this.getBaseSeriesOptions(serie, formGroup),
+			...this.getScatterSeriesOptionsNames(serie)
+		};
+	}
+	getScatterSeriesOptionsNames(serie) {
+		const options = {};
+		if (serie.xName) options.xName = this.locale(serie, "xName");
+		if (serie.yName) options.yName = this.locale(serie, "yName");
+		if (serie.labelName) options.labelName = this.locale(serie, "labelName");
+		return options;
+	}
+	getBubbleSeriesOptions(serie, formGroup) {
+		return {
+			type: "bubble",
+			xKey: serie.xKey,
+			yKey: serie.yKey,
+			sizeKey: serie.sizeKey,
+			labelKey: serie.labelKey,
+			...this.getBaseSeriesOptions(serie, formGroup),
+			...this.getBubbleSeriesOptionsNames(serie)
+		};
+	}
+	getBubbleSeriesOptionsNames(serie) {
+		const options = {};
+		if (serie.xName) options.xName = this.locale(serie, "xName");
+		if (serie.yName) options.yName = this.locale(serie, "yName");
+		if (serie.sizeName) options.sizeName = this.locale(serie, "sizeName");
+		if (serie.labelName) options.labelName = this.locale(serie, "labelName");
+		return options;
 	}
-	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;
+	getPieSeriesOptions(serie, formGroup) {
+		const options = {
+			type: "pie",
+			angleKey: serie.angleKey,
+			...this.getBaseSeriesOptions(serie, formGroup),
+			...this.getPieSeriesOptionsNames(serie)
+		};
+		if (this.isString(serie.radiusKey)) options.radiusKey = serie.radiusKey;
+		if (this.isString(serie.calloutLabelKey)) options.calloutLabelKey = serie.calloutLabelKey;
+		if (this.isString(serie.sectorLabelKey)) options.sectorLabelKey = serie.sectorLabelKey;
+		if (this.isString(serie.legendItemKey)) options.legendItemKey = serie.legendItemKey;
+		return options;
 	}
-	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;
+	getPieSeriesOptionsNames(serie) {
+		const options = {};
+		if (serie.angleName) options.angleName = this.locale(serie, "angleName");
+		if (serie.radiusName) options.radiusName = this.locale(serie, "radiusName");
+		if (serie.calloutLabelName) options.calloutLabelName = this.locale(serie, "calloutLabelName");
+		if (serie.sectorLabelName) options.sectorLabelName = this.locale(serie, "sectorLabelName");
+		return options;
 	}
-	evaluate(cacheControl, formGroup, value, options = {}) {
-		if (this.isExpression(value)) return this.call(cacheControl, value, () => this.programmability.evaluate(formGroup, value, this.getOptions(options)));
-		return value;
+	getDonutSeriesOptions(serie, formGroup) {
+		const options = {
+			type: "donut",
+			angleKey: serie.angleKey,
+			...this.getBaseSeriesOptions(serie, formGroup),
+			...this.getDonutSeriesOptionsNames(serie)
+		};
+		if (this.isString(serie.radiusKey)) options.radiusKey = serie.radiusKey;
+		if (this.isString(serie.calloutLabelKey)) options.calloutLabelKey = serie.calloutLabelKey;
+		if (this.isString(serie.sectorLabelKey)) options.sectorLabelKey = serie.sectorLabelKey;
+		if (this.isString(serie.legendItemKey)) options.legendItemKey = serie.legendItemKey;
+		return options;
 	}
-	evaluateTemplate(cacheControl, formGroup, value, options = {}) {
-		return this.call(cacheControl, value, () => this.programmability.evaluateTemplate(formGroup, value, this.getOptions(options)));
+	getDonutSeriesOptionsNames(serie) {
+		const options = {};
+		if (serie.angleName) options.angleName = this.locale(serie, "angleName");
+		if (serie.radiusName) options.radiusName = this.locale(serie, "radiusName");
+		if (serie.calloutLabelName) options.calloutLabelName = this.locale(serie, "calloutLabelName");
+		if (serie.sectorLabelName) options.sectorLabelName = this.locale(serie, "sectorLabelName");
+		return 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;
+	getProps(component) {
+		const props = {};
+		if (component && component.title) props.title = { text: component.title };
+		if (component && component.subtitle) props.subtitle = { text: component.subtitle };
+		return props;
 	}
-	invalidate(cacheControl) {
-		if (this.cache.has(cacheControl)) this.cache.delete(cacheControl);
+	isBoolean(value) {
+		return typeof value === "boolean" || value instanceof Boolean;
 	}
-	invalidateAll() {
-		this.cache = /* @__PURE__ */ new WeakMap();
+	isString(value) {
+		return typeof value === "string" || value instanceof String;
 	}
-	getOptions(options) {
-		return {
-			...options,
-			cacheable: false
-		};
+	isNumber(value) {
+		return typeof value === "number" && isFinite(value);
 	}
-	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;
+	isDirection(value) {
+		return value === "horizontal" || value === "vertical";
+	}
+	isInterpolation(value) {
+		return value === "linear" || value === "smooth" || value === "step";
 	}
-	cache = /* @__PURE__ */ new WeakMap();
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.2",
 		ngImport: i0,
-		type: CacheContextService,
-		deps: [{ token: ProgrammabilityService }],
+		type: ChartService,
+		deps: [{ token: ProgrammabilityService }, { token: i1$4.LanguageService }],
 		target: i0.ɵɵFactoryTarget.Injectable
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
 		version: "22.2.2",
 		ngImport: i0,
-		type: CacheContextService
+		type: ChartService
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: CacheContextService,
+	type: ChartService,
 	decorators: [{ type: Injectable }],
-	ctorParameters: () => [{ type: ProgrammabilityService }]
+	ctorParameters: () => [{ type: ProgrammabilityService }, { type: i1$4.LanguageService }]
 });
 var RecursionDirective = class RecursionDirective {
 	controlContainer;
@@ -6485,7 +7388,7 @@ var GridDirective = class GridDirective {
 	wrapObservable(source) {
 		this.showLoading(true);
 		this.showLoadError(false);
-		return source.pipe(tap(() => this.showLoadError(false)), catchError$1((err) => {
+		return source.pipe(tap$1(() => this.showLoadError(false)), catchError$1((err) => {
 			this.showLoadError(true);
 			return this.noData;
 		}), finalize$1(() => this.showLoading(false)));
@@ -6941,6 +7844,62 @@ var TableControl = class extends Control {
 		return this.grid.api.getGridOption("pagination") === true;
 	}
 };
+var DataGridControl = class extends TableControl {
+	setFilter(filter) {
+		this.dataGrid.filters.set(agFiltersToSirio(filter, this.modelColumns()));
+	}
+	getFilter() {
+		return sirioFiltersToAg(this.dataGrid.filters(), this.modelColumns());
+	}
+	clearFilter() {
+		this.dataGrid.clearFilters();
+	}
+	getOrder() {
+		return sirioSortToAg(this.dataGrid.sort());
+	}
+	setOrder(order) {
+		this.dataGrid.sort.set(agOrderToSirio(order));
+	}
+	refresh() {
+		this.dataGrid._refresh?.();
+		this.dataGrid.reload();
+	}
+	redraw() {}
+	gridState = null;
+	onLoadState() {
+		const subscription = this.dataGrid.stateChange.subscribe((state) => {
+			this.gridState = {
+				kind: DATA_GRID_STATE,
+				state
+			};
+		});
+		this.getDestroyRef().onDestroy(() => subscription.unsubscribe());
+		this.restoreState();
+	}
+	onSaveState() {
+		this.setState(this.gridState);
+	}
+	restoreState() {
+		const saved = this.getState();
+		if (saved?.kind === DATA_GRID_STATE && saved.state) {
+			this.dataGrid.setState(saved.state);
+			this.gridState = saved;
+		}
+	}
+	get dataGrid() {
+		const ref = this.getComponentRef();
+		if (!(ref instanceof SirioDataGrid)) throw new Error("ComponentRef is not a SirioDataGrid");
+		return ref;
+	}
+	modelColumns() {
+		return this.dataGrid.columns().map((column) => ({
+			key: this.dataGrid.filterIdOf(column),
+			field: column.field(),
+			filter: column.filter()
+		}));
+	}
+};
+const DATA_GRID_STATE = "sirio-data-grid";
 var ButtonControl = class extends Control {
 	focus() {
 		this.getElementRef()?.nativeElement?.focus();
@@ -6982,7 +7941,7 @@ function createControl(context) {
 			default: return new DynamicListControl(context);
 		}
 		case "group": return new GroupControl(context);
-		case "table": return new TableControl(context);
+		case "table": return context.componentRef instanceof SirioDataGrid ? new DataGridControl(context) : new TableControl(context);
 		case "chart": return new ChartControl(context);
 		case "button": return new ButtonControl(context);
 		case "separator": return new SeparatorControl(context);
@@ -8655,6 +9614,67 @@ function isPlainObject(value) {
 	const proto = Object.getPrototypeOf(value);
 	return proto === Object.prototype || proto === null;
 }
+var AnnouncerService = class AnnouncerService {
+	document = inject(DOCUMENT);
+	region = null;
+	timer = null;
+	announce(message) {
+		const region = this.ensureRegion();
+		if (!region) return;
+		region.textContent = "";
+		if (this.timer) clearTimeout(this.timer);
+		this.timer = setTimeout(() => region.textContent = message, 100);
+	}
+	ensureRegion() {
+		if (this.region?.isConnected) return this.region;
+		const body = this.document?.body;
+		if (!body) return null;
+		const region = this.document.createElement("div");
+		region.setAttribute("role", "status");
+		region.setAttribute("aria-live", "polite");
+		region.setAttribute("aria-atomic", "true");
+		region.className = "fp-announcer";
+		Object.assign(region.style, {
+			position: "absolute",
+			width: "1px",
+			height: "1px",
+			padding: "0",
+			margin: "-1px",
+			overflow: "hidden",
+			clip: "rect(0, 0, 0, 0)",
+			whiteSpace: "nowrap",
+			border: "0"
+		});
+		body.appendChild(region);
+		this.region = region;
+		return region;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: AnnouncerService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: AnnouncerService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AnnouncerService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
 const formPlayerValidationPresenter = (control) => {
 	const errors = control.errors;
 	if (!errors) return null;
@@ -8801,6 +9821,13 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 const NO_SIRIO_OPTIONS = [];
+const SIRIO_PAGE_SIZES = [
+	5,
+	10,
+	20,
+	50,
+	100
+];
 var DynamicFieldsComponent = class DynamicFieldsComponent {
 	cdr;
 	destroyRef;
@@ -8816,6 +9843,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 	global;
 	formService;
 	grid;
+	sirioGrid;
 	chart;
 	dialog;
 	autoFocus;
@@ -8830,9 +9858,12 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 	identity;
 	identityIndex;
 	disableAutoFocus;
+	static useDataGrid = true;
+	useDataGrid = DynamicFieldsComponent.useDataGrid;
 	Texts = Texts;
 	toastService = inject(ToastService);
-	constructor(cdr, destroyRef, sanitizer, markdown, mime, programmability, validation, weak, register, metadata, languageService, global, formService, grid, chart, dialog, autoFocus, formBuilder, el) {
+	announcer = inject(AnnouncerService);
+	constructor(cdr, destroyRef, sanitizer, markdown, mime, programmability, validation, weak, register, metadata, languageService, global, formService, grid, sirioGrid, chart, dialog, autoFocus, formBuilder, el) {
 		this.cdr = cdr;
 		this.destroyRef = destroyRef;
 		this.sanitizer = sanitizer;
@@ -8847,6 +9878,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 		this.global = global;
 		this.formService = formService;
 		this.grid = grid;
+		this.sirioGrid = sirioGrid;
 		this.chart = chart;
 		this.dialog = dialog;
 		this.autoFocus = autoFocus;
@@ -9055,6 +10087,25 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			return this.getAsObservable(result);
 		} else return this.noData;
 	}
+	sirioValuesCache = /* @__PURE__ */ new WeakMap();
+	getSirioValues(component) {
+		const source = this.getValues(component);
+		let entry = this.sirioValuesCache.get(source);
+		if (!entry) {
+			const state = { loading: true };
+			const done = () => state.loading = false;
+			entry = {
+				values$: source.pipe(tap({
+					next: done,
+					error: done,
+					complete: done
+				})),
+				state
+			};
+			this.sirioValuesCache.set(source, entry);
+		}
+		return entry;
+	}
 	sirioOptionsCache = /* @__PURE__ */ new WeakMap();
 	sirioOptions(values) {
 		if (!Array.isArray(values)) return NO_SIRIO_OPTIONS;
@@ -9111,6 +10162,39 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 	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);
+	}
+	getSirioRows(component, config) {
+		return this.sirioGrid.getRows(this.getRowSource(component), config, (rows) => {
+			queueMicrotask(() => {
+				const selected = this.sirioGrid.initialSelection(component, this.formGroup, this.sirioSelection(component), rows);
+				if (selected) {
+					config.selected.set(selected);
+					this.cdr.markForCheck();
+				}
+			});
+		});
+	}
+	sirioSelection(component) {
+		if (this.evaluateBoolean(component.selectable) !== true) return "none";
+		return this.evaluateBoolean(component.multiSelect) === true ? "multiple" : "single";
+	}
+	sirioPageSizes(pagedSize) {
+		if (pagedSize === null || SIRIO_PAGE_SIZES.includes(pagedSize)) return SIRIO_PAGE_SIZES;
+		let sizes = this.sirioPageSizesCache.get(pagedSize);
+		if (!sizes) {
+			sizes = [...SIRIO_PAGE_SIZES, pagedSize].sort((a, b) => a - b);
+			this.sirioPageSizesCache.set(pagedSize, sizes);
+		}
+		return sizes;
+	}
+	sirioPageSizesCache = /* @__PURE__ */ new Map();
+	onSirioSelectionChanged(component, config, rows) {
+		config.selected.set(rows);
+		this.sirioGrid.onSelectionChanged(component, this.formGroup, rows);
+	}
 	getRowSource(component) {
 		if (component.dataSource) return this.evaluate(component.dataSource, true);
 		else return this.noData;
@@ -9146,10 +10230,42 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 		const addedItem = new FormGroup({});
 		formArray.push(addedItem);
 		this.autoFocus.mark(addedItem);
+		this.announcer.announce(this.formatText("ItemAdded", formArray.length));
 		setTimeout(() => state.index = state.total - 1);
 		this.cdr.markForCheck();
 	}
-	removeItem(formArray, index, withConfirm, state) {
+	itemPosition(index, total) {
+		return this.formatText("ItemPosition", index + 1, total);
+	}
+	formatText(key, ...values) {
+		return values.reduce((text, value, i) => text.replace(`{${i}}`, String(value)), this.locale(Texts, key));
+	}
+	focusRepeaterButton(root, actions, indexes) {
+		if (!root) return;
+		setTimeout(() => {
+			for (const index of indexes) for (const action of actions) {
+				const button = root.querySelector(`[data-fp-action="${action}"][data-fp-index="${index}"]`);
+				if (button) {
+					button.focus();
+					return;
+				}
+			}
+			root.querySelector("[data-fp-action=\"add\"]")?.focus();
+		});
+	}
+	repeaterOf(event) {
+		return (event?.currentTarget ?? null)?.closest("[data-fp-repeater]") ?? null;
+	}
+	removeItem(formArray, index, withConfirm, state, event) {
+		const root = this.repeaterOf(event);
+		const removed = () => {
+			this.announcer.announce(this.formatText("ItemRemoved", index + 1));
+			this.focusRepeaterButton(root, [
+				"remove",
+				"up",
+				"down"
+			], [index, index - 1]);
+		};
 		if (withConfirm) this.dialog.confirm(this.locale(Texts, "ConfirmDelete"), {
 			"title": this.locale(Texts, "Confirm"),
 			"buttons": "ConfirmCancel",
@@ -9158,22 +10274,31 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					formArray.removeAt(index);
 					setTimeout(() => state.index = Math.min(state.index, state.total - 1));
 					this.cdr.markForCheck();
+					removed();
 				}
 			}
 		});
-		else formArray.removeAt(index);
+		else {
+			formArray.removeAt(index);
+			this.cdr.markForCheck();
+			removed();
+		}
 	}
-	moveUpItem(formArray, index) {
-		const control = formArray.at(index);
-		formArray.removeAt(index);
-		formArray.insert(index - 1, control);
-		this.cdr.markForCheck();
+	moveUpItem(formArray, index, event) {
+		this.moveItem(formArray, index, index - 1, event, ["up", "down"]);
 	}
-	moveDownItem(formArray, index) {
-		const control = formArray.at(index);
-		formArray.removeAt(index);
-		formArray.insert(index + 1, control);
+	moveDownItem(formArray, index, event) {
+		this.moveItem(formArray, index, index + 1, event, ["down", "up"]);
+	}
+	moveItem(formArray, from, to, event, actions) {
+		if (to < 0 || to >= formArray.length) return;
+		const root = this.repeaterOf(event);
+		const control = formArray.at(from);
+		formArray.removeAt(from);
+		formArray.insert(to, control);
 		this.cdr.markForCheck();
+		this.announcer.announce(this.formatText("ItemMoved", to + 1, formArray.length));
+		this.focusRepeaterButton(root, actions, [to]);
 	}
 	filesAdded(files, picker) {
 		for (const file of files) {
@@ -9245,14 +10370,6 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 		if (!this.applyInlineStyles(styles, component.inlineStyle)) return null;
 		return styles;
 	}
-	sirioPlaceholder(component) {
-		if ((this.readOnly || this.evaluateBoolean(component.readonly)) === true && this.useLightReadonly(component)) return "-";
-		return this.locale(component, "placeholder") || "";
-	}
-	useLightReadonly(component) {
-		const value = component.properties?.useLightReadonly || this.global.getProperty("useLightReadonly", "yes");
-		return value !== "yes" && value !== "no" ? true : value === "yes";
-	}
 	toTextCase(textCase) {
 		switch (textCase) {
 			case "uppercase": return "upper";
@@ -9277,12 +10394,6 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			default: return "flex-start";
 		}
 	}
-	getLightView(component) {
-		const className = "light-view";
-		const value = component.properties?.useLightReadonly || this.global.getProperty("useLightReadonly", "yes");
-		if (value !== "yes" && value !== "no") return className;
-		return value === "yes" ? className : "";
-	}
 	getPanels(component) {
 		if (component.panels) return of(component.panels);
 		else if (component.panelsExpression) {
@@ -9389,6 +10500,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			{ token: GlobalService },
 			{ token: FormService },
 			{ token: GridService },
+			{ token: SirioGridService },
 			{ token: ChartService },
 			{ token: DialogService },
 			{ token: AutoFocusService },
@@ -9398,7 +10510,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "14.0.0",
+		minVersion: "17.0.0",
 		version: "22.2.2",
 		type: DynamicFieldsComponent,
 		isStandalone: true,
@@ -9418,14 +10530,15 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 			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]=\"sirioPlaceholder(component)\"\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                               [properties]=\"component.properties\"\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                <!-- @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]=\"sirioPlaceholder(component)\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [properties]=\"component.properties\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(getValues(component) | async)\"\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                <!-- @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]=\"sirioPlaceholder(component)\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [properties]=\"component.properties\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(getValues(component) | async)\"\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]=\"sirioPlaceholder(component)\"\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                              [properties]=\"component.properties\"\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]=\"sirioPlaceholder(component)\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [properties]=\"component.properties\"\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]=\"sirioPlaceholder(component)\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [properties]=\"component.properties\"\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                                    [properties]=\"component.properties\"\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                                  [properties]=\"component.properties\"\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                                     [properties]=\"component.properties\"\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                                   [properties]=\"component.properties\"\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]=\"sirioPlaceholder(component)\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [properties]=\"component.properties\"\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                                     [properties]=\"component.properties\"\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                              [properties]=\"component.properties\"\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                     [ngClass]=\"getLightView(component)\"\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                                <a *ngIf=\"fileHandlerRef.isLocal(file)\"\r\n                                   href=\"javascript:void(0)\"\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                                </a>\r\n                                <a *ngIf=\"fileHandlerRef.isHandled(file)\"\r\n                                   href=\"javascript:void(0)\"\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                                   download>\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                                </a>\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                    <div [formArrayName]=\"component.key\"\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>{{ evaluateWithEventAsString(locale(component, 'label'), event) }}</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>{{ evaluateWithEventAsString(locale(component, 'label'), event) }}</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>{{ evaluateWithEventAsString(locale(component, 'label'), event) }}</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                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"moveUpItem(formArray, i)\"\r\n                            class=\"remove-item\"\r\n                            icon=\"fa-arrow-up\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"upLabel\">{{ upLabel }}</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)\"\r\n                            class=\"remove-item\"\r\n                            icon=\"fa-arrow-down\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"downLabel\">{{ downLabel }}</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)\"\r\n                            class=\"remove-item\"\r\n                            icon=\"fa-trash\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"removeLabel\">{{ removeLabel }}</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                            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                <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>{{ evaluateString(locale(component, 'label')) }}</label>\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                                 [formGroup]=\"formGroup\"\r\n                                 #table\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"table\" />\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 *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 }}</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                               [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 *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}.is-disabled .sirio-input-group .sirio-input-group-text,.light-readonly .sirio-input-group .sirio-input-group-text{border:0px}.is-readonly .sirio-form-control{background-color:#fff!important;color:#454d56}.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}.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}\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}.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",
 			".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",
@@ -9563,17 +10676,6 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 				kind: "ngmodule",
 				type: FormsModule
 			},
-			{
-				kind: "directive",
-				type: ReadOnlyDirective,
-				selector: "[readonly]",
-				inputs: [
-					"readonly",
-					"placeholder",
-					"componentRef",
-					"properties"
-				]
-			},
 			{
 				kind: "directive",
 				type: FrameSecurityDirective,
@@ -9781,7 +10883,10 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"searchable",
 					"searchMinLength",
 					"noResultsText",
+					"loading",
+					"loadingText",
 					"resetLabel",
+					"clearable",
 					"searchHint",
 					"strict",
 					"selectAll",
@@ -9965,6 +11070,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 				inputs: [
 					"variant",
 					"total",
+					"hasMore",
 					"page",
 					"pageSize",
 					"showItems",
@@ -9982,7 +11088,10 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"pagesLabel",
 					"pageLabel",
 					"previousLabel",
-					"nextLabel"
+					"nextLabel",
+					"firstLabel",
+					"lastLabel",
+					"moreLabel"
 				],
 				outputs: [
 					"pageChange",
@@ -10034,7 +11143,9 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"headingLevel",
 					"animated",
 					"activateAdded",
-					"focusContent"
+					"focusContent",
+					"ariaLabel",
+					"panelRegions"
 				]
 			},
 			{
@@ -10066,6 +11177,204 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
 					"formGroup"
 				]
 			},
+			{
+				kind: "component",
+				type: i1$7.SirioDataGrid,
+				selector: "wm-sirio-data-grid",
+				inputs: [
+					"data",
+					"dataSource",
+					"rowId",
+					"subRows",
+					"loading",
+					"formArray",
+					"rowFactory",
+					"addable",
+					"deletable",
+					"rowEditable",
+					"rowDeletable",
+					"editOnDoubleClick",
+					"confirmDelete",
+					"saveHandler",
+					"deleteHandler",
+					"editorSize",
+					"errorMessages",
+					"sort",
+					"sortMode",
+					"pageable",
+					"page",
+					"pageSize",
+					"pageSizeOptions",
+					"paginationVariant",
+					"paginationSiblings",
+					"paginationShowItems",
+					"selection",
+					"selected",
+					"filters",
+					"filterDebounce",
+					"filterOperators",
+					"showFilterChips",
+					"filterButton",
+					"filterRow",
+					"grouping",
+					"expanded",
+					"rowExpandable",
+					"rowNumbers",
+					"selectOnRowClick",
+					"selectionColumn",
+					"keyboardNavigation",
+					"rowSelectable",
+					"hideUnselectable",
+					"selectAll",
+					"rowClass",
+					"rowStyle",
+					"resizable",
+					"reorderable",
+					"columnWidths",
+					"columnOrder",
+					"variant",
+					"size",
+					"responsive",
+					"stickyHeader",
+					"fixedFirstColumn",
+					"fixedLastColumn",
+					"height",
+					"minHeight",
+					"maxHeight",
+					"cardOnMobile",
+					"caption",
+					"captionVisible",
+					"emptyText",
+					"loadingText",
+					"loadErrorText",
+					"retryLabel",
+					"moreLabel",
+					"resultsLabel",
+					"selectAllLabel",
+					"selectRowHint",
+					"singleSelectionControl",
+					"selectionHeaderLabel",
+					"selectRowLabel",
+					"sortAscendingLabel",
+					"sortDescendingLabel",
+					"multiSortHint",
+					"paginationAriaLabel",
+					"filterLabel",
+					"filterFromLabel",
+					"filterToLabel",
+					"filterAllLabel",
+					"filterMoreLabel",
+					"filterYesLabel",
+					"filterNoLabel",
+					"filterActiveLabel",
+					"clearFilterLabel",
+					"clearFiltersLabel",
+					"filterConditionLabel",
+					"filterValueLabel",
+					"filterAndLabel",
+					"filterOperatorLabels",
+					"filtersLabel",
+					"rowNumberHeader",
+					"rowNumberLabel",
+					"groupByLabel",
+					"expandAllLabel",
+					"collapseAllLabel",
+					"rowName",
+					"expandRowLabel",
+					"collapseRowLabel",
+					"resizeColumnLabel",
+					"reorderHint",
+					"resizeHint",
+					"filterHint",
+					"resetColumnsLabel",
+					"columnMovedLabel",
+					"actionsHeader",
+					"addLabel",
+					"editLabel",
+					"viewLabel",
+					"deleteLabel",
+					"deleteSelectedLabel",
+					"newRowTitle",
+					"editRowTitle",
+					"viewRowTitle",
+					"saveLabel",
+					"cancelLabel",
+					"closeLabel",
+					"deleteConfirmTitle",
+					"deleteSelectedConfirmTitle",
+					"deleteConfirmMessage",
+					"invalidRowLabel",
+					"saveErrorTitle",
+					"saveErrorText"
+				],
+				outputs: [
+					"sortChange",
+					"pageChange",
+					"pageSizeChange",
+					"selectedChange",
+					"filtersChange",
+					"groupingChange",
+					"expandedChange",
+					"columnWidthsChange",
+					"columnOrderChange",
+					"rowClick",
+					"loadError",
+					"stateChange",
+					"rowSave",
+					"rowDelete"
+				]
+			},
+			{
+				kind: "component",
+				type: i1$7.SirioGridColumn,
+				selector: "wm-sirio-grid-column",
+				inputs: [
+					"field",
+					"header",
+					"sortable",
+					"sortKey",
+					"align",
+					"width",
+					"flex",
+					"hidden",
+					"wrap",
+					"fit",
+					"group",
+					"fixed",
+					"value",
+					"format",
+					"formatOptions",
+					"compare",
+					"groupable",
+					"aggregate",
+					"resizable",
+					"minWidth",
+					"maxWidth",
+					"cellClass",
+					"cellStyle",
+					"headerClass",
+					"headerStyle",
+					"filter",
+					"filterKey",
+					"filterOptions",
+					"filterMultiple",
+					"filterPlaceholder",
+					"filterPredicate",
+					"filterOperators",
+					"mono"
+				]
+			},
+			{
+				kind: "directive",
+				type: i1$7.SirioGridCell,
+				selector: "ng-template[wmSirioGridCell]"
+			},
+			{
+				kind: "component",
+				type: SirioCellHostComponent,
+				selector: "fp-sirio-cell-host",
+				inputs: ["renderer", "params"]
+			},
 			{
 				kind: "component",
 				type: AgGridAngular,
@@ -10520,7 +11829,6 @@ i0.ɵɵngDeclareClassMetadata({
 				CommonModule,
 				ReactiveFormsModule,
 				FormsModule,
-				ReadOnlyDirective,
 				FrameSecurityDirective,
 				RecursionDirective,
 				GridDirective,
@@ -10568,6 +11876,8 @@ i0.ɵɵngDeclareClassMetadata({
 				SirioAccordionItem,
 				SirioAccordionContent,
 				DynamicHostComponent,
+				SIRIO_DATA_GRID,
+				SirioCellHostComponent,
 				AgGridAngular,
 				AgCharts
 			],
@@ -10575,14 +11885,15 @@ i0.ɵɵngDeclareClassMetadata({
 				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]=\"sirioPlaceholder(component)\"\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                               [properties]=\"component.properties\"\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                <!-- @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]=\"sirioPlaceholder(component)\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [properties]=\"component.properties\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(getValues(component) | async)\"\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                <!-- @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]=\"sirioPlaceholder(component)\"\r\n                              [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                              [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                              [properties]=\"component.properties\"\r\n                              [formControlName]=\"component.key\"\r\n                              [options]=\"sirioOptions(getValues(component) | async)\"\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]=\"sirioPlaceholder(component)\"\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                              [properties]=\"component.properties\"\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]=\"sirioPlaceholder(component)\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [properties]=\"component.properties\"\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]=\"sirioPlaceholder(component)\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [properties]=\"component.properties\"\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                                    [properties]=\"component.properties\"\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                                  [properties]=\"component.properties\"\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                                     [properties]=\"component.properties\"\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                                   [properties]=\"component.properties\"\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]=\"sirioPlaceholder(component)\"\r\n                                [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                [properties]=\"component.properties\"\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                                     [properties]=\"component.properties\"\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                              [properties]=\"component.properties\"\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                     [ngClass]=\"getLightView(component)\"\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                                <a *ngIf=\"fileHandlerRef.isLocal(file)\"\r\n                                   href=\"javascript:void(0)\"\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                                </a>\r\n                                <a *ngIf=\"fileHandlerRef.isHandled(file)\"\r\n                                   href=\"javascript:void(0)\"\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                                   download>\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                                </a>\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                    <div [formArrayName]=\"component.key\"\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>{{ evaluateWithEventAsString(locale(component, 'label'), event) }}</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>{{ evaluateWithEventAsString(locale(component, 'label'), event) }}</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>{{ evaluateWithEventAsString(locale(component, 'label'), event) }}</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                    <button type=\"button\" wmSirioButton=\"ghost\"\r\n                            (click)=\"moveUpItem(formArray, i)\"\r\n                            class=\"remove-item\"\r\n                            icon=\"fa-arrow-up\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"upLabel\">{{ upLabel }}</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)\"\r\n                            class=\"remove-item\"\r\n                            icon=\"fa-arrow-down\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"downLabel\">{{ downLabel }}</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)\"\r\n                            class=\"remove-item\"\r\n                            icon=\"fa-trash\" iconPosition=\"start\"\r\n                            [iconOnly]=\"!!compact\" [label]=\"removeLabel\">{{ removeLabel }}</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                            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                <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>{{ evaluateString(locale(component, 'label')) }}</label>\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                                 [formGroup]=\"formGroup\"\r\n                                 #table\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"table\" />\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 *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 }}</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                               [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 *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}.is-disabled .sirio-input-group .sirio-input-group-text,.light-readonly .sirio-input-group .sirio-input-group-text{border:0px}.is-readonly .sirio-form-control{background-color:#fff!important;color:#454d56}.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}.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}\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}.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",
 				".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",
@@ -10608,6 +11919,7 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: GlobalService },
 		{ type: FormService },
 		{ type: GridService },
+		{ type: SirioGridService },
 		{ type: ChartService },
 		{ type: DialogService },
 		{ type: AutoFocusService },
@@ -10844,6 +12156,44 @@ i0.ɵɵngDeclareClassMetadata({
 		args: ["css"]
 	}] }
 });
+function scrollParent(element) {
+	const doc = element.ownerDocument;
+	let parent = element.parentElement;
+	while (parent && parent !== doc.body && parent !== doc.documentElement) {
+		const overflowY = doc.defaultView?.getComputedStyle(parent).overflowY ?? "";
+		if (/(auto|scroll|overlay)/.test(overflowY) && parent.scrollHeight > parent.clientHeight) return parent;
+		parent = parent.parentElement;
+	}
+	return null;
+}
+function isStartVisible(element) {
+	const view = element.ownerDocument.defaultView;
+	if (!view) return true;
+	const margin = parseFloat(view.getComputedStyle(element).scrollMarginTop) || 0;
+	const top = element.getBoundingClientRect().top - margin;
+	const parent = scrollParent(element);
+	const area = parent ? parent.getBoundingClientRect() : {
+		top: 0,
+		bottom: view.innerHeight
+	};
+	return top >= area.top && top < area.bottom;
+}
+function scrollToStart(element) {
+	if (!element || isStartVisible(element)) return;
+	element.scrollIntoView({
+		block: "start",
+		inline: "nearest",
+		behavior: "instant"
+	});
+}
+function scrollPageToTop(doc) {
+	const view = doc.defaultView;
+	if (view && view.scrollY > 0) view.scrollTo({
+		top: 0,
+		left: view.scrollX,
+		behavior: "instant"
+	});
+}
 var DynamicFormComponent = class DynamicFormComponent {
 	cdr;
 	destroyRef;
@@ -10876,12 +12226,15 @@ var DynamicFormComponent = class DynamicFormComponent {
 	browserNavigation = "none";
 	queryParamName = "v";
 	navSize = "normal";
+	scrollOnNavigate = "content";
 	groupMode = "default";
 	updateMode = "changes";
 	valueChange = new EventEmitter();
 	initialized = new EventEmitter();
 	activeNavChange = new EventEmitter();
 	formDiv;
+	rootDiv;
+	document = inject(DOCUMENT$1);
 	constructor(cdr, destroyRef, programmability, formBuilder, validationService, statusService, eventService, registerService, languageService, subscribeService, metadata, formService, dialog, injector, router, route, scope) {
 		this.cdr = cdr;
 		this.destroyRef = destroyRef;
@@ -11151,7 +12504,7 @@ var DynamicFormComponent = class DynamicFormComponent {
 	applyNavigation(value) {
 		this._activeNav = value;
 		setTimeout(() => {
-			this.autoFocus();
+			this.autoFocus(true);
 			this.activeNavChange.emit(this._activeNav);
 		});
 		this.cdr.markForCheck();
@@ -11347,12 +12700,28 @@ var DynamicFormComponent = class DynamicFormComponent {
 	disableAutoFocus() {
 		return this.getCurrentForm()?.disableAutoFocus === true;
 	}
-	autoFocus() {
-		if (this.disableAutoFocus()) return;
-		if (this.formDiv?.nativeElement) setTimeout(() => {
-			if (!hasFieldFocus(this.formDiv.nativeElement)) setFocus(this.formDiv.nativeElement);
+	autoFocus(scroll = false) {
+		setTimeout(() => {
+			const preventScroll = scroll && this.scrollToActiveForm();
+			if (this.disableAutoFocus()) return;
+			const formElement = this.formDiv?.nativeElement;
+			if (formElement && !hasFieldFocus(formElement)) setFocus(formElement, preventScroll);
 		});
 	}
+	scrollToActiveForm() {
+		switch (this.scrollOnNavigate) {
+			case "content":
+				scrollToStart(this.formDiv?.nativeElement);
+				return true;
+			case "form":
+				scrollToStart(this.rootDiv?.nativeElement);
+				return true;
+			case "page":
+				scrollPageToTop(this.document);
+				return true;
+			default: return false;
+		}
+	}
 	canRevealErrors() {
 		return this.hasActiveSilentErrors() && this.hasPotentialNextForm();
 	}
@@ -11443,6 +12812,7 @@ var DynamicFormComponent = class DynamicFormComponent {
 			browserNavigation: "browserNavigation",
 			queryParamName: "queryParamName",
 			navSize: "navSize",
+			scrollOnNavigate: "scrollOnNavigate",
 			groupMode: "groupMode",
 			updateMode: "updateMode",
 			activeNav: "activeNav"
@@ -11465,18 +12835,24 @@ var DynamicFormComponent = class DynamicFormComponent {
 			FunctionService,
 			SubscribeService,
 			StateService,
-			LifetimeService
+			LifetimeService,
+			provideSirioReadonlyAppearance("outline")
 		],
 		viewQueries: [{
 			propertyName: "formDiv",
 			first: true,
 			predicate: ["default"],
 			descendants: true
+		}, {
+			propertyName: "rootDiv",
+			first: true,
+			predicate: ["root"],
+			descendants: true
 		}],
 		usesOnChanges: true,
 		ngImport: i0,
-		template: "@if (schema) {\r\n  <div [formGroup]=\"formGroup\" class=\"ngs\" [css]=\"schema.styles\">\r\n    <div class=\"row\">\r\n      <!-- #region progress -->\r\n      @if (showProgress) {\r\n      <!-- @wemake4u/form-controls: one step per enabled form; the forms with a state can be selected. -->\r\n      @if (getProgress(); as progress) {\r\n      <wm-sirio-stepper navigable\r\n                        [steps]=\"progress.steps\"\r\n                        [current]=\"progress.current\"\r\n                        (stepSelected)=\"activateForm(progress.formIndexes[$event])\" />\r\n      }\r\n      }\r\n      <!-- #endregion -->\r\n      @if (showNav) {\r\n      <div [ngClass]=\"navSize === 'small' ? 'col-md-2' : 'col-md-4'\">\r\n        <!-- #region sidenav -->\r\n        <!-- @wemake4u/form-controls: from 992px a column of the page, below a full screen dialog opened by the kit button. -->\r\n        @if (getSidenavItems(); as nav) {\r\n        <wm-sirio-sidenav [items]=\"nav.items\"\r\n                          [active]=\"nav.active\"\r\n                          (itemClick)=\"activateForm($any($event.item.value))\"\r\n                          [openLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                          [closeLabel]=\"locale(Texts, 'CloseMenu')\" />\r\n        }\r\n        <!-- #endregion -->\r\n      </div>\r\n      <div class=\"col-md-1\">\r\n        <div class=\"separator-horizontal\"></div>\r\n      </div>\r\n      }\r\n      <div class=\"content-element-form\" [ngClass]=\"showNav ? (navSize === 'small' ? 'col-md-13' : 'col-md-11') : 'col-md-16'\">\r\n        @for (form of forms; track form; let sectionIndex = $index) {\r\n        @if (activeNav == sectionIndex && !evaluateBoolean(form.disabled)) {\r\n        <div #default\r\n             [register]=\"form\"\r\n             [componentRef]=\"default\">\r\n          @if (showFormTitle && form.title) {\r\n          <h1 class=\"h3 form-title\">{{ evaluateTemplate(locale(form, 'title')) }}</h1>\r\n          }\r\n          <app-dynamic-fields [form]=\"this\"\r\n                              [formGroup]=\"getFormGroup(form.path)\"\r\n                              [readOnly]=\"readOnly || evaluateBoolean(form.readonly)\"\r\n                              [rows]=\"form.rows\"\r\n                              [identity]=\"form.id\"\r\n                              [disableAutoFocus]=\"form.disableAutoFocus\"\r\n                              [alignment]=\"form.verticalAlignment\"></app-dynamic-fields>\r\n        </div>\r\n        }\r\n        }\r\n        @if (showNavButton && (canNext() || canPrevious())) {\r\n        <div class=\"row section-navs\">\r\n          <div class=\"col-8 col-md-8\">\r\n            @if (canNext()) {\r\n            <button type=\"button\" wmSirioButton=\"ghost\" icon=\"fa-chevron-right\" (click)=\"goNext()\" class=\"nextSection\">{{ locale(Texts, 'NextSection') }}</button>\r\n            }\r\n          </div>\r\n          <div class=\"col-8 col-md-8\">\r\n            @if (canPrevious()) {\r\n            <button type=\"button\" wmSirioButton=\"ghost\" icon=\"fa-chevron-left\" iconPosition=\"start\" (click)=\"goPrevious()\" class=\"prevSection\">{{ locale(Texts, 'PreviousSection') }}</button>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    </div>\r\n  }\r\n\r\n",
-		styles: [".ngs .container,.ngs .container-fluid,.ngs .container-xxl,.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm{--ngsgutter-x: 1.5rem;--ngsgutter-y: 0;width:100%;padding-right:calc(var(--ngsgutter-x) * .5);padding-left:calc(var(--ngsgutter-x) * .5);margin-right:auto;margin-left:auto}@media(min-width:576px){.ngs .container-sm,.ngs .container{max-width:540px}}@media(min-width:768px){.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:720px}}@media(min-width:992px){.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:960px}}@media(min-width:1200px){.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:1140px}}@media(min-width:1400px){.ngs .container-xxl,.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:1320px}}.ngs :root{--ngsbreakpoint-xs: 0;--ngsbreakpoint-sm: 576px;--ngsbreakpoint-md: 768px;--ngsbreakpoint-lg: 992px;--ngsbreakpoint-xl: 1200px;--ngsbreakpoint-xxl: 1400px}.ngs .row{--ngsgutter-x: 1.5rem;--ngsgutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--ngsgutter-y));margin-right:calc(-.5 * var(--ngsgutter-x));margin-left:calc(-.5 * var(--ngsgutter-x))}.ngs .row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--ngsgutter-x) * .5);padding-left:calc(var(--ngsgutter-x) * .5);margin-top:var(--ngsgutter-y)}.ngs .col{flex:1 0 0%}.ngs .row-cols-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-auto{flex:0 0 auto;width:auto}.ngs .col-1{flex:0 0 auto;width:6.25%}.ngs .col-2{flex:0 0 auto;width:12.5%}.ngs .col-3{flex:0 0 auto;width:18.75%}.ngs .col-4{flex:0 0 auto;width:25%}.ngs .col-5{flex:0 0 auto;width:31.25%}.ngs .col-6{flex:0 0 auto;width:37.5%}.ngs .col-7{flex:0 0 auto;width:43.75%}.ngs .col-8{flex:0 0 auto;width:50%}.ngs .col-9{flex:0 0 auto;width:56.25%}.ngs .col-10{flex:0 0 auto;width:62.5%}.ngs .col-11{flex:0 0 auto;width:68.75%}.ngs .col-12{flex:0 0 auto;width:75%}.ngs .col-13{flex:0 0 auto;width:81.25%}.ngs .col-14{flex:0 0 auto;width:87.5%}.ngs .col-15{flex:0 0 auto;width:93.75%}.ngs .col-16{flex:0 0 auto;width:100%}.ngs .offset-1{margin-left:6.25%}.ngs .offset-2{margin-left:12.5%}.ngs .offset-3{margin-left:18.75%}.ngs .offset-4{margin-left:25%}.ngs .offset-5{margin-left:31.25%}.ngs .offset-6{margin-left:37.5%}.ngs .offset-7{margin-left:43.75%}.ngs .offset-8{margin-left:50%}.ngs .offset-9{margin-left:56.25%}.ngs .offset-10{margin-left:62.5%}.ngs .offset-11{margin-left:68.75%}.ngs .offset-12{margin-left:75%}.ngs .offset-13{margin-left:81.25%}.ngs .offset-14{margin-left:87.5%}.ngs .offset-15{margin-left:93.75%}.ngs .g-0,.ngs .gx-0{--ngsgutter-x: 0}.ngs .g-0,.ngs .gy-0{--ngsgutter-y: 0}.ngs .g-1,.ngs .gx-1{--ngsgutter-x: .25rem}.ngs .g-1,.ngs .gy-1{--ngsgutter-y: .25rem}.ngs .g-2,.ngs .gx-2{--ngsgutter-x: .5rem}.ngs .g-2,.ngs .gy-2{--ngsgutter-y: .5rem}.ngs .g-3,.ngs .gx-3{--ngsgutter-x: 1rem}.ngs .g-3,.ngs .gy-3{--ngsgutter-y: 1rem}.ngs .g-4,.ngs .gx-4{--ngsgutter-x: 1.5rem}.ngs .g-4,.ngs .gy-4{--ngsgutter-y: 1.5rem}.ngs .g-5,.ngs .gx-5{--ngsgutter-x: 3rem}.ngs .g-5,.ngs .gy-5{--ngsgutter-y: 3rem}@media(min-width:576px){.ngs .col-sm{flex:1 0 0%}.ngs .row-cols-sm-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-sm-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-sm-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-sm-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-sm-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-sm-auto{flex:0 0 auto;width:auto}.ngs .col-sm-1{flex:0 0 auto;width:6.25%}.ngs .col-sm-2{flex:0 0 auto;width:12.5%}.ngs .col-sm-3{flex:0 0 auto;width:18.75%}.ngs .col-sm-4{flex:0 0 auto;width:25%}.ngs .col-sm-5{flex:0 0 auto;width:31.25%}.ngs .col-sm-6{flex:0 0 auto;width:37.5%}.ngs .col-sm-7{flex:0 0 auto;width:43.75%}.ngs .col-sm-8{flex:0 0 auto;width:50%}.ngs .col-sm-9{flex:0 0 auto;width:56.25%}.ngs .col-sm-10{flex:0 0 auto;width:62.5%}.ngs .col-sm-11{flex:0 0 auto;width:68.75%}.ngs .col-sm-12{flex:0 0 auto;width:75%}.ngs .col-sm-13{flex:0 0 auto;width:81.25%}.ngs .col-sm-14{flex:0 0 auto;width:87.5%}.ngs .col-sm-15{flex:0 0 auto;width:93.75%}.ngs .col-sm-16{flex:0 0 auto;width:100%}.ngs .offset-sm-0{margin-left:0}.ngs .offset-sm-1{margin-left:6.25%}.ngs .offset-sm-2{margin-left:12.5%}.ngs .offset-sm-3{margin-left:18.75%}.ngs .offset-sm-4{margin-left:25%}.ngs .offset-sm-5{margin-left:31.25%}.ngs .offset-sm-6{margin-left:37.5%}.ngs .offset-sm-7{margin-left:43.75%}.ngs .offset-sm-8{margin-left:50%}.ngs .offset-sm-9{margin-left:56.25%}.ngs .offset-sm-10{margin-left:62.5%}.ngs .offset-sm-11{margin-left:68.75%}.ngs .offset-sm-12{margin-left:75%}.ngs .offset-sm-13{margin-left:81.25%}.ngs .offset-sm-14{margin-left:87.5%}.ngs .offset-sm-15{margin-left:93.75%}.ngs .g-sm-0,.ngs .gx-sm-0{--ngsgutter-x: 0}.ngs .g-sm-0,.ngs .gy-sm-0{--ngsgutter-y: 0}.ngs .g-sm-1,.ngs .gx-sm-1{--ngsgutter-x: .25rem}.ngs .g-sm-1,.ngs .gy-sm-1{--ngsgutter-y: .25rem}.ngs .g-sm-2,.ngs .gx-sm-2{--ngsgutter-x: .5rem}.ngs .g-sm-2,.ngs .gy-sm-2{--ngsgutter-y: .5rem}.ngs .g-sm-3,.ngs .gx-sm-3{--ngsgutter-x: 1rem}.ngs .g-sm-3,.ngs .gy-sm-3{--ngsgutter-y: 1rem}.ngs .g-sm-4,.ngs .gx-sm-4{--ngsgutter-x: 1.5rem}.ngs .g-sm-4,.ngs .gy-sm-4{--ngsgutter-y: 1.5rem}.ngs .g-sm-5,.ngs .gx-sm-5{--ngsgutter-x: 3rem}.ngs .g-sm-5,.ngs .gy-sm-5{--ngsgutter-y: 3rem}}@media(min-width:768px){.ngs .col-md{flex:1 0 0%}.ngs .row-cols-md-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-md-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-md-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-md-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-md-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-md-auto{flex:0 0 auto;width:auto}.ngs .col-md-1{flex:0 0 auto;width:6.25%}.ngs .col-md-2{flex:0 0 auto;width:12.5%}.ngs .col-md-3{flex:0 0 auto;width:18.75%}.ngs .col-md-4{flex:0 0 auto;width:25%}.ngs .col-md-5{flex:0 0 auto;width:31.25%}.ngs .col-md-6{flex:0 0 auto;width:37.5%}.ngs .col-md-7{flex:0 0 auto;width:43.75%}.ngs .col-md-8{flex:0 0 auto;width:50%}.ngs .col-md-9{flex:0 0 auto;width:56.25%}.ngs .col-md-10{flex:0 0 auto;width:62.5%}.ngs .col-md-11{flex:0 0 auto;width:68.75%}.ngs .col-md-12{flex:0 0 auto;width:75%}.ngs .col-md-13{flex:0 0 auto;width:81.25%}.ngs .col-md-14{flex:0 0 auto;width:87.5%}.ngs .col-md-15{flex:0 0 auto;width:93.75%}.ngs .col-md-16{flex:0 0 auto;width:100%}.ngs .offset-md-0{margin-left:0}.ngs .offset-md-1{margin-left:6.25%}.ngs .offset-md-2{margin-left:12.5%}.ngs .offset-md-3{margin-left:18.75%}.ngs .offset-md-4{margin-left:25%}.ngs .offset-md-5{margin-left:31.25%}.ngs .offset-md-6{margin-left:37.5%}.ngs .offset-md-7{margin-left:43.75%}.ngs .offset-md-8{margin-left:50%}.ngs .offset-md-9{margin-left:56.25%}.ngs .offset-md-10{margin-left:62.5%}.ngs .offset-md-11{margin-left:68.75%}.ngs .offset-md-12{margin-left:75%}.ngs .offset-md-13{margin-left:81.25%}.ngs .offset-md-14{margin-left:87.5%}.ngs .offset-md-15{margin-left:93.75%}.ngs .g-md-0,.ngs .gx-md-0{--ngsgutter-x: 0}.ngs .g-md-0,.ngs .gy-md-0{--ngsgutter-y: 0}.ngs .g-md-1,.ngs .gx-md-1{--ngsgutter-x: .25rem}.ngs .g-md-1,.ngs .gy-md-1{--ngsgutter-y: .25rem}.ngs .g-md-2,.ngs .gx-md-2{--ngsgutter-x: .5rem}.ngs .g-md-2,.ngs .gy-md-2{--ngsgutter-y: .5rem}.ngs .g-md-3,.ngs .gx-md-3{--ngsgutter-x: 1rem}.ngs .g-md-3,.ngs .gy-md-3{--ngsgutter-y: 1rem}.ngs .g-md-4,.ngs .gx-md-4{--ngsgutter-x: 1.5rem}.ngs .g-md-4,.ngs .gy-md-4{--ngsgutter-y: 1.5rem}.ngs .g-md-5,.ngs .gx-md-5{--ngsgutter-x: 3rem}.ngs .g-md-5,.ngs .gy-md-5{--ngsgutter-y: 3rem}}@media(min-width:992px){.ngs .col-lg{flex:1 0 0%}.ngs .row-cols-lg-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-lg-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-lg-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-lg-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-lg-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-lg-auto{flex:0 0 auto;width:auto}.ngs .col-lg-1{flex:0 0 auto;width:6.25%}.ngs .col-lg-2{flex:0 0 auto;width:12.5%}.ngs .col-lg-3{flex:0 0 auto;width:18.75%}.ngs .col-lg-4{flex:0 0 auto;width:25%}.ngs .col-lg-5{flex:0 0 auto;width:31.25%}.ngs .col-lg-6{flex:0 0 auto;width:37.5%}.ngs .col-lg-7{flex:0 0 auto;width:43.75%}.ngs .col-lg-8{flex:0 0 auto;width:50%}.ngs .col-lg-9{flex:0 0 auto;width:56.25%}.ngs .col-lg-10{flex:0 0 auto;width:62.5%}.ngs .col-lg-11{flex:0 0 auto;width:68.75%}.ngs .col-lg-12{flex:0 0 auto;width:75%}.ngs .col-lg-13{flex:0 0 auto;width:81.25%}.ngs .col-lg-14{flex:0 0 auto;width:87.5%}.ngs .col-lg-15{flex:0 0 auto;width:93.75%}.ngs .col-lg-16{flex:0 0 auto;width:100%}.ngs .offset-lg-0{margin-left:0}.ngs .offset-lg-1{margin-left:6.25%}.ngs .offset-lg-2{margin-left:12.5%}.ngs .offset-lg-3{margin-left:18.75%}.ngs .offset-lg-4{margin-left:25%}.ngs .offset-lg-5{margin-left:31.25%}.ngs .offset-lg-6{margin-left:37.5%}.ngs .offset-lg-7{margin-left:43.75%}.ngs .offset-lg-8{margin-left:50%}.ngs .offset-lg-9{margin-left:56.25%}.ngs .offset-lg-10{margin-left:62.5%}.ngs .offset-lg-11{margin-left:68.75%}.ngs .offset-lg-12{margin-left:75%}.ngs .offset-lg-13{margin-left:81.25%}.ngs .offset-lg-14{margin-left:87.5%}.ngs .offset-lg-15{margin-left:93.75%}.ngs .g-lg-0,.ngs .gx-lg-0{--ngsgutter-x: 0}.ngs .g-lg-0,.ngs .gy-lg-0{--ngsgutter-y: 0}.ngs .g-lg-1,.ngs .gx-lg-1{--ngsgutter-x: .25rem}.ngs .g-lg-1,.ngs .gy-lg-1{--ngsgutter-y: .25rem}.ngs .g-lg-2,.ngs .gx-lg-2{--ngsgutter-x: .5rem}.ngs .g-lg-2,.ngs .gy-lg-2{--ngsgutter-y: .5rem}.ngs .g-lg-3,.ngs .gx-lg-3{--ngsgutter-x: 1rem}.ngs .g-lg-3,.ngs .gy-lg-3{--ngsgutter-y: 1rem}.ngs .g-lg-4,.ngs .gx-lg-4{--ngsgutter-x: 1.5rem}.ngs .g-lg-4,.ngs .gy-lg-4{--ngsgutter-y: 1.5rem}.ngs .g-lg-5,.ngs .gx-lg-5{--ngsgutter-x: 3rem}.ngs .g-lg-5,.ngs .gy-lg-5{--ngsgutter-y: 3rem}}@media(min-width:1200px){.ngs .col-xl{flex:1 0 0%}.ngs .row-cols-xl-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-xl-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-xl-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-xl-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-xl-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-xl-auto{flex:0 0 auto;width:auto}.ngs .col-xl-1{flex:0 0 auto;width:6.25%}.ngs .col-xl-2{flex:0 0 auto;width:12.5%}.ngs .col-xl-3{flex:0 0 auto;width:18.75%}.ngs .col-xl-4{flex:0 0 auto;width:25%}.ngs .col-xl-5{flex:0 0 auto;width:31.25%}.ngs .col-xl-6{flex:0 0 auto;width:37.5%}.ngs .col-xl-7{flex:0 0 auto;width:43.75%}.ngs .col-xl-8{flex:0 0 auto;width:50%}.ngs .col-xl-9{flex:0 0 auto;width:56.25%}.ngs .col-xl-10{flex:0 0 auto;width:62.5%}.ngs .col-xl-11{flex:0 0 auto;width:68.75%}.ngs .col-xl-12{flex:0 0 auto;width:75%}.ngs .col-xl-13{flex:0 0 auto;width:81.25%}.ngs .col-xl-14{flex:0 0 auto;width:87.5%}.ngs .col-xl-15{flex:0 0 auto;width:93.75%}.ngs .col-xl-16{flex:0 0 auto;width:100%}.ngs .offset-xl-0{margin-left:0}.ngs .offset-xl-1{margin-left:6.25%}.ngs .offset-xl-2{margin-left:12.5%}.ngs .offset-xl-3{margin-left:18.75%}.ngs .offset-xl-4{margin-left:25%}.ngs .offset-xl-5{margin-left:31.25%}.ngs .offset-xl-6{margin-left:37.5%}.ngs .offset-xl-7{margin-left:43.75%}.ngs .offset-xl-8{margin-left:50%}.ngs .offset-xl-9{margin-left:56.25%}.ngs .offset-xl-10{margin-left:62.5%}.ngs .offset-xl-11{margin-left:68.75%}.ngs .offset-xl-12{margin-left:75%}.ngs .offset-xl-13{margin-left:81.25%}.ngs .offset-xl-14{margin-left:87.5%}.ngs .offset-xl-15{margin-left:93.75%}.ngs .g-xl-0,.ngs .gx-xl-0{--ngsgutter-x: 0}.ngs .g-xl-0,.ngs .gy-xl-0{--ngsgutter-y: 0}.ngs .g-xl-1,.ngs .gx-xl-1{--ngsgutter-x: .25rem}.ngs .g-xl-1,.ngs .gy-xl-1{--ngsgutter-y: .25rem}.ngs .g-xl-2,.ngs .gx-xl-2{--ngsgutter-x: .5rem}.ngs .g-xl-2,.ngs .gy-xl-2{--ngsgutter-y: .5rem}.ngs .g-xl-3,.ngs .gx-xl-3{--ngsgutter-x: 1rem}.ngs .g-xl-3,.ngs .gy-xl-3{--ngsgutter-y: 1rem}.ngs .g-xl-4,.ngs .gx-xl-4{--ngsgutter-x: 1.5rem}.ngs .g-xl-4,.ngs .gy-xl-4{--ngsgutter-y: 1.5rem}.ngs .g-xl-5,.ngs .gx-xl-5{--ngsgutter-x: 3rem}.ngs .g-xl-5,.ngs .gy-xl-5{--ngsgutter-y: 3rem}}@media(min-width:1400px){.ngs .col-xxl{flex:1 0 0%}.ngs .row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-xxl-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-xxl-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-xxl-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-xxl-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-xxl-auto{flex:0 0 auto;width:auto}.ngs .col-xxl-1{flex:0 0 auto;width:6.25%}.ngs .col-xxl-2{flex:0 0 auto;width:12.5%}.ngs .col-xxl-3{flex:0 0 auto;width:18.75%}.ngs .col-xxl-4{flex:0 0 auto;width:25%}.ngs .col-xxl-5{flex:0 0 auto;width:31.25%}.ngs .col-xxl-6{flex:0 0 auto;width:37.5%}.ngs .col-xxl-7{flex:0 0 auto;width:43.75%}.ngs .col-xxl-8{flex:0 0 auto;width:50%}.ngs .col-xxl-9{flex:0 0 auto;width:56.25%}.ngs .col-xxl-10{flex:0 0 auto;width:62.5%}.ngs .col-xxl-11{flex:0 0 auto;width:68.75%}.ngs .col-xxl-12{flex:0 0 auto;width:75%}.ngs .col-xxl-13{flex:0 0 auto;width:81.25%}.ngs .col-xxl-14{flex:0 0 auto;width:87.5%}.ngs .col-xxl-15{flex:0 0 auto;width:93.75%}.ngs .col-xxl-16{flex:0 0 auto;width:100%}.ngs .offset-xxl-0{margin-left:0}.ngs .offset-xxl-1{margin-left:6.25%}.ngs .offset-xxl-2{margin-left:12.5%}.ngs .offset-xxl-3{margin-left:18.75%}.ngs .offset-xxl-4{margin-left:25%}.ngs .offset-xxl-5{margin-left:31.25%}.ngs .offset-xxl-6{margin-left:37.5%}.ngs .offset-xxl-7{margin-left:43.75%}.ngs .offset-xxl-8{margin-left:50%}.ngs .offset-xxl-9{margin-left:56.25%}.ngs .offset-xxl-10{margin-left:62.5%}.ngs .offset-xxl-11{margin-left:68.75%}.ngs .offset-xxl-12{margin-left:75%}.ngs .offset-xxl-13{margin-left:81.25%}.ngs .offset-xxl-14{margin-left:87.5%}.ngs .offset-xxl-15{margin-left:93.75%}.ngs .g-xxl-0,.ngs .gx-xxl-0{--ngsgutter-x: 0}.ngs .g-xxl-0,.ngs .gy-xxl-0{--ngsgutter-y: 0}.ngs .g-xxl-1,.ngs .gx-xxl-1{--ngsgutter-x: .25rem}.ngs .g-xxl-1,.ngs .gy-xxl-1{--ngsgutter-y: .25rem}.ngs .g-xxl-2,.ngs .gx-xxl-2{--ngsgutter-x: .5rem}.ngs .g-xxl-2,.ngs .gy-xxl-2{--ngsgutter-y: .5rem}.ngs .g-xxl-3,.ngs .gx-xxl-3{--ngsgutter-x: 1rem}.ngs .g-xxl-3,.ngs .gy-xxl-3{--ngsgutter-y: 1rem}.ngs .g-xxl-4,.ngs .gx-xxl-4{--ngsgutter-x: 1.5rem}.ngs .g-xxl-4,.ngs .gy-xxl-4{--ngsgutter-y: 1.5rem}.ngs .g-xxl-5,.ngs .gx-xxl-5{--ngsgutter-x: 3rem}.ngs .g-xxl-5,.ngs .gy-xxl-5{--ngsgutter-y: 3rem}}.ngs .d-inline{display:inline!important}.ngs .d-inline-block{display:inline-block!important}.ngs .d-block{display:block!important}.ngs .d-grid{display:grid!important}.ngs .d-inline-grid{display:inline-grid!important}.ngs .d-table{display:table!important}.ngs .d-table-row{display:table-row!important}.ngs .d-table-cell{display:table-cell!important}.ngs .d-flex{display:flex!important}.ngs .d-inline-flex{display:inline-flex!important}.ngs .d-none{display:none!important}.ngs .flex-fill{flex:1 1 auto!important}.ngs .flex-row{flex-direction:row!important}.ngs .flex-column{flex-direction:column!important}.ngs .flex-row-reverse{flex-direction:row-reverse!important}.ngs .flex-column-reverse{flex-direction:column-reverse!important}.ngs .flex-grow-0{flex-grow:0!important}.ngs .flex-grow-1{flex-grow:1!important}.ngs .flex-shrink-0{flex-shrink:0!important}.ngs .flex-shrink-1{flex-shrink:1!important}.ngs .flex-wrap{flex-wrap:wrap!important}.ngs .flex-nowrap{flex-wrap:nowrap!important}.ngs .flex-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-start{justify-content:flex-start!important}.ngs .justify-content-end{justify-content:flex-end!important}.ngs .justify-content-center{justify-content:center!important}.ngs .justify-content-between{justify-content:space-between!important}.ngs .justify-content-around{justify-content:space-around!important}.ngs .justify-content-evenly{justify-content:space-evenly!important}.ngs .align-items-start{align-items:flex-start!important}.ngs .align-items-end{align-items:flex-end!important}.ngs .align-items-center{align-items:center!important}.ngs .align-items-baseline{align-items:baseline!important}.ngs .align-items-stretch{align-items:stretch!important}.ngs .align-content-start{align-content:flex-start!important}.ngs .align-content-end{align-content:flex-end!important}.ngs .align-content-center{align-content:center!important}.ngs .align-content-between{align-content:space-between!important}.ngs .align-content-around{align-content:space-around!important}.ngs .align-content-stretch{align-content:stretch!important}.ngs .align-self-auto{align-self:auto!important}.ngs .align-self-start{align-self:flex-start!important}.ngs .align-self-end{align-self:flex-end!important}.ngs .align-self-center{align-self:center!important}.ngs .align-self-baseline{align-self:baseline!important}.ngs .align-self-stretch{align-self:stretch!important}.ngs .order-first{order:-1!important}.ngs .order-0{order:0!important}.ngs .order-1{order:1!important}.ngs .order-2{order:2!important}.ngs .order-3{order:3!important}.ngs .order-4{order:4!important}.ngs .order-5{order:5!important}.ngs .order-last{order:6!important}.ngs .m-0{margin:0!important}.ngs .m-1{margin:.25rem!important}.ngs .m-2{margin:.5rem!important}.ngs .m-3{margin:1rem!important}.ngs .m-4{margin:1.5rem!important}.ngs .m-5{margin:3rem!important}.ngs .m-auto{margin:auto!important}.ngs .mx-0{margin-right:0!important;margin-left:0!important}.ngs .mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-0{margin-top:0!important}.ngs .mt-1{margin-top:.25rem!important}.ngs .mt-2{margin-top:.5rem!important}.ngs .mt-3{margin-top:1rem!important}.ngs .mt-4{margin-top:1.5rem!important}.ngs .mt-5{margin-top:3rem!important}.ngs .mt-auto{margin-top:auto!important}.ngs .me-0{margin-right:0!important}.ngs .me-1{margin-right:.25rem!important}.ngs .me-2{margin-right:.5rem!important}.ngs .me-3{margin-right:1rem!important}.ngs .me-4{margin-right:1.5rem!important}.ngs .me-5{margin-right:3rem!important}.ngs .me-auto{margin-right:auto!important}.ngs .mb-0{margin-bottom:0!important}.ngs .mb-1{margin-bottom:.25rem!important}.ngs .mb-2{margin-bottom:.5rem!important}.ngs .mb-3{margin-bottom:1rem!important}.ngs .mb-4{margin-bottom:1.5rem!important}.ngs .mb-5{margin-bottom:3rem!important}.ngs .mb-auto{margin-bottom:auto!important}.ngs .ms-0{margin-left:0!important}.ngs .ms-1{margin-left:.25rem!important}.ngs .ms-2{margin-left:.5rem!important}.ngs .ms-3{margin-left:1rem!important}.ngs .ms-4{margin-left:1.5rem!important}.ngs .ms-5{margin-left:3rem!important}.ngs .ms-auto{margin-left:auto!important}.ngs .p-0{padding:0!important}.ngs .p-1{padding:.25rem!important}.ngs .p-2{padding:.5rem!important}.ngs .p-3{padding:1rem!important}.ngs .p-4{padding:1.5rem!important}.ngs .p-5{padding:3rem!important}.ngs .px-0{padding-right:0!important;padding-left:0!important}.ngs .px-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-0{padding-top:0!important}.ngs .pt-1{padding-top:.25rem!important}.ngs .pt-2{padding-top:.5rem!important}.ngs .pt-3{padding-top:1rem!important}.ngs .pt-4{padding-top:1.5rem!important}.ngs .pt-5{padding-top:3rem!important}.ngs .pe-0{padding-right:0!important}.ngs .pe-1{padding-right:.25rem!important}.ngs .pe-2{padding-right:.5rem!important}.ngs .pe-3{padding-right:1rem!important}.ngs .pe-4{padding-right:1.5rem!important}.ngs .pe-5{padding-right:3rem!important}.ngs .pb-0{padding-bottom:0!important}.ngs .pb-1{padding-bottom:.25rem!important}.ngs .pb-2{padding-bottom:.5rem!important}.ngs .pb-3{padding-bottom:1rem!important}.ngs .pb-4{padding-bottom:1.5rem!important}.ngs .pb-5{padding-bottom:3rem!important}.ngs .ps-0{padding-left:0!important}.ngs .ps-1{padding-left:.25rem!important}.ngs .ps-2{padding-left:.5rem!important}.ngs .ps-3{padding-left:1rem!important}.ngs .ps-4{padding-left:1.5rem!important}.ngs .ps-5{padding-left:3rem!important}@media(min-width:576px){.ngs .d-sm-inline{display:inline!important}.ngs .d-sm-inline-block{display:inline-block!important}.ngs .d-sm-block{display:block!important}.ngs .d-sm-grid{display:grid!important}.ngs .d-sm-inline-grid{display:inline-grid!important}.ngs .d-sm-table{display:table!important}.ngs .d-sm-table-row{display:table-row!important}.ngs .d-sm-table-cell{display:table-cell!important}.ngs .d-sm-flex{display:flex!important}.ngs .d-sm-inline-flex{display:inline-flex!important}.ngs .d-sm-none{display:none!important}.ngs .flex-sm-fill{flex:1 1 auto!important}.ngs .flex-sm-row{flex-direction:row!important}.ngs .flex-sm-column{flex-direction:column!important}.ngs .flex-sm-row-reverse{flex-direction:row-reverse!important}.ngs .flex-sm-column-reverse{flex-direction:column-reverse!important}.ngs .flex-sm-grow-0{flex-grow:0!important}.ngs .flex-sm-grow-1{flex-grow:1!important}.ngs .flex-sm-shrink-0{flex-shrink:0!important}.ngs .flex-sm-shrink-1{flex-shrink:1!important}.ngs .flex-sm-wrap{flex-wrap:wrap!important}.ngs .flex-sm-nowrap{flex-wrap:nowrap!important}.ngs .flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-sm-start{justify-content:flex-start!important}.ngs .justify-content-sm-end{justify-content:flex-end!important}.ngs .justify-content-sm-center{justify-content:center!important}.ngs .justify-content-sm-between{justify-content:space-between!important}.ngs .justify-content-sm-around{justify-content:space-around!important}.ngs .justify-content-sm-evenly{justify-content:space-evenly!important}.ngs .align-items-sm-start{align-items:flex-start!important}.ngs .align-items-sm-end{align-items:flex-end!important}.ngs .align-items-sm-center{align-items:center!important}.ngs .align-items-sm-baseline{align-items:baseline!important}.ngs .align-items-sm-stretch{align-items:stretch!important}.ngs .align-content-sm-start{align-content:flex-start!important}.ngs .align-content-sm-end{align-content:flex-end!important}.ngs .align-content-sm-center{align-content:center!important}.ngs .align-content-sm-between{align-content:space-between!important}.ngs .align-content-sm-around{align-content:space-around!important}.ngs .align-content-sm-stretch{align-content:stretch!important}.ngs .align-self-sm-auto{align-self:auto!important}.ngs .align-self-sm-start{align-self:flex-start!important}.ngs .align-self-sm-end{align-self:flex-end!important}.ngs .align-self-sm-center{align-self:center!important}.ngs .align-self-sm-baseline{align-self:baseline!important}.ngs .align-self-sm-stretch{align-self:stretch!important}.ngs .order-sm-first{order:-1!important}.ngs .order-sm-0{order:0!important}.ngs .order-sm-1{order:1!important}.ngs .order-sm-2{order:2!important}.ngs .order-sm-3{order:3!important}.ngs .order-sm-4{order:4!important}.ngs .order-sm-5{order:5!important}.ngs .order-sm-last{order:6!important}.ngs .m-sm-0{margin:0!important}.ngs .m-sm-1{margin:.25rem!important}.ngs .m-sm-2{margin:.5rem!important}.ngs .m-sm-3{margin:1rem!important}.ngs .m-sm-4{margin:1.5rem!important}.ngs .m-sm-5{margin:3rem!important}.ngs .m-sm-auto{margin:auto!important}.ngs .mx-sm-0{margin-right:0!important;margin-left:0!important}.ngs .mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-sm-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-sm-0{margin-top:0!important}.ngs .mt-sm-1{margin-top:.25rem!important}.ngs .mt-sm-2{margin-top:.5rem!important}.ngs .mt-sm-3{margin-top:1rem!important}.ngs .mt-sm-4{margin-top:1.5rem!important}.ngs .mt-sm-5{margin-top:3rem!important}.ngs .mt-sm-auto{margin-top:auto!important}.ngs .me-sm-0{margin-right:0!important}.ngs .me-sm-1{margin-right:.25rem!important}.ngs .me-sm-2{margin-right:.5rem!important}.ngs .me-sm-3{margin-right:1rem!important}.ngs .me-sm-4{margin-right:1.5rem!important}.ngs .me-sm-5{margin-right:3rem!important}.ngs .me-sm-auto{margin-right:auto!important}.ngs .mb-sm-0{margin-bottom:0!important}.ngs .mb-sm-1{margin-bottom:.25rem!important}.ngs .mb-sm-2{margin-bottom:.5rem!important}.ngs .mb-sm-3{margin-bottom:1rem!important}.ngs .mb-sm-4{margin-bottom:1.5rem!important}.ngs .mb-sm-5{margin-bottom:3rem!important}.ngs .mb-sm-auto{margin-bottom:auto!important}.ngs .ms-sm-0{margin-left:0!important}.ngs .ms-sm-1{margin-left:.25rem!important}.ngs .ms-sm-2{margin-left:.5rem!important}.ngs .ms-sm-3{margin-left:1rem!important}.ngs .ms-sm-4{margin-left:1.5rem!important}.ngs .ms-sm-5{margin-left:3rem!important}.ngs .ms-sm-auto{margin-left:auto!important}.ngs .p-sm-0{padding:0!important}.ngs .p-sm-1{padding:.25rem!important}.ngs .p-sm-2{padding:.5rem!important}.ngs .p-sm-3{padding:1rem!important}.ngs .p-sm-4{padding:1.5rem!important}.ngs .p-sm-5{padding:3rem!important}.ngs .px-sm-0{padding-right:0!important;padding-left:0!important}.ngs .px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-sm-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-sm-0{padding-top:0!important}.ngs .pt-sm-1{padding-top:.25rem!important}.ngs .pt-sm-2{padding-top:.5rem!important}.ngs .pt-sm-3{padding-top:1rem!important}.ngs .pt-sm-4{padding-top:1.5rem!important}.ngs .pt-sm-5{padding-top:3rem!important}.ngs .pe-sm-0{padding-right:0!important}.ngs .pe-sm-1{padding-right:.25rem!important}.ngs .pe-sm-2{padding-right:.5rem!important}.ngs .pe-sm-3{padding-right:1rem!important}.ngs .pe-sm-4{padding-right:1.5rem!important}.ngs .pe-sm-5{padding-right:3rem!important}.ngs .pb-sm-0{padding-bottom:0!important}.ngs .pb-sm-1{padding-bottom:.25rem!important}.ngs .pb-sm-2{padding-bottom:.5rem!important}.ngs .pb-sm-3{padding-bottom:1rem!important}.ngs .pb-sm-4{padding-bottom:1.5rem!important}.ngs .pb-sm-5{padding-bottom:3rem!important}.ngs .ps-sm-0{padding-left:0!important}.ngs .ps-sm-1{padding-left:.25rem!important}.ngs .ps-sm-2{padding-left:.5rem!important}.ngs .ps-sm-3{padding-left:1rem!important}.ngs .ps-sm-4{padding-left:1.5rem!important}.ngs .ps-sm-5{padding-left:3rem!important}}@media(min-width:768px){.ngs .d-md-inline{display:inline!important}.ngs .d-md-inline-block{display:inline-block!important}.ngs .d-md-block{display:block!important}.ngs .d-md-grid{display:grid!important}.ngs .d-md-inline-grid{display:inline-grid!important}.ngs .d-md-table{display:table!important}.ngs .d-md-table-row{display:table-row!important}.ngs .d-md-table-cell{display:table-cell!important}.ngs .d-md-flex{display:flex!important}.ngs .d-md-inline-flex{display:inline-flex!important}.ngs .d-md-none{display:none!important}.ngs .flex-md-fill{flex:1 1 auto!important}.ngs .flex-md-row{flex-direction:row!important}.ngs .flex-md-column{flex-direction:column!important}.ngs .flex-md-row-reverse{flex-direction:row-reverse!important}.ngs .flex-md-column-reverse{flex-direction:column-reverse!important}.ngs .flex-md-grow-0{flex-grow:0!important}.ngs .flex-md-grow-1{flex-grow:1!important}.ngs .flex-md-shrink-0{flex-shrink:0!important}.ngs .flex-md-shrink-1{flex-shrink:1!important}.ngs .flex-md-wrap{flex-wrap:wrap!important}.ngs .flex-md-nowrap{flex-wrap:nowrap!important}.ngs .flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-md-start{justify-content:flex-start!important}.ngs .justify-content-md-end{justify-content:flex-end!important}.ngs .justify-content-md-center{justify-content:center!important}.ngs .justify-content-md-between{justify-content:space-between!important}.ngs .justify-content-md-around{justify-content:space-around!important}.ngs .justify-content-md-evenly{justify-content:space-evenly!important}.ngs .align-items-md-start{align-items:flex-start!important}.ngs .align-items-md-end{align-items:flex-end!important}.ngs .align-items-md-center{align-items:center!important}.ngs .align-items-md-baseline{align-items:baseline!important}.ngs .align-items-md-stretch{align-items:stretch!important}.ngs .align-content-md-start{align-content:flex-start!important}.ngs .align-content-md-end{align-content:flex-end!important}.ngs .align-content-md-center{align-content:center!important}.ngs .align-content-md-between{align-content:space-between!important}.ngs .align-content-md-around{align-content:space-around!important}.ngs .align-content-md-stretch{align-content:stretch!important}.ngs .align-self-md-auto{align-self:auto!important}.ngs .align-self-md-start{align-self:flex-start!important}.ngs .align-self-md-end{align-self:flex-end!important}.ngs .align-self-md-center{align-self:center!important}.ngs .align-self-md-baseline{align-self:baseline!important}.ngs .align-self-md-stretch{align-self:stretch!important}.ngs .order-md-first{order:-1!important}.ngs .order-md-0{order:0!important}.ngs .order-md-1{order:1!important}.ngs .order-md-2{order:2!important}.ngs .order-md-3{order:3!important}.ngs .order-md-4{order:4!important}.ngs .order-md-5{order:5!important}.ngs .order-md-last{order:6!important}.ngs .m-md-0{margin:0!important}.ngs .m-md-1{margin:.25rem!important}.ngs .m-md-2{margin:.5rem!important}.ngs .m-md-3{margin:1rem!important}.ngs .m-md-4{margin:1.5rem!important}.ngs .m-md-5{margin:3rem!important}.ngs .m-md-auto{margin:auto!important}.ngs .mx-md-0{margin-right:0!important;margin-left:0!important}.ngs .mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-md-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-md-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-md-0{margin-top:0!important}.ngs .mt-md-1{margin-top:.25rem!important}.ngs .mt-md-2{margin-top:.5rem!important}.ngs .mt-md-3{margin-top:1rem!important}.ngs .mt-md-4{margin-top:1.5rem!important}.ngs .mt-md-5{margin-top:3rem!important}.ngs .mt-md-auto{margin-top:auto!important}.ngs .me-md-0{margin-right:0!important}.ngs .me-md-1{margin-right:.25rem!important}.ngs .me-md-2{margin-right:.5rem!important}.ngs .me-md-3{margin-right:1rem!important}.ngs .me-md-4{margin-right:1.5rem!important}.ngs .me-md-5{margin-right:3rem!important}.ngs .me-md-auto{margin-right:auto!important}.ngs .mb-md-0{margin-bottom:0!important}.ngs .mb-md-1{margin-bottom:.25rem!important}.ngs .mb-md-2{margin-bottom:.5rem!important}.ngs .mb-md-3{margin-bottom:1rem!important}.ngs .mb-md-4{margin-bottom:1.5rem!important}.ngs .mb-md-5{margin-bottom:3rem!important}.ngs .mb-md-auto{margin-bottom:auto!important}.ngs .ms-md-0{margin-left:0!important}.ngs .ms-md-1{margin-left:.25rem!important}.ngs .ms-md-2{margin-left:.5rem!important}.ngs .ms-md-3{margin-left:1rem!important}.ngs .ms-md-4{margin-left:1.5rem!important}.ngs .ms-md-5{margin-left:3rem!important}.ngs .ms-md-auto{margin-left:auto!important}.ngs .p-md-0{padding:0!important}.ngs .p-md-1{padding:.25rem!important}.ngs .p-md-2{padding:.5rem!important}.ngs .p-md-3{padding:1rem!important}.ngs .p-md-4{padding:1.5rem!important}.ngs .p-md-5{padding:3rem!important}.ngs .px-md-0{padding-right:0!important;padding-left:0!important}.ngs .px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-md-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-md-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-md-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-md-0{padding-top:0!important}.ngs .pt-md-1{padding-top:.25rem!important}.ngs .pt-md-2{padding-top:.5rem!important}.ngs .pt-md-3{padding-top:1rem!important}.ngs .pt-md-4{padding-top:1.5rem!important}.ngs .pt-md-5{padding-top:3rem!important}.ngs .pe-md-0{padding-right:0!important}.ngs .pe-md-1{padding-right:.25rem!important}.ngs .pe-md-2{padding-right:.5rem!important}.ngs .pe-md-3{padding-right:1rem!important}.ngs .pe-md-4{padding-right:1.5rem!important}.ngs .pe-md-5{padding-right:3rem!important}.ngs .pb-md-0{padding-bottom:0!important}.ngs .pb-md-1{padding-bottom:.25rem!important}.ngs .pb-md-2{padding-bottom:.5rem!important}.ngs .pb-md-3{padding-bottom:1rem!important}.ngs .pb-md-4{padding-bottom:1.5rem!important}.ngs .pb-md-5{padding-bottom:3rem!important}.ngs .ps-md-0{padding-left:0!important}.ngs .ps-md-1{padding-left:.25rem!important}.ngs .ps-md-2{padding-left:.5rem!important}.ngs .ps-md-3{padding-left:1rem!important}.ngs .ps-md-4{padding-left:1.5rem!important}.ngs .ps-md-5{padding-left:3rem!important}}@media(min-width:992px){.ngs .d-lg-inline{display:inline!important}.ngs .d-lg-inline-block{display:inline-block!important}.ngs .d-lg-block{display:block!important}.ngs .d-lg-grid{display:grid!important}.ngs .d-lg-inline-grid{display:inline-grid!important}.ngs .d-lg-table{display:table!important}.ngs .d-lg-table-row{display:table-row!important}.ngs .d-lg-table-cell{display:table-cell!important}.ngs .d-lg-flex{display:flex!important}.ngs .d-lg-inline-flex{display:inline-flex!important}.ngs .d-lg-none{display:none!important}.ngs .flex-lg-fill{flex:1 1 auto!important}.ngs .flex-lg-row{flex-direction:row!important}.ngs .flex-lg-column{flex-direction:column!important}.ngs .flex-lg-row-reverse{flex-direction:row-reverse!important}.ngs .flex-lg-column-reverse{flex-direction:column-reverse!important}.ngs .flex-lg-grow-0{flex-grow:0!important}.ngs .flex-lg-grow-1{flex-grow:1!important}.ngs .flex-lg-shrink-0{flex-shrink:0!important}.ngs .flex-lg-shrink-1{flex-shrink:1!important}.ngs .flex-lg-wrap{flex-wrap:wrap!important}.ngs .flex-lg-nowrap{flex-wrap:nowrap!important}.ngs .flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-lg-start{justify-content:flex-start!important}.ngs .justify-content-lg-end{justify-content:flex-end!important}.ngs .justify-content-lg-center{justify-content:center!important}.ngs .justify-content-lg-between{justify-content:space-between!important}.ngs .justify-content-lg-around{justify-content:space-around!important}.ngs .justify-content-lg-evenly{justify-content:space-evenly!important}.ngs .align-items-lg-start{align-items:flex-start!important}.ngs .align-items-lg-end{align-items:flex-end!important}.ngs .align-items-lg-center{align-items:center!important}.ngs .align-items-lg-baseline{align-items:baseline!important}.ngs .align-items-lg-stretch{align-items:stretch!important}.ngs .align-content-lg-start{align-content:flex-start!important}.ngs .align-content-lg-end{align-content:flex-end!important}.ngs .align-content-lg-center{align-content:center!important}.ngs .align-content-lg-between{align-content:space-between!important}.ngs .align-content-lg-around{align-content:space-around!important}.ngs .align-content-lg-stretch{align-content:stretch!important}.ngs .align-self-lg-auto{align-self:auto!important}.ngs .align-self-lg-start{align-self:flex-start!important}.ngs .align-self-lg-end{align-self:flex-end!important}.ngs .align-self-lg-center{align-self:center!important}.ngs .align-self-lg-baseline{align-self:baseline!important}.ngs .align-self-lg-stretch{align-self:stretch!important}.ngs .order-lg-first{order:-1!important}.ngs .order-lg-0{order:0!important}.ngs .order-lg-1{order:1!important}.ngs .order-lg-2{order:2!important}.ngs .order-lg-3{order:3!important}.ngs .order-lg-4{order:4!important}.ngs .order-lg-5{order:5!important}.ngs .order-lg-last{order:6!important}.ngs .m-lg-0{margin:0!important}.ngs .m-lg-1{margin:.25rem!important}.ngs .m-lg-2{margin:.5rem!important}.ngs .m-lg-3{margin:1rem!important}.ngs .m-lg-4{margin:1.5rem!important}.ngs .m-lg-5{margin:3rem!important}.ngs .m-lg-auto{margin:auto!important}.ngs .mx-lg-0{margin-right:0!important;margin-left:0!important}.ngs .mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-lg-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-lg-0{margin-top:0!important}.ngs .mt-lg-1{margin-top:.25rem!important}.ngs .mt-lg-2{margin-top:.5rem!important}.ngs .mt-lg-3{margin-top:1rem!important}.ngs .mt-lg-4{margin-top:1.5rem!important}.ngs .mt-lg-5{margin-top:3rem!important}.ngs .mt-lg-auto{margin-top:auto!important}.ngs .me-lg-0{margin-right:0!important}.ngs .me-lg-1{margin-right:.25rem!important}.ngs .me-lg-2{margin-right:.5rem!important}.ngs .me-lg-3{margin-right:1rem!important}.ngs .me-lg-4{margin-right:1.5rem!important}.ngs .me-lg-5{margin-right:3rem!important}.ngs .me-lg-auto{margin-right:auto!important}.ngs .mb-lg-0{margin-bottom:0!important}.ngs .mb-lg-1{margin-bottom:.25rem!important}.ngs .mb-lg-2{margin-bottom:.5rem!important}.ngs .mb-lg-3{margin-bottom:1rem!important}.ngs .mb-lg-4{margin-bottom:1.5rem!important}.ngs .mb-lg-5{margin-bottom:3rem!important}.ngs .mb-lg-auto{margin-bottom:auto!important}.ngs .ms-lg-0{margin-left:0!important}.ngs .ms-lg-1{margin-left:.25rem!important}.ngs .ms-lg-2{margin-left:.5rem!important}.ngs .ms-lg-3{margin-left:1rem!important}.ngs .ms-lg-4{margin-left:1.5rem!important}.ngs .ms-lg-5{margin-left:3rem!important}.ngs .ms-lg-auto{margin-left:auto!important}.ngs .p-lg-0{padding:0!important}.ngs .p-lg-1{padding:.25rem!important}.ngs .p-lg-2{padding:.5rem!important}.ngs .p-lg-3{padding:1rem!important}.ngs .p-lg-4{padding:1.5rem!important}.ngs .p-lg-5{padding:3rem!important}.ngs .px-lg-0{padding-right:0!important;padding-left:0!important}.ngs .px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-lg-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-lg-0{padding-top:0!important}.ngs .pt-lg-1{padding-top:.25rem!important}.ngs .pt-lg-2{padding-top:.5rem!important}.ngs .pt-lg-3{padding-top:1rem!important}.ngs .pt-lg-4{padding-top:1.5rem!important}.ngs .pt-lg-5{padding-top:3rem!important}.ngs .pe-lg-0{padding-right:0!important}.ngs .pe-lg-1{padding-right:.25rem!important}.ngs .pe-lg-2{padding-right:.5rem!important}.ngs .pe-lg-3{padding-right:1rem!important}.ngs .pe-lg-4{padding-right:1.5rem!important}.ngs .pe-lg-5{padding-right:3rem!important}.ngs .pb-lg-0{padding-bottom:0!important}.ngs .pb-lg-1{padding-bottom:.25rem!important}.ngs .pb-lg-2{padding-bottom:.5rem!important}.ngs .pb-lg-3{padding-bottom:1rem!important}.ngs .pb-lg-4{padding-bottom:1.5rem!important}.ngs .pb-lg-5{padding-bottom:3rem!important}.ngs .ps-lg-0{padding-left:0!important}.ngs .ps-lg-1{padding-left:.25rem!important}.ngs .ps-lg-2{padding-left:.5rem!important}.ngs .ps-lg-3{padding-left:1rem!important}.ngs .ps-lg-4{padding-left:1.5rem!important}.ngs .ps-lg-5{padding-left:3rem!important}}@media(min-width:1200px){.ngs .d-xl-inline{display:inline!important}.ngs .d-xl-inline-block{display:inline-block!important}.ngs .d-xl-block{display:block!important}.ngs .d-xl-grid{display:grid!important}.ngs .d-xl-inline-grid{display:inline-grid!important}.ngs .d-xl-table{display:table!important}.ngs .d-xl-table-row{display:table-row!important}.ngs .d-xl-table-cell{display:table-cell!important}.ngs .d-xl-flex{display:flex!important}.ngs .d-xl-inline-flex{display:inline-flex!important}.ngs .d-xl-none{display:none!important}.ngs .flex-xl-fill{flex:1 1 auto!important}.ngs .flex-xl-row{flex-direction:row!important}.ngs .flex-xl-column{flex-direction:column!important}.ngs .flex-xl-row-reverse{flex-direction:row-reverse!important}.ngs .flex-xl-column-reverse{flex-direction:column-reverse!important}.ngs .flex-xl-grow-0{flex-grow:0!important}.ngs .flex-xl-grow-1{flex-grow:1!important}.ngs .flex-xl-shrink-0{flex-shrink:0!important}.ngs .flex-xl-shrink-1{flex-shrink:1!important}.ngs .flex-xl-wrap{flex-wrap:wrap!important}.ngs .flex-xl-nowrap{flex-wrap:nowrap!important}.ngs .flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-xl-start{justify-content:flex-start!important}.ngs .justify-content-xl-end{justify-content:flex-end!important}.ngs .justify-content-xl-center{justify-content:center!important}.ngs .justify-content-xl-between{justify-content:space-between!important}.ngs .justify-content-xl-around{justify-content:space-around!important}.ngs .justify-content-xl-evenly{justify-content:space-evenly!important}.ngs .align-items-xl-start{align-items:flex-start!important}.ngs .align-items-xl-end{align-items:flex-end!important}.ngs .align-items-xl-center{align-items:center!important}.ngs .align-items-xl-baseline{align-items:baseline!important}.ngs .align-items-xl-stretch{align-items:stretch!important}.ngs .align-content-xl-start{align-content:flex-start!important}.ngs .align-content-xl-end{align-content:flex-end!important}.ngs .align-content-xl-center{align-content:center!important}.ngs .align-content-xl-between{align-content:space-between!important}.ngs .align-content-xl-around{align-content:space-around!important}.ngs .align-content-xl-stretch{align-content:stretch!important}.ngs .align-self-xl-auto{align-self:auto!important}.ngs .align-self-xl-start{align-self:flex-start!important}.ngs .align-self-xl-end{align-self:flex-end!important}.ngs .align-self-xl-center{align-self:center!important}.ngs .align-self-xl-baseline{align-self:baseline!important}.ngs .align-self-xl-stretch{align-self:stretch!important}.ngs .order-xl-first{order:-1!important}.ngs .order-xl-0{order:0!important}.ngs .order-xl-1{order:1!important}.ngs .order-xl-2{order:2!important}.ngs .order-xl-3{order:3!important}.ngs .order-xl-4{order:4!important}.ngs .order-xl-5{order:5!important}.ngs .order-xl-last{order:6!important}.ngs .m-xl-0{margin:0!important}.ngs .m-xl-1{margin:.25rem!important}.ngs .m-xl-2{margin:.5rem!important}.ngs .m-xl-3{margin:1rem!important}.ngs .m-xl-4{margin:1.5rem!important}.ngs .m-xl-5{margin:3rem!important}.ngs .m-xl-auto{margin:auto!important}.ngs .mx-xl-0{margin-right:0!important;margin-left:0!important}.ngs .mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-xl-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-xl-0{margin-top:0!important}.ngs .mt-xl-1{margin-top:.25rem!important}.ngs .mt-xl-2{margin-top:.5rem!important}.ngs .mt-xl-3{margin-top:1rem!important}.ngs .mt-xl-4{margin-top:1.5rem!important}.ngs .mt-xl-5{margin-top:3rem!important}.ngs .mt-xl-auto{margin-top:auto!important}.ngs .me-xl-0{margin-right:0!important}.ngs .me-xl-1{margin-right:.25rem!important}.ngs .me-xl-2{margin-right:.5rem!important}.ngs .me-xl-3{margin-right:1rem!important}.ngs .me-xl-4{margin-right:1.5rem!important}.ngs .me-xl-5{margin-right:3rem!important}.ngs .me-xl-auto{margin-right:auto!important}.ngs .mb-xl-0{margin-bottom:0!important}.ngs .mb-xl-1{margin-bottom:.25rem!important}.ngs .mb-xl-2{margin-bottom:.5rem!important}.ngs .mb-xl-3{margin-bottom:1rem!important}.ngs .mb-xl-4{margin-bottom:1.5rem!important}.ngs .mb-xl-5{margin-bottom:3rem!important}.ngs .mb-xl-auto{margin-bottom:auto!important}.ngs .ms-xl-0{margin-left:0!important}.ngs .ms-xl-1{margin-left:.25rem!important}.ngs .ms-xl-2{margin-left:.5rem!important}.ngs .ms-xl-3{margin-left:1rem!important}.ngs .ms-xl-4{margin-left:1.5rem!important}.ngs .ms-xl-5{margin-left:3rem!important}.ngs .ms-xl-auto{margin-left:auto!important}.ngs .p-xl-0{padding:0!important}.ngs .p-xl-1{padding:.25rem!important}.ngs .p-xl-2{padding:.5rem!important}.ngs .p-xl-3{padding:1rem!important}.ngs .p-xl-4{padding:1.5rem!important}.ngs .p-xl-5{padding:3rem!important}.ngs .px-xl-0{padding-right:0!important;padding-left:0!important}.ngs .px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-xl-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-xl-0{padding-top:0!important}.ngs .pt-xl-1{padding-top:.25rem!important}.ngs .pt-xl-2{padding-top:.5rem!important}.ngs .pt-xl-3{padding-top:1rem!important}.ngs .pt-xl-4{padding-top:1.5rem!important}.ngs .pt-xl-5{padding-top:3rem!important}.ngs .pe-xl-0{padding-right:0!important}.ngs .pe-xl-1{padding-right:.25rem!important}.ngs .pe-xl-2{padding-right:.5rem!important}.ngs .pe-xl-3{padding-right:1rem!important}.ngs .pe-xl-4{padding-right:1.5rem!important}.ngs .pe-xl-5{padding-right:3rem!important}.ngs .pb-xl-0{padding-bottom:0!important}.ngs .pb-xl-1{padding-bottom:.25rem!important}.ngs .pb-xl-2{padding-bottom:.5rem!important}.ngs .pb-xl-3{padding-bottom:1rem!important}.ngs .pb-xl-4{padding-bottom:1.5rem!important}.ngs .pb-xl-5{padding-bottom:3rem!important}.ngs .ps-xl-0{padding-left:0!important}.ngs .ps-xl-1{padding-left:.25rem!important}.ngs .ps-xl-2{padding-left:.5rem!important}.ngs .ps-xl-3{padding-left:1rem!important}.ngs .ps-xl-4{padding-left:1.5rem!important}.ngs .ps-xl-5{padding-left:3rem!important}}@media(min-width:1400px){.ngs .d-xxl-inline{display:inline!important}.ngs .d-xxl-inline-block{display:inline-block!important}.ngs .d-xxl-block{display:block!important}.ngs .d-xxl-grid{display:grid!important}.ngs .d-xxl-inline-grid{display:inline-grid!important}.ngs .d-xxl-table{display:table!important}.ngs .d-xxl-table-row{display:table-row!important}.ngs .d-xxl-table-cell{display:table-cell!important}.ngs .d-xxl-flex{display:flex!important}.ngs .d-xxl-inline-flex{display:inline-flex!important}.ngs .d-xxl-none{display:none!important}.ngs .flex-xxl-fill{flex:1 1 auto!important}.ngs .flex-xxl-row{flex-direction:row!important}.ngs .flex-xxl-column{flex-direction:column!important}.ngs .flex-xxl-row-reverse{flex-direction:row-reverse!important}.ngs .flex-xxl-column-reverse{flex-direction:column-reverse!important}.ngs .flex-xxl-grow-0{flex-grow:0!important}.ngs .flex-xxl-grow-1{flex-grow:1!important}.ngs .flex-xxl-shrink-0{flex-shrink:0!important}.ngs .flex-xxl-shrink-1{flex-shrink:1!important}.ngs .flex-xxl-wrap{flex-wrap:wrap!important}.ngs .flex-xxl-nowrap{flex-wrap:nowrap!important}.ngs .flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-xxl-start{justify-content:flex-start!important}.ngs .justify-content-xxl-end{justify-content:flex-end!important}.ngs .justify-content-xxl-center{justify-content:center!important}.ngs .justify-content-xxl-between{justify-content:space-between!important}.ngs .justify-content-xxl-around{justify-content:space-around!important}.ngs .justify-content-xxl-evenly{justify-content:space-evenly!important}.ngs .align-items-xxl-start{align-items:flex-start!important}.ngs .align-items-xxl-end{align-items:flex-end!important}.ngs .align-items-xxl-center{align-items:center!important}.ngs .align-items-xxl-baseline{align-items:baseline!important}.ngs .align-items-xxl-stretch{align-items:stretch!important}.ngs .align-content-xxl-start{align-content:flex-start!important}.ngs .align-content-xxl-end{align-content:flex-end!important}.ngs .align-content-xxl-center{align-content:center!important}.ngs .align-content-xxl-between{align-content:space-between!important}.ngs .align-content-xxl-around{align-content:space-around!important}.ngs .align-content-xxl-stretch{align-content:stretch!important}.ngs .align-self-xxl-auto{align-self:auto!important}.ngs .align-self-xxl-start{align-self:flex-start!important}.ngs .align-self-xxl-end{align-self:flex-end!important}.ngs .align-self-xxl-center{align-self:center!important}.ngs .align-self-xxl-baseline{align-self:baseline!important}.ngs .align-self-xxl-stretch{align-self:stretch!important}.ngs .order-xxl-first{order:-1!important}.ngs .order-xxl-0{order:0!important}.ngs .order-xxl-1{order:1!important}.ngs .order-xxl-2{order:2!important}.ngs .order-xxl-3{order:3!important}.ngs .order-xxl-4{order:4!important}.ngs .order-xxl-5{order:5!important}.ngs .order-xxl-last{order:6!important}.ngs .m-xxl-0{margin:0!important}.ngs .m-xxl-1{margin:.25rem!important}.ngs .m-xxl-2{margin:.5rem!important}.ngs .m-xxl-3{margin:1rem!important}.ngs .m-xxl-4{margin:1.5rem!important}.ngs .m-xxl-5{margin:3rem!important}.ngs .m-xxl-auto{margin:auto!important}.ngs .mx-xxl-0{margin-right:0!important;margin-left:0!important}.ngs .mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-xxl-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-xxl-0{margin-top:0!important}.ngs .mt-xxl-1{margin-top:.25rem!important}.ngs .mt-xxl-2{margin-top:.5rem!important}.ngs .mt-xxl-3{margin-top:1rem!important}.ngs .mt-xxl-4{margin-top:1.5rem!important}.ngs .mt-xxl-5{margin-top:3rem!important}.ngs .mt-xxl-auto{margin-top:auto!important}.ngs .me-xxl-0{margin-right:0!important}.ngs .me-xxl-1{margin-right:.25rem!important}.ngs .me-xxl-2{margin-right:.5rem!important}.ngs .me-xxl-3{margin-right:1rem!important}.ngs .me-xxl-4{margin-right:1.5rem!important}.ngs .me-xxl-5{margin-right:3rem!important}.ngs .me-xxl-auto{margin-right:auto!important}.ngs .mb-xxl-0{margin-bottom:0!important}.ngs .mb-xxl-1{margin-bottom:.25rem!important}.ngs .mb-xxl-2{margin-bottom:.5rem!important}.ngs .mb-xxl-3{margin-bottom:1rem!important}.ngs .mb-xxl-4{margin-bottom:1.5rem!important}.ngs .mb-xxl-5{margin-bottom:3rem!important}.ngs .mb-xxl-auto{margin-bottom:auto!important}.ngs .ms-xxl-0{margin-left:0!important}.ngs .ms-xxl-1{margin-left:.25rem!important}.ngs .ms-xxl-2{margin-left:.5rem!important}.ngs .ms-xxl-3{margin-left:1rem!important}.ngs .ms-xxl-4{margin-left:1.5rem!important}.ngs .ms-xxl-5{margin-left:3rem!important}.ngs .ms-xxl-auto{margin-left:auto!important}.ngs .p-xxl-0{padding:0!important}.ngs .p-xxl-1{padding:.25rem!important}.ngs .p-xxl-2{padding:.5rem!important}.ngs .p-xxl-3{padding:1rem!important}.ngs .p-xxl-4{padding:1.5rem!important}.ngs .p-xxl-5{padding:3rem!important}.ngs .px-xxl-0{padding-right:0!important;padding-left:0!important}.ngs .px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-xxl-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-xxl-0{padding-top:0!important}.ngs .pt-xxl-1{padding-top:.25rem!important}.ngs .pt-xxl-2{padding-top:.5rem!important}.ngs .pt-xxl-3{padding-top:1rem!important}.ngs .pt-xxl-4{padding-top:1.5rem!important}.ngs .pt-xxl-5{padding-top:3rem!important}.ngs .pe-xxl-0{padding-right:0!important}.ngs .pe-xxl-1{padding-right:.25rem!important}.ngs .pe-xxl-2{padding-right:.5rem!important}.ngs .pe-xxl-3{padding-right:1rem!important}.ngs .pe-xxl-4{padding-right:1.5rem!important}.ngs .pe-xxl-5{padding-right:3rem!important}.ngs .pb-xxl-0{padding-bottom:0!important}.ngs .pb-xxl-1{padding-bottom:.25rem!important}.ngs .pb-xxl-2{padding-bottom:.5rem!important}.ngs .pb-xxl-3{padding-bottom:1rem!important}.ngs .pb-xxl-4{padding-bottom:1.5rem!important}.ngs .pb-xxl-5{padding-bottom:3rem!important}.ngs .ps-xxl-0{padding-left:0!important}.ngs .ps-xxl-1{padding-left:.25rem!important}.ngs .ps-xxl-2{padding-left:.5rem!important}.ngs .ps-xxl-3{padding-left:1rem!important}.ngs .ps-xxl-4{padding-left:1.5rem!important}.ngs .ps-xxl-5{padding-left:3rem!important}}@media print{.ngs .d-print-inline{display:inline!important}.ngs .d-print-inline-block{display:inline-block!important}.ngs .d-print-block{display:block!important}.ngs .d-print-grid{display:grid!important}.ngs .d-print-inline-grid{display:inline-grid!important}.ngs .d-print-table{display:table!important}.ngs .d-print-table-row{display:table-row!important}.ngs .d-print-table-cell{display:table-cell!important}.ngs .d-print-flex{display:flex!important}.ngs .d-print-inline-flex{display:inline-flex!important}.ngs .d-print-none{display:none!important}}\n", ".prevSection{padding:5px 10px;float:left;margin-left:0}.nextSection{padding:5px 10px;float:right;margin-left:0}.separator-horizontal{width:1px;height:100%;background-color:#d6cece;margin:0 auto}.content-element-form .section-navs{width:100%;background-color:#f2f6fc;margin-left:0;margin-right:0;padding:10px;flex-direction:row-reverse}.sirio-toast{width:auto;min-width:17rem;max-width:41rem}.form-title{margin-bottom:15px}.sirio-stepper-item:is(.is-success,.is-warning,.is-error) .sirio-stepper-title{font-weight:600;text-decoration:underline!important}@media(max-width:991px){.content-element-form{width:100%!important}}.feel-editor-container.feel-editor-standalone{border:1px solid #454d56!important;border-radius:4px}\n"],
+		template: "@if (schema) {\r\n  <div #root [formGroup]=\"formGroup\" class=\"ngs df-scroll-anchor\" [css]=\"schema.styles\">\r\n    <div class=\"row\">\r\n      <!-- #region progress -->\r\n      @if (showProgress) {\r\n      <!-- @wemake4u/form-controls: one step per enabled form; the forms with a state can be selected. -->\r\n      @if (getProgress(); as progress) {\r\n      <wm-sirio-stepper navigable\r\n                        [steps]=\"progress.steps\"\r\n                        [current]=\"progress.current\"\r\n                        (stepSelected)=\"activateForm(progress.formIndexes[$event])\" />\r\n      }\r\n      }\r\n      <!-- #endregion -->\r\n      @if (showNav) {\r\n      <div [ngClass]=\"navSize === 'small' ? 'col-md-2' : 'col-md-4'\">\r\n        <!-- #region sidenav -->\r\n        <!-- @wemake4u/form-controls: from 992px a column of the page, below a full screen dialog opened by the kit button. -->\r\n        @if (getSidenavItems(); as nav) {\r\n        <wm-sirio-sidenav [items]=\"nav.items\"\r\n                          [active]=\"nav.active\"\r\n                          (itemClick)=\"activateForm($any($event.item.value))\"\r\n                          [openLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                          [closeLabel]=\"locale(Texts, 'CloseMenu')\" />\r\n        }\r\n        <!-- #endregion -->\r\n      </div>\r\n      <div class=\"col-md-1\">\r\n        <div class=\"separator-horizontal\"></div>\r\n      </div>\r\n      }\r\n      <div class=\"content-element-form\" [ngClass]=\"showNav ? (navSize === 'small' ? 'col-md-13' : 'col-md-11') : 'col-md-16'\">\r\n        @for (form of forms; track form; let sectionIndex = $index) {\r\n        @if (activeNav == sectionIndex && !evaluateBoolean(form.disabled)) {\r\n        <div #default\r\n             class=\"df-scroll-anchor\"\r\n             [register]=\"form\"\r\n             [componentRef]=\"default\">\r\n          @if (showFormTitle && form.title) {\r\n          <h1 class=\"h3 form-title\">{{ evaluateTemplate(locale(form, 'title')) }}</h1>\r\n          }\r\n          <app-dynamic-fields [form]=\"this\"\r\n                              [formGroup]=\"getFormGroup(form.path)\"\r\n                              [readOnly]=\"readOnly || evaluateBoolean(form.readonly)\"\r\n                              [rows]=\"form.rows\"\r\n                              [identity]=\"form.id\"\r\n                              [disableAutoFocus]=\"form.disableAutoFocus\"\r\n                              [alignment]=\"form.verticalAlignment\"></app-dynamic-fields>\r\n        </div>\r\n        }\r\n        }\r\n        @if (showNavButton && (canNext() || canPrevious())) {\r\n        <div class=\"row section-navs\">\r\n          <div class=\"col-8 col-md-8\">\r\n            @if (canNext()) {\r\n            <button type=\"button\" wmSirioButton=\"ghost\" icon=\"fa-chevron-right\" (click)=\"goNext()\" class=\"nextSection\">{{ locale(Texts, 'NextSection') }}</button>\r\n            }\r\n          </div>\r\n          <div class=\"col-8 col-md-8\">\r\n            @if (canPrevious()) {\r\n            <button type=\"button\" wmSirioButton=\"ghost\" icon=\"fa-chevron-left\" iconPosition=\"start\" (click)=\"goPrevious()\" class=\"prevSection\">{{ locale(Texts, 'PreviousSection') }}</button>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    </div>\r\n  }\r\n\r\n",
+		styles: [".ngs .container,.ngs .container-fluid,.ngs .container-xxl,.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm{--ngsgutter-x: 1.5rem;--ngsgutter-y: 0;width:100%;padding-right:calc(var(--ngsgutter-x) * .5);padding-left:calc(var(--ngsgutter-x) * .5);margin-right:auto;margin-left:auto}@media(min-width:576px){.ngs .container-sm,.ngs .container{max-width:540px}}@media(min-width:768px){.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:720px}}@media(min-width:992px){.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:960px}}@media(min-width:1200px){.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:1140px}}@media(min-width:1400px){.ngs .container-xxl,.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:1320px}}.ngs :root{--ngsbreakpoint-xs: 0;--ngsbreakpoint-sm: 576px;--ngsbreakpoint-md: 768px;--ngsbreakpoint-lg: 992px;--ngsbreakpoint-xl: 1200px;--ngsbreakpoint-xxl: 1400px}.ngs .row{--ngsgutter-x: 1.5rem;--ngsgutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--ngsgutter-y));margin-right:calc(-.5 * var(--ngsgutter-x));margin-left:calc(-.5 * var(--ngsgutter-x))}.ngs .row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--ngsgutter-x) * .5);padding-left:calc(var(--ngsgutter-x) * .5);margin-top:var(--ngsgutter-y)}.ngs .col{flex:1 0 0%}.ngs .row-cols-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-auto{flex:0 0 auto;width:auto}.ngs .col-1{flex:0 0 auto;width:6.25%}.ngs .col-2{flex:0 0 auto;width:12.5%}.ngs .col-3{flex:0 0 auto;width:18.75%}.ngs .col-4{flex:0 0 auto;width:25%}.ngs .col-5{flex:0 0 auto;width:31.25%}.ngs .col-6{flex:0 0 auto;width:37.5%}.ngs .col-7{flex:0 0 auto;width:43.75%}.ngs .col-8{flex:0 0 auto;width:50%}.ngs .col-9{flex:0 0 auto;width:56.25%}.ngs .col-10{flex:0 0 auto;width:62.5%}.ngs .col-11{flex:0 0 auto;width:68.75%}.ngs .col-12{flex:0 0 auto;width:75%}.ngs .col-13{flex:0 0 auto;width:81.25%}.ngs .col-14{flex:0 0 auto;width:87.5%}.ngs .col-15{flex:0 0 auto;width:93.75%}.ngs .col-16{flex:0 0 auto;width:100%}.ngs .offset-1{margin-left:6.25%}.ngs .offset-2{margin-left:12.5%}.ngs .offset-3{margin-left:18.75%}.ngs .offset-4{margin-left:25%}.ngs .offset-5{margin-left:31.25%}.ngs .offset-6{margin-left:37.5%}.ngs .offset-7{margin-left:43.75%}.ngs .offset-8{margin-left:50%}.ngs .offset-9{margin-left:56.25%}.ngs .offset-10{margin-left:62.5%}.ngs .offset-11{margin-left:68.75%}.ngs .offset-12{margin-left:75%}.ngs .offset-13{margin-left:81.25%}.ngs .offset-14{margin-left:87.5%}.ngs .offset-15{margin-left:93.75%}.ngs .g-0,.ngs .gx-0{--ngsgutter-x: 0}.ngs .g-0,.ngs .gy-0{--ngsgutter-y: 0}.ngs .g-1,.ngs .gx-1{--ngsgutter-x: .25rem}.ngs .g-1,.ngs .gy-1{--ngsgutter-y: .25rem}.ngs .g-2,.ngs .gx-2{--ngsgutter-x: .5rem}.ngs .g-2,.ngs .gy-2{--ngsgutter-y: .5rem}.ngs .g-3,.ngs .gx-3{--ngsgutter-x: 1rem}.ngs .g-3,.ngs .gy-3{--ngsgutter-y: 1rem}.ngs .g-4,.ngs .gx-4{--ngsgutter-x: 1.5rem}.ngs .g-4,.ngs .gy-4{--ngsgutter-y: 1.5rem}.ngs .g-5,.ngs .gx-5{--ngsgutter-x: 3rem}.ngs .g-5,.ngs .gy-5{--ngsgutter-y: 3rem}@media(min-width:576px){.ngs .col-sm{flex:1 0 0%}.ngs .row-cols-sm-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-sm-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-sm-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-sm-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-sm-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-sm-auto{flex:0 0 auto;width:auto}.ngs .col-sm-1{flex:0 0 auto;width:6.25%}.ngs .col-sm-2{flex:0 0 auto;width:12.5%}.ngs .col-sm-3{flex:0 0 auto;width:18.75%}.ngs .col-sm-4{flex:0 0 auto;width:25%}.ngs .col-sm-5{flex:0 0 auto;width:31.25%}.ngs .col-sm-6{flex:0 0 auto;width:37.5%}.ngs .col-sm-7{flex:0 0 auto;width:43.75%}.ngs .col-sm-8{flex:0 0 auto;width:50%}.ngs .col-sm-9{flex:0 0 auto;width:56.25%}.ngs .col-sm-10{flex:0 0 auto;width:62.5%}.ngs .col-sm-11{flex:0 0 auto;width:68.75%}.ngs .col-sm-12{flex:0 0 auto;width:75%}.ngs .col-sm-13{flex:0 0 auto;width:81.25%}.ngs .col-sm-14{flex:0 0 auto;width:87.5%}.ngs .col-sm-15{flex:0 0 auto;width:93.75%}.ngs .col-sm-16{flex:0 0 auto;width:100%}.ngs .offset-sm-0{margin-left:0}.ngs .offset-sm-1{margin-left:6.25%}.ngs .offset-sm-2{margin-left:12.5%}.ngs .offset-sm-3{margin-left:18.75%}.ngs .offset-sm-4{margin-left:25%}.ngs .offset-sm-5{margin-left:31.25%}.ngs .offset-sm-6{margin-left:37.5%}.ngs .offset-sm-7{margin-left:43.75%}.ngs .offset-sm-8{margin-left:50%}.ngs .offset-sm-9{margin-left:56.25%}.ngs .offset-sm-10{margin-left:62.5%}.ngs .offset-sm-11{margin-left:68.75%}.ngs .offset-sm-12{margin-left:75%}.ngs .offset-sm-13{margin-left:81.25%}.ngs .offset-sm-14{margin-left:87.5%}.ngs .offset-sm-15{margin-left:93.75%}.ngs .g-sm-0,.ngs .gx-sm-0{--ngsgutter-x: 0}.ngs .g-sm-0,.ngs .gy-sm-0{--ngsgutter-y: 0}.ngs .g-sm-1,.ngs .gx-sm-1{--ngsgutter-x: .25rem}.ngs .g-sm-1,.ngs .gy-sm-1{--ngsgutter-y: .25rem}.ngs .g-sm-2,.ngs .gx-sm-2{--ngsgutter-x: .5rem}.ngs .g-sm-2,.ngs .gy-sm-2{--ngsgutter-y: .5rem}.ngs .g-sm-3,.ngs .gx-sm-3{--ngsgutter-x: 1rem}.ngs .g-sm-3,.ngs .gy-sm-3{--ngsgutter-y: 1rem}.ngs .g-sm-4,.ngs .gx-sm-4{--ngsgutter-x: 1.5rem}.ngs .g-sm-4,.ngs .gy-sm-4{--ngsgutter-y: 1.5rem}.ngs .g-sm-5,.ngs .gx-sm-5{--ngsgutter-x: 3rem}.ngs .g-sm-5,.ngs .gy-sm-5{--ngsgutter-y: 3rem}}@media(min-width:768px){.ngs .col-md{flex:1 0 0%}.ngs .row-cols-md-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-md-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-md-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-md-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-md-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-md-auto{flex:0 0 auto;width:auto}.ngs .col-md-1{flex:0 0 auto;width:6.25%}.ngs .col-md-2{flex:0 0 auto;width:12.5%}.ngs .col-md-3{flex:0 0 auto;width:18.75%}.ngs .col-md-4{flex:0 0 auto;width:25%}.ngs .col-md-5{flex:0 0 auto;width:31.25%}.ngs .col-md-6{flex:0 0 auto;width:37.5%}.ngs .col-md-7{flex:0 0 auto;width:43.75%}.ngs .col-md-8{flex:0 0 auto;width:50%}.ngs .col-md-9{flex:0 0 auto;width:56.25%}.ngs .col-md-10{flex:0 0 auto;width:62.5%}.ngs .col-md-11{flex:0 0 auto;width:68.75%}.ngs .col-md-12{flex:0 0 auto;width:75%}.ngs .col-md-13{flex:0 0 auto;width:81.25%}.ngs .col-md-14{flex:0 0 auto;width:87.5%}.ngs .col-md-15{flex:0 0 auto;width:93.75%}.ngs .col-md-16{flex:0 0 auto;width:100%}.ngs .offset-md-0{margin-left:0}.ngs .offset-md-1{margin-left:6.25%}.ngs .offset-md-2{margin-left:12.5%}.ngs .offset-md-3{margin-left:18.75%}.ngs .offset-md-4{margin-left:25%}.ngs .offset-md-5{margin-left:31.25%}.ngs .offset-md-6{margin-left:37.5%}.ngs .offset-md-7{margin-left:43.75%}.ngs .offset-md-8{margin-left:50%}.ngs .offset-md-9{margin-left:56.25%}.ngs .offset-md-10{margin-left:62.5%}.ngs .offset-md-11{margin-left:68.75%}.ngs .offset-md-12{margin-left:75%}.ngs .offset-md-13{margin-left:81.25%}.ngs .offset-md-14{margin-left:87.5%}.ngs .offset-md-15{margin-left:93.75%}.ngs .g-md-0,.ngs .gx-md-0{--ngsgutter-x: 0}.ngs .g-md-0,.ngs .gy-md-0{--ngsgutter-y: 0}.ngs .g-md-1,.ngs .gx-md-1{--ngsgutter-x: .25rem}.ngs .g-md-1,.ngs .gy-md-1{--ngsgutter-y: .25rem}.ngs .g-md-2,.ngs .gx-md-2{--ngsgutter-x: .5rem}.ngs .g-md-2,.ngs .gy-md-2{--ngsgutter-y: .5rem}.ngs .g-md-3,.ngs .gx-md-3{--ngsgutter-x: 1rem}.ngs .g-md-3,.ngs .gy-md-3{--ngsgutter-y: 1rem}.ngs .g-md-4,.ngs .gx-md-4{--ngsgutter-x: 1.5rem}.ngs .g-md-4,.ngs .gy-md-4{--ngsgutter-y: 1.5rem}.ngs .g-md-5,.ngs .gx-md-5{--ngsgutter-x: 3rem}.ngs .g-md-5,.ngs .gy-md-5{--ngsgutter-y: 3rem}}@media(min-width:992px){.ngs .col-lg{flex:1 0 0%}.ngs .row-cols-lg-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-lg-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-lg-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-lg-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-lg-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-lg-auto{flex:0 0 auto;width:auto}.ngs .col-lg-1{flex:0 0 auto;width:6.25%}.ngs .col-lg-2{flex:0 0 auto;width:12.5%}.ngs .col-lg-3{flex:0 0 auto;width:18.75%}.ngs .col-lg-4{flex:0 0 auto;width:25%}.ngs .col-lg-5{flex:0 0 auto;width:31.25%}.ngs .col-lg-6{flex:0 0 auto;width:37.5%}.ngs .col-lg-7{flex:0 0 auto;width:43.75%}.ngs .col-lg-8{flex:0 0 auto;width:50%}.ngs .col-lg-9{flex:0 0 auto;width:56.25%}.ngs .col-lg-10{flex:0 0 auto;width:62.5%}.ngs .col-lg-11{flex:0 0 auto;width:68.75%}.ngs .col-lg-12{flex:0 0 auto;width:75%}.ngs .col-lg-13{flex:0 0 auto;width:81.25%}.ngs .col-lg-14{flex:0 0 auto;width:87.5%}.ngs .col-lg-15{flex:0 0 auto;width:93.75%}.ngs .col-lg-16{flex:0 0 auto;width:100%}.ngs .offset-lg-0{margin-left:0}.ngs .offset-lg-1{margin-left:6.25%}.ngs .offset-lg-2{margin-left:12.5%}.ngs .offset-lg-3{margin-left:18.75%}.ngs .offset-lg-4{margin-left:25%}.ngs .offset-lg-5{margin-left:31.25%}.ngs .offset-lg-6{margin-left:37.5%}.ngs .offset-lg-7{margin-left:43.75%}.ngs .offset-lg-8{margin-left:50%}.ngs .offset-lg-9{margin-left:56.25%}.ngs .offset-lg-10{margin-left:62.5%}.ngs .offset-lg-11{margin-left:68.75%}.ngs .offset-lg-12{margin-left:75%}.ngs .offset-lg-13{margin-left:81.25%}.ngs .offset-lg-14{margin-left:87.5%}.ngs .offset-lg-15{margin-left:93.75%}.ngs .g-lg-0,.ngs .gx-lg-0{--ngsgutter-x: 0}.ngs .g-lg-0,.ngs .gy-lg-0{--ngsgutter-y: 0}.ngs .g-lg-1,.ngs .gx-lg-1{--ngsgutter-x: .25rem}.ngs .g-lg-1,.ngs .gy-lg-1{--ngsgutter-y: .25rem}.ngs .g-lg-2,.ngs .gx-lg-2{--ngsgutter-x: .5rem}.ngs .g-lg-2,.ngs .gy-lg-2{--ngsgutter-y: .5rem}.ngs .g-lg-3,.ngs .gx-lg-3{--ngsgutter-x: 1rem}.ngs .g-lg-3,.ngs .gy-lg-3{--ngsgutter-y: 1rem}.ngs .g-lg-4,.ngs .gx-lg-4{--ngsgutter-x: 1.5rem}.ngs .g-lg-4,.ngs .gy-lg-4{--ngsgutter-y: 1.5rem}.ngs .g-lg-5,.ngs .gx-lg-5{--ngsgutter-x: 3rem}.ngs .g-lg-5,.ngs .gy-lg-5{--ngsgutter-y: 3rem}}@media(min-width:1200px){.ngs .col-xl{flex:1 0 0%}.ngs .row-cols-xl-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-xl-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-xl-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-xl-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-xl-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-xl-auto{flex:0 0 auto;width:auto}.ngs .col-xl-1{flex:0 0 auto;width:6.25%}.ngs .col-xl-2{flex:0 0 auto;width:12.5%}.ngs .col-xl-3{flex:0 0 auto;width:18.75%}.ngs .col-xl-4{flex:0 0 auto;width:25%}.ngs .col-xl-5{flex:0 0 auto;width:31.25%}.ngs .col-xl-6{flex:0 0 auto;width:37.5%}.ngs .col-xl-7{flex:0 0 auto;width:43.75%}.ngs .col-xl-8{flex:0 0 auto;width:50%}.ngs .col-xl-9{flex:0 0 auto;width:56.25%}.ngs .col-xl-10{flex:0 0 auto;width:62.5%}.ngs .col-xl-11{flex:0 0 auto;width:68.75%}.ngs .col-xl-12{flex:0 0 auto;width:75%}.ngs .col-xl-13{flex:0 0 auto;width:81.25%}.ngs .col-xl-14{flex:0 0 auto;width:87.5%}.ngs .col-xl-15{flex:0 0 auto;width:93.75%}.ngs .col-xl-16{flex:0 0 auto;width:100%}.ngs .offset-xl-0{margin-left:0}.ngs .offset-xl-1{margin-left:6.25%}.ngs .offset-xl-2{margin-left:12.5%}.ngs .offset-xl-3{margin-left:18.75%}.ngs .offset-xl-4{margin-left:25%}.ngs .offset-xl-5{margin-left:31.25%}.ngs .offset-xl-6{margin-left:37.5%}.ngs .offset-xl-7{margin-left:43.75%}.ngs .offset-xl-8{margin-left:50%}.ngs .offset-xl-9{margin-left:56.25%}.ngs .offset-xl-10{margin-left:62.5%}.ngs .offset-xl-11{margin-left:68.75%}.ngs .offset-xl-12{margin-left:75%}.ngs .offset-xl-13{margin-left:81.25%}.ngs .offset-xl-14{margin-left:87.5%}.ngs .offset-xl-15{margin-left:93.75%}.ngs .g-xl-0,.ngs .gx-xl-0{--ngsgutter-x: 0}.ngs .g-xl-0,.ngs .gy-xl-0{--ngsgutter-y: 0}.ngs .g-xl-1,.ngs .gx-xl-1{--ngsgutter-x: .25rem}.ngs .g-xl-1,.ngs .gy-xl-1{--ngsgutter-y: .25rem}.ngs .g-xl-2,.ngs .gx-xl-2{--ngsgutter-x: .5rem}.ngs .g-xl-2,.ngs .gy-xl-2{--ngsgutter-y: .5rem}.ngs .g-xl-3,.ngs .gx-xl-3{--ngsgutter-x: 1rem}.ngs .g-xl-3,.ngs .gy-xl-3{--ngsgutter-y: 1rem}.ngs .g-xl-4,.ngs .gx-xl-4{--ngsgutter-x: 1.5rem}.ngs .g-xl-4,.ngs .gy-xl-4{--ngsgutter-y: 1.5rem}.ngs .g-xl-5,.ngs .gx-xl-5{--ngsgutter-x: 3rem}.ngs .g-xl-5,.ngs .gy-xl-5{--ngsgutter-y: 3rem}}@media(min-width:1400px){.ngs .col-xxl{flex:1 0 0%}.ngs .row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-xxl-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-xxl-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-xxl-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-xxl-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-xxl-auto{flex:0 0 auto;width:auto}.ngs .col-xxl-1{flex:0 0 auto;width:6.25%}.ngs .col-xxl-2{flex:0 0 auto;width:12.5%}.ngs .col-xxl-3{flex:0 0 auto;width:18.75%}.ngs .col-xxl-4{flex:0 0 auto;width:25%}.ngs .col-xxl-5{flex:0 0 auto;width:31.25%}.ngs .col-xxl-6{flex:0 0 auto;width:37.5%}.ngs .col-xxl-7{flex:0 0 auto;width:43.75%}.ngs .col-xxl-8{flex:0 0 auto;width:50%}.ngs .col-xxl-9{flex:0 0 auto;width:56.25%}.ngs .col-xxl-10{flex:0 0 auto;width:62.5%}.ngs .col-xxl-11{flex:0 0 auto;width:68.75%}.ngs .col-xxl-12{flex:0 0 auto;width:75%}.ngs .col-xxl-13{flex:0 0 auto;width:81.25%}.ngs .col-xxl-14{flex:0 0 auto;width:87.5%}.ngs .col-xxl-15{flex:0 0 auto;width:93.75%}.ngs .col-xxl-16{flex:0 0 auto;width:100%}.ngs .offset-xxl-0{margin-left:0}.ngs .offset-xxl-1{margin-left:6.25%}.ngs .offset-xxl-2{margin-left:12.5%}.ngs .offset-xxl-3{margin-left:18.75%}.ngs .offset-xxl-4{margin-left:25%}.ngs .offset-xxl-5{margin-left:31.25%}.ngs .offset-xxl-6{margin-left:37.5%}.ngs .offset-xxl-7{margin-left:43.75%}.ngs .offset-xxl-8{margin-left:50%}.ngs .offset-xxl-9{margin-left:56.25%}.ngs .offset-xxl-10{margin-left:62.5%}.ngs .offset-xxl-11{margin-left:68.75%}.ngs .offset-xxl-12{margin-left:75%}.ngs .offset-xxl-13{margin-left:81.25%}.ngs .offset-xxl-14{margin-left:87.5%}.ngs .offset-xxl-15{margin-left:93.75%}.ngs .g-xxl-0,.ngs .gx-xxl-0{--ngsgutter-x: 0}.ngs .g-xxl-0,.ngs .gy-xxl-0{--ngsgutter-y: 0}.ngs .g-xxl-1,.ngs .gx-xxl-1{--ngsgutter-x: .25rem}.ngs .g-xxl-1,.ngs .gy-xxl-1{--ngsgutter-y: .25rem}.ngs .g-xxl-2,.ngs .gx-xxl-2{--ngsgutter-x: .5rem}.ngs .g-xxl-2,.ngs .gy-xxl-2{--ngsgutter-y: .5rem}.ngs .g-xxl-3,.ngs .gx-xxl-3{--ngsgutter-x: 1rem}.ngs .g-xxl-3,.ngs .gy-xxl-3{--ngsgutter-y: 1rem}.ngs .g-xxl-4,.ngs .gx-xxl-4{--ngsgutter-x: 1.5rem}.ngs .g-xxl-4,.ngs .gy-xxl-4{--ngsgutter-y: 1.5rem}.ngs .g-xxl-5,.ngs .gx-xxl-5{--ngsgutter-x: 3rem}.ngs .g-xxl-5,.ngs .gy-xxl-5{--ngsgutter-y: 3rem}}.ngs .d-inline{display:inline!important}.ngs .d-inline-block{display:inline-block!important}.ngs .d-block{display:block!important}.ngs .d-grid{display:grid!important}.ngs .d-inline-grid{display:inline-grid!important}.ngs .d-table{display:table!important}.ngs .d-table-row{display:table-row!important}.ngs .d-table-cell{display:table-cell!important}.ngs .d-flex{display:flex!important}.ngs .d-inline-flex{display:inline-flex!important}.ngs .d-none{display:none!important}.ngs .flex-fill{flex:1 1 auto!important}.ngs .flex-row{flex-direction:row!important}.ngs .flex-column{flex-direction:column!important}.ngs .flex-row-reverse{flex-direction:row-reverse!important}.ngs .flex-column-reverse{flex-direction:column-reverse!important}.ngs .flex-grow-0{flex-grow:0!important}.ngs .flex-grow-1{flex-grow:1!important}.ngs .flex-shrink-0{flex-shrink:0!important}.ngs .flex-shrink-1{flex-shrink:1!important}.ngs .flex-wrap{flex-wrap:wrap!important}.ngs .flex-nowrap{flex-wrap:nowrap!important}.ngs .flex-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-start{justify-content:flex-start!important}.ngs .justify-content-end{justify-content:flex-end!important}.ngs .justify-content-center{justify-content:center!important}.ngs .justify-content-between{justify-content:space-between!important}.ngs .justify-content-around{justify-content:space-around!important}.ngs .justify-content-evenly{justify-content:space-evenly!important}.ngs .align-items-start{align-items:flex-start!important}.ngs .align-items-end{align-items:flex-end!important}.ngs .align-items-center{align-items:center!important}.ngs .align-items-baseline{align-items:baseline!important}.ngs .align-items-stretch{align-items:stretch!important}.ngs .align-content-start{align-content:flex-start!important}.ngs .align-content-end{align-content:flex-end!important}.ngs .align-content-center{align-content:center!important}.ngs .align-content-between{align-content:space-between!important}.ngs .align-content-around{align-content:space-around!important}.ngs .align-content-stretch{align-content:stretch!important}.ngs .align-self-auto{align-self:auto!important}.ngs .align-self-start{align-self:flex-start!important}.ngs .align-self-end{align-self:flex-end!important}.ngs .align-self-center{align-self:center!important}.ngs .align-self-baseline{align-self:baseline!important}.ngs .align-self-stretch{align-self:stretch!important}.ngs .order-first{order:-1!important}.ngs .order-0{order:0!important}.ngs .order-1{order:1!important}.ngs .order-2{order:2!important}.ngs .order-3{order:3!important}.ngs .order-4{order:4!important}.ngs .order-5{order:5!important}.ngs .order-last{order:6!important}.ngs .m-0{margin:0!important}.ngs .m-1{margin:.25rem!important}.ngs .m-2{margin:.5rem!important}.ngs .m-3{margin:1rem!important}.ngs .m-4{margin:1.5rem!important}.ngs .m-5{margin:3rem!important}.ngs .m-auto{margin:auto!important}.ngs .mx-0{margin-right:0!important;margin-left:0!important}.ngs .mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-0{margin-top:0!important}.ngs .mt-1{margin-top:.25rem!important}.ngs .mt-2{margin-top:.5rem!important}.ngs .mt-3{margin-top:1rem!important}.ngs .mt-4{margin-top:1.5rem!important}.ngs .mt-5{margin-top:3rem!important}.ngs .mt-auto{margin-top:auto!important}.ngs .me-0{margin-right:0!important}.ngs .me-1{margin-right:.25rem!important}.ngs .me-2{margin-right:.5rem!important}.ngs .me-3{margin-right:1rem!important}.ngs .me-4{margin-right:1.5rem!important}.ngs .me-5{margin-right:3rem!important}.ngs .me-auto{margin-right:auto!important}.ngs .mb-0{margin-bottom:0!important}.ngs .mb-1{margin-bottom:.25rem!important}.ngs .mb-2{margin-bottom:.5rem!important}.ngs .mb-3{margin-bottom:1rem!important}.ngs .mb-4{margin-bottom:1.5rem!important}.ngs .mb-5{margin-bottom:3rem!important}.ngs .mb-auto{margin-bottom:auto!important}.ngs .ms-0{margin-left:0!important}.ngs .ms-1{margin-left:.25rem!important}.ngs .ms-2{margin-left:.5rem!important}.ngs .ms-3{margin-left:1rem!important}.ngs .ms-4{margin-left:1.5rem!important}.ngs .ms-5{margin-left:3rem!important}.ngs .ms-auto{margin-left:auto!important}.ngs .p-0{padding:0!important}.ngs .p-1{padding:.25rem!important}.ngs .p-2{padding:.5rem!important}.ngs .p-3{padding:1rem!important}.ngs .p-4{padding:1.5rem!important}.ngs .p-5{padding:3rem!important}.ngs .px-0{padding-right:0!important;padding-left:0!important}.ngs .px-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-0{padding-top:0!important}.ngs .pt-1{padding-top:.25rem!important}.ngs .pt-2{padding-top:.5rem!important}.ngs .pt-3{padding-top:1rem!important}.ngs .pt-4{padding-top:1.5rem!important}.ngs .pt-5{padding-top:3rem!important}.ngs .pe-0{padding-right:0!important}.ngs .pe-1{padding-right:.25rem!important}.ngs .pe-2{padding-right:.5rem!important}.ngs .pe-3{padding-right:1rem!important}.ngs .pe-4{padding-right:1.5rem!important}.ngs .pe-5{padding-right:3rem!important}.ngs .pb-0{padding-bottom:0!important}.ngs .pb-1{padding-bottom:.25rem!important}.ngs .pb-2{padding-bottom:.5rem!important}.ngs .pb-3{padding-bottom:1rem!important}.ngs .pb-4{padding-bottom:1.5rem!important}.ngs .pb-5{padding-bottom:3rem!important}.ngs .ps-0{padding-left:0!important}.ngs .ps-1{padding-left:.25rem!important}.ngs .ps-2{padding-left:.5rem!important}.ngs .ps-3{padding-left:1rem!important}.ngs .ps-4{padding-left:1.5rem!important}.ngs .ps-5{padding-left:3rem!important}@media(min-width:576px){.ngs .d-sm-inline{display:inline!important}.ngs .d-sm-inline-block{display:inline-block!important}.ngs .d-sm-block{display:block!important}.ngs .d-sm-grid{display:grid!important}.ngs .d-sm-inline-grid{display:inline-grid!important}.ngs .d-sm-table{display:table!important}.ngs .d-sm-table-row{display:table-row!important}.ngs .d-sm-table-cell{display:table-cell!important}.ngs .d-sm-flex{display:flex!important}.ngs .d-sm-inline-flex{display:inline-flex!important}.ngs .d-sm-none{display:none!important}.ngs .flex-sm-fill{flex:1 1 auto!important}.ngs .flex-sm-row{flex-direction:row!important}.ngs .flex-sm-column{flex-direction:column!important}.ngs .flex-sm-row-reverse{flex-direction:row-reverse!important}.ngs .flex-sm-column-reverse{flex-direction:column-reverse!important}.ngs .flex-sm-grow-0{flex-grow:0!important}.ngs .flex-sm-grow-1{flex-grow:1!important}.ngs .flex-sm-shrink-0{flex-shrink:0!important}.ngs .flex-sm-shrink-1{flex-shrink:1!important}.ngs .flex-sm-wrap{flex-wrap:wrap!important}.ngs .flex-sm-nowrap{flex-wrap:nowrap!important}.ngs .flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-sm-start{justify-content:flex-start!important}.ngs .justify-content-sm-end{justify-content:flex-end!important}.ngs .justify-content-sm-center{justify-content:center!important}.ngs .justify-content-sm-between{justify-content:space-between!important}.ngs .justify-content-sm-around{justify-content:space-around!important}.ngs .justify-content-sm-evenly{justify-content:space-evenly!important}.ngs .align-items-sm-start{align-items:flex-start!important}.ngs .align-items-sm-end{align-items:flex-end!important}.ngs .align-items-sm-center{align-items:center!important}.ngs .align-items-sm-baseline{align-items:baseline!important}.ngs .align-items-sm-stretch{align-items:stretch!important}.ngs .align-content-sm-start{align-content:flex-start!important}.ngs .align-content-sm-end{align-content:flex-end!important}.ngs .align-content-sm-center{align-content:center!important}.ngs .align-content-sm-between{align-content:space-between!important}.ngs .align-content-sm-around{align-content:space-around!important}.ngs .align-content-sm-stretch{align-content:stretch!important}.ngs .align-self-sm-auto{align-self:auto!important}.ngs .align-self-sm-start{align-self:flex-start!important}.ngs .align-self-sm-end{align-self:flex-end!important}.ngs .align-self-sm-center{align-self:center!important}.ngs .align-self-sm-baseline{align-self:baseline!important}.ngs .align-self-sm-stretch{align-self:stretch!important}.ngs .order-sm-first{order:-1!important}.ngs .order-sm-0{order:0!important}.ngs .order-sm-1{order:1!important}.ngs .order-sm-2{order:2!important}.ngs .order-sm-3{order:3!important}.ngs .order-sm-4{order:4!important}.ngs .order-sm-5{order:5!important}.ngs .order-sm-last{order:6!important}.ngs .m-sm-0{margin:0!important}.ngs .m-sm-1{margin:.25rem!important}.ngs .m-sm-2{margin:.5rem!important}.ngs .m-sm-3{margin:1rem!important}.ngs .m-sm-4{margin:1.5rem!important}.ngs .m-sm-5{margin:3rem!important}.ngs .m-sm-auto{margin:auto!important}.ngs .mx-sm-0{margin-right:0!important;margin-left:0!important}.ngs .mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-sm-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-sm-0{margin-top:0!important}.ngs .mt-sm-1{margin-top:.25rem!important}.ngs .mt-sm-2{margin-top:.5rem!important}.ngs .mt-sm-3{margin-top:1rem!important}.ngs .mt-sm-4{margin-top:1.5rem!important}.ngs .mt-sm-5{margin-top:3rem!important}.ngs .mt-sm-auto{margin-top:auto!important}.ngs .me-sm-0{margin-right:0!important}.ngs .me-sm-1{margin-right:.25rem!important}.ngs .me-sm-2{margin-right:.5rem!important}.ngs .me-sm-3{margin-right:1rem!important}.ngs .me-sm-4{margin-right:1.5rem!important}.ngs .me-sm-5{margin-right:3rem!important}.ngs .me-sm-auto{margin-right:auto!important}.ngs .mb-sm-0{margin-bottom:0!important}.ngs .mb-sm-1{margin-bottom:.25rem!important}.ngs .mb-sm-2{margin-bottom:.5rem!important}.ngs .mb-sm-3{margin-bottom:1rem!important}.ngs .mb-sm-4{margin-bottom:1.5rem!important}.ngs .mb-sm-5{margin-bottom:3rem!important}.ngs .mb-sm-auto{margin-bottom:auto!important}.ngs .ms-sm-0{margin-left:0!important}.ngs .ms-sm-1{margin-left:.25rem!important}.ngs .ms-sm-2{margin-left:.5rem!important}.ngs .ms-sm-3{margin-left:1rem!important}.ngs .ms-sm-4{margin-left:1.5rem!important}.ngs .ms-sm-5{margin-left:3rem!important}.ngs .ms-sm-auto{margin-left:auto!important}.ngs .p-sm-0{padding:0!important}.ngs .p-sm-1{padding:.25rem!important}.ngs .p-sm-2{padding:.5rem!important}.ngs .p-sm-3{padding:1rem!important}.ngs .p-sm-4{padding:1.5rem!important}.ngs .p-sm-5{padding:3rem!important}.ngs .px-sm-0{padding-right:0!important;padding-left:0!important}.ngs .px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-sm-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-sm-0{padding-top:0!important}.ngs .pt-sm-1{padding-top:.25rem!important}.ngs .pt-sm-2{padding-top:.5rem!important}.ngs .pt-sm-3{padding-top:1rem!important}.ngs .pt-sm-4{padding-top:1.5rem!important}.ngs .pt-sm-5{padding-top:3rem!important}.ngs .pe-sm-0{padding-right:0!important}.ngs .pe-sm-1{padding-right:.25rem!important}.ngs .pe-sm-2{padding-right:.5rem!important}.ngs .pe-sm-3{padding-right:1rem!important}.ngs .pe-sm-4{padding-right:1.5rem!important}.ngs .pe-sm-5{padding-right:3rem!important}.ngs .pb-sm-0{padding-bottom:0!important}.ngs .pb-sm-1{padding-bottom:.25rem!important}.ngs .pb-sm-2{padding-bottom:.5rem!important}.ngs .pb-sm-3{padding-bottom:1rem!important}.ngs .pb-sm-4{padding-bottom:1.5rem!important}.ngs .pb-sm-5{padding-bottom:3rem!important}.ngs .ps-sm-0{padding-left:0!important}.ngs .ps-sm-1{padding-left:.25rem!important}.ngs .ps-sm-2{padding-left:.5rem!important}.ngs .ps-sm-3{padding-left:1rem!important}.ngs .ps-sm-4{padding-left:1.5rem!important}.ngs .ps-sm-5{padding-left:3rem!important}}@media(min-width:768px){.ngs .d-md-inline{display:inline!important}.ngs .d-md-inline-block{display:inline-block!important}.ngs .d-md-block{display:block!important}.ngs .d-md-grid{display:grid!important}.ngs .d-md-inline-grid{display:inline-grid!important}.ngs .d-md-table{display:table!important}.ngs .d-md-table-row{display:table-row!important}.ngs .d-md-table-cell{display:table-cell!important}.ngs .d-md-flex{display:flex!important}.ngs .d-md-inline-flex{display:inline-flex!important}.ngs .d-md-none{display:none!important}.ngs .flex-md-fill{flex:1 1 auto!important}.ngs .flex-md-row{flex-direction:row!important}.ngs .flex-md-column{flex-direction:column!important}.ngs .flex-md-row-reverse{flex-direction:row-reverse!important}.ngs .flex-md-column-reverse{flex-direction:column-reverse!important}.ngs .flex-md-grow-0{flex-grow:0!important}.ngs .flex-md-grow-1{flex-grow:1!important}.ngs .flex-md-shrink-0{flex-shrink:0!important}.ngs .flex-md-shrink-1{flex-shrink:1!important}.ngs .flex-md-wrap{flex-wrap:wrap!important}.ngs .flex-md-nowrap{flex-wrap:nowrap!important}.ngs .flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-md-start{justify-content:flex-start!important}.ngs .justify-content-md-end{justify-content:flex-end!important}.ngs .justify-content-md-center{justify-content:center!important}.ngs .justify-content-md-between{justify-content:space-between!important}.ngs .justify-content-md-around{justify-content:space-around!important}.ngs .justify-content-md-evenly{justify-content:space-evenly!important}.ngs .align-items-md-start{align-items:flex-start!important}.ngs .align-items-md-end{align-items:flex-end!important}.ngs .align-items-md-center{align-items:center!important}.ngs .align-items-md-baseline{align-items:baseline!important}.ngs .align-items-md-stretch{align-items:stretch!important}.ngs .align-content-md-start{align-content:flex-start!important}.ngs .align-content-md-end{align-content:flex-end!important}.ngs .align-content-md-center{align-content:center!important}.ngs .align-content-md-between{align-content:space-between!important}.ngs .align-content-md-around{align-content:space-around!important}.ngs .align-content-md-stretch{align-content:stretch!important}.ngs .align-self-md-auto{align-self:auto!important}.ngs .align-self-md-start{align-self:flex-start!important}.ngs .align-self-md-end{align-self:flex-end!important}.ngs .align-self-md-center{align-self:center!important}.ngs .align-self-md-baseline{align-self:baseline!important}.ngs .align-self-md-stretch{align-self:stretch!important}.ngs .order-md-first{order:-1!important}.ngs .order-md-0{order:0!important}.ngs .order-md-1{order:1!important}.ngs .order-md-2{order:2!important}.ngs .order-md-3{order:3!important}.ngs .order-md-4{order:4!important}.ngs .order-md-5{order:5!important}.ngs .order-md-last{order:6!important}.ngs .m-md-0{margin:0!important}.ngs .m-md-1{margin:.25rem!important}.ngs .m-md-2{margin:.5rem!important}.ngs .m-md-3{margin:1rem!important}.ngs .m-md-4{margin:1.5rem!important}.ngs .m-md-5{margin:3rem!important}.ngs .m-md-auto{margin:auto!important}.ngs .mx-md-0{margin-right:0!important;margin-left:0!important}.ngs .mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-md-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-md-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-md-0{margin-top:0!important}.ngs .mt-md-1{margin-top:.25rem!important}.ngs .mt-md-2{margin-top:.5rem!important}.ngs .mt-md-3{margin-top:1rem!important}.ngs .mt-md-4{margin-top:1.5rem!important}.ngs .mt-md-5{margin-top:3rem!important}.ngs .mt-md-auto{margin-top:auto!important}.ngs .me-md-0{margin-right:0!important}.ngs .me-md-1{margin-right:.25rem!important}.ngs .me-md-2{margin-right:.5rem!important}.ngs .me-md-3{margin-right:1rem!important}.ngs .me-md-4{margin-right:1.5rem!important}.ngs .me-md-5{margin-right:3rem!important}.ngs .me-md-auto{margin-right:auto!important}.ngs .mb-md-0{margin-bottom:0!important}.ngs .mb-md-1{margin-bottom:.25rem!important}.ngs .mb-md-2{margin-bottom:.5rem!important}.ngs .mb-md-3{margin-bottom:1rem!important}.ngs .mb-md-4{margin-bottom:1.5rem!important}.ngs .mb-md-5{margin-bottom:3rem!important}.ngs .mb-md-auto{margin-bottom:auto!important}.ngs .ms-md-0{margin-left:0!important}.ngs .ms-md-1{margin-left:.25rem!important}.ngs .ms-md-2{margin-left:.5rem!important}.ngs .ms-md-3{margin-left:1rem!important}.ngs .ms-md-4{margin-left:1.5rem!important}.ngs .ms-md-5{margin-left:3rem!important}.ngs .ms-md-auto{margin-left:auto!important}.ngs .p-md-0{padding:0!important}.ngs .p-md-1{padding:.25rem!important}.ngs .p-md-2{padding:.5rem!important}.ngs .p-md-3{padding:1rem!important}.ngs .p-md-4{padding:1.5rem!important}.ngs .p-md-5{padding:3rem!important}.ngs .px-md-0{padding-right:0!important;padding-left:0!important}.ngs .px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-md-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-md-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-md-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-md-0{padding-top:0!important}.ngs .pt-md-1{padding-top:.25rem!important}.ngs .pt-md-2{padding-top:.5rem!important}.ngs .pt-md-3{padding-top:1rem!important}.ngs .pt-md-4{padding-top:1.5rem!important}.ngs .pt-md-5{padding-top:3rem!important}.ngs .pe-md-0{padding-right:0!important}.ngs .pe-md-1{padding-right:.25rem!important}.ngs .pe-md-2{padding-right:.5rem!important}.ngs .pe-md-3{padding-right:1rem!important}.ngs .pe-md-4{padding-right:1.5rem!important}.ngs .pe-md-5{padding-right:3rem!important}.ngs .pb-md-0{padding-bottom:0!important}.ngs .pb-md-1{padding-bottom:.25rem!important}.ngs .pb-md-2{padding-bottom:.5rem!important}.ngs .pb-md-3{padding-bottom:1rem!important}.ngs .pb-md-4{padding-bottom:1.5rem!important}.ngs .pb-md-5{padding-bottom:3rem!important}.ngs .ps-md-0{padding-left:0!important}.ngs .ps-md-1{padding-left:.25rem!important}.ngs .ps-md-2{padding-left:.5rem!important}.ngs .ps-md-3{padding-left:1rem!important}.ngs .ps-md-4{padding-left:1.5rem!important}.ngs .ps-md-5{padding-left:3rem!important}}@media(min-width:992px){.ngs .d-lg-inline{display:inline!important}.ngs .d-lg-inline-block{display:inline-block!important}.ngs .d-lg-block{display:block!important}.ngs .d-lg-grid{display:grid!important}.ngs .d-lg-inline-grid{display:inline-grid!important}.ngs .d-lg-table{display:table!important}.ngs .d-lg-table-row{display:table-row!important}.ngs .d-lg-table-cell{display:table-cell!important}.ngs .d-lg-flex{display:flex!important}.ngs .d-lg-inline-flex{display:inline-flex!important}.ngs .d-lg-none{display:none!important}.ngs .flex-lg-fill{flex:1 1 auto!important}.ngs .flex-lg-row{flex-direction:row!important}.ngs .flex-lg-column{flex-direction:column!important}.ngs .flex-lg-row-reverse{flex-direction:row-reverse!important}.ngs .flex-lg-column-reverse{flex-direction:column-reverse!important}.ngs .flex-lg-grow-0{flex-grow:0!important}.ngs .flex-lg-grow-1{flex-grow:1!important}.ngs .flex-lg-shrink-0{flex-shrink:0!important}.ngs .flex-lg-shrink-1{flex-shrink:1!important}.ngs .flex-lg-wrap{flex-wrap:wrap!important}.ngs .flex-lg-nowrap{flex-wrap:nowrap!important}.ngs .flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-lg-start{justify-content:flex-start!important}.ngs .justify-content-lg-end{justify-content:flex-end!important}.ngs .justify-content-lg-center{justify-content:center!important}.ngs .justify-content-lg-between{justify-content:space-between!important}.ngs .justify-content-lg-around{justify-content:space-around!important}.ngs .justify-content-lg-evenly{justify-content:space-evenly!important}.ngs .align-items-lg-start{align-items:flex-start!important}.ngs .align-items-lg-end{align-items:flex-end!important}.ngs .align-items-lg-center{align-items:center!important}.ngs .align-items-lg-baseline{align-items:baseline!important}.ngs .align-items-lg-stretch{align-items:stretch!important}.ngs .align-content-lg-start{align-content:flex-start!important}.ngs .align-content-lg-end{align-content:flex-end!important}.ngs .align-content-lg-center{align-content:center!important}.ngs .align-content-lg-between{align-content:space-between!important}.ngs .align-content-lg-around{align-content:space-around!important}.ngs .align-content-lg-stretch{align-content:stretch!important}.ngs .align-self-lg-auto{align-self:auto!important}.ngs .align-self-lg-start{align-self:flex-start!important}.ngs .align-self-lg-end{align-self:flex-end!important}.ngs .align-self-lg-center{align-self:center!important}.ngs .align-self-lg-baseline{align-self:baseline!important}.ngs .align-self-lg-stretch{align-self:stretch!important}.ngs .order-lg-first{order:-1!important}.ngs .order-lg-0{order:0!important}.ngs .order-lg-1{order:1!important}.ngs .order-lg-2{order:2!important}.ngs .order-lg-3{order:3!important}.ngs .order-lg-4{order:4!important}.ngs .order-lg-5{order:5!important}.ngs .order-lg-last{order:6!important}.ngs .m-lg-0{margin:0!important}.ngs .m-lg-1{margin:.25rem!important}.ngs .m-lg-2{margin:.5rem!important}.ngs .m-lg-3{margin:1rem!important}.ngs .m-lg-4{margin:1.5rem!important}.ngs .m-lg-5{margin:3rem!important}.ngs .m-lg-auto{margin:auto!important}.ngs .mx-lg-0{margin-right:0!important;margin-left:0!important}.ngs .mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-lg-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-lg-0{margin-top:0!important}.ngs .mt-lg-1{margin-top:.25rem!important}.ngs .mt-lg-2{margin-top:.5rem!important}.ngs .mt-lg-3{margin-top:1rem!important}.ngs .mt-lg-4{margin-top:1.5rem!important}.ngs .mt-lg-5{margin-top:3rem!important}.ngs .mt-lg-auto{margin-top:auto!important}.ngs .me-lg-0{margin-right:0!important}.ngs .me-lg-1{margin-right:.25rem!important}.ngs .me-lg-2{margin-right:.5rem!important}.ngs .me-lg-3{margin-right:1rem!important}.ngs .me-lg-4{margin-right:1.5rem!important}.ngs .me-lg-5{margin-right:3rem!important}.ngs .me-lg-auto{margin-right:auto!important}.ngs .mb-lg-0{margin-bottom:0!important}.ngs .mb-lg-1{margin-bottom:.25rem!important}.ngs .mb-lg-2{margin-bottom:.5rem!important}.ngs .mb-lg-3{margin-bottom:1rem!important}.ngs .mb-lg-4{margin-bottom:1.5rem!important}.ngs .mb-lg-5{margin-bottom:3rem!important}.ngs .mb-lg-auto{margin-bottom:auto!important}.ngs .ms-lg-0{margin-left:0!important}.ngs .ms-lg-1{margin-left:.25rem!important}.ngs .ms-lg-2{margin-left:.5rem!important}.ngs .ms-lg-3{margin-left:1rem!important}.ngs .ms-lg-4{margin-left:1.5rem!important}.ngs .ms-lg-5{margin-left:3rem!important}.ngs .ms-lg-auto{margin-left:auto!important}.ngs .p-lg-0{padding:0!important}.ngs .p-lg-1{padding:.25rem!important}.ngs .p-lg-2{padding:.5rem!important}.ngs .p-lg-3{padding:1rem!important}.ngs .p-lg-4{padding:1.5rem!important}.ngs .p-lg-5{padding:3rem!important}.ngs .px-lg-0{padding-right:0!important;padding-left:0!important}.ngs .px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-lg-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-lg-0{padding-top:0!important}.ngs .pt-lg-1{padding-top:.25rem!important}.ngs .pt-lg-2{padding-top:.5rem!important}.ngs .pt-lg-3{padding-top:1rem!important}.ngs .pt-lg-4{padding-top:1.5rem!important}.ngs .pt-lg-5{padding-top:3rem!important}.ngs .pe-lg-0{padding-right:0!important}.ngs .pe-lg-1{padding-right:.25rem!important}.ngs .pe-lg-2{padding-right:.5rem!important}.ngs .pe-lg-3{padding-right:1rem!important}.ngs .pe-lg-4{padding-right:1.5rem!important}.ngs .pe-lg-5{padding-right:3rem!important}.ngs .pb-lg-0{padding-bottom:0!important}.ngs .pb-lg-1{padding-bottom:.25rem!important}.ngs .pb-lg-2{padding-bottom:.5rem!important}.ngs .pb-lg-3{padding-bottom:1rem!important}.ngs .pb-lg-4{padding-bottom:1.5rem!important}.ngs .pb-lg-5{padding-bottom:3rem!important}.ngs .ps-lg-0{padding-left:0!important}.ngs .ps-lg-1{padding-left:.25rem!important}.ngs .ps-lg-2{padding-left:.5rem!important}.ngs .ps-lg-3{padding-left:1rem!important}.ngs .ps-lg-4{padding-left:1.5rem!important}.ngs .ps-lg-5{padding-left:3rem!important}}@media(min-width:1200px){.ngs .d-xl-inline{display:inline!important}.ngs .d-xl-inline-block{display:inline-block!important}.ngs .d-xl-block{display:block!important}.ngs .d-xl-grid{display:grid!important}.ngs .d-xl-inline-grid{display:inline-grid!important}.ngs .d-xl-table{display:table!important}.ngs .d-xl-table-row{display:table-row!important}.ngs .d-xl-table-cell{display:table-cell!important}.ngs .d-xl-flex{display:flex!important}.ngs .d-xl-inline-flex{display:inline-flex!important}.ngs .d-xl-none{display:none!important}.ngs .flex-xl-fill{flex:1 1 auto!important}.ngs .flex-xl-row{flex-direction:row!important}.ngs .flex-xl-column{flex-direction:column!important}.ngs .flex-xl-row-reverse{flex-direction:row-reverse!important}.ngs .flex-xl-column-reverse{flex-direction:column-reverse!important}.ngs .flex-xl-grow-0{flex-grow:0!important}.ngs .flex-xl-grow-1{flex-grow:1!important}.ngs .flex-xl-shrink-0{flex-shrink:0!important}.ngs .flex-xl-shrink-1{flex-shrink:1!important}.ngs .flex-xl-wrap{flex-wrap:wrap!important}.ngs .flex-xl-nowrap{flex-wrap:nowrap!important}.ngs .flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-xl-start{justify-content:flex-start!important}.ngs .justify-content-xl-end{justify-content:flex-end!important}.ngs .justify-content-xl-center{justify-content:center!important}.ngs .justify-content-xl-between{justify-content:space-between!important}.ngs .justify-content-xl-around{justify-content:space-around!important}.ngs .justify-content-xl-evenly{justify-content:space-evenly!important}.ngs .align-items-xl-start{align-items:flex-start!important}.ngs .align-items-xl-end{align-items:flex-end!important}.ngs .align-items-xl-center{align-items:center!important}.ngs .align-items-xl-baseline{align-items:baseline!important}.ngs .align-items-xl-stretch{align-items:stretch!important}.ngs .align-content-xl-start{align-content:flex-start!important}.ngs .align-content-xl-end{align-content:flex-end!important}.ngs .align-content-xl-center{align-content:center!important}.ngs .align-content-xl-between{align-content:space-between!important}.ngs .align-content-xl-around{align-content:space-around!important}.ngs .align-content-xl-stretch{align-content:stretch!important}.ngs .align-self-xl-auto{align-self:auto!important}.ngs .align-self-xl-start{align-self:flex-start!important}.ngs .align-self-xl-end{align-self:flex-end!important}.ngs .align-self-xl-center{align-self:center!important}.ngs .align-self-xl-baseline{align-self:baseline!important}.ngs .align-self-xl-stretch{align-self:stretch!important}.ngs .order-xl-first{order:-1!important}.ngs .order-xl-0{order:0!important}.ngs .order-xl-1{order:1!important}.ngs .order-xl-2{order:2!important}.ngs .order-xl-3{order:3!important}.ngs .order-xl-4{order:4!important}.ngs .order-xl-5{order:5!important}.ngs .order-xl-last{order:6!important}.ngs .m-xl-0{margin:0!important}.ngs .m-xl-1{margin:.25rem!important}.ngs .m-xl-2{margin:.5rem!important}.ngs .m-xl-3{margin:1rem!important}.ngs .m-xl-4{margin:1.5rem!important}.ngs .m-xl-5{margin:3rem!important}.ngs .m-xl-auto{margin:auto!important}.ngs .mx-xl-0{margin-right:0!important;margin-left:0!important}.ngs .mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-xl-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-xl-0{margin-top:0!important}.ngs .mt-xl-1{margin-top:.25rem!important}.ngs .mt-xl-2{margin-top:.5rem!important}.ngs .mt-xl-3{margin-top:1rem!important}.ngs .mt-xl-4{margin-top:1.5rem!important}.ngs .mt-xl-5{margin-top:3rem!important}.ngs .mt-xl-auto{margin-top:auto!important}.ngs .me-xl-0{margin-right:0!important}.ngs .me-xl-1{margin-right:.25rem!important}.ngs .me-xl-2{margin-right:.5rem!important}.ngs .me-xl-3{margin-right:1rem!important}.ngs .me-xl-4{margin-right:1.5rem!important}.ngs .me-xl-5{margin-right:3rem!important}.ngs .me-xl-auto{margin-right:auto!important}.ngs .mb-xl-0{margin-bottom:0!important}.ngs .mb-xl-1{margin-bottom:.25rem!important}.ngs .mb-xl-2{margin-bottom:.5rem!important}.ngs .mb-xl-3{margin-bottom:1rem!important}.ngs .mb-xl-4{margin-bottom:1.5rem!important}.ngs .mb-xl-5{margin-bottom:3rem!important}.ngs .mb-xl-auto{margin-bottom:auto!important}.ngs .ms-xl-0{margin-left:0!important}.ngs .ms-xl-1{margin-left:.25rem!important}.ngs .ms-xl-2{margin-left:.5rem!important}.ngs .ms-xl-3{margin-left:1rem!important}.ngs .ms-xl-4{margin-left:1.5rem!important}.ngs .ms-xl-5{margin-left:3rem!important}.ngs .ms-xl-auto{margin-left:auto!important}.ngs .p-xl-0{padding:0!important}.ngs .p-xl-1{padding:.25rem!important}.ngs .p-xl-2{padding:.5rem!important}.ngs .p-xl-3{padding:1rem!important}.ngs .p-xl-4{padding:1.5rem!important}.ngs .p-xl-5{padding:3rem!important}.ngs .px-xl-0{padding-right:0!important;padding-left:0!important}.ngs .px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-xl-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-xl-0{padding-top:0!important}.ngs .pt-xl-1{padding-top:.25rem!important}.ngs .pt-xl-2{padding-top:.5rem!important}.ngs .pt-xl-3{padding-top:1rem!important}.ngs .pt-xl-4{padding-top:1.5rem!important}.ngs .pt-xl-5{padding-top:3rem!important}.ngs .pe-xl-0{padding-right:0!important}.ngs .pe-xl-1{padding-right:.25rem!important}.ngs .pe-xl-2{padding-right:.5rem!important}.ngs .pe-xl-3{padding-right:1rem!important}.ngs .pe-xl-4{padding-right:1.5rem!important}.ngs .pe-xl-5{padding-right:3rem!important}.ngs .pb-xl-0{padding-bottom:0!important}.ngs .pb-xl-1{padding-bottom:.25rem!important}.ngs .pb-xl-2{padding-bottom:.5rem!important}.ngs .pb-xl-3{padding-bottom:1rem!important}.ngs .pb-xl-4{padding-bottom:1.5rem!important}.ngs .pb-xl-5{padding-bottom:3rem!important}.ngs .ps-xl-0{padding-left:0!important}.ngs .ps-xl-1{padding-left:.25rem!important}.ngs .ps-xl-2{padding-left:.5rem!important}.ngs .ps-xl-3{padding-left:1rem!important}.ngs .ps-xl-4{padding-left:1.5rem!important}.ngs .ps-xl-5{padding-left:3rem!important}}@media(min-width:1400px){.ngs .d-xxl-inline{display:inline!important}.ngs .d-xxl-inline-block{display:inline-block!important}.ngs .d-xxl-block{display:block!important}.ngs .d-xxl-grid{display:grid!important}.ngs .d-xxl-inline-grid{display:inline-grid!important}.ngs .d-xxl-table{display:table!important}.ngs .d-xxl-table-row{display:table-row!important}.ngs .d-xxl-table-cell{display:table-cell!important}.ngs .d-xxl-flex{display:flex!important}.ngs .d-xxl-inline-flex{display:inline-flex!important}.ngs .d-xxl-none{display:none!important}.ngs .flex-xxl-fill{flex:1 1 auto!important}.ngs .flex-xxl-row{flex-direction:row!important}.ngs .flex-xxl-column{flex-direction:column!important}.ngs .flex-xxl-row-reverse{flex-direction:row-reverse!important}.ngs .flex-xxl-column-reverse{flex-direction:column-reverse!important}.ngs .flex-xxl-grow-0{flex-grow:0!important}.ngs .flex-xxl-grow-1{flex-grow:1!important}.ngs .flex-xxl-shrink-0{flex-shrink:0!important}.ngs .flex-xxl-shrink-1{flex-shrink:1!important}.ngs .flex-xxl-wrap{flex-wrap:wrap!important}.ngs .flex-xxl-nowrap{flex-wrap:nowrap!important}.ngs .flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-xxl-start{justify-content:flex-start!important}.ngs .justify-content-xxl-end{justify-content:flex-end!important}.ngs .justify-content-xxl-center{justify-content:center!important}.ngs .justify-content-xxl-between{justify-content:space-between!important}.ngs .justify-content-xxl-around{justify-content:space-around!important}.ngs .justify-content-xxl-evenly{justify-content:space-evenly!important}.ngs .align-items-xxl-start{align-items:flex-start!important}.ngs .align-items-xxl-end{align-items:flex-end!important}.ngs .align-items-xxl-center{align-items:center!important}.ngs .align-items-xxl-baseline{align-items:baseline!important}.ngs .align-items-xxl-stretch{align-items:stretch!important}.ngs .align-content-xxl-start{align-content:flex-start!important}.ngs .align-content-xxl-end{align-content:flex-end!important}.ngs .align-content-xxl-center{align-content:center!important}.ngs .align-content-xxl-between{align-content:space-between!important}.ngs .align-content-xxl-around{align-content:space-around!important}.ngs .align-content-xxl-stretch{align-content:stretch!important}.ngs .align-self-xxl-auto{align-self:auto!important}.ngs .align-self-xxl-start{align-self:flex-start!important}.ngs .align-self-xxl-end{align-self:flex-end!important}.ngs .align-self-xxl-center{align-self:center!important}.ngs .align-self-xxl-baseline{align-self:baseline!important}.ngs .align-self-xxl-stretch{align-self:stretch!important}.ngs .order-xxl-first{order:-1!important}.ngs .order-xxl-0{order:0!important}.ngs .order-xxl-1{order:1!important}.ngs .order-xxl-2{order:2!important}.ngs .order-xxl-3{order:3!important}.ngs .order-xxl-4{order:4!important}.ngs .order-xxl-5{order:5!important}.ngs .order-xxl-last{order:6!important}.ngs .m-xxl-0{margin:0!important}.ngs .m-xxl-1{margin:.25rem!important}.ngs .m-xxl-2{margin:.5rem!important}.ngs .m-xxl-3{margin:1rem!important}.ngs .m-xxl-4{margin:1.5rem!important}.ngs .m-xxl-5{margin:3rem!important}.ngs .m-xxl-auto{margin:auto!important}.ngs .mx-xxl-0{margin-right:0!important;margin-left:0!important}.ngs .mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-xxl-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-xxl-0{margin-top:0!important}.ngs .mt-xxl-1{margin-top:.25rem!important}.ngs .mt-xxl-2{margin-top:.5rem!important}.ngs .mt-xxl-3{margin-top:1rem!important}.ngs .mt-xxl-4{margin-top:1.5rem!important}.ngs .mt-xxl-5{margin-top:3rem!important}.ngs .mt-xxl-auto{margin-top:auto!important}.ngs .me-xxl-0{margin-right:0!important}.ngs .me-xxl-1{margin-right:.25rem!important}.ngs .me-xxl-2{margin-right:.5rem!important}.ngs .me-xxl-3{margin-right:1rem!important}.ngs .me-xxl-4{margin-right:1.5rem!important}.ngs .me-xxl-5{margin-right:3rem!important}.ngs .me-xxl-auto{margin-right:auto!important}.ngs .mb-xxl-0{margin-bottom:0!important}.ngs .mb-xxl-1{margin-bottom:.25rem!important}.ngs .mb-xxl-2{margin-bottom:.5rem!important}.ngs .mb-xxl-3{margin-bottom:1rem!important}.ngs .mb-xxl-4{margin-bottom:1.5rem!important}.ngs .mb-xxl-5{margin-bottom:3rem!important}.ngs .mb-xxl-auto{margin-bottom:auto!important}.ngs .ms-xxl-0{margin-left:0!important}.ngs .ms-xxl-1{margin-left:.25rem!important}.ngs .ms-xxl-2{margin-left:.5rem!important}.ngs .ms-xxl-3{margin-left:1rem!important}.ngs .ms-xxl-4{margin-left:1.5rem!important}.ngs .ms-xxl-5{margin-left:3rem!important}.ngs .ms-xxl-auto{margin-left:auto!important}.ngs .p-xxl-0{padding:0!important}.ngs .p-xxl-1{padding:.25rem!important}.ngs .p-xxl-2{padding:.5rem!important}.ngs .p-xxl-3{padding:1rem!important}.ngs .p-xxl-4{padding:1.5rem!important}.ngs .p-xxl-5{padding:3rem!important}.ngs .px-xxl-0{padding-right:0!important;padding-left:0!important}.ngs .px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-xxl-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-xxl-0{padding-top:0!important}.ngs .pt-xxl-1{padding-top:.25rem!important}.ngs .pt-xxl-2{padding-top:.5rem!important}.ngs .pt-xxl-3{padding-top:1rem!important}.ngs .pt-xxl-4{padding-top:1.5rem!important}.ngs .pt-xxl-5{padding-top:3rem!important}.ngs .pe-xxl-0{padding-right:0!important}.ngs .pe-xxl-1{padding-right:.25rem!important}.ngs .pe-xxl-2{padding-right:.5rem!important}.ngs .pe-xxl-3{padding-right:1rem!important}.ngs .pe-xxl-4{padding-right:1.5rem!important}.ngs .pe-xxl-5{padding-right:3rem!important}.ngs .pb-xxl-0{padding-bottom:0!important}.ngs .pb-xxl-1{padding-bottom:.25rem!important}.ngs .pb-xxl-2{padding-bottom:.5rem!important}.ngs .pb-xxl-3{padding-bottom:1rem!important}.ngs .pb-xxl-4{padding-bottom:1.5rem!important}.ngs .pb-xxl-5{padding-bottom:3rem!important}.ngs .ps-xxl-0{padding-left:0!important}.ngs .ps-xxl-1{padding-left:.25rem!important}.ngs .ps-xxl-2{padding-left:.5rem!important}.ngs .ps-xxl-3{padding-left:1rem!important}.ngs .ps-xxl-4{padding-left:1.5rem!important}.ngs .ps-xxl-5{padding-left:3rem!important}}@media print{.ngs .d-print-inline{display:inline!important}.ngs .d-print-inline-block{display:inline-block!important}.ngs .d-print-block{display:block!important}.ngs .d-print-grid{display:grid!important}.ngs .d-print-inline-grid{display:inline-grid!important}.ngs .d-print-table{display:table!important}.ngs .d-print-table-row{display:table-row!important}.ngs .d-print-table-cell{display:table-cell!important}.ngs .d-print-flex{display:flex!important}.ngs .d-print-inline-flex{display:inline-flex!important}.ngs .d-print-none{display:none!important}}\n", ".df-scroll-anchor{scroll-margin-top:var(--df-scroll-offset, 0px)}.prevSection{padding:5px 10px;float:left;margin-left:0}.nextSection{padding:5px 10px;float:right;margin-left:0}.separator-horizontal{width:1px;height:100%;background-color:#d6cece;margin:0 auto}.content-element-form .section-navs{width:100%;background-color:#f2f6fc;margin-left:0;margin-right:0;padding:10px;flex-direction:row-reverse}.sirio-toast{width:auto;min-width:17rem;max-width:41rem}.form-title{margin-bottom:15px}.sirio-stepper-item:is(.is-success,.is-warning,.is-error) .sirio-stepper-title{font-weight:600;text-decoration:underline!important}@media(max-width:991px){.content-element-form{width:100%!important}}.feel-editor-container.feel-editor-standalone{border:1px solid #454d56!important;border-radius:4px}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -11627,12 +13003,13 @@ i0.ɵɵngDeclareClassMetadata({
 				FunctionService,
 				SubscribeService,
 				StateService,
-				LifetimeService
+				LifetimeService,
+				provideSirioReadonlyAppearance("outline")
 			],
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "@if (schema) {\r\n  <div [formGroup]=\"formGroup\" class=\"ngs\" [css]=\"schema.styles\">\r\n    <div class=\"row\">\r\n      <!-- #region progress -->\r\n      @if (showProgress) {\r\n      <!-- @wemake4u/form-controls: one step per enabled form; the forms with a state can be selected. -->\r\n      @if (getProgress(); as progress) {\r\n      <wm-sirio-stepper navigable\r\n                        [steps]=\"progress.steps\"\r\n                        [current]=\"progress.current\"\r\n                        (stepSelected)=\"activateForm(progress.formIndexes[$event])\" />\r\n      }\r\n      }\r\n      <!-- #endregion -->\r\n      @if (showNav) {\r\n      <div [ngClass]=\"navSize === 'small' ? 'col-md-2' : 'col-md-4'\">\r\n        <!-- #region sidenav -->\r\n        <!-- @wemake4u/form-controls: from 992px a column of the page, below a full screen dialog opened by the kit button. -->\r\n        @if (getSidenavItems(); as nav) {\r\n        <wm-sirio-sidenav [items]=\"nav.items\"\r\n                          [active]=\"nav.active\"\r\n                          (itemClick)=\"activateForm($any($event.item.value))\"\r\n                          [openLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                          [closeLabel]=\"locale(Texts, 'CloseMenu')\" />\r\n        }\r\n        <!-- #endregion -->\r\n      </div>\r\n      <div class=\"col-md-1\">\r\n        <div class=\"separator-horizontal\"></div>\r\n      </div>\r\n      }\r\n      <div class=\"content-element-form\" [ngClass]=\"showNav ? (navSize === 'small' ? 'col-md-13' : 'col-md-11') : 'col-md-16'\">\r\n        @for (form of forms; track form; let sectionIndex = $index) {\r\n        @if (activeNav == sectionIndex && !evaluateBoolean(form.disabled)) {\r\n        <div #default\r\n             [register]=\"form\"\r\n             [componentRef]=\"default\">\r\n          @if (showFormTitle && form.title) {\r\n          <h1 class=\"h3 form-title\">{{ evaluateTemplate(locale(form, 'title')) }}</h1>\r\n          }\r\n          <app-dynamic-fields [form]=\"this\"\r\n                              [formGroup]=\"getFormGroup(form.path)\"\r\n                              [readOnly]=\"readOnly || evaluateBoolean(form.readonly)\"\r\n                              [rows]=\"form.rows\"\r\n                              [identity]=\"form.id\"\r\n                              [disableAutoFocus]=\"form.disableAutoFocus\"\r\n                              [alignment]=\"form.verticalAlignment\"></app-dynamic-fields>\r\n        </div>\r\n        }\r\n        }\r\n        @if (showNavButton && (canNext() || canPrevious())) {\r\n        <div class=\"row section-navs\">\r\n          <div class=\"col-8 col-md-8\">\r\n            @if (canNext()) {\r\n            <button type=\"button\" wmSirioButton=\"ghost\" icon=\"fa-chevron-right\" (click)=\"goNext()\" class=\"nextSection\">{{ locale(Texts, 'NextSection') }}</button>\r\n            }\r\n          </div>\r\n          <div class=\"col-8 col-md-8\">\r\n            @if (canPrevious()) {\r\n            <button type=\"button\" wmSirioButton=\"ghost\" icon=\"fa-chevron-left\" iconPosition=\"start\" (click)=\"goPrevious()\" class=\"prevSection\">{{ locale(Texts, 'PreviousSection') }}</button>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    </div>\r\n  }\r\n\r\n",
-			styles: [".ngs .container,.ngs .container-fluid,.ngs .container-xxl,.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm{--ngsgutter-x: 1.5rem;--ngsgutter-y: 0;width:100%;padding-right:calc(var(--ngsgutter-x) * .5);padding-left:calc(var(--ngsgutter-x) * .5);margin-right:auto;margin-left:auto}@media(min-width:576px){.ngs .container-sm,.ngs .container{max-width:540px}}@media(min-width:768px){.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:720px}}@media(min-width:992px){.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:960px}}@media(min-width:1200px){.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:1140px}}@media(min-width:1400px){.ngs .container-xxl,.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:1320px}}.ngs :root{--ngsbreakpoint-xs: 0;--ngsbreakpoint-sm: 576px;--ngsbreakpoint-md: 768px;--ngsbreakpoint-lg: 992px;--ngsbreakpoint-xl: 1200px;--ngsbreakpoint-xxl: 1400px}.ngs .row{--ngsgutter-x: 1.5rem;--ngsgutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--ngsgutter-y));margin-right:calc(-.5 * var(--ngsgutter-x));margin-left:calc(-.5 * var(--ngsgutter-x))}.ngs .row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--ngsgutter-x) * .5);padding-left:calc(var(--ngsgutter-x) * .5);margin-top:var(--ngsgutter-y)}.ngs .col{flex:1 0 0%}.ngs .row-cols-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-auto{flex:0 0 auto;width:auto}.ngs .col-1{flex:0 0 auto;width:6.25%}.ngs .col-2{flex:0 0 auto;width:12.5%}.ngs .col-3{flex:0 0 auto;width:18.75%}.ngs .col-4{flex:0 0 auto;width:25%}.ngs .col-5{flex:0 0 auto;width:31.25%}.ngs .col-6{flex:0 0 auto;width:37.5%}.ngs .col-7{flex:0 0 auto;width:43.75%}.ngs .col-8{flex:0 0 auto;width:50%}.ngs .col-9{flex:0 0 auto;width:56.25%}.ngs .col-10{flex:0 0 auto;width:62.5%}.ngs .col-11{flex:0 0 auto;width:68.75%}.ngs .col-12{flex:0 0 auto;width:75%}.ngs .col-13{flex:0 0 auto;width:81.25%}.ngs .col-14{flex:0 0 auto;width:87.5%}.ngs .col-15{flex:0 0 auto;width:93.75%}.ngs .col-16{flex:0 0 auto;width:100%}.ngs .offset-1{margin-left:6.25%}.ngs .offset-2{margin-left:12.5%}.ngs .offset-3{margin-left:18.75%}.ngs .offset-4{margin-left:25%}.ngs .offset-5{margin-left:31.25%}.ngs .offset-6{margin-left:37.5%}.ngs .offset-7{margin-left:43.75%}.ngs .offset-8{margin-left:50%}.ngs .offset-9{margin-left:56.25%}.ngs .offset-10{margin-left:62.5%}.ngs .offset-11{margin-left:68.75%}.ngs .offset-12{margin-left:75%}.ngs .offset-13{margin-left:81.25%}.ngs .offset-14{margin-left:87.5%}.ngs .offset-15{margin-left:93.75%}.ngs .g-0,.ngs .gx-0{--ngsgutter-x: 0}.ngs .g-0,.ngs .gy-0{--ngsgutter-y: 0}.ngs .g-1,.ngs .gx-1{--ngsgutter-x: .25rem}.ngs .g-1,.ngs .gy-1{--ngsgutter-y: .25rem}.ngs .g-2,.ngs .gx-2{--ngsgutter-x: .5rem}.ngs .g-2,.ngs .gy-2{--ngsgutter-y: .5rem}.ngs .g-3,.ngs .gx-3{--ngsgutter-x: 1rem}.ngs .g-3,.ngs .gy-3{--ngsgutter-y: 1rem}.ngs .g-4,.ngs .gx-4{--ngsgutter-x: 1.5rem}.ngs .g-4,.ngs .gy-4{--ngsgutter-y: 1.5rem}.ngs .g-5,.ngs .gx-5{--ngsgutter-x: 3rem}.ngs .g-5,.ngs .gy-5{--ngsgutter-y: 3rem}@media(min-width:576px){.ngs .col-sm{flex:1 0 0%}.ngs .row-cols-sm-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-sm-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-sm-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-sm-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-sm-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-sm-auto{flex:0 0 auto;width:auto}.ngs .col-sm-1{flex:0 0 auto;width:6.25%}.ngs .col-sm-2{flex:0 0 auto;width:12.5%}.ngs .col-sm-3{flex:0 0 auto;width:18.75%}.ngs .col-sm-4{flex:0 0 auto;width:25%}.ngs .col-sm-5{flex:0 0 auto;width:31.25%}.ngs .col-sm-6{flex:0 0 auto;width:37.5%}.ngs .col-sm-7{flex:0 0 auto;width:43.75%}.ngs .col-sm-8{flex:0 0 auto;width:50%}.ngs .col-sm-9{flex:0 0 auto;width:56.25%}.ngs .col-sm-10{flex:0 0 auto;width:62.5%}.ngs .col-sm-11{flex:0 0 auto;width:68.75%}.ngs .col-sm-12{flex:0 0 auto;width:75%}.ngs .col-sm-13{flex:0 0 auto;width:81.25%}.ngs .col-sm-14{flex:0 0 auto;width:87.5%}.ngs .col-sm-15{flex:0 0 auto;width:93.75%}.ngs .col-sm-16{flex:0 0 auto;width:100%}.ngs .offset-sm-0{margin-left:0}.ngs .offset-sm-1{margin-left:6.25%}.ngs .offset-sm-2{margin-left:12.5%}.ngs .offset-sm-3{margin-left:18.75%}.ngs .offset-sm-4{margin-left:25%}.ngs .offset-sm-5{margin-left:31.25%}.ngs .offset-sm-6{margin-left:37.5%}.ngs .offset-sm-7{margin-left:43.75%}.ngs .offset-sm-8{margin-left:50%}.ngs .offset-sm-9{margin-left:56.25%}.ngs .offset-sm-10{margin-left:62.5%}.ngs .offset-sm-11{margin-left:68.75%}.ngs .offset-sm-12{margin-left:75%}.ngs .offset-sm-13{margin-left:81.25%}.ngs .offset-sm-14{margin-left:87.5%}.ngs .offset-sm-15{margin-left:93.75%}.ngs .g-sm-0,.ngs .gx-sm-0{--ngsgutter-x: 0}.ngs .g-sm-0,.ngs .gy-sm-0{--ngsgutter-y: 0}.ngs .g-sm-1,.ngs .gx-sm-1{--ngsgutter-x: .25rem}.ngs .g-sm-1,.ngs .gy-sm-1{--ngsgutter-y: .25rem}.ngs .g-sm-2,.ngs .gx-sm-2{--ngsgutter-x: .5rem}.ngs .g-sm-2,.ngs .gy-sm-2{--ngsgutter-y: .5rem}.ngs .g-sm-3,.ngs .gx-sm-3{--ngsgutter-x: 1rem}.ngs .g-sm-3,.ngs .gy-sm-3{--ngsgutter-y: 1rem}.ngs .g-sm-4,.ngs .gx-sm-4{--ngsgutter-x: 1.5rem}.ngs .g-sm-4,.ngs .gy-sm-4{--ngsgutter-y: 1.5rem}.ngs .g-sm-5,.ngs .gx-sm-5{--ngsgutter-x: 3rem}.ngs .g-sm-5,.ngs .gy-sm-5{--ngsgutter-y: 3rem}}@media(min-width:768px){.ngs .col-md{flex:1 0 0%}.ngs .row-cols-md-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-md-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-md-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-md-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-md-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-md-auto{flex:0 0 auto;width:auto}.ngs .col-md-1{flex:0 0 auto;width:6.25%}.ngs .col-md-2{flex:0 0 auto;width:12.5%}.ngs .col-md-3{flex:0 0 auto;width:18.75%}.ngs .col-md-4{flex:0 0 auto;width:25%}.ngs .col-md-5{flex:0 0 auto;width:31.25%}.ngs .col-md-6{flex:0 0 auto;width:37.5%}.ngs .col-md-7{flex:0 0 auto;width:43.75%}.ngs .col-md-8{flex:0 0 auto;width:50%}.ngs .col-md-9{flex:0 0 auto;width:56.25%}.ngs .col-md-10{flex:0 0 auto;width:62.5%}.ngs .col-md-11{flex:0 0 auto;width:68.75%}.ngs .col-md-12{flex:0 0 auto;width:75%}.ngs .col-md-13{flex:0 0 auto;width:81.25%}.ngs .col-md-14{flex:0 0 auto;width:87.5%}.ngs .col-md-15{flex:0 0 auto;width:93.75%}.ngs .col-md-16{flex:0 0 auto;width:100%}.ngs .offset-md-0{margin-left:0}.ngs .offset-md-1{margin-left:6.25%}.ngs .offset-md-2{margin-left:12.5%}.ngs .offset-md-3{margin-left:18.75%}.ngs .offset-md-4{margin-left:25%}.ngs .offset-md-5{margin-left:31.25%}.ngs .offset-md-6{margin-left:37.5%}.ngs .offset-md-7{margin-left:43.75%}.ngs .offset-md-8{margin-left:50%}.ngs .offset-md-9{margin-left:56.25%}.ngs .offset-md-10{margin-left:62.5%}.ngs .offset-md-11{margin-left:68.75%}.ngs .offset-md-12{margin-left:75%}.ngs .offset-md-13{margin-left:81.25%}.ngs .offset-md-14{margin-left:87.5%}.ngs .offset-md-15{margin-left:93.75%}.ngs .g-md-0,.ngs .gx-md-0{--ngsgutter-x: 0}.ngs .g-md-0,.ngs .gy-md-0{--ngsgutter-y: 0}.ngs .g-md-1,.ngs .gx-md-1{--ngsgutter-x: .25rem}.ngs .g-md-1,.ngs .gy-md-1{--ngsgutter-y: .25rem}.ngs .g-md-2,.ngs .gx-md-2{--ngsgutter-x: .5rem}.ngs .g-md-2,.ngs .gy-md-2{--ngsgutter-y: .5rem}.ngs .g-md-3,.ngs .gx-md-3{--ngsgutter-x: 1rem}.ngs .g-md-3,.ngs .gy-md-3{--ngsgutter-y: 1rem}.ngs .g-md-4,.ngs .gx-md-4{--ngsgutter-x: 1.5rem}.ngs .g-md-4,.ngs .gy-md-4{--ngsgutter-y: 1.5rem}.ngs .g-md-5,.ngs .gx-md-5{--ngsgutter-x: 3rem}.ngs .g-md-5,.ngs .gy-md-5{--ngsgutter-y: 3rem}}@media(min-width:992px){.ngs .col-lg{flex:1 0 0%}.ngs .row-cols-lg-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-lg-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-lg-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-lg-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-lg-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-lg-auto{flex:0 0 auto;width:auto}.ngs .col-lg-1{flex:0 0 auto;width:6.25%}.ngs .col-lg-2{flex:0 0 auto;width:12.5%}.ngs .col-lg-3{flex:0 0 auto;width:18.75%}.ngs .col-lg-4{flex:0 0 auto;width:25%}.ngs .col-lg-5{flex:0 0 auto;width:31.25%}.ngs .col-lg-6{flex:0 0 auto;width:37.5%}.ngs .col-lg-7{flex:0 0 auto;width:43.75%}.ngs .col-lg-8{flex:0 0 auto;width:50%}.ngs .col-lg-9{flex:0 0 auto;width:56.25%}.ngs .col-lg-10{flex:0 0 auto;width:62.5%}.ngs .col-lg-11{flex:0 0 auto;width:68.75%}.ngs .col-lg-12{flex:0 0 auto;width:75%}.ngs .col-lg-13{flex:0 0 auto;width:81.25%}.ngs .col-lg-14{flex:0 0 auto;width:87.5%}.ngs .col-lg-15{flex:0 0 auto;width:93.75%}.ngs .col-lg-16{flex:0 0 auto;width:100%}.ngs .offset-lg-0{margin-left:0}.ngs .offset-lg-1{margin-left:6.25%}.ngs .offset-lg-2{margin-left:12.5%}.ngs .offset-lg-3{margin-left:18.75%}.ngs .offset-lg-4{margin-left:25%}.ngs .offset-lg-5{margin-left:31.25%}.ngs .offset-lg-6{margin-left:37.5%}.ngs .offset-lg-7{margin-left:43.75%}.ngs .offset-lg-8{margin-left:50%}.ngs .offset-lg-9{margin-left:56.25%}.ngs .offset-lg-10{margin-left:62.5%}.ngs .offset-lg-11{margin-left:68.75%}.ngs .offset-lg-12{margin-left:75%}.ngs .offset-lg-13{margin-left:81.25%}.ngs .offset-lg-14{margin-left:87.5%}.ngs .offset-lg-15{margin-left:93.75%}.ngs .g-lg-0,.ngs .gx-lg-0{--ngsgutter-x: 0}.ngs .g-lg-0,.ngs .gy-lg-0{--ngsgutter-y: 0}.ngs .g-lg-1,.ngs .gx-lg-1{--ngsgutter-x: .25rem}.ngs .g-lg-1,.ngs .gy-lg-1{--ngsgutter-y: .25rem}.ngs .g-lg-2,.ngs .gx-lg-2{--ngsgutter-x: .5rem}.ngs .g-lg-2,.ngs .gy-lg-2{--ngsgutter-y: .5rem}.ngs .g-lg-3,.ngs .gx-lg-3{--ngsgutter-x: 1rem}.ngs .g-lg-3,.ngs .gy-lg-3{--ngsgutter-y: 1rem}.ngs .g-lg-4,.ngs .gx-lg-4{--ngsgutter-x: 1.5rem}.ngs .g-lg-4,.ngs .gy-lg-4{--ngsgutter-y: 1.5rem}.ngs .g-lg-5,.ngs .gx-lg-5{--ngsgutter-x: 3rem}.ngs .g-lg-5,.ngs .gy-lg-5{--ngsgutter-y: 3rem}}@media(min-width:1200px){.ngs .col-xl{flex:1 0 0%}.ngs .row-cols-xl-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-xl-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-xl-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-xl-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-xl-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-xl-auto{flex:0 0 auto;width:auto}.ngs .col-xl-1{flex:0 0 auto;width:6.25%}.ngs .col-xl-2{flex:0 0 auto;width:12.5%}.ngs .col-xl-3{flex:0 0 auto;width:18.75%}.ngs .col-xl-4{flex:0 0 auto;width:25%}.ngs .col-xl-5{flex:0 0 auto;width:31.25%}.ngs .col-xl-6{flex:0 0 auto;width:37.5%}.ngs .col-xl-7{flex:0 0 auto;width:43.75%}.ngs .col-xl-8{flex:0 0 auto;width:50%}.ngs .col-xl-9{flex:0 0 auto;width:56.25%}.ngs .col-xl-10{flex:0 0 auto;width:62.5%}.ngs .col-xl-11{flex:0 0 auto;width:68.75%}.ngs .col-xl-12{flex:0 0 auto;width:75%}.ngs .col-xl-13{flex:0 0 auto;width:81.25%}.ngs .col-xl-14{flex:0 0 auto;width:87.5%}.ngs .col-xl-15{flex:0 0 auto;width:93.75%}.ngs .col-xl-16{flex:0 0 auto;width:100%}.ngs .offset-xl-0{margin-left:0}.ngs .offset-xl-1{margin-left:6.25%}.ngs .offset-xl-2{margin-left:12.5%}.ngs .offset-xl-3{margin-left:18.75%}.ngs .offset-xl-4{margin-left:25%}.ngs .offset-xl-5{margin-left:31.25%}.ngs .offset-xl-6{margin-left:37.5%}.ngs .offset-xl-7{margin-left:43.75%}.ngs .offset-xl-8{margin-left:50%}.ngs .offset-xl-9{margin-left:56.25%}.ngs .offset-xl-10{margin-left:62.5%}.ngs .offset-xl-11{margin-left:68.75%}.ngs .offset-xl-12{margin-left:75%}.ngs .offset-xl-13{margin-left:81.25%}.ngs .offset-xl-14{margin-left:87.5%}.ngs .offset-xl-15{margin-left:93.75%}.ngs .g-xl-0,.ngs .gx-xl-0{--ngsgutter-x: 0}.ngs .g-xl-0,.ngs .gy-xl-0{--ngsgutter-y: 0}.ngs .g-xl-1,.ngs .gx-xl-1{--ngsgutter-x: .25rem}.ngs .g-xl-1,.ngs .gy-xl-1{--ngsgutter-y: .25rem}.ngs .g-xl-2,.ngs .gx-xl-2{--ngsgutter-x: .5rem}.ngs .g-xl-2,.ngs .gy-xl-2{--ngsgutter-y: .5rem}.ngs .g-xl-3,.ngs .gx-xl-3{--ngsgutter-x: 1rem}.ngs .g-xl-3,.ngs .gy-xl-3{--ngsgutter-y: 1rem}.ngs .g-xl-4,.ngs .gx-xl-4{--ngsgutter-x: 1.5rem}.ngs .g-xl-4,.ngs .gy-xl-4{--ngsgutter-y: 1.5rem}.ngs .g-xl-5,.ngs .gx-xl-5{--ngsgutter-x: 3rem}.ngs .g-xl-5,.ngs .gy-xl-5{--ngsgutter-y: 3rem}}@media(min-width:1400px){.ngs .col-xxl{flex:1 0 0%}.ngs .row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-xxl-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-xxl-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-xxl-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-xxl-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-xxl-auto{flex:0 0 auto;width:auto}.ngs .col-xxl-1{flex:0 0 auto;width:6.25%}.ngs .col-xxl-2{flex:0 0 auto;width:12.5%}.ngs .col-xxl-3{flex:0 0 auto;width:18.75%}.ngs .col-xxl-4{flex:0 0 auto;width:25%}.ngs .col-xxl-5{flex:0 0 auto;width:31.25%}.ngs .col-xxl-6{flex:0 0 auto;width:37.5%}.ngs .col-xxl-7{flex:0 0 auto;width:43.75%}.ngs .col-xxl-8{flex:0 0 auto;width:50%}.ngs .col-xxl-9{flex:0 0 auto;width:56.25%}.ngs .col-xxl-10{flex:0 0 auto;width:62.5%}.ngs .col-xxl-11{flex:0 0 auto;width:68.75%}.ngs .col-xxl-12{flex:0 0 auto;width:75%}.ngs .col-xxl-13{flex:0 0 auto;width:81.25%}.ngs .col-xxl-14{flex:0 0 auto;width:87.5%}.ngs .col-xxl-15{flex:0 0 auto;width:93.75%}.ngs .col-xxl-16{flex:0 0 auto;width:100%}.ngs .offset-xxl-0{margin-left:0}.ngs .offset-xxl-1{margin-left:6.25%}.ngs .offset-xxl-2{margin-left:12.5%}.ngs .offset-xxl-3{margin-left:18.75%}.ngs .offset-xxl-4{margin-left:25%}.ngs .offset-xxl-5{margin-left:31.25%}.ngs .offset-xxl-6{margin-left:37.5%}.ngs .offset-xxl-7{margin-left:43.75%}.ngs .offset-xxl-8{margin-left:50%}.ngs .offset-xxl-9{margin-left:56.25%}.ngs .offset-xxl-10{margin-left:62.5%}.ngs .offset-xxl-11{margin-left:68.75%}.ngs .offset-xxl-12{margin-left:75%}.ngs .offset-xxl-13{margin-left:81.25%}.ngs .offset-xxl-14{margin-left:87.5%}.ngs .offset-xxl-15{margin-left:93.75%}.ngs .g-xxl-0,.ngs .gx-xxl-0{--ngsgutter-x: 0}.ngs .g-xxl-0,.ngs .gy-xxl-0{--ngsgutter-y: 0}.ngs .g-xxl-1,.ngs .gx-xxl-1{--ngsgutter-x: .25rem}.ngs .g-xxl-1,.ngs .gy-xxl-1{--ngsgutter-y: .25rem}.ngs .g-xxl-2,.ngs .gx-xxl-2{--ngsgutter-x: .5rem}.ngs .g-xxl-2,.ngs .gy-xxl-2{--ngsgutter-y: .5rem}.ngs .g-xxl-3,.ngs .gx-xxl-3{--ngsgutter-x: 1rem}.ngs .g-xxl-3,.ngs .gy-xxl-3{--ngsgutter-y: 1rem}.ngs .g-xxl-4,.ngs .gx-xxl-4{--ngsgutter-x: 1.5rem}.ngs .g-xxl-4,.ngs .gy-xxl-4{--ngsgutter-y: 1.5rem}.ngs .g-xxl-5,.ngs .gx-xxl-5{--ngsgutter-x: 3rem}.ngs .g-xxl-5,.ngs .gy-xxl-5{--ngsgutter-y: 3rem}}.ngs .d-inline{display:inline!important}.ngs .d-inline-block{display:inline-block!important}.ngs .d-block{display:block!important}.ngs .d-grid{display:grid!important}.ngs .d-inline-grid{display:inline-grid!important}.ngs .d-table{display:table!important}.ngs .d-table-row{display:table-row!important}.ngs .d-table-cell{display:table-cell!important}.ngs .d-flex{display:flex!important}.ngs .d-inline-flex{display:inline-flex!important}.ngs .d-none{display:none!important}.ngs .flex-fill{flex:1 1 auto!important}.ngs .flex-row{flex-direction:row!important}.ngs .flex-column{flex-direction:column!important}.ngs .flex-row-reverse{flex-direction:row-reverse!important}.ngs .flex-column-reverse{flex-direction:column-reverse!important}.ngs .flex-grow-0{flex-grow:0!important}.ngs .flex-grow-1{flex-grow:1!important}.ngs .flex-shrink-0{flex-shrink:0!important}.ngs .flex-shrink-1{flex-shrink:1!important}.ngs .flex-wrap{flex-wrap:wrap!important}.ngs .flex-nowrap{flex-wrap:nowrap!important}.ngs .flex-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-start{justify-content:flex-start!important}.ngs .justify-content-end{justify-content:flex-end!important}.ngs .justify-content-center{justify-content:center!important}.ngs .justify-content-between{justify-content:space-between!important}.ngs .justify-content-around{justify-content:space-around!important}.ngs .justify-content-evenly{justify-content:space-evenly!important}.ngs .align-items-start{align-items:flex-start!important}.ngs .align-items-end{align-items:flex-end!important}.ngs .align-items-center{align-items:center!important}.ngs .align-items-baseline{align-items:baseline!important}.ngs .align-items-stretch{align-items:stretch!important}.ngs .align-content-start{align-content:flex-start!important}.ngs .align-content-end{align-content:flex-end!important}.ngs .align-content-center{align-content:center!important}.ngs .align-content-between{align-content:space-between!important}.ngs .align-content-around{align-content:space-around!important}.ngs .align-content-stretch{align-content:stretch!important}.ngs .align-self-auto{align-self:auto!important}.ngs .align-self-start{align-self:flex-start!important}.ngs .align-self-end{align-self:flex-end!important}.ngs .align-self-center{align-self:center!important}.ngs .align-self-baseline{align-self:baseline!important}.ngs .align-self-stretch{align-self:stretch!important}.ngs .order-first{order:-1!important}.ngs .order-0{order:0!important}.ngs .order-1{order:1!important}.ngs .order-2{order:2!important}.ngs .order-3{order:3!important}.ngs .order-4{order:4!important}.ngs .order-5{order:5!important}.ngs .order-last{order:6!important}.ngs .m-0{margin:0!important}.ngs .m-1{margin:.25rem!important}.ngs .m-2{margin:.5rem!important}.ngs .m-3{margin:1rem!important}.ngs .m-4{margin:1.5rem!important}.ngs .m-5{margin:3rem!important}.ngs .m-auto{margin:auto!important}.ngs .mx-0{margin-right:0!important;margin-left:0!important}.ngs .mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-0{margin-top:0!important}.ngs .mt-1{margin-top:.25rem!important}.ngs .mt-2{margin-top:.5rem!important}.ngs .mt-3{margin-top:1rem!important}.ngs .mt-4{margin-top:1.5rem!important}.ngs .mt-5{margin-top:3rem!important}.ngs .mt-auto{margin-top:auto!important}.ngs .me-0{margin-right:0!important}.ngs .me-1{margin-right:.25rem!important}.ngs .me-2{margin-right:.5rem!important}.ngs .me-3{margin-right:1rem!important}.ngs .me-4{margin-right:1.5rem!important}.ngs .me-5{margin-right:3rem!important}.ngs .me-auto{margin-right:auto!important}.ngs .mb-0{margin-bottom:0!important}.ngs .mb-1{margin-bottom:.25rem!important}.ngs .mb-2{margin-bottom:.5rem!important}.ngs .mb-3{margin-bottom:1rem!important}.ngs .mb-4{margin-bottom:1.5rem!important}.ngs .mb-5{margin-bottom:3rem!important}.ngs .mb-auto{margin-bottom:auto!important}.ngs .ms-0{margin-left:0!important}.ngs .ms-1{margin-left:.25rem!important}.ngs .ms-2{margin-left:.5rem!important}.ngs .ms-3{margin-left:1rem!important}.ngs .ms-4{margin-left:1.5rem!important}.ngs .ms-5{margin-left:3rem!important}.ngs .ms-auto{margin-left:auto!important}.ngs .p-0{padding:0!important}.ngs .p-1{padding:.25rem!important}.ngs .p-2{padding:.5rem!important}.ngs .p-3{padding:1rem!important}.ngs .p-4{padding:1.5rem!important}.ngs .p-5{padding:3rem!important}.ngs .px-0{padding-right:0!important;padding-left:0!important}.ngs .px-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-0{padding-top:0!important}.ngs .pt-1{padding-top:.25rem!important}.ngs .pt-2{padding-top:.5rem!important}.ngs .pt-3{padding-top:1rem!important}.ngs .pt-4{padding-top:1.5rem!important}.ngs .pt-5{padding-top:3rem!important}.ngs .pe-0{padding-right:0!important}.ngs .pe-1{padding-right:.25rem!important}.ngs .pe-2{padding-right:.5rem!important}.ngs .pe-3{padding-right:1rem!important}.ngs .pe-4{padding-right:1.5rem!important}.ngs .pe-5{padding-right:3rem!important}.ngs .pb-0{padding-bottom:0!important}.ngs .pb-1{padding-bottom:.25rem!important}.ngs .pb-2{padding-bottom:.5rem!important}.ngs .pb-3{padding-bottom:1rem!important}.ngs .pb-4{padding-bottom:1.5rem!important}.ngs .pb-5{padding-bottom:3rem!important}.ngs .ps-0{padding-left:0!important}.ngs .ps-1{padding-left:.25rem!important}.ngs .ps-2{padding-left:.5rem!important}.ngs .ps-3{padding-left:1rem!important}.ngs .ps-4{padding-left:1.5rem!important}.ngs .ps-5{padding-left:3rem!important}@media(min-width:576px){.ngs .d-sm-inline{display:inline!important}.ngs .d-sm-inline-block{display:inline-block!important}.ngs .d-sm-block{display:block!important}.ngs .d-sm-grid{display:grid!important}.ngs .d-sm-inline-grid{display:inline-grid!important}.ngs .d-sm-table{display:table!important}.ngs .d-sm-table-row{display:table-row!important}.ngs .d-sm-table-cell{display:table-cell!important}.ngs .d-sm-flex{display:flex!important}.ngs .d-sm-inline-flex{display:inline-flex!important}.ngs .d-sm-none{display:none!important}.ngs .flex-sm-fill{flex:1 1 auto!important}.ngs .flex-sm-row{flex-direction:row!important}.ngs .flex-sm-column{flex-direction:column!important}.ngs .flex-sm-row-reverse{flex-direction:row-reverse!important}.ngs .flex-sm-column-reverse{flex-direction:column-reverse!important}.ngs .flex-sm-grow-0{flex-grow:0!important}.ngs .flex-sm-grow-1{flex-grow:1!important}.ngs .flex-sm-shrink-0{flex-shrink:0!important}.ngs .flex-sm-shrink-1{flex-shrink:1!important}.ngs .flex-sm-wrap{flex-wrap:wrap!important}.ngs .flex-sm-nowrap{flex-wrap:nowrap!important}.ngs .flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-sm-start{justify-content:flex-start!important}.ngs .justify-content-sm-end{justify-content:flex-end!important}.ngs .justify-content-sm-center{justify-content:center!important}.ngs .justify-content-sm-between{justify-content:space-between!important}.ngs .justify-content-sm-around{justify-content:space-around!important}.ngs .justify-content-sm-evenly{justify-content:space-evenly!important}.ngs .align-items-sm-start{align-items:flex-start!important}.ngs .align-items-sm-end{align-items:flex-end!important}.ngs .align-items-sm-center{align-items:center!important}.ngs .align-items-sm-baseline{align-items:baseline!important}.ngs .align-items-sm-stretch{align-items:stretch!important}.ngs .align-content-sm-start{align-content:flex-start!important}.ngs .align-content-sm-end{align-content:flex-end!important}.ngs .align-content-sm-center{align-content:center!important}.ngs .align-content-sm-between{align-content:space-between!important}.ngs .align-content-sm-around{align-content:space-around!important}.ngs .align-content-sm-stretch{align-content:stretch!important}.ngs .align-self-sm-auto{align-self:auto!important}.ngs .align-self-sm-start{align-self:flex-start!important}.ngs .align-self-sm-end{align-self:flex-end!important}.ngs .align-self-sm-center{align-self:center!important}.ngs .align-self-sm-baseline{align-self:baseline!important}.ngs .align-self-sm-stretch{align-self:stretch!important}.ngs .order-sm-first{order:-1!important}.ngs .order-sm-0{order:0!important}.ngs .order-sm-1{order:1!important}.ngs .order-sm-2{order:2!important}.ngs .order-sm-3{order:3!important}.ngs .order-sm-4{order:4!important}.ngs .order-sm-5{order:5!important}.ngs .order-sm-last{order:6!important}.ngs .m-sm-0{margin:0!important}.ngs .m-sm-1{margin:.25rem!important}.ngs .m-sm-2{margin:.5rem!important}.ngs .m-sm-3{margin:1rem!important}.ngs .m-sm-4{margin:1.5rem!important}.ngs .m-sm-5{margin:3rem!important}.ngs .m-sm-auto{margin:auto!important}.ngs .mx-sm-0{margin-right:0!important;margin-left:0!important}.ngs .mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-sm-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-sm-0{margin-top:0!important}.ngs .mt-sm-1{margin-top:.25rem!important}.ngs .mt-sm-2{margin-top:.5rem!important}.ngs .mt-sm-3{margin-top:1rem!important}.ngs .mt-sm-4{margin-top:1.5rem!important}.ngs .mt-sm-5{margin-top:3rem!important}.ngs .mt-sm-auto{margin-top:auto!important}.ngs .me-sm-0{margin-right:0!important}.ngs .me-sm-1{margin-right:.25rem!important}.ngs .me-sm-2{margin-right:.5rem!important}.ngs .me-sm-3{margin-right:1rem!important}.ngs .me-sm-4{margin-right:1.5rem!important}.ngs .me-sm-5{margin-right:3rem!important}.ngs .me-sm-auto{margin-right:auto!important}.ngs .mb-sm-0{margin-bottom:0!important}.ngs .mb-sm-1{margin-bottom:.25rem!important}.ngs .mb-sm-2{margin-bottom:.5rem!important}.ngs .mb-sm-3{margin-bottom:1rem!important}.ngs .mb-sm-4{margin-bottom:1.5rem!important}.ngs .mb-sm-5{margin-bottom:3rem!important}.ngs .mb-sm-auto{margin-bottom:auto!important}.ngs .ms-sm-0{margin-left:0!important}.ngs .ms-sm-1{margin-left:.25rem!important}.ngs .ms-sm-2{margin-left:.5rem!important}.ngs .ms-sm-3{margin-left:1rem!important}.ngs .ms-sm-4{margin-left:1.5rem!important}.ngs .ms-sm-5{margin-left:3rem!important}.ngs .ms-sm-auto{margin-left:auto!important}.ngs .p-sm-0{padding:0!important}.ngs .p-sm-1{padding:.25rem!important}.ngs .p-sm-2{padding:.5rem!important}.ngs .p-sm-3{padding:1rem!important}.ngs .p-sm-4{padding:1.5rem!important}.ngs .p-sm-5{padding:3rem!important}.ngs .px-sm-0{padding-right:0!important;padding-left:0!important}.ngs .px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-sm-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-sm-0{padding-top:0!important}.ngs .pt-sm-1{padding-top:.25rem!important}.ngs .pt-sm-2{padding-top:.5rem!important}.ngs .pt-sm-3{padding-top:1rem!important}.ngs .pt-sm-4{padding-top:1.5rem!important}.ngs .pt-sm-5{padding-top:3rem!important}.ngs .pe-sm-0{padding-right:0!important}.ngs .pe-sm-1{padding-right:.25rem!important}.ngs .pe-sm-2{padding-right:.5rem!important}.ngs .pe-sm-3{padding-right:1rem!important}.ngs .pe-sm-4{padding-right:1.5rem!important}.ngs .pe-sm-5{padding-right:3rem!important}.ngs .pb-sm-0{padding-bottom:0!important}.ngs .pb-sm-1{padding-bottom:.25rem!important}.ngs .pb-sm-2{padding-bottom:.5rem!important}.ngs .pb-sm-3{padding-bottom:1rem!important}.ngs .pb-sm-4{padding-bottom:1.5rem!important}.ngs .pb-sm-5{padding-bottom:3rem!important}.ngs .ps-sm-0{padding-left:0!important}.ngs .ps-sm-1{padding-left:.25rem!important}.ngs .ps-sm-2{padding-left:.5rem!important}.ngs .ps-sm-3{padding-left:1rem!important}.ngs .ps-sm-4{padding-left:1.5rem!important}.ngs .ps-sm-5{padding-left:3rem!important}}@media(min-width:768px){.ngs .d-md-inline{display:inline!important}.ngs .d-md-inline-block{display:inline-block!important}.ngs .d-md-block{display:block!important}.ngs .d-md-grid{display:grid!important}.ngs .d-md-inline-grid{display:inline-grid!important}.ngs .d-md-table{display:table!important}.ngs .d-md-table-row{display:table-row!important}.ngs .d-md-table-cell{display:table-cell!important}.ngs .d-md-flex{display:flex!important}.ngs .d-md-inline-flex{display:inline-flex!important}.ngs .d-md-none{display:none!important}.ngs .flex-md-fill{flex:1 1 auto!important}.ngs .flex-md-row{flex-direction:row!important}.ngs .flex-md-column{flex-direction:column!important}.ngs .flex-md-row-reverse{flex-direction:row-reverse!important}.ngs .flex-md-column-reverse{flex-direction:column-reverse!important}.ngs .flex-md-grow-0{flex-grow:0!important}.ngs .flex-md-grow-1{flex-grow:1!important}.ngs .flex-md-shrink-0{flex-shrink:0!important}.ngs .flex-md-shrink-1{flex-shrink:1!important}.ngs .flex-md-wrap{flex-wrap:wrap!important}.ngs .flex-md-nowrap{flex-wrap:nowrap!important}.ngs .flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-md-start{justify-content:flex-start!important}.ngs .justify-content-md-end{justify-content:flex-end!important}.ngs .justify-content-md-center{justify-content:center!important}.ngs .justify-content-md-between{justify-content:space-between!important}.ngs .justify-content-md-around{justify-content:space-around!important}.ngs .justify-content-md-evenly{justify-content:space-evenly!important}.ngs .align-items-md-start{align-items:flex-start!important}.ngs .align-items-md-end{align-items:flex-end!important}.ngs .align-items-md-center{align-items:center!important}.ngs .align-items-md-baseline{align-items:baseline!important}.ngs .align-items-md-stretch{align-items:stretch!important}.ngs .align-content-md-start{align-content:flex-start!important}.ngs .align-content-md-end{align-content:flex-end!important}.ngs .align-content-md-center{align-content:center!important}.ngs .align-content-md-between{align-content:space-between!important}.ngs .align-content-md-around{align-content:space-around!important}.ngs .align-content-md-stretch{align-content:stretch!important}.ngs .align-self-md-auto{align-self:auto!important}.ngs .align-self-md-start{align-self:flex-start!important}.ngs .align-self-md-end{align-self:flex-end!important}.ngs .align-self-md-center{align-self:center!important}.ngs .align-self-md-baseline{align-self:baseline!important}.ngs .align-self-md-stretch{align-self:stretch!important}.ngs .order-md-first{order:-1!important}.ngs .order-md-0{order:0!important}.ngs .order-md-1{order:1!important}.ngs .order-md-2{order:2!important}.ngs .order-md-3{order:3!important}.ngs .order-md-4{order:4!important}.ngs .order-md-5{order:5!important}.ngs .order-md-last{order:6!important}.ngs .m-md-0{margin:0!important}.ngs .m-md-1{margin:.25rem!important}.ngs .m-md-2{margin:.5rem!important}.ngs .m-md-3{margin:1rem!important}.ngs .m-md-4{margin:1.5rem!important}.ngs .m-md-5{margin:3rem!important}.ngs .m-md-auto{margin:auto!important}.ngs .mx-md-0{margin-right:0!important;margin-left:0!important}.ngs .mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-md-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-md-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-md-0{margin-top:0!important}.ngs .mt-md-1{margin-top:.25rem!important}.ngs .mt-md-2{margin-top:.5rem!important}.ngs .mt-md-3{margin-top:1rem!important}.ngs .mt-md-4{margin-top:1.5rem!important}.ngs .mt-md-5{margin-top:3rem!important}.ngs .mt-md-auto{margin-top:auto!important}.ngs .me-md-0{margin-right:0!important}.ngs .me-md-1{margin-right:.25rem!important}.ngs .me-md-2{margin-right:.5rem!important}.ngs .me-md-3{margin-right:1rem!important}.ngs .me-md-4{margin-right:1.5rem!important}.ngs .me-md-5{margin-right:3rem!important}.ngs .me-md-auto{margin-right:auto!important}.ngs .mb-md-0{margin-bottom:0!important}.ngs .mb-md-1{margin-bottom:.25rem!important}.ngs .mb-md-2{margin-bottom:.5rem!important}.ngs .mb-md-3{margin-bottom:1rem!important}.ngs .mb-md-4{margin-bottom:1.5rem!important}.ngs .mb-md-5{margin-bottom:3rem!important}.ngs .mb-md-auto{margin-bottom:auto!important}.ngs .ms-md-0{margin-left:0!important}.ngs .ms-md-1{margin-left:.25rem!important}.ngs .ms-md-2{margin-left:.5rem!important}.ngs .ms-md-3{margin-left:1rem!important}.ngs .ms-md-4{margin-left:1.5rem!important}.ngs .ms-md-5{margin-left:3rem!important}.ngs .ms-md-auto{margin-left:auto!important}.ngs .p-md-0{padding:0!important}.ngs .p-md-1{padding:.25rem!important}.ngs .p-md-2{padding:.5rem!important}.ngs .p-md-3{padding:1rem!important}.ngs .p-md-4{padding:1.5rem!important}.ngs .p-md-5{padding:3rem!important}.ngs .px-md-0{padding-right:0!important;padding-left:0!important}.ngs .px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-md-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-md-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-md-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-md-0{padding-top:0!important}.ngs .pt-md-1{padding-top:.25rem!important}.ngs .pt-md-2{padding-top:.5rem!important}.ngs .pt-md-3{padding-top:1rem!important}.ngs .pt-md-4{padding-top:1.5rem!important}.ngs .pt-md-5{padding-top:3rem!important}.ngs .pe-md-0{padding-right:0!important}.ngs .pe-md-1{padding-right:.25rem!important}.ngs .pe-md-2{padding-right:.5rem!important}.ngs .pe-md-3{padding-right:1rem!important}.ngs .pe-md-4{padding-right:1.5rem!important}.ngs .pe-md-5{padding-right:3rem!important}.ngs .pb-md-0{padding-bottom:0!important}.ngs .pb-md-1{padding-bottom:.25rem!important}.ngs .pb-md-2{padding-bottom:.5rem!important}.ngs .pb-md-3{padding-bottom:1rem!important}.ngs .pb-md-4{padding-bottom:1.5rem!important}.ngs .pb-md-5{padding-bottom:3rem!important}.ngs .ps-md-0{padding-left:0!important}.ngs .ps-md-1{padding-left:.25rem!important}.ngs .ps-md-2{padding-left:.5rem!important}.ngs .ps-md-3{padding-left:1rem!important}.ngs .ps-md-4{padding-left:1.5rem!important}.ngs .ps-md-5{padding-left:3rem!important}}@media(min-width:992px){.ngs .d-lg-inline{display:inline!important}.ngs .d-lg-inline-block{display:inline-block!important}.ngs .d-lg-block{display:block!important}.ngs .d-lg-grid{display:grid!important}.ngs .d-lg-inline-grid{display:inline-grid!important}.ngs .d-lg-table{display:table!important}.ngs .d-lg-table-row{display:table-row!important}.ngs .d-lg-table-cell{display:table-cell!important}.ngs .d-lg-flex{display:flex!important}.ngs .d-lg-inline-flex{display:inline-flex!important}.ngs .d-lg-none{display:none!important}.ngs .flex-lg-fill{flex:1 1 auto!important}.ngs .flex-lg-row{flex-direction:row!important}.ngs .flex-lg-column{flex-direction:column!important}.ngs .flex-lg-row-reverse{flex-direction:row-reverse!important}.ngs .flex-lg-column-reverse{flex-direction:column-reverse!important}.ngs .flex-lg-grow-0{flex-grow:0!important}.ngs .flex-lg-grow-1{flex-grow:1!important}.ngs .flex-lg-shrink-0{flex-shrink:0!important}.ngs .flex-lg-shrink-1{flex-shrink:1!important}.ngs .flex-lg-wrap{flex-wrap:wrap!important}.ngs .flex-lg-nowrap{flex-wrap:nowrap!important}.ngs .flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-lg-start{justify-content:flex-start!important}.ngs .justify-content-lg-end{justify-content:flex-end!important}.ngs .justify-content-lg-center{justify-content:center!important}.ngs .justify-content-lg-between{justify-content:space-between!important}.ngs .justify-content-lg-around{justify-content:space-around!important}.ngs .justify-content-lg-evenly{justify-content:space-evenly!important}.ngs .align-items-lg-start{align-items:flex-start!important}.ngs .align-items-lg-end{align-items:flex-end!important}.ngs .align-items-lg-center{align-items:center!important}.ngs .align-items-lg-baseline{align-items:baseline!important}.ngs .align-items-lg-stretch{align-items:stretch!important}.ngs .align-content-lg-start{align-content:flex-start!important}.ngs .align-content-lg-end{align-content:flex-end!important}.ngs .align-content-lg-center{align-content:center!important}.ngs .align-content-lg-between{align-content:space-between!important}.ngs .align-content-lg-around{align-content:space-around!important}.ngs .align-content-lg-stretch{align-content:stretch!important}.ngs .align-self-lg-auto{align-self:auto!important}.ngs .align-self-lg-start{align-self:flex-start!important}.ngs .align-self-lg-end{align-self:flex-end!important}.ngs .align-self-lg-center{align-self:center!important}.ngs .align-self-lg-baseline{align-self:baseline!important}.ngs .align-self-lg-stretch{align-self:stretch!important}.ngs .order-lg-first{order:-1!important}.ngs .order-lg-0{order:0!important}.ngs .order-lg-1{order:1!important}.ngs .order-lg-2{order:2!important}.ngs .order-lg-3{order:3!important}.ngs .order-lg-4{order:4!important}.ngs .order-lg-5{order:5!important}.ngs .order-lg-last{order:6!important}.ngs .m-lg-0{margin:0!important}.ngs .m-lg-1{margin:.25rem!important}.ngs .m-lg-2{margin:.5rem!important}.ngs .m-lg-3{margin:1rem!important}.ngs .m-lg-4{margin:1.5rem!important}.ngs .m-lg-5{margin:3rem!important}.ngs .m-lg-auto{margin:auto!important}.ngs .mx-lg-0{margin-right:0!important;margin-left:0!important}.ngs .mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-lg-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-lg-0{margin-top:0!important}.ngs .mt-lg-1{margin-top:.25rem!important}.ngs .mt-lg-2{margin-top:.5rem!important}.ngs .mt-lg-3{margin-top:1rem!important}.ngs .mt-lg-4{margin-top:1.5rem!important}.ngs .mt-lg-5{margin-top:3rem!important}.ngs .mt-lg-auto{margin-top:auto!important}.ngs .me-lg-0{margin-right:0!important}.ngs .me-lg-1{margin-right:.25rem!important}.ngs .me-lg-2{margin-right:.5rem!important}.ngs .me-lg-3{margin-right:1rem!important}.ngs .me-lg-4{margin-right:1.5rem!important}.ngs .me-lg-5{margin-right:3rem!important}.ngs .me-lg-auto{margin-right:auto!important}.ngs .mb-lg-0{margin-bottom:0!important}.ngs .mb-lg-1{margin-bottom:.25rem!important}.ngs .mb-lg-2{margin-bottom:.5rem!important}.ngs .mb-lg-3{margin-bottom:1rem!important}.ngs .mb-lg-4{margin-bottom:1.5rem!important}.ngs .mb-lg-5{margin-bottom:3rem!important}.ngs .mb-lg-auto{margin-bottom:auto!important}.ngs .ms-lg-0{margin-left:0!important}.ngs .ms-lg-1{margin-left:.25rem!important}.ngs .ms-lg-2{margin-left:.5rem!important}.ngs .ms-lg-3{margin-left:1rem!important}.ngs .ms-lg-4{margin-left:1.5rem!important}.ngs .ms-lg-5{margin-left:3rem!important}.ngs .ms-lg-auto{margin-left:auto!important}.ngs .p-lg-0{padding:0!important}.ngs .p-lg-1{padding:.25rem!important}.ngs .p-lg-2{padding:.5rem!important}.ngs .p-lg-3{padding:1rem!important}.ngs .p-lg-4{padding:1.5rem!important}.ngs .p-lg-5{padding:3rem!important}.ngs .px-lg-0{padding-right:0!important;padding-left:0!important}.ngs .px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-lg-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-lg-0{padding-top:0!important}.ngs .pt-lg-1{padding-top:.25rem!important}.ngs .pt-lg-2{padding-top:.5rem!important}.ngs .pt-lg-3{padding-top:1rem!important}.ngs .pt-lg-4{padding-top:1.5rem!important}.ngs .pt-lg-5{padding-top:3rem!important}.ngs .pe-lg-0{padding-right:0!important}.ngs .pe-lg-1{padding-right:.25rem!important}.ngs .pe-lg-2{padding-right:.5rem!important}.ngs .pe-lg-3{padding-right:1rem!important}.ngs .pe-lg-4{padding-right:1.5rem!important}.ngs .pe-lg-5{padding-right:3rem!important}.ngs .pb-lg-0{padding-bottom:0!important}.ngs .pb-lg-1{padding-bottom:.25rem!important}.ngs .pb-lg-2{padding-bottom:.5rem!important}.ngs .pb-lg-3{padding-bottom:1rem!important}.ngs .pb-lg-4{padding-bottom:1.5rem!important}.ngs .pb-lg-5{padding-bottom:3rem!important}.ngs .ps-lg-0{padding-left:0!important}.ngs .ps-lg-1{padding-left:.25rem!important}.ngs .ps-lg-2{padding-left:.5rem!important}.ngs .ps-lg-3{padding-left:1rem!important}.ngs .ps-lg-4{padding-left:1.5rem!important}.ngs .ps-lg-5{padding-left:3rem!important}}@media(min-width:1200px){.ngs .d-xl-inline{display:inline!important}.ngs .d-xl-inline-block{display:inline-block!important}.ngs .d-xl-block{display:block!important}.ngs .d-xl-grid{display:grid!important}.ngs .d-xl-inline-grid{display:inline-grid!important}.ngs .d-xl-table{display:table!important}.ngs .d-xl-table-row{display:table-row!important}.ngs .d-xl-table-cell{display:table-cell!important}.ngs .d-xl-flex{display:flex!important}.ngs .d-xl-inline-flex{display:inline-flex!important}.ngs .d-xl-none{display:none!important}.ngs .flex-xl-fill{flex:1 1 auto!important}.ngs .flex-xl-row{flex-direction:row!important}.ngs .flex-xl-column{flex-direction:column!important}.ngs .flex-xl-row-reverse{flex-direction:row-reverse!important}.ngs .flex-xl-column-reverse{flex-direction:column-reverse!important}.ngs .flex-xl-grow-0{flex-grow:0!important}.ngs .flex-xl-grow-1{flex-grow:1!important}.ngs .flex-xl-shrink-0{flex-shrink:0!important}.ngs .flex-xl-shrink-1{flex-shrink:1!important}.ngs .flex-xl-wrap{flex-wrap:wrap!important}.ngs .flex-xl-nowrap{flex-wrap:nowrap!important}.ngs .flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-xl-start{justify-content:flex-start!important}.ngs .justify-content-xl-end{justify-content:flex-end!important}.ngs .justify-content-xl-center{justify-content:center!important}.ngs .justify-content-xl-between{justify-content:space-between!important}.ngs .justify-content-xl-around{justify-content:space-around!important}.ngs .justify-content-xl-evenly{justify-content:space-evenly!important}.ngs .align-items-xl-start{align-items:flex-start!important}.ngs .align-items-xl-end{align-items:flex-end!important}.ngs .align-items-xl-center{align-items:center!important}.ngs .align-items-xl-baseline{align-items:baseline!important}.ngs .align-items-xl-stretch{align-items:stretch!important}.ngs .align-content-xl-start{align-content:flex-start!important}.ngs .align-content-xl-end{align-content:flex-end!important}.ngs .align-content-xl-center{align-content:center!important}.ngs .align-content-xl-between{align-content:space-between!important}.ngs .align-content-xl-around{align-content:space-around!important}.ngs .align-content-xl-stretch{align-content:stretch!important}.ngs .align-self-xl-auto{align-self:auto!important}.ngs .align-self-xl-start{align-self:flex-start!important}.ngs .align-self-xl-end{align-self:flex-end!important}.ngs .align-self-xl-center{align-self:center!important}.ngs .align-self-xl-baseline{align-self:baseline!important}.ngs .align-self-xl-stretch{align-self:stretch!important}.ngs .order-xl-first{order:-1!important}.ngs .order-xl-0{order:0!important}.ngs .order-xl-1{order:1!important}.ngs .order-xl-2{order:2!important}.ngs .order-xl-3{order:3!important}.ngs .order-xl-4{order:4!important}.ngs .order-xl-5{order:5!important}.ngs .order-xl-last{order:6!important}.ngs .m-xl-0{margin:0!important}.ngs .m-xl-1{margin:.25rem!important}.ngs .m-xl-2{margin:.5rem!important}.ngs .m-xl-3{margin:1rem!important}.ngs .m-xl-4{margin:1.5rem!important}.ngs .m-xl-5{margin:3rem!important}.ngs .m-xl-auto{margin:auto!important}.ngs .mx-xl-0{margin-right:0!important;margin-left:0!important}.ngs .mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-xl-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-xl-0{margin-top:0!important}.ngs .mt-xl-1{margin-top:.25rem!important}.ngs .mt-xl-2{margin-top:.5rem!important}.ngs .mt-xl-3{margin-top:1rem!important}.ngs .mt-xl-4{margin-top:1.5rem!important}.ngs .mt-xl-5{margin-top:3rem!important}.ngs .mt-xl-auto{margin-top:auto!important}.ngs .me-xl-0{margin-right:0!important}.ngs .me-xl-1{margin-right:.25rem!important}.ngs .me-xl-2{margin-right:.5rem!important}.ngs .me-xl-3{margin-right:1rem!important}.ngs .me-xl-4{margin-right:1.5rem!important}.ngs .me-xl-5{margin-right:3rem!important}.ngs .me-xl-auto{margin-right:auto!important}.ngs .mb-xl-0{margin-bottom:0!important}.ngs .mb-xl-1{margin-bottom:.25rem!important}.ngs .mb-xl-2{margin-bottom:.5rem!important}.ngs .mb-xl-3{margin-bottom:1rem!important}.ngs .mb-xl-4{margin-bottom:1.5rem!important}.ngs .mb-xl-5{margin-bottom:3rem!important}.ngs .mb-xl-auto{margin-bottom:auto!important}.ngs .ms-xl-0{margin-left:0!important}.ngs .ms-xl-1{margin-left:.25rem!important}.ngs .ms-xl-2{margin-left:.5rem!important}.ngs .ms-xl-3{margin-left:1rem!important}.ngs .ms-xl-4{margin-left:1.5rem!important}.ngs .ms-xl-5{margin-left:3rem!important}.ngs .ms-xl-auto{margin-left:auto!important}.ngs .p-xl-0{padding:0!important}.ngs .p-xl-1{padding:.25rem!important}.ngs .p-xl-2{padding:.5rem!important}.ngs .p-xl-3{padding:1rem!important}.ngs .p-xl-4{padding:1.5rem!important}.ngs .p-xl-5{padding:3rem!important}.ngs .px-xl-0{padding-right:0!important;padding-left:0!important}.ngs .px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-xl-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-xl-0{padding-top:0!important}.ngs .pt-xl-1{padding-top:.25rem!important}.ngs .pt-xl-2{padding-top:.5rem!important}.ngs .pt-xl-3{padding-top:1rem!important}.ngs .pt-xl-4{padding-top:1.5rem!important}.ngs .pt-xl-5{padding-top:3rem!important}.ngs .pe-xl-0{padding-right:0!important}.ngs .pe-xl-1{padding-right:.25rem!important}.ngs .pe-xl-2{padding-right:.5rem!important}.ngs .pe-xl-3{padding-right:1rem!important}.ngs .pe-xl-4{padding-right:1.5rem!important}.ngs .pe-xl-5{padding-right:3rem!important}.ngs .pb-xl-0{padding-bottom:0!important}.ngs .pb-xl-1{padding-bottom:.25rem!important}.ngs .pb-xl-2{padding-bottom:.5rem!important}.ngs .pb-xl-3{padding-bottom:1rem!important}.ngs .pb-xl-4{padding-bottom:1.5rem!important}.ngs .pb-xl-5{padding-bottom:3rem!important}.ngs .ps-xl-0{padding-left:0!important}.ngs .ps-xl-1{padding-left:.25rem!important}.ngs .ps-xl-2{padding-left:.5rem!important}.ngs .ps-xl-3{padding-left:1rem!important}.ngs .ps-xl-4{padding-left:1.5rem!important}.ngs .ps-xl-5{padding-left:3rem!important}}@media(min-width:1400px){.ngs .d-xxl-inline{display:inline!important}.ngs .d-xxl-inline-block{display:inline-block!important}.ngs .d-xxl-block{display:block!important}.ngs .d-xxl-grid{display:grid!important}.ngs .d-xxl-inline-grid{display:inline-grid!important}.ngs .d-xxl-table{display:table!important}.ngs .d-xxl-table-row{display:table-row!important}.ngs .d-xxl-table-cell{display:table-cell!important}.ngs .d-xxl-flex{display:flex!important}.ngs .d-xxl-inline-flex{display:inline-flex!important}.ngs .d-xxl-none{display:none!important}.ngs .flex-xxl-fill{flex:1 1 auto!important}.ngs .flex-xxl-row{flex-direction:row!important}.ngs .flex-xxl-column{flex-direction:column!important}.ngs .flex-xxl-row-reverse{flex-direction:row-reverse!important}.ngs .flex-xxl-column-reverse{flex-direction:column-reverse!important}.ngs .flex-xxl-grow-0{flex-grow:0!important}.ngs .flex-xxl-grow-1{flex-grow:1!important}.ngs .flex-xxl-shrink-0{flex-shrink:0!important}.ngs .flex-xxl-shrink-1{flex-shrink:1!important}.ngs .flex-xxl-wrap{flex-wrap:wrap!important}.ngs .flex-xxl-nowrap{flex-wrap:nowrap!important}.ngs .flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-xxl-start{justify-content:flex-start!important}.ngs .justify-content-xxl-end{justify-content:flex-end!important}.ngs .justify-content-xxl-center{justify-content:center!important}.ngs .justify-content-xxl-between{justify-content:space-between!important}.ngs .justify-content-xxl-around{justify-content:space-around!important}.ngs .justify-content-xxl-evenly{justify-content:space-evenly!important}.ngs .align-items-xxl-start{align-items:flex-start!important}.ngs .align-items-xxl-end{align-items:flex-end!important}.ngs .align-items-xxl-center{align-items:center!important}.ngs .align-items-xxl-baseline{align-items:baseline!important}.ngs .align-items-xxl-stretch{align-items:stretch!important}.ngs .align-content-xxl-start{align-content:flex-start!important}.ngs .align-content-xxl-end{align-content:flex-end!important}.ngs .align-content-xxl-center{align-content:center!important}.ngs .align-content-xxl-between{align-content:space-between!important}.ngs .align-content-xxl-around{align-content:space-around!important}.ngs .align-content-xxl-stretch{align-content:stretch!important}.ngs .align-self-xxl-auto{align-self:auto!important}.ngs .align-self-xxl-start{align-self:flex-start!important}.ngs .align-self-xxl-end{align-self:flex-end!important}.ngs .align-self-xxl-center{align-self:center!important}.ngs .align-self-xxl-baseline{align-self:baseline!important}.ngs .align-self-xxl-stretch{align-self:stretch!important}.ngs .order-xxl-first{order:-1!important}.ngs .order-xxl-0{order:0!important}.ngs .order-xxl-1{order:1!important}.ngs .order-xxl-2{order:2!important}.ngs .order-xxl-3{order:3!important}.ngs .order-xxl-4{order:4!important}.ngs .order-xxl-5{order:5!important}.ngs .order-xxl-last{order:6!important}.ngs .m-xxl-0{margin:0!important}.ngs .m-xxl-1{margin:.25rem!important}.ngs .m-xxl-2{margin:.5rem!important}.ngs .m-xxl-3{margin:1rem!important}.ngs .m-xxl-4{margin:1.5rem!important}.ngs .m-xxl-5{margin:3rem!important}.ngs .m-xxl-auto{margin:auto!important}.ngs .mx-xxl-0{margin-right:0!important;margin-left:0!important}.ngs .mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-xxl-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-xxl-0{margin-top:0!important}.ngs .mt-xxl-1{margin-top:.25rem!important}.ngs .mt-xxl-2{margin-top:.5rem!important}.ngs .mt-xxl-3{margin-top:1rem!important}.ngs .mt-xxl-4{margin-top:1.5rem!important}.ngs .mt-xxl-5{margin-top:3rem!important}.ngs .mt-xxl-auto{margin-top:auto!important}.ngs .me-xxl-0{margin-right:0!important}.ngs .me-xxl-1{margin-right:.25rem!important}.ngs .me-xxl-2{margin-right:.5rem!important}.ngs .me-xxl-3{margin-right:1rem!important}.ngs .me-xxl-4{margin-right:1.5rem!important}.ngs .me-xxl-5{margin-right:3rem!important}.ngs .me-xxl-auto{margin-right:auto!important}.ngs .mb-xxl-0{margin-bottom:0!important}.ngs .mb-xxl-1{margin-bottom:.25rem!important}.ngs .mb-xxl-2{margin-bottom:.5rem!important}.ngs .mb-xxl-3{margin-bottom:1rem!important}.ngs .mb-xxl-4{margin-bottom:1.5rem!important}.ngs .mb-xxl-5{margin-bottom:3rem!important}.ngs .mb-xxl-auto{margin-bottom:auto!important}.ngs .ms-xxl-0{margin-left:0!important}.ngs .ms-xxl-1{margin-left:.25rem!important}.ngs .ms-xxl-2{margin-left:.5rem!important}.ngs .ms-xxl-3{margin-left:1rem!important}.ngs .ms-xxl-4{margin-left:1.5rem!important}.ngs .ms-xxl-5{margin-left:3rem!important}.ngs .ms-xxl-auto{margin-left:auto!important}.ngs .p-xxl-0{padding:0!important}.ngs .p-xxl-1{padding:.25rem!important}.ngs .p-xxl-2{padding:.5rem!important}.ngs .p-xxl-3{padding:1rem!important}.ngs .p-xxl-4{padding:1.5rem!important}.ngs .p-xxl-5{padding:3rem!important}.ngs .px-xxl-0{padding-right:0!important;padding-left:0!important}.ngs .px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-xxl-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-xxl-0{padding-top:0!important}.ngs .pt-xxl-1{padding-top:.25rem!important}.ngs .pt-xxl-2{padding-top:.5rem!important}.ngs .pt-xxl-3{padding-top:1rem!important}.ngs .pt-xxl-4{padding-top:1.5rem!important}.ngs .pt-xxl-5{padding-top:3rem!important}.ngs .pe-xxl-0{padding-right:0!important}.ngs .pe-xxl-1{padding-right:.25rem!important}.ngs .pe-xxl-2{padding-right:.5rem!important}.ngs .pe-xxl-3{padding-right:1rem!important}.ngs .pe-xxl-4{padding-right:1.5rem!important}.ngs .pe-xxl-5{padding-right:3rem!important}.ngs .pb-xxl-0{padding-bottom:0!important}.ngs .pb-xxl-1{padding-bottom:.25rem!important}.ngs .pb-xxl-2{padding-bottom:.5rem!important}.ngs .pb-xxl-3{padding-bottom:1rem!important}.ngs .pb-xxl-4{padding-bottom:1.5rem!important}.ngs .pb-xxl-5{padding-bottom:3rem!important}.ngs .ps-xxl-0{padding-left:0!important}.ngs .ps-xxl-1{padding-left:.25rem!important}.ngs .ps-xxl-2{padding-left:.5rem!important}.ngs .ps-xxl-3{padding-left:1rem!important}.ngs .ps-xxl-4{padding-left:1.5rem!important}.ngs .ps-xxl-5{padding-left:3rem!important}}@media print{.ngs .d-print-inline{display:inline!important}.ngs .d-print-inline-block{display:inline-block!important}.ngs .d-print-block{display:block!important}.ngs .d-print-grid{display:grid!important}.ngs .d-print-inline-grid{display:inline-grid!important}.ngs .d-print-table{display:table!important}.ngs .d-print-table-row{display:table-row!important}.ngs .d-print-table-cell{display:table-cell!important}.ngs .d-print-flex{display:flex!important}.ngs .d-print-inline-flex{display:inline-flex!important}.ngs .d-print-none{display:none!important}}\n", ".prevSection{padding:5px 10px;float:left;margin-left:0}.nextSection{padding:5px 10px;float:right;margin-left:0}.separator-horizontal{width:1px;height:100%;background-color:#d6cece;margin:0 auto}.content-element-form .section-navs{width:100%;background-color:#f2f6fc;margin-left:0;margin-right:0;padding:10px;flex-direction:row-reverse}.sirio-toast{width:auto;min-width:17rem;max-width:41rem}.form-title{margin-bottom:15px}.sirio-stepper-item:is(.is-success,.is-warning,.is-error) .sirio-stepper-title{font-weight:600;text-decoration:underline!important}@media(max-width:991px){.content-element-form{width:100%!important}}.feel-editor-container.feel-editor-standalone{border:1px solid #454d56!important;border-radius:4px}\n"]
+			template: "@if (schema) {\r\n  <div #root [formGroup]=\"formGroup\" class=\"ngs df-scroll-anchor\" [css]=\"schema.styles\">\r\n    <div class=\"row\">\r\n      <!-- #region progress -->\r\n      @if (showProgress) {\r\n      <!-- @wemake4u/form-controls: one step per enabled form; the forms with a state can be selected. -->\r\n      @if (getProgress(); as progress) {\r\n      <wm-sirio-stepper navigable\r\n                        [steps]=\"progress.steps\"\r\n                        [current]=\"progress.current\"\r\n                        (stepSelected)=\"activateForm(progress.formIndexes[$event])\" />\r\n      }\r\n      }\r\n      <!-- #endregion -->\r\n      @if (showNav) {\r\n      <div [ngClass]=\"navSize === 'small' ? 'col-md-2' : 'col-md-4'\">\r\n        <!-- #region sidenav -->\r\n        <!-- @wemake4u/form-controls: from 992px a column of the page, below a full screen dialog opened by the kit button. -->\r\n        @if (getSidenavItems(); as nav) {\r\n        <wm-sirio-sidenav [items]=\"nav.items\"\r\n                          [active]=\"nav.active\"\r\n                          (itemClick)=\"activateForm($any($event.item.value))\"\r\n                          [openLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                          [closeLabel]=\"locale(Texts, 'CloseMenu')\" />\r\n        }\r\n        <!-- #endregion -->\r\n      </div>\r\n      <div class=\"col-md-1\">\r\n        <div class=\"separator-horizontal\"></div>\r\n      </div>\r\n      }\r\n      <div class=\"content-element-form\" [ngClass]=\"showNav ? (navSize === 'small' ? 'col-md-13' : 'col-md-11') : 'col-md-16'\">\r\n        @for (form of forms; track form; let sectionIndex = $index) {\r\n        @if (activeNav == sectionIndex && !evaluateBoolean(form.disabled)) {\r\n        <div #default\r\n             class=\"df-scroll-anchor\"\r\n             [register]=\"form\"\r\n             [componentRef]=\"default\">\r\n          @if (showFormTitle && form.title) {\r\n          <h1 class=\"h3 form-title\">{{ evaluateTemplate(locale(form, 'title')) }}</h1>\r\n          }\r\n          <app-dynamic-fields [form]=\"this\"\r\n                              [formGroup]=\"getFormGroup(form.path)\"\r\n                              [readOnly]=\"readOnly || evaluateBoolean(form.readonly)\"\r\n                              [rows]=\"form.rows\"\r\n                              [identity]=\"form.id\"\r\n                              [disableAutoFocus]=\"form.disableAutoFocus\"\r\n                              [alignment]=\"form.verticalAlignment\"></app-dynamic-fields>\r\n        </div>\r\n        }\r\n        }\r\n        @if (showNavButton && (canNext() || canPrevious())) {\r\n        <div class=\"row section-navs\">\r\n          <div class=\"col-8 col-md-8\">\r\n            @if (canNext()) {\r\n            <button type=\"button\" wmSirioButton=\"ghost\" icon=\"fa-chevron-right\" (click)=\"goNext()\" class=\"nextSection\">{{ locale(Texts, 'NextSection') }}</button>\r\n            }\r\n          </div>\r\n          <div class=\"col-8 col-md-8\">\r\n            @if (canPrevious()) {\r\n            <button type=\"button\" wmSirioButton=\"ghost\" icon=\"fa-chevron-left\" iconPosition=\"start\" (click)=\"goPrevious()\" class=\"prevSection\">{{ locale(Texts, 'PreviousSection') }}</button>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    </div>\r\n  }\r\n\r\n",
+			styles: [".ngs .container,.ngs .container-fluid,.ngs .container-xxl,.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm{--ngsgutter-x: 1.5rem;--ngsgutter-y: 0;width:100%;padding-right:calc(var(--ngsgutter-x) * .5);padding-left:calc(var(--ngsgutter-x) * .5);margin-right:auto;margin-left:auto}@media(min-width:576px){.ngs .container-sm,.ngs .container{max-width:540px}}@media(min-width:768px){.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:720px}}@media(min-width:992px){.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:960px}}@media(min-width:1200px){.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:1140px}}@media(min-width:1400px){.ngs .container-xxl,.ngs .container-xl,.ngs .container-lg,.ngs .container-md,.ngs .container-sm,.ngs .container{max-width:1320px}}.ngs :root{--ngsbreakpoint-xs: 0;--ngsbreakpoint-sm: 576px;--ngsbreakpoint-md: 768px;--ngsbreakpoint-lg: 992px;--ngsbreakpoint-xl: 1200px;--ngsbreakpoint-xxl: 1400px}.ngs .row{--ngsgutter-x: 1.5rem;--ngsgutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--ngsgutter-y));margin-right:calc(-.5 * var(--ngsgutter-x));margin-left:calc(-.5 * var(--ngsgutter-x))}.ngs .row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--ngsgutter-x) * .5);padding-left:calc(var(--ngsgutter-x) * .5);margin-top:var(--ngsgutter-y)}.ngs .col{flex:1 0 0%}.ngs .row-cols-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-auto{flex:0 0 auto;width:auto}.ngs .col-1{flex:0 0 auto;width:6.25%}.ngs .col-2{flex:0 0 auto;width:12.5%}.ngs .col-3{flex:0 0 auto;width:18.75%}.ngs .col-4{flex:0 0 auto;width:25%}.ngs .col-5{flex:0 0 auto;width:31.25%}.ngs .col-6{flex:0 0 auto;width:37.5%}.ngs .col-7{flex:0 0 auto;width:43.75%}.ngs .col-8{flex:0 0 auto;width:50%}.ngs .col-9{flex:0 0 auto;width:56.25%}.ngs .col-10{flex:0 0 auto;width:62.5%}.ngs .col-11{flex:0 0 auto;width:68.75%}.ngs .col-12{flex:0 0 auto;width:75%}.ngs .col-13{flex:0 0 auto;width:81.25%}.ngs .col-14{flex:0 0 auto;width:87.5%}.ngs .col-15{flex:0 0 auto;width:93.75%}.ngs .col-16{flex:0 0 auto;width:100%}.ngs .offset-1{margin-left:6.25%}.ngs .offset-2{margin-left:12.5%}.ngs .offset-3{margin-left:18.75%}.ngs .offset-4{margin-left:25%}.ngs .offset-5{margin-left:31.25%}.ngs .offset-6{margin-left:37.5%}.ngs .offset-7{margin-left:43.75%}.ngs .offset-8{margin-left:50%}.ngs .offset-9{margin-left:56.25%}.ngs .offset-10{margin-left:62.5%}.ngs .offset-11{margin-left:68.75%}.ngs .offset-12{margin-left:75%}.ngs .offset-13{margin-left:81.25%}.ngs .offset-14{margin-left:87.5%}.ngs .offset-15{margin-left:93.75%}.ngs .g-0,.ngs .gx-0{--ngsgutter-x: 0}.ngs .g-0,.ngs .gy-0{--ngsgutter-y: 0}.ngs .g-1,.ngs .gx-1{--ngsgutter-x: .25rem}.ngs .g-1,.ngs .gy-1{--ngsgutter-y: .25rem}.ngs .g-2,.ngs .gx-2{--ngsgutter-x: .5rem}.ngs .g-2,.ngs .gy-2{--ngsgutter-y: .5rem}.ngs .g-3,.ngs .gx-3{--ngsgutter-x: 1rem}.ngs .g-3,.ngs .gy-3{--ngsgutter-y: 1rem}.ngs .g-4,.ngs .gx-4{--ngsgutter-x: 1.5rem}.ngs .g-4,.ngs .gy-4{--ngsgutter-y: 1.5rem}.ngs .g-5,.ngs .gx-5{--ngsgutter-x: 3rem}.ngs .g-5,.ngs .gy-5{--ngsgutter-y: 3rem}@media(min-width:576px){.ngs .col-sm{flex:1 0 0%}.ngs .row-cols-sm-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-sm-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-sm-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-sm-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-sm-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-sm-auto{flex:0 0 auto;width:auto}.ngs .col-sm-1{flex:0 0 auto;width:6.25%}.ngs .col-sm-2{flex:0 0 auto;width:12.5%}.ngs .col-sm-3{flex:0 0 auto;width:18.75%}.ngs .col-sm-4{flex:0 0 auto;width:25%}.ngs .col-sm-5{flex:0 0 auto;width:31.25%}.ngs .col-sm-6{flex:0 0 auto;width:37.5%}.ngs .col-sm-7{flex:0 0 auto;width:43.75%}.ngs .col-sm-8{flex:0 0 auto;width:50%}.ngs .col-sm-9{flex:0 0 auto;width:56.25%}.ngs .col-sm-10{flex:0 0 auto;width:62.5%}.ngs .col-sm-11{flex:0 0 auto;width:68.75%}.ngs .col-sm-12{flex:0 0 auto;width:75%}.ngs .col-sm-13{flex:0 0 auto;width:81.25%}.ngs .col-sm-14{flex:0 0 auto;width:87.5%}.ngs .col-sm-15{flex:0 0 auto;width:93.75%}.ngs .col-sm-16{flex:0 0 auto;width:100%}.ngs .offset-sm-0{margin-left:0}.ngs .offset-sm-1{margin-left:6.25%}.ngs .offset-sm-2{margin-left:12.5%}.ngs .offset-sm-3{margin-left:18.75%}.ngs .offset-sm-4{margin-left:25%}.ngs .offset-sm-5{margin-left:31.25%}.ngs .offset-sm-6{margin-left:37.5%}.ngs .offset-sm-7{margin-left:43.75%}.ngs .offset-sm-8{margin-left:50%}.ngs .offset-sm-9{margin-left:56.25%}.ngs .offset-sm-10{margin-left:62.5%}.ngs .offset-sm-11{margin-left:68.75%}.ngs .offset-sm-12{margin-left:75%}.ngs .offset-sm-13{margin-left:81.25%}.ngs .offset-sm-14{margin-left:87.5%}.ngs .offset-sm-15{margin-left:93.75%}.ngs .g-sm-0,.ngs .gx-sm-0{--ngsgutter-x: 0}.ngs .g-sm-0,.ngs .gy-sm-0{--ngsgutter-y: 0}.ngs .g-sm-1,.ngs .gx-sm-1{--ngsgutter-x: .25rem}.ngs .g-sm-1,.ngs .gy-sm-1{--ngsgutter-y: .25rem}.ngs .g-sm-2,.ngs .gx-sm-2{--ngsgutter-x: .5rem}.ngs .g-sm-2,.ngs .gy-sm-2{--ngsgutter-y: .5rem}.ngs .g-sm-3,.ngs .gx-sm-3{--ngsgutter-x: 1rem}.ngs .g-sm-3,.ngs .gy-sm-3{--ngsgutter-y: 1rem}.ngs .g-sm-4,.ngs .gx-sm-4{--ngsgutter-x: 1.5rem}.ngs .g-sm-4,.ngs .gy-sm-4{--ngsgutter-y: 1.5rem}.ngs .g-sm-5,.ngs .gx-sm-5{--ngsgutter-x: 3rem}.ngs .g-sm-5,.ngs .gy-sm-5{--ngsgutter-y: 3rem}}@media(min-width:768px){.ngs .col-md{flex:1 0 0%}.ngs .row-cols-md-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-md-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-md-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-md-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-md-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-md-auto{flex:0 0 auto;width:auto}.ngs .col-md-1{flex:0 0 auto;width:6.25%}.ngs .col-md-2{flex:0 0 auto;width:12.5%}.ngs .col-md-3{flex:0 0 auto;width:18.75%}.ngs .col-md-4{flex:0 0 auto;width:25%}.ngs .col-md-5{flex:0 0 auto;width:31.25%}.ngs .col-md-6{flex:0 0 auto;width:37.5%}.ngs .col-md-7{flex:0 0 auto;width:43.75%}.ngs .col-md-8{flex:0 0 auto;width:50%}.ngs .col-md-9{flex:0 0 auto;width:56.25%}.ngs .col-md-10{flex:0 0 auto;width:62.5%}.ngs .col-md-11{flex:0 0 auto;width:68.75%}.ngs .col-md-12{flex:0 0 auto;width:75%}.ngs .col-md-13{flex:0 0 auto;width:81.25%}.ngs .col-md-14{flex:0 0 auto;width:87.5%}.ngs .col-md-15{flex:0 0 auto;width:93.75%}.ngs .col-md-16{flex:0 0 auto;width:100%}.ngs .offset-md-0{margin-left:0}.ngs .offset-md-1{margin-left:6.25%}.ngs .offset-md-2{margin-left:12.5%}.ngs .offset-md-3{margin-left:18.75%}.ngs .offset-md-4{margin-left:25%}.ngs .offset-md-5{margin-left:31.25%}.ngs .offset-md-6{margin-left:37.5%}.ngs .offset-md-7{margin-left:43.75%}.ngs .offset-md-8{margin-left:50%}.ngs .offset-md-9{margin-left:56.25%}.ngs .offset-md-10{margin-left:62.5%}.ngs .offset-md-11{margin-left:68.75%}.ngs .offset-md-12{margin-left:75%}.ngs .offset-md-13{margin-left:81.25%}.ngs .offset-md-14{margin-left:87.5%}.ngs .offset-md-15{margin-left:93.75%}.ngs .g-md-0,.ngs .gx-md-0{--ngsgutter-x: 0}.ngs .g-md-0,.ngs .gy-md-0{--ngsgutter-y: 0}.ngs .g-md-1,.ngs .gx-md-1{--ngsgutter-x: .25rem}.ngs .g-md-1,.ngs .gy-md-1{--ngsgutter-y: .25rem}.ngs .g-md-2,.ngs .gx-md-2{--ngsgutter-x: .5rem}.ngs .g-md-2,.ngs .gy-md-2{--ngsgutter-y: .5rem}.ngs .g-md-3,.ngs .gx-md-3{--ngsgutter-x: 1rem}.ngs .g-md-3,.ngs .gy-md-3{--ngsgutter-y: 1rem}.ngs .g-md-4,.ngs .gx-md-4{--ngsgutter-x: 1.5rem}.ngs .g-md-4,.ngs .gy-md-4{--ngsgutter-y: 1.5rem}.ngs .g-md-5,.ngs .gx-md-5{--ngsgutter-x: 3rem}.ngs .g-md-5,.ngs .gy-md-5{--ngsgutter-y: 3rem}}@media(min-width:992px){.ngs .col-lg{flex:1 0 0%}.ngs .row-cols-lg-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-lg-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-lg-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-lg-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-lg-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-lg-auto{flex:0 0 auto;width:auto}.ngs .col-lg-1{flex:0 0 auto;width:6.25%}.ngs .col-lg-2{flex:0 0 auto;width:12.5%}.ngs .col-lg-3{flex:0 0 auto;width:18.75%}.ngs .col-lg-4{flex:0 0 auto;width:25%}.ngs .col-lg-5{flex:0 0 auto;width:31.25%}.ngs .col-lg-6{flex:0 0 auto;width:37.5%}.ngs .col-lg-7{flex:0 0 auto;width:43.75%}.ngs .col-lg-8{flex:0 0 auto;width:50%}.ngs .col-lg-9{flex:0 0 auto;width:56.25%}.ngs .col-lg-10{flex:0 0 auto;width:62.5%}.ngs .col-lg-11{flex:0 0 auto;width:68.75%}.ngs .col-lg-12{flex:0 0 auto;width:75%}.ngs .col-lg-13{flex:0 0 auto;width:81.25%}.ngs .col-lg-14{flex:0 0 auto;width:87.5%}.ngs .col-lg-15{flex:0 0 auto;width:93.75%}.ngs .col-lg-16{flex:0 0 auto;width:100%}.ngs .offset-lg-0{margin-left:0}.ngs .offset-lg-1{margin-left:6.25%}.ngs .offset-lg-2{margin-left:12.5%}.ngs .offset-lg-3{margin-left:18.75%}.ngs .offset-lg-4{margin-left:25%}.ngs .offset-lg-5{margin-left:31.25%}.ngs .offset-lg-6{margin-left:37.5%}.ngs .offset-lg-7{margin-left:43.75%}.ngs .offset-lg-8{margin-left:50%}.ngs .offset-lg-9{margin-left:56.25%}.ngs .offset-lg-10{margin-left:62.5%}.ngs .offset-lg-11{margin-left:68.75%}.ngs .offset-lg-12{margin-left:75%}.ngs .offset-lg-13{margin-left:81.25%}.ngs .offset-lg-14{margin-left:87.5%}.ngs .offset-lg-15{margin-left:93.75%}.ngs .g-lg-0,.ngs .gx-lg-0{--ngsgutter-x: 0}.ngs .g-lg-0,.ngs .gy-lg-0{--ngsgutter-y: 0}.ngs .g-lg-1,.ngs .gx-lg-1{--ngsgutter-x: .25rem}.ngs .g-lg-1,.ngs .gy-lg-1{--ngsgutter-y: .25rem}.ngs .g-lg-2,.ngs .gx-lg-2{--ngsgutter-x: .5rem}.ngs .g-lg-2,.ngs .gy-lg-2{--ngsgutter-y: .5rem}.ngs .g-lg-3,.ngs .gx-lg-3{--ngsgutter-x: 1rem}.ngs .g-lg-3,.ngs .gy-lg-3{--ngsgutter-y: 1rem}.ngs .g-lg-4,.ngs .gx-lg-4{--ngsgutter-x: 1.5rem}.ngs .g-lg-4,.ngs .gy-lg-4{--ngsgutter-y: 1.5rem}.ngs .g-lg-5,.ngs .gx-lg-5{--ngsgutter-x: 3rem}.ngs .g-lg-5,.ngs .gy-lg-5{--ngsgutter-y: 3rem}}@media(min-width:1200px){.ngs .col-xl{flex:1 0 0%}.ngs .row-cols-xl-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-xl-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-xl-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-xl-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-xl-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-xl-auto{flex:0 0 auto;width:auto}.ngs .col-xl-1{flex:0 0 auto;width:6.25%}.ngs .col-xl-2{flex:0 0 auto;width:12.5%}.ngs .col-xl-3{flex:0 0 auto;width:18.75%}.ngs .col-xl-4{flex:0 0 auto;width:25%}.ngs .col-xl-5{flex:0 0 auto;width:31.25%}.ngs .col-xl-6{flex:0 0 auto;width:37.5%}.ngs .col-xl-7{flex:0 0 auto;width:43.75%}.ngs .col-xl-8{flex:0 0 auto;width:50%}.ngs .col-xl-9{flex:0 0 auto;width:56.25%}.ngs .col-xl-10{flex:0 0 auto;width:62.5%}.ngs .col-xl-11{flex:0 0 auto;width:68.75%}.ngs .col-xl-12{flex:0 0 auto;width:75%}.ngs .col-xl-13{flex:0 0 auto;width:81.25%}.ngs .col-xl-14{flex:0 0 auto;width:87.5%}.ngs .col-xl-15{flex:0 0 auto;width:93.75%}.ngs .col-xl-16{flex:0 0 auto;width:100%}.ngs .offset-xl-0{margin-left:0}.ngs .offset-xl-1{margin-left:6.25%}.ngs .offset-xl-2{margin-left:12.5%}.ngs .offset-xl-3{margin-left:18.75%}.ngs .offset-xl-4{margin-left:25%}.ngs .offset-xl-5{margin-left:31.25%}.ngs .offset-xl-6{margin-left:37.5%}.ngs .offset-xl-7{margin-left:43.75%}.ngs .offset-xl-8{margin-left:50%}.ngs .offset-xl-9{margin-left:56.25%}.ngs .offset-xl-10{margin-left:62.5%}.ngs .offset-xl-11{margin-left:68.75%}.ngs .offset-xl-12{margin-left:75%}.ngs .offset-xl-13{margin-left:81.25%}.ngs .offset-xl-14{margin-left:87.5%}.ngs .offset-xl-15{margin-left:93.75%}.ngs .g-xl-0,.ngs .gx-xl-0{--ngsgutter-x: 0}.ngs .g-xl-0,.ngs .gy-xl-0{--ngsgutter-y: 0}.ngs .g-xl-1,.ngs .gx-xl-1{--ngsgutter-x: .25rem}.ngs .g-xl-1,.ngs .gy-xl-1{--ngsgutter-y: .25rem}.ngs .g-xl-2,.ngs .gx-xl-2{--ngsgutter-x: .5rem}.ngs .g-xl-2,.ngs .gy-xl-2{--ngsgutter-y: .5rem}.ngs .g-xl-3,.ngs .gx-xl-3{--ngsgutter-x: 1rem}.ngs .g-xl-3,.ngs .gy-xl-3{--ngsgutter-y: 1rem}.ngs .g-xl-4,.ngs .gx-xl-4{--ngsgutter-x: 1.5rem}.ngs .g-xl-4,.ngs .gy-xl-4{--ngsgutter-y: 1.5rem}.ngs .g-xl-5,.ngs .gx-xl-5{--ngsgutter-x: 3rem}.ngs .g-xl-5,.ngs .gy-xl-5{--ngsgutter-y: 3rem}}@media(min-width:1400px){.ngs .col-xxl{flex:1 0 0%}.ngs .row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.ngs .row-cols-xxl-1>*{flex:0 0 auto;width:100%}.ngs .row-cols-xxl-2>*{flex:0 0 auto;width:50%}.ngs .row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.ngs .row-cols-xxl-4>*{flex:0 0 auto;width:25%}.ngs .row-cols-xxl-5>*{flex:0 0 auto;width:20%}.ngs .row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.ngs .col-xxl-auto{flex:0 0 auto;width:auto}.ngs .col-xxl-1{flex:0 0 auto;width:6.25%}.ngs .col-xxl-2{flex:0 0 auto;width:12.5%}.ngs .col-xxl-3{flex:0 0 auto;width:18.75%}.ngs .col-xxl-4{flex:0 0 auto;width:25%}.ngs .col-xxl-5{flex:0 0 auto;width:31.25%}.ngs .col-xxl-6{flex:0 0 auto;width:37.5%}.ngs .col-xxl-7{flex:0 0 auto;width:43.75%}.ngs .col-xxl-8{flex:0 0 auto;width:50%}.ngs .col-xxl-9{flex:0 0 auto;width:56.25%}.ngs .col-xxl-10{flex:0 0 auto;width:62.5%}.ngs .col-xxl-11{flex:0 0 auto;width:68.75%}.ngs .col-xxl-12{flex:0 0 auto;width:75%}.ngs .col-xxl-13{flex:0 0 auto;width:81.25%}.ngs .col-xxl-14{flex:0 0 auto;width:87.5%}.ngs .col-xxl-15{flex:0 0 auto;width:93.75%}.ngs .col-xxl-16{flex:0 0 auto;width:100%}.ngs .offset-xxl-0{margin-left:0}.ngs .offset-xxl-1{margin-left:6.25%}.ngs .offset-xxl-2{margin-left:12.5%}.ngs .offset-xxl-3{margin-left:18.75%}.ngs .offset-xxl-4{margin-left:25%}.ngs .offset-xxl-5{margin-left:31.25%}.ngs .offset-xxl-6{margin-left:37.5%}.ngs .offset-xxl-7{margin-left:43.75%}.ngs .offset-xxl-8{margin-left:50%}.ngs .offset-xxl-9{margin-left:56.25%}.ngs .offset-xxl-10{margin-left:62.5%}.ngs .offset-xxl-11{margin-left:68.75%}.ngs .offset-xxl-12{margin-left:75%}.ngs .offset-xxl-13{margin-left:81.25%}.ngs .offset-xxl-14{margin-left:87.5%}.ngs .offset-xxl-15{margin-left:93.75%}.ngs .g-xxl-0,.ngs .gx-xxl-0{--ngsgutter-x: 0}.ngs .g-xxl-0,.ngs .gy-xxl-0{--ngsgutter-y: 0}.ngs .g-xxl-1,.ngs .gx-xxl-1{--ngsgutter-x: .25rem}.ngs .g-xxl-1,.ngs .gy-xxl-1{--ngsgutter-y: .25rem}.ngs .g-xxl-2,.ngs .gx-xxl-2{--ngsgutter-x: .5rem}.ngs .g-xxl-2,.ngs .gy-xxl-2{--ngsgutter-y: .5rem}.ngs .g-xxl-3,.ngs .gx-xxl-3{--ngsgutter-x: 1rem}.ngs .g-xxl-3,.ngs .gy-xxl-3{--ngsgutter-y: 1rem}.ngs .g-xxl-4,.ngs .gx-xxl-4{--ngsgutter-x: 1.5rem}.ngs .g-xxl-4,.ngs .gy-xxl-4{--ngsgutter-y: 1.5rem}.ngs .g-xxl-5,.ngs .gx-xxl-5{--ngsgutter-x: 3rem}.ngs .g-xxl-5,.ngs .gy-xxl-5{--ngsgutter-y: 3rem}}.ngs .d-inline{display:inline!important}.ngs .d-inline-block{display:inline-block!important}.ngs .d-block{display:block!important}.ngs .d-grid{display:grid!important}.ngs .d-inline-grid{display:inline-grid!important}.ngs .d-table{display:table!important}.ngs .d-table-row{display:table-row!important}.ngs .d-table-cell{display:table-cell!important}.ngs .d-flex{display:flex!important}.ngs .d-inline-flex{display:inline-flex!important}.ngs .d-none{display:none!important}.ngs .flex-fill{flex:1 1 auto!important}.ngs .flex-row{flex-direction:row!important}.ngs .flex-column{flex-direction:column!important}.ngs .flex-row-reverse{flex-direction:row-reverse!important}.ngs .flex-column-reverse{flex-direction:column-reverse!important}.ngs .flex-grow-0{flex-grow:0!important}.ngs .flex-grow-1{flex-grow:1!important}.ngs .flex-shrink-0{flex-shrink:0!important}.ngs .flex-shrink-1{flex-shrink:1!important}.ngs .flex-wrap{flex-wrap:wrap!important}.ngs .flex-nowrap{flex-wrap:nowrap!important}.ngs .flex-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-start{justify-content:flex-start!important}.ngs .justify-content-end{justify-content:flex-end!important}.ngs .justify-content-center{justify-content:center!important}.ngs .justify-content-between{justify-content:space-between!important}.ngs .justify-content-around{justify-content:space-around!important}.ngs .justify-content-evenly{justify-content:space-evenly!important}.ngs .align-items-start{align-items:flex-start!important}.ngs .align-items-end{align-items:flex-end!important}.ngs .align-items-center{align-items:center!important}.ngs .align-items-baseline{align-items:baseline!important}.ngs .align-items-stretch{align-items:stretch!important}.ngs .align-content-start{align-content:flex-start!important}.ngs .align-content-end{align-content:flex-end!important}.ngs .align-content-center{align-content:center!important}.ngs .align-content-between{align-content:space-between!important}.ngs .align-content-around{align-content:space-around!important}.ngs .align-content-stretch{align-content:stretch!important}.ngs .align-self-auto{align-self:auto!important}.ngs .align-self-start{align-self:flex-start!important}.ngs .align-self-end{align-self:flex-end!important}.ngs .align-self-center{align-self:center!important}.ngs .align-self-baseline{align-self:baseline!important}.ngs .align-self-stretch{align-self:stretch!important}.ngs .order-first{order:-1!important}.ngs .order-0{order:0!important}.ngs .order-1{order:1!important}.ngs .order-2{order:2!important}.ngs .order-3{order:3!important}.ngs .order-4{order:4!important}.ngs .order-5{order:5!important}.ngs .order-last{order:6!important}.ngs .m-0{margin:0!important}.ngs .m-1{margin:.25rem!important}.ngs .m-2{margin:.5rem!important}.ngs .m-3{margin:1rem!important}.ngs .m-4{margin:1.5rem!important}.ngs .m-5{margin:3rem!important}.ngs .m-auto{margin:auto!important}.ngs .mx-0{margin-right:0!important;margin-left:0!important}.ngs .mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-0{margin-top:0!important}.ngs .mt-1{margin-top:.25rem!important}.ngs .mt-2{margin-top:.5rem!important}.ngs .mt-3{margin-top:1rem!important}.ngs .mt-4{margin-top:1.5rem!important}.ngs .mt-5{margin-top:3rem!important}.ngs .mt-auto{margin-top:auto!important}.ngs .me-0{margin-right:0!important}.ngs .me-1{margin-right:.25rem!important}.ngs .me-2{margin-right:.5rem!important}.ngs .me-3{margin-right:1rem!important}.ngs .me-4{margin-right:1.5rem!important}.ngs .me-5{margin-right:3rem!important}.ngs .me-auto{margin-right:auto!important}.ngs .mb-0{margin-bottom:0!important}.ngs .mb-1{margin-bottom:.25rem!important}.ngs .mb-2{margin-bottom:.5rem!important}.ngs .mb-3{margin-bottom:1rem!important}.ngs .mb-4{margin-bottom:1.5rem!important}.ngs .mb-5{margin-bottom:3rem!important}.ngs .mb-auto{margin-bottom:auto!important}.ngs .ms-0{margin-left:0!important}.ngs .ms-1{margin-left:.25rem!important}.ngs .ms-2{margin-left:.5rem!important}.ngs .ms-3{margin-left:1rem!important}.ngs .ms-4{margin-left:1.5rem!important}.ngs .ms-5{margin-left:3rem!important}.ngs .ms-auto{margin-left:auto!important}.ngs .p-0{padding:0!important}.ngs .p-1{padding:.25rem!important}.ngs .p-2{padding:.5rem!important}.ngs .p-3{padding:1rem!important}.ngs .p-4{padding:1.5rem!important}.ngs .p-5{padding:3rem!important}.ngs .px-0{padding-right:0!important;padding-left:0!important}.ngs .px-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-0{padding-top:0!important}.ngs .pt-1{padding-top:.25rem!important}.ngs .pt-2{padding-top:.5rem!important}.ngs .pt-3{padding-top:1rem!important}.ngs .pt-4{padding-top:1.5rem!important}.ngs .pt-5{padding-top:3rem!important}.ngs .pe-0{padding-right:0!important}.ngs .pe-1{padding-right:.25rem!important}.ngs .pe-2{padding-right:.5rem!important}.ngs .pe-3{padding-right:1rem!important}.ngs .pe-4{padding-right:1.5rem!important}.ngs .pe-5{padding-right:3rem!important}.ngs .pb-0{padding-bottom:0!important}.ngs .pb-1{padding-bottom:.25rem!important}.ngs .pb-2{padding-bottom:.5rem!important}.ngs .pb-3{padding-bottom:1rem!important}.ngs .pb-4{padding-bottom:1.5rem!important}.ngs .pb-5{padding-bottom:3rem!important}.ngs .ps-0{padding-left:0!important}.ngs .ps-1{padding-left:.25rem!important}.ngs .ps-2{padding-left:.5rem!important}.ngs .ps-3{padding-left:1rem!important}.ngs .ps-4{padding-left:1.5rem!important}.ngs .ps-5{padding-left:3rem!important}@media(min-width:576px){.ngs .d-sm-inline{display:inline!important}.ngs .d-sm-inline-block{display:inline-block!important}.ngs .d-sm-block{display:block!important}.ngs .d-sm-grid{display:grid!important}.ngs .d-sm-inline-grid{display:inline-grid!important}.ngs .d-sm-table{display:table!important}.ngs .d-sm-table-row{display:table-row!important}.ngs .d-sm-table-cell{display:table-cell!important}.ngs .d-sm-flex{display:flex!important}.ngs .d-sm-inline-flex{display:inline-flex!important}.ngs .d-sm-none{display:none!important}.ngs .flex-sm-fill{flex:1 1 auto!important}.ngs .flex-sm-row{flex-direction:row!important}.ngs .flex-sm-column{flex-direction:column!important}.ngs .flex-sm-row-reverse{flex-direction:row-reverse!important}.ngs .flex-sm-column-reverse{flex-direction:column-reverse!important}.ngs .flex-sm-grow-0{flex-grow:0!important}.ngs .flex-sm-grow-1{flex-grow:1!important}.ngs .flex-sm-shrink-0{flex-shrink:0!important}.ngs .flex-sm-shrink-1{flex-shrink:1!important}.ngs .flex-sm-wrap{flex-wrap:wrap!important}.ngs .flex-sm-nowrap{flex-wrap:nowrap!important}.ngs .flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-sm-start{justify-content:flex-start!important}.ngs .justify-content-sm-end{justify-content:flex-end!important}.ngs .justify-content-sm-center{justify-content:center!important}.ngs .justify-content-sm-between{justify-content:space-between!important}.ngs .justify-content-sm-around{justify-content:space-around!important}.ngs .justify-content-sm-evenly{justify-content:space-evenly!important}.ngs .align-items-sm-start{align-items:flex-start!important}.ngs .align-items-sm-end{align-items:flex-end!important}.ngs .align-items-sm-center{align-items:center!important}.ngs .align-items-sm-baseline{align-items:baseline!important}.ngs .align-items-sm-stretch{align-items:stretch!important}.ngs .align-content-sm-start{align-content:flex-start!important}.ngs .align-content-sm-end{align-content:flex-end!important}.ngs .align-content-sm-center{align-content:center!important}.ngs .align-content-sm-between{align-content:space-between!important}.ngs .align-content-sm-around{align-content:space-around!important}.ngs .align-content-sm-stretch{align-content:stretch!important}.ngs .align-self-sm-auto{align-self:auto!important}.ngs .align-self-sm-start{align-self:flex-start!important}.ngs .align-self-sm-end{align-self:flex-end!important}.ngs .align-self-sm-center{align-self:center!important}.ngs .align-self-sm-baseline{align-self:baseline!important}.ngs .align-self-sm-stretch{align-self:stretch!important}.ngs .order-sm-first{order:-1!important}.ngs .order-sm-0{order:0!important}.ngs .order-sm-1{order:1!important}.ngs .order-sm-2{order:2!important}.ngs .order-sm-3{order:3!important}.ngs .order-sm-4{order:4!important}.ngs .order-sm-5{order:5!important}.ngs .order-sm-last{order:6!important}.ngs .m-sm-0{margin:0!important}.ngs .m-sm-1{margin:.25rem!important}.ngs .m-sm-2{margin:.5rem!important}.ngs .m-sm-3{margin:1rem!important}.ngs .m-sm-4{margin:1.5rem!important}.ngs .m-sm-5{margin:3rem!important}.ngs .m-sm-auto{margin:auto!important}.ngs .mx-sm-0{margin-right:0!important;margin-left:0!important}.ngs .mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-sm-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-sm-0{margin-top:0!important}.ngs .mt-sm-1{margin-top:.25rem!important}.ngs .mt-sm-2{margin-top:.5rem!important}.ngs .mt-sm-3{margin-top:1rem!important}.ngs .mt-sm-4{margin-top:1.5rem!important}.ngs .mt-sm-5{margin-top:3rem!important}.ngs .mt-sm-auto{margin-top:auto!important}.ngs .me-sm-0{margin-right:0!important}.ngs .me-sm-1{margin-right:.25rem!important}.ngs .me-sm-2{margin-right:.5rem!important}.ngs .me-sm-3{margin-right:1rem!important}.ngs .me-sm-4{margin-right:1.5rem!important}.ngs .me-sm-5{margin-right:3rem!important}.ngs .me-sm-auto{margin-right:auto!important}.ngs .mb-sm-0{margin-bottom:0!important}.ngs .mb-sm-1{margin-bottom:.25rem!important}.ngs .mb-sm-2{margin-bottom:.5rem!important}.ngs .mb-sm-3{margin-bottom:1rem!important}.ngs .mb-sm-4{margin-bottom:1.5rem!important}.ngs .mb-sm-5{margin-bottom:3rem!important}.ngs .mb-sm-auto{margin-bottom:auto!important}.ngs .ms-sm-0{margin-left:0!important}.ngs .ms-sm-1{margin-left:.25rem!important}.ngs .ms-sm-2{margin-left:.5rem!important}.ngs .ms-sm-3{margin-left:1rem!important}.ngs .ms-sm-4{margin-left:1.5rem!important}.ngs .ms-sm-5{margin-left:3rem!important}.ngs .ms-sm-auto{margin-left:auto!important}.ngs .p-sm-0{padding:0!important}.ngs .p-sm-1{padding:.25rem!important}.ngs .p-sm-2{padding:.5rem!important}.ngs .p-sm-3{padding:1rem!important}.ngs .p-sm-4{padding:1.5rem!important}.ngs .p-sm-5{padding:3rem!important}.ngs .px-sm-0{padding-right:0!important;padding-left:0!important}.ngs .px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-sm-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-sm-0{padding-top:0!important}.ngs .pt-sm-1{padding-top:.25rem!important}.ngs .pt-sm-2{padding-top:.5rem!important}.ngs .pt-sm-3{padding-top:1rem!important}.ngs .pt-sm-4{padding-top:1.5rem!important}.ngs .pt-sm-5{padding-top:3rem!important}.ngs .pe-sm-0{padding-right:0!important}.ngs .pe-sm-1{padding-right:.25rem!important}.ngs .pe-sm-2{padding-right:.5rem!important}.ngs .pe-sm-3{padding-right:1rem!important}.ngs .pe-sm-4{padding-right:1.5rem!important}.ngs .pe-sm-5{padding-right:3rem!important}.ngs .pb-sm-0{padding-bottom:0!important}.ngs .pb-sm-1{padding-bottom:.25rem!important}.ngs .pb-sm-2{padding-bottom:.5rem!important}.ngs .pb-sm-3{padding-bottom:1rem!important}.ngs .pb-sm-4{padding-bottom:1.5rem!important}.ngs .pb-sm-5{padding-bottom:3rem!important}.ngs .ps-sm-0{padding-left:0!important}.ngs .ps-sm-1{padding-left:.25rem!important}.ngs .ps-sm-2{padding-left:.5rem!important}.ngs .ps-sm-3{padding-left:1rem!important}.ngs .ps-sm-4{padding-left:1.5rem!important}.ngs .ps-sm-5{padding-left:3rem!important}}@media(min-width:768px){.ngs .d-md-inline{display:inline!important}.ngs .d-md-inline-block{display:inline-block!important}.ngs .d-md-block{display:block!important}.ngs .d-md-grid{display:grid!important}.ngs .d-md-inline-grid{display:inline-grid!important}.ngs .d-md-table{display:table!important}.ngs .d-md-table-row{display:table-row!important}.ngs .d-md-table-cell{display:table-cell!important}.ngs .d-md-flex{display:flex!important}.ngs .d-md-inline-flex{display:inline-flex!important}.ngs .d-md-none{display:none!important}.ngs .flex-md-fill{flex:1 1 auto!important}.ngs .flex-md-row{flex-direction:row!important}.ngs .flex-md-column{flex-direction:column!important}.ngs .flex-md-row-reverse{flex-direction:row-reverse!important}.ngs .flex-md-column-reverse{flex-direction:column-reverse!important}.ngs .flex-md-grow-0{flex-grow:0!important}.ngs .flex-md-grow-1{flex-grow:1!important}.ngs .flex-md-shrink-0{flex-shrink:0!important}.ngs .flex-md-shrink-1{flex-shrink:1!important}.ngs .flex-md-wrap{flex-wrap:wrap!important}.ngs .flex-md-nowrap{flex-wrap:nowrap!important}.ngs .flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-md-start{justify-content:flex-start!important}.ngs .justify-content-md-end{justify-content:flex-end!important}.ngs .justify-content-md-center{justify-content:center!important}.ngs .justify-content-md-between{justify-content:space-between!important}.ngs .justify-content-md-around{justify-content:space-around!important}.ngs .justify-content-md-evenly{justify-content:space-evenly!important}.ngs .align-items-md-start{align-items:flex-start!important}.ngs .align-items-md-end{align-items:flex-end!important}.ngs .align-items-md-center{align-items:center!important}.ngs .align-items-md-baseline{align-items:baseline!important}.ngs .align-items-md-stretch{align-items:stretch!important}.ngs .align-content-md-start{align-content:flex-start!important}.ngs .align-content-md-end{align-content:flex-end!important}.ngs .align-content-md-center{align-content:center!important}.ngs .align-content-md-between{align-content:space-between!important}.ngs .align-content-md-around{align-content:space-around!important}.ngs .align-content-md-stretch{align-content:stretch!important}.ngs .align-self-md-auto{align-self:auto!important}.ngs .align-self-md-start{align-self:flex-start!important}.ngs .align-self-md-end{align-self:flex-end!important}.ngs .align-self-md-center{align-self:center!important}.ngs .align-self-md-baseline{align-self:baseline!important}.ngs .align-self-md-stretch{align-self:stretch!important}.ngs .order-md-first{order:-1!important}.ngs .order-md-0{order:0!important}.ngs .order-md-1{order:1!important}.ngs .order-md-2{order:2!important}.ngs .order-md-3{order:3!important}.ngs .order-md-4{order:4!important}.ngs .order-md-5{order:5!important}.ngs .order-md-last{order:6!important}.ngs .m-md-0{margin:0!important}.ngs .m-md-1{margin:.25rem!important}.ngs .m-md-2{margin:.5rem!important}.ngs .m-md-3{margin:1rem!important}.ngs .m-md-4{margin:1.5rem!important}.ngs .m-md-5{margin:3rem!important}.ngs .m-md-auto{margin:auto!important}.ngs .mx-md-0{margin-right:0!important;margin-left:0!important}.ngs .mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-md-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-md-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-md-0{margin-top:0!important}.ngs .mt-md-1{margin-top:.25rem!important}.ngs .mt-md-2{margin-top:.5rem!important}.ngs .mt-md-3{margin-top:1rem!important}.ngs .mt-md-4{margin-top:1.5rem!important}.ngs .mt-md-5{margin-top:3rem!important}.ngs .mt-md-auto{margin-top:auto!important}.ngs .me-md-0{margin-right:0!important}.ngs .me-md-1{margin-right:.25rem!important}.ngs .me-md-2{margin-right:.5rem!important}.ngs .me-md-3{margin-right:1rem!important}.ngs .me-md-4{margin-right:1.5rem!important}.ngs .me-md-5{margin-right:3rem!important}.ngs .me-md-auto{margin-right:auto!important}.ngs .mb-md-0{margin-bottom:0!important}.ngs .mb-md-1{margin-bottom:.25rem!important}.ngs .mb-md-2{margin-bottom:.5rem!important}.ngs .mb-md-3{margin-bottom:1rem!important}.ngs .mb-md-4{margin-bottom:1.5rem!important}.ngs .mb-md-5{margin-bottom:3rem!important}.ngs .mb-md-auto{margin-bottom:auto!important}.ngs .ms-md-0{margin-left:0!important}.ngs .ms-md-1{margin-left:.25rem!important}.ngs .ms-md-2{margin-left:.5rem!important}.ngs .ms-md-3{margin-left:1rem!important}.ngs .ms-md-4{margin-left:1.5rem!important}.ngs .ms-md-5{margin-left:3rem!important}.ngs .ms-md-auto{margin-left:auto!important}.ngs .p-md-0{padding:0!important}.ngs .p-md-1{padding:.25rem!important}.ngs .p-md-2{padding:.5rem!important}.ngs .p-md-3{padding:1rem!important}.ngs .p-md-4{padding:1.5rem!important}.ngs .p-md-5{padding:3rem!important}.ngs .px-md-0{padding-right:0!important;padding-left:0!important}.ngs .px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-md-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-md-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-md-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-md-0{padding-top:0!important}.ngs .pt-md-1{padding-top:.25rem!important}.ngs .pt-md-2{padding-top:.5rem!important}.ngs .pt-md-3{padding-top:1rem!important}.ngs .pt-md-4{padding-top:1.5rem!important}.ngs .pt-md-5{padding-top:3rem!important}.ngs .pe-md-0{padding-right:0!important}.ngs .pe-md-1{padding-right:.25rem!important}.ngs .pe-md-2{padding-right:.5rem!important}.ngs .pe-md-3{padding-right:1rem!important}.ngs .pe-md-4{padding-right:1.5rem!important}.ngs .pe-md-5{padding-right:3rem!important}.ngs .pb-md-0{padding-bottom:0!important}.ngs .pb-md-1{padding-bottom:.25rem!important}.ngs .pb-md-2{padding-bottom:.5rem!important}.ngs .pb-md-3{padding-bottom:1rem!important}.ngs .pb-md-4{padding-bottom:1.5rem!important}.ngs .pb-md-5{padding-bottom:3rem!important}.ngs .ps-md-0{padding-left:0!important}.ngs .ps-md-1{padding-left:.25rem!important}.ngs .ps-md-2{padding-left:.5rem!important}.ngs .ps-md-3{padding-left:1rem!important}.ngs .ps-md-4{padding-left:1.5rem!important}.ngs .ps-md-5{padding-left:3rem!important}}@media(min-width:992px){.ngs .d-lg-inline{display:inline!important}.ngs .d-lg-inline-block{display:inline-block!important}.ngs .d-lg-block{display:block!important}.ngs .d-lg-grid{display:grid!important}.ngs .d-lg-inline-grid{display:inline-grid!important}.ngs .d-lg-table{display:table!important}.ngs .d-lg-table-row{display:table-row!important}.ngs .d-lg-table-cell{display:table-cell!important}.ngs .d-lg-flex{display:flex!important}.ngs .d-lg-inline-flex{display:inline-flex!important}.ngs .d-lg-none{display:none!important}.ngs .flex-lg-fill{flex:1 1 auto!important}.ngs .flex-lg-row{flex-direction:row!important}.ngs .flex-lg-column{flex-direction:column!important}.ngs .flex-lg-row-reverse{flex-direction:row-reverse!important}.ngs .flex-lg-column-reverse{flex-direction:column-reverse!important}.ngs .flex-lg-grow-0{flex-grow:0!important}.ngs .flex-lg-grow-1{flex-grow:1!important}.ngs .flex-lg-shrink-0{flex-shrink:0!important}.ngs .flex-lg-shrink-1{flex-shrink:1!important}.ngs .flex-lg-wrap{flex-wrap:wrap!important}.ngs .flex-lg-nowrap{flex-wrap:nowrap!important}.ngs .flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-lg-start{justify-content:flex-start!important}.ngs .justify-content-lg-end{justify-content:flex-end!important}.ngs .justify-content-lg-center{justify-content:center!important}.ngs .justify-content-lg-between{justify-content:space-between!important}.ngs .justify-content-lg-around{justify-content:space-around!important}.ngs .justify-content-lg-evenly{justify-content:space-evenly!important}.ngs .align-items-lg-start{align-items:flex-start!important}.ngs .align-items-lg-end{align-items:flex-end!important}.ngs .align-items-lg-center{align-items:center!important}.ngs .align-items-lg-baseline{align-items:baseline!important}.ngs .align-items-lg-stretch{align-items:stretch!important}.ngs .align-content-lg-start{align-content:flex-start!important}.ngs .align-content-lg-end{align-content:flex-end!important}.ngs .align-content-lg-center{align-content:center!important}.ngs .align-content-lg-between{align-content:space-between!important}.ngs .align-content-lg-around{align-content:space-around!important}.ngs .align-content-lg-stretch{align-content:stretch!important}.ngs .align-self-lg-auto{align-self:auto!important}.ngs .align-self-lg-start{align-self:flex-start!important}.ngs .align-self-lg-end{align-self:flex-end!important}.ngs .align-self-lg-center{align-self:center!important}.ngs .align-self-lg-baseline{align-self:baseline!important}.ngs .align-self-lg-stretch{align-self:stretch!important}.ngs .order-lg-first{order:-1!important}.ngs .order-lg-0{order:0!important}.ngs .order-lg-1{order:1!important}.ngs .order-lg-2{order:2!important}.ngs .order-lg-3{order:3!important}.ngs .order-lg-4{order:4!important}.ngs .order-lg-5{order:5!important}.ngs .order-lg-last{order:6!important}.ngs .m-lg-0{margin:0!important}.ngs .m-lg-1{margin:.25rem!important}.ngs .m-lg-2{margin:.5rem!important}.ngs .m-lg-3{margin:1rem!important}.ngs .m-lg-4{margin:1.5rem!important}.ngs .m-lg-5{margin:3rem!important}.ngs .m-lg-auto{margin:auto!important}.ngs .mx-lg-0{margin-right:0!important;margin-left:0!important}.ngs .mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-lg-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-lg-0{margin-top:0!important}.ngs .mt-lg-1{margin-top:.25rem!important}.ngs .mt-lg-2{margin-top:.5rem!important}.ngs .mt-lg-3{margin-top:1rem!important}.ngs .mt-lg-4{margin-top:1.5rem!important}.ngs .mt-lg-5{margin-top:3rem!important}.ngs .mt-lg-auto{margin-top:auto!important}.ngs .me-lg-0{margin-right:0!important}.ngs .me-lg-1{margin-right:.25rem!important}.ngs .me-lg-2{margin-right:.5rem!important}.ngs .me-lg-3{margin-right:1rem!important}.ngs .me-lg-4{margin-right:1.5rem!important}.ngs .me-lg-5{margin-right:3rem!important}.ngs .me-lg-auto{margin-right:auto!important}.ngs .mb-lg-0{margin-bottom:0!important}.ngs .mb-lg-1{margin-bottom:.25rem!important}.ngs .mb-lg-2{margin-bottom:.5rem!important}.ngs .mb-lg-3{margin-bottom:1rem!important}.ngs .mb-lg-4{margin-bottom:1.5rem!important}.ngs .mb-lg-5{margin-bottom:3rem!important}.ngs .mb-lg-auto{margin-bottom:auto!important}.ngs .ms-lg-0{margin-left:0!important}.ngs .ms-lg-1{margin-left:.25rem!important}.ngs .ms-lg-2{margin-left:.5rem!important}.ngs .ms-lg-3{margin-left:1rem!important}.ngs .ms-lg-4{margin-left:1.5rem!important}.ngs .ms-lg-5{margin-left:3rem!important}.ngs .ms-lg-auto{margin-left:auto!important}.ngs .p-lg-0{padding:0!important}.ngs .p-lg-1{padding:.25rem!important}.ngs .p-lg-2{padding:.5rem!important}.ngs .p-lg-3{padding:1rem!important}.ngs .p-lg-4{padding:1.5rem!important}.ngs .p-lg-5{padding:3rem!important}.ngs .px-lg-0{padding-right:0!important;padding-left:0!important}.ngs .px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-lg-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-lg-0{padding-top:0!important}.ngs .pt-lg-1{padding-top:.25rem!important}.ngs .pt-lg-2{padding-top:.5rem!important}.ngs .pt-lg-3{padding-top:1rem!important}.ngs .pt-lg-4{padding-top:1.5rem!important}.ngs .pt-lg-5{padding-top:3rem!important}.ngs .pe-lg-0{padding-right:0!important}.ngs .pe-lg-1{padding-right:.25rem!important}.ngs .pe-lg-2{padding-right:.5rem!important}.ngs .pe-lg-3{padding-right:1rem!important}.ngs .pe-lg-4{padding-right:1.5rem!important}.ngs .pe-lg-5{padding-right:3rem!important}.ngs .pb-lg-0{padding-bottom:0!important}.ngs .pb-lg-1{padding-bottom:.25rem!important}.ngs .pb-lg-2{padding-bottom:.5rem!important}.ngs .pb-lg-3{padding-bottom:1rem!important}.ngs .pb-lg-4{padding-bottom:1.5rem!important}.ngs .pb-lg-5{padding-bottom:3rem!important}.ngs .ps-lg-0{padding-left:0!important}.ngs .ps-lg-1{padding-left:.25rem!important}.ngs .ps-lg-2{padding-left:.5rem!important}.ngs .ps-lg-3{padding-left:1rem!important}.ngs .ps-lg-4{padding-left:1.5rem!important}.ngs .ps-lg-5{padding-left:3rem!important}}@media(min-width:1200px){.ngs .d-xl-inline{display:inline!important}.ngs .d-xl-inline-block{display:inline-block!important}.ngs .d-xl-block{display:block!important}.ngs .d-xl-grid{display:grid!important}.ngs .d-xl-inline-grid{display:inline-grid!important}.ngs .d-xl-table{display:table!important}.ngs .d-xl-table-row{display:table-row!important}.ngs .d-xl-table-cell{display:table-cell!important}.ngs .d-xl-flex{display:flex!important}.ngs .d-xl-inline-flex{display:inline-flex!important}.ngs .d-xl-none{display:none!important}.ngs .flex-xl-fill{flex:1 1 auto!important}.ngs .flex-xl-row{flex-direction:row!important}.ngs .flex-xl-column{flex-direction:column!important}.ngs .flex-xl-row-reverse{flex-direction:row-reverse!important}.ngs .flex-xl-column-reverse{flex-direction:column-reverse!important}.ngs .flex-xl-grow-0{flex-grow:0!important}.ngs .flex-xl-grow-1{flex-grow:1!important}.ngs .flex-xl-shrink-0{flex-shrink:0!important}.ngs .flex-xl-shrink-1{flex-shrink:1!important}.ngs .flex-xl-wrap{flex-wrap:wrap!important}.ngs .flex-xl-nowrap{flex-wrap:nowrap!important}.ngs .flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-xl-start{justify-content:flex-start!important}.ngs .justify-content-xl-end{justify-content:flex-end!important}.ngs .justify-content-xl-center{justify-content:center!important}.ngs .justify-content-xl-between{justify-content:space-between!important}.ngs .justify-content-xl-around{justify-content:space-around!important}.ngs .justify-content-xl-evenly{justify-content:space-evenly!important}.ngs .align-items-xl-start{align-items:flex-start!important}.ngs .align-items-xl-end{align-items:flex-end!important}.ngs .align-items-xl-center{align-items:center!important}.ngs .align-items-xl-baseline{align-items:baseline!important}.ngs .align-items-xl-stretch{align-items:stretch!important}.ngs .align-content-xl-start{align-content:flex-start!important}.ngs .align-content-xl-end{align-content:flex-end!important}.ngs .align-content-xl-center{align-content:center!important}.ngs .align-content-xl-between{align-content:space-between!important}.ngs .align-content-xl-around{align-content:space-around!important}.ngs .align-content-xl-stretch{align-content:stretch!important}.ngs .align-self-xl-auto{align-self:auto!important}.ngs .align-self-xl-start{align-self:flex-start!important}.ngs .align-self-xl-end{align-self:flex-end!important}.ngs .align-self-xl-center{align-self:center!important}.ngs .align-self-xl-baseline{align-self:baseline!important}.ngs .align-self-xl-stretch{align-self:stretch!important}.ngs .order-xl-first{order:-1!important}.ngs .order-xl-0{order:0!important}.ngs .order-xl-1{order:1!important}.ngs .order-xl-2{order:2!important}.ngs .order-xl-3{order:3!important}.ngs .order-xl-4{order:4!important}.ngs .order-xl-5{order:5!important}.ngs .order-xl-last{order:6!important}.ngs .m-xl-0{margin:0!important}.ngs .m-xl-1{margin:.25rem!important}.ngs .m-xl-2{margin:.5rem!important}.ngs .m-xl-3{margin:1rem!important}.ngs .m-xl-4{margin:1.5rem!important}.ngs .m-xl-5{margin:3rem!important}.ngs .m-xl-auto{margin:auto!important}.ngs .mx-xl-0{margin-right:0!important;margin-left:0!important}.ngs .mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-xl-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-xl-0{margin-top:0!important}.ngs .mt-xl-1{margin-top:.25rem!important}.ngs .mt-xl-2{margin-top:.5rem!important}.ngs .mt-xl-3{margin-top:1rem!important}.ngs .mt-xl-4{margin-top:1.5rem!important}.ngs .mt-xl-5{margin-top:3rem!important}.ngs .mt-xl-auto{margin-top:auto!important}.ngs .me-xl-0{margin-right:0!important}.ngs .me-xl-1{margin-right:.25rem!important}.ngs .me-xl-2{margin-right:.5rem!important}.ngs .me-xl-3{margin-right:1rem!important}.ngs .me-xl-4{margin-right:1.5rem!important}.ngs .me-xl-5{margin-right:3rem!important}.ngs .me-xl-auto{margin-right:auto!important}.ngs .mb-xl-0{margin-bottom:0!important}.ngs .mb-xl-1{margin-bottom:.25rem!important}.ngs .mb-xl-2{margin-bottom:.5rem!important}.ngs .mb-xl-3{margin-bottom:1rem!important}.ngs .mb-xl-4{margin-bottom:1.5rem!important}.ngs .mb-xl-5{margin-bottom:3rem!important}.ngs .mb-xl-auto{margin-bottom:auto!important}.ngs .ms-xl-0{margin-left:0!important}.ngs .ms-xl-1{margin-left:.25rem!important}.ngs .ms-xl-2{margin-left:.5rem!important}.ngs .ms-xl-3{margin-left:1rem!important}.ngs .ms-xl-4{margin-left:1.5rem!important}.ngs .ms-xl-5{margin-left:3rem!important}.ngs .ms-xl-auto{margin-left:auto!important}.ngs .p-xl-0{padding:0!important}.ngs .p-xl-1{padding:.25rem!important}.ngs .p-xl-2{padding:.5rem!important}.ngs .p-xl-3{padding:1rem!important}.ngs .p-xl-4{padding:1.5rem!important}.ngs .p-xl-5{padding:3rem!important}.ngs .px-xl-0{padding-right:0!important;padding-left:0!important}.ngs .px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-xl-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-xl-0{padding-top:0!important}.ngs .pt-xl-1{padding-top:.25rem!important}.ngs .pt-xl-2{padding-top:.5rem!important}.ngs .pt-xl-3{padding-top:1rem!important}.ngs .pt-xl-4{padding-top:1.5rem!important}.ngs .pt-xl-5{padding-top:3rem!important}.ngs .pe-xl-0{padding-right:0!important}.ngs .pe-xl-1{padding-right:.25rem!important}.ngs .pe-xl-2{padding-right:.5rem!important}.ngs .pe-xl-3{padding-right:1rem!important}.ngs .pe-xl-4{padding-right:1.5rem!important}.ngs .pe-xl-5{padding-right:3rem!important}.ngs .pb-xl-0{padding-bottom:0!important}.ngs .pb-xl-1{padding-bottom:.25rem!important}.ngs .pb-xl-2{padding-bottom:.5rem!important}.ngs .pb-xl-3{padding-bottom:1rem!important}.ngs .pb-xl-4{padding-bottom:1.5rem!important}.ngs .pb-xl-5{padding-bottom:3rem!important}.ngs .ps-xl-0{padding-left:0!important}.ngs .ps-xl-1{padding-left:.25rem!important}.ngs .ps-xl-2{padding-left:.5rem!important}.ngs .ps-xl-3{padding-left:1rem!important}.ngs .ps-xl-4{padding-left:1.5rem!important}.ngs .ps-xl-5{padding-left:3rem!important}}@media(min-width:1400px){.ngs .d-xxl-inline{display:inline!important}.ngs .d-xxl-inline-block{display:inline-block!important}.ngs .d-xxl-block{display:block!important}.ngs .d-xxl-grid{display:grid!important}.ngs .d-xxl-inline-grid{display:inline-grid!important}.ngs .d-xxl-table{display:table!important}.ngs .d-xxl-table-row{display:table-row!important}.ngs .d-xxl-table-cell{display:table-cell!important}.ngs .d-xxl-flex{display:flex!important}.ngs .d-xxl-inline-flex{display:inline-flex!important}.ngs .d-xxl-none{display:none!important}.ngs .flex-xxl-fill{flex:1 1 auto!important}.ngs .flex-xxl-row{flex-direction:row!important}.ngs .flex-xxl-column{flex-direction:column!important}.ngs .flex-xxl-row-reverse{flex-direction:row-reverse!important}.ngs .flex-xxl-column-reverse{flex-direction:column-reverse!important}.ngs .flex-xxl-grow-0{flex-grow:0!important}.ngs .flex-xxl-grow-1{flex-grow:1!important}.ngs .flex-xxl-shrink-0{flex-shrink:0!important}.ngs .flex-xxl-shrink-1{flex-shrink:1!important}.ngs .flex-xxl-wrap{flex-wrap:wrap!important}.ngs .flex-xxl-nowrap{flex-wrap:nowrap!important}.ngs .flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.ngs .justify-content-xxl-start{justify-content:flex-start!important}.ngs .justify-content-xxl-end{justify-content:flex-end!important}.ngs .justify-content-xxl-center{justify-content:center!important}.ngs .justify-content-xxl-between{justify-content:space-between!important}.ngs .justify-content-xxl-around{justify-content:space-around!important}.ngs .justify-content-xxl-evenly{justify-content:space-evenly!important}.ngs .align-items-xxl-start{align-items:flex-start!important}.ngs .align-items-xxl-end{align-items:flex-end!important}.ngs .align-items-xxl-center{align-items:center!important}.ngs .align-items-xxl-baseline{align-items:baseline!important}.ngs .align-items-xxl-stretch{align-items:stretch!important}.ngs .align-content-xxl-start{align-content:flex-start!important}.ngs .align-content-xxl-end{align-content:flex-end!important}.ngs .align-content-xxl-center{align-content:center!important}.ngs .align-content-xxl-between{align-content:space-between!important}.ngs .align-content-xxl-around{align-content:space-around!important}.ngs .align-content-xxl-stretch{align-content:stretch!important}.ngs .align-self-xxl-auto{align-self:auto!important}.ngs .align-self-xxl-start{align-self:flex-start!important}.ngs .align-self-xxl-end{align-self:flex-end!important}.ngs .align-self-xxl-center{align-self:center!important}.ngs .align-self-xxl-baseline{align-self:baseline!important}.ngs .align-self-xxl-stretch{align-self:stretch!important}.ngs .order-xxl-first{order:-1!important}.ngs .order-xxl-0{order:0!important}.ngs .order-xxl-1{order:1!important}.ngs .order-xxl-2{order:2!important}.ngs .order-xxl-3{order:3!important}.ngs .order-xxl-4{order:4!important}.ngs .order-xxl-5{order:5!important}.ngs .order-xxl-last{order:6!important}.ngs .m-xxl-0{margin:0!important}.ngs .m-xxl-1{margin:.25rem!important}.ngs .m-xxl-2{margin:.5rem!important}.ngs .m-xxl-3{margin:1rem!important}.ngs .m-xxl-4{margin:1.5rem!important}.ngs .m-xxl-5{margin:3rem!important}.ngs .m-xxl-auto{margin:auto!important}.ngs .mx-xxl-0{margin-right:0!important;margin-left:0!important}.ngs .mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.ngs .mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.ngs .mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.ngs .mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.ngs .mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.ngs .mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.ngs .my-xxl-0{margin-top:0!important;margin-bottom:0!important}.ngs .my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ngs .my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ngs .my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.ngs .my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ngs .my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.ngs .my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.ngs .mt-xxl-0{margin-top:0!important}.ngs .mt-xxl-1{margin-top:.25rem!important}.ngs .mt-xxl-2{margin-top:.5rem!important}.ngs .mt-xxl-3{margin-top:1rem!important}.ngs .mt-xxl-4{margin-top:1.5rem!important}.ngs .mt-xxl-5{margin-top:3rem!important}.ngs .mt-xxl-auto{margin-top:auto!important}.ngs .me-xxl-0{margin-right:0!important}.ngs .me-xxl-1{margin-right:.25rem!important}.ngs .me-xxl-2{margin-right:.5rem!important}.ngs .me-xxl-3{margin-right:1rem!important}.ngs .me-xxl-4{margin-right:1.5rem!important}.ngs .me-xxl-5{margin-right:3rem!important}.ngs .me-xxl-auto{margin-right:auto!important}.ngs .mb-xxl-0{margin-bottom:0!important}.ngs .mb-xxl-1{margin-bottom:.25rem!important}.ngs .mb-xxl-2{margin-bottom:.5rem!important}.ngs .mb-xxl-3{margin-bottom:1rem!important}.ngs .mb-xxl-4{margin-bottom:1.5rem!important}.ngs .mb-xxl-5{margin-bottom:3rem!important}.ngs .mb-xxl-auto{margin-bottom:auto!important}.ngs .ms-xxl-0{margin-left:0!important}.ngs .ms-xxl-1{margin-left:.25rem!important}.ngs .ms-xxl-2{margin-left:.5rem!important}.ngs .ms-xxl-3{margin-left:1rem!important}.ngs .ms-xxl-4{margin-left:1.5rem!important}.ngs .ms-xxl-5{margin-left:3rem!important}.ngs .ms-xxl-auto{margin-left:auto!important}.ngs .p-xxl-0{padding:0!important}.ngs .p-xxl-1{padding:.25rem!important}.ngs .p-xxl-2{padding:.5rem!important}.ngs .p-xxl-3{padding:1rem!important}.ngs .p-xxl-4{padding:1.5rem!important}.ngs .p-xxl-5{padding:3rem!important}.ngs .px-xxl-0{padding-right:0!important;padding-left:0!important}.ngs .px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.ngs .px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.ngs .px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.ngs .px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.ngs .px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.ngs .py-xxl-0{padding-top:0!important;padding-bottom:0!important}.ngs .py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ngs .py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ngs .py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.ngs .py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ngs .py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.ngs .pt-xxl-0{padding-top:0!important}.ngs .pt-xxl-1{padding-top:.25rem!important}.ngs .pt-xxl-2{padding-top:.5rem!important}.ngs .pt-xxl-3{padding-top:1rem!important}.ngs .pt-xxl-4{padding-top:1.5rem!important}.ngs .pt-xxl-5{padding-top:3rem!important}.ngs .pe-xxl-0{padding-right:0!important}.ngs .pe-xxl-1{padding-right:.25rem!important}.ngs .pe-xxl-2{padding-right:.5rem!important}.ngs .pe-xxl-3{padding-right:1rem!important}.ngs .pe-xxl-4{padding-right:1.5rem!important}.ngs .pe-xxl-5{padding-right:3rem!important}.ngs .pb-xxl-0{padding-bottom:0!important}.ngs .pb-xxl-1{padding-bottom:.25rem!important}.ngs .pb-xxl-2{padding-bottom:.5rem!important}.ngs .pb-xxl-3{padding-bottom:1rem!important}.ngs .pb-xxl-4{padding-bottom:1.5rem!important}.ngs .pb-xxl-5{padding-bottom:3rem!important}.ngs .ps-xxl-0{padding-left:0!important}.ngs .ps-xxl-1{padding-left:.25rem!important}.ngs .ps-xxl-2{padding-left:.5rem!important}.ngs .ps-xxl-3{padding-left:1rem!important}.ngs .ps-xxl-4{padding-left:1.5rem!important}.ngs .ps-xxl-5{padding-left:3rem!important}}@media print{.ngs .d-print-inline{display:inline!important}.ngs .d-print-inline-block{display:inline-block!important}.ngs .d-print-block{display:block!important}.ngs .d-print-grid{display:grid!important}.ngs .d-print-inline-grid{display:inline-grid!important}.ngs .d-print-table{display:table!important}.ngs .d-print-table-row{display:table-row!important}.ngs .d-print-table-cell{display:table-cell!important}.ngs .d-print-flex{display:flex!important}.ngs .d-print-inline-flex{display:inline-flex!important}.ngs .d-print-none{display:none!important}}\n", ".df-scroll-anchor{scroll-margin-top:var(--df-scroll-offset, 0px)}.prevSection{padding:5px 10px;float:left;margin-left:0}.nextSection{padding:5px 10px;float:right;margin-left:0}.separator-horizontal{width:1px;height:100%;background-color:#d6cece;margin:0 auto}.content-element-form .section-navs{width:100%;background-color:#f2f6fc;margin-left:0;margin-right:0;padding:10px;flex-direction:row-reverse}.sirio-toast{width:auto;min-width:17rem;max-width:41rem}.form-title{margin-bottom:15px}.sirio-stepper-item:is(.is-success,.is-warning,.is-error) .sirio-stepper-title{font-weight:600;text-decoration:underline!important}@media(max-width:991px){.content-element-form{width:100%!important}}.feel-editor-container.feel-editor-standalone{border:1px solid #454d56!important;border-radius:4px}\n"]
 		}]
 	}],
 	ctorParameters: () => [
@@ -11672,6 +13049,7 @@ i0.ɵɵngDeclareClassMetadata({
 		browserNavigation: [{ type: Input }],
 		queryParamName: [{ type: Input }],
 		navSize: [{ type: Input }],
+		scrollOnNavigate: [{ type: Input }],
 		groupMode: [{ type: Input }],
 		updateMode: [{ type: Input }],
 		valueChange: [{ type: Output }],
@@ -11681,6 +13059,10 @@ i0.ɵɵngDeclareClassMetadata({
 			type: ViewChild,
 			args: ["default"]
 		}],
+		rootDiv: [{
+			type: ViewChild,
+			args: ["root"]
+		}],
 		activeNav: [{ type: Input }]
 	}
 });
@@ -13078,6 +14460,19 @@ var form_default = [
 			"type": "number"
 		}]
 	},
+	{
+		"name": "resize",
+		"type": "function",
+		"detail": "Resizes a collection",
+		"info": "Resizes the array-like control identified by the given path to the specified number of items: items are removed from the end or new empty items are added at the end.\n\nOnly the collections of the form (dynamic lists) can be resized: returns false for other controls, a missing path or an invalid size (not an integer greater than or equal to 0).\n\n---\n\n### Function signature\n\n```\nresize(path: Path, newSize: number): boolean\n```\n\n---\n\n### Examples\n\n```feel\nresize(\"items\", 3)\n\nresize(\"items\", 0)\n```",
+		"params": [{
+			"name": "path",
+			"type": "Path"
+		}, {
+			"name": "newSize",
+			"type": "number"
+		}]
+	},
 	{
 		"name": "toControl",
 		"type": "function",
@@ -13259,6 +14654,6 @@ const builtIn = [
 		]
 	}
 ];
-export { AccordionControl, ButtonControl, ChartControl, CheckBoxControl, CheckListControl, ContainerControl, Control, 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 };
+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 };
 
 //# sourceMappingURL=wemake4u-form-player.mjs.map