@wemake4u/form-player-se 1.0.46 → 1.0.48

package/fesm2022/wemake4u-form-player-se.mjs

@@ -1,25 +1,26 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, Optional, SkipSelf, Host, Input, ContentChild, forwardRef, ContentChildren, EventEmitter, ViewEncapsulation, Output } from '@angular/core';
-import * as i15 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i16 from '@angular/forms';
+import { Injectable, Directive, ViewContainerRef, Component, ViewChild, Optional, SkipSelf, createEnvironmentInjector, DestroyRef, Host, Input, ContentChild, forwardRef, ContentChildren, EventEmitter, Output, createComponent, Pipe, ViewEncapsulation } from '@angular/core';
+import * as i16 from '@angular/common';
+import { CommonModule, NgClass, NgIf } from '@angular/common';
+import * as i17 from '@angular/forms';
 import { FormGroup, FormArray, FormControl as FormControl$1, Validators, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { isObservable, take, takeUntil, Subject, of, Observable, interval, map, filter, startWith, pairwise, catchError, combineLatest, debounceTime as debounceTime$1, merge, distinctUntilChanged, tap as tap$1 } from 'rxjs';
+import { Subject, isObservable, take, takeUntil, of, Observable, interval, map, filter, startWith, pairwise, catchError, combineLatest, debounceTime as debounceTime$1, merge, distinctUntilChanged, tap as tap$1 } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@wemake4u/interact';
 import { shareReplay, tap, map as map$1, debounceTime, take as take$1, catchError as catchError$1, finalize } from 'rxjs/operators';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { evaluate, buildSimpleTree, parser } from 'feelers';
 import { evaluate as evaluate$1, unaryTest, parseExpression } from 'feelin';
 import * as i1 from 'ngx-sirio-lib';
-import { SirioDialogElement, SirioDialogComponent, SirioDialogBodyComponent, SirioDialogHeaderComponent, SirioDialogFooterComponent, SirioButtonComponent, SirioDialogTitleComponent, SirioDialogActionDirective, SirioInputComponent, SirioCheckboxComponent, SirioCheckboxGroupComponent, SirioValidationDirective, SirioTabComponent, SirioAccordionComponent, SirioSelectComponent, SirioSelectOptionComponent, SirioSelectPanelComponent, SirioDatepickerComponent, SirioTimepickerComponent, SirioRadioGroupComponent, SirioRadioButtonComponent, SirioTabItemComponent, SirioAccordionPanelComponent, SirioAccordionHeaderComponent, SirioAccordionBodyComponent, SirioFileUploadComponent, SirioToggleComponent, SirioChipCheckboxGroupComponent, SirioChipRadioGroupComponent, SirioInputChipComponent, SirioAlertComponent, SirioAlertMessageComponent, SirioSliderComponent, SirioNotifyComponent, SirioNotifyBodyComponent, SirioTooltipDirective, SirioCollapseComponent, SirioCollapseTriggerDirective, SirioNotifyActionComponent, SirioNotifyLinkComponent, SirioPaginatorComponent, SirioSidenavMobileComponent, SirioSidenavComponent, SirioSidenavItemComponent, SirioStepperProgressBarComponent, SirioStepperProgressItemComponent } from 'ngx-sirio-lib';
+import { SirioDialogElement, SirioDialogComponent, SirioDialogBodyComponent, SirioDialogHeaderComponent, SirioDialogFooterComponent, SirioButtonComponent, SirioDialogTitleComponent, SirioDialogActionDirective, SirioDialogService, SirioInputComponent, SirioCheckboxComponent, SirioCheckboxGroupComponent, SirioValidationDirective, SirioTabComponent, SirioAccordionComponent, SirioSelectComponent, SirioSelectOptionComponent, SirioSelectPanelComponent, SirioDatepickerComponent, SirioTimepickerComponent, SirioRadioGroupComponent, SirioRadioButtonComponent, SirioTabItemComponent, SirioAccordionPanelComponent, SirioAccordionHeaderComponent, SirioAccordionBodyComponent, SirioFileUploadComponent, SirioToggleComponent, SirioChipCheckboxGroupComponent, SirioChipRadioGroupComponent, SirioInputChipComponent, SirioAlertComponent, SirioAlertMessageComponent, SirioSliderComponent, SirioNotifyComponent, SirioNotifyBodyComponent, SirioTooltipDirective, SirioCollapseComponent, SirioCollapseTriggerDirective, SirioNotifyActionComponent, SirioNotifyLinkComponent, SirioPaginatorComponent, SirioSidenavMobileComponent, SirioSidenavComponent, SirioSidenavItemComponent, SirioStepperProgressBarComponent, SirioStepperProgressItemComponent } from 'ngx-sirio-lib';
 import * as i1$1 from '@angular/router';
 import { NavigationStart } from '@angular/router';
-import { Datepicker } from 'vanillajs-datepicker';
 import { ClientSideRowModelModule, InfiniteRowModelModule, PaginationModule, LocaleModule, CellStyleModule, ClientSideRowModelApiModule, TextFilterModule, NumberFilterModule, DateFilterModule, CustomFilterModule, ColumnAutoSizeModule, ColumnApiModule, RowSelectionModule, RowApiModule, RowAutoHeightModule, RowStyleModule, HighlightChangesModule, themeQuartz, iconSetAlpine } from 'ag-grid-community';
 import { AG_GRID_LOCALE_IT, AG_GRID_LOCALE_EN, AG_GRID_LOCALE_DE, AG_GRID_LOCALE_FR, AG_GRID_LOCALE_ES, AG_GRID_LOCALE_PT } from '@ag-grid-community/locale';
 import { marked } from 'marked';
 import * as i1$2 from 'ag-grid-angular';
 import { AgGridAngular } from 'ag-grid-angular';
+import { Datepicker } from 'vanillajs-datepicker';
+import { isValid, parseISO, format, parse } from 'date-fns';
 import { AgCharts } from 'ag-charts-angular';
 import sanitizeHtml from 'sanitize-html';
 import * as i1$3 from '@angular/platform-browser';
@@ -78,6 +79,67 @@ function isNullableGroup(control) {
         && control.getMode() === "nullable";
 }
 
+class FormArrayEx extends FormArray {
+    controlsChanges = new Subject();
+    constructor(controls, validatorOrOpts, asyncValidator) {
+        super(controls, validatorOrOpts, asyncValidator);
+    }
+    push(control, options) {
+        const index = this.length - 1;
+        this.notify('adding', index, control);
+        super.push(control, options);
+        this.notify('add', index, control);
+    }
+    insert(index, control, options) {
+        this.notify('adding', index, control);
+        super.insert(index, control, options);
+        this.notify('add', index, control);
+    }
+    removeAt(index, options) {
+        const control = this.at(index);
+        this.notify('removing', index, control);
+        super.removeAt(index, options);
+        this.notify('remove', index, control);
+    }
+    clear() {
+        while (this.length > 0) {
+            this.removeAt(0);
+        }
+    }
+    moveUp(index) {
+        if (index <= 0 || index >= this.length)
+            return false;
+        const control = this.at(index);
+        super.removeAt(index);
+        super.insert(index - 1, control);
+        return true;
+    }
+    moveDown(index) {
+        if (index < 0 || index >= this.length - 1)
+            return false;
+        const control = this.at(index);
+        super.removeAt(index);
+        super.insert(index + 1, control);
+        return true;
+    }
+    resize(newSize, factory) {
+        while (this.length > newSize) {
+            this.removeAt(this.length - 1, { emitEvent: false });
+        }
+        while (this.length < newSize) {
+            this.push(factory(), { emitEvent: false });
+        }
+        this.updateValueAndValidity({ emitEvent: true });
+    }
+    notify(type, index, control) {
+        this.controlsChanges.next({
+            type: type,
+            control,
+            index
+        });
+    }
+}
+
 function toExpression(value) {
     return "=" + toFeelable(value);
 }
@@ -1020,6 +1082,12 @@ class DialogDirective {
                 focusEvents.apply(this.host);
             }
         };
+        const focusInEvents = host.handleFocusInEvents;
+        host.handleFocusInEvents = () => {
+            if (this.host.withCloseButton) {
+                focusInEvents.apply(this.host);
+            }
+        };
         const outsideClick = host.onOutsideClick;
         host.onOutsideClick = (ev) => {
             if (!host.isDrawer)
@@ -1044,9 +1112,10 @@ class DialogComponent extends SirioDialogElement {
     formRef;
     dynamicFormType;
     Texts = Texts;
-    constructor(languageService) {
+    constructor(languageService, sirioDialogExService) {
         super();
         this.languageService = languageService;
+        this.sirioDialogService = sirioDialogExService;
     }
     ngOnInit() {
         this.options = this.data.options ?? {};
@@ -1118,8 +1187,8 @@ class DialogComponent extends SirioDialogElement {
             this.options.onResult(result);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogComponent, deps: [{ token: i2.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DialogComponent, isStandalone: true, selector: "dynamic-dialog", viewQueries: [{ propertyName: "formHost", first: true, predicate: ["formHost"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ngx-sirio-dialog (closeEvent)=\"doClose()\"\r\n                  dialog\r\n                  [type]=\"options.type ?? 'info'\"\r\n                  [size]=\"options.size ?? 'default'\"\r\n                  [isDrawer]=\"options.isDrawer ?? false\"\r\n                  [withCloseButton]=\"showCloseButton()\">\r\n\r\n  <ngx-sirio-dialog-header [hidden]=\"!showHeader()\">\r\n    <ngx-sirio-dialog-title [hidden]=\"!showTitle()\">{{ options.title }}</ngx-sirio-dialog-title>\r\n  </ngx-sirio-dialog-header>\r\n\r\n  <ngx-sirio-dialog-body>\r\n    <ng-template #formHost></ng-template>\r\n  </ngx-sirio-dialog-body>\r\n\r\n  <ngx-sirio-dialog-footer *ngIf=\"showFooter()\">\r\n    <ng-container [ngSwitch]=\"options.buttons\">\r\n      <!-- OK -->\r\n      <ng-container *ngSwitchCase=\"'OK'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: OKCancel -->\r\n      <ng-container *ngSwitchCase=\"'OKCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: ConfirmClose -->\r\n      <ng-container *ngSwitchCase=\"'ConfirmCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Confirm' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: AbortRetryIgnore -->\r\n      <ng-container *ngSwitchCase=\"'AbortRetryIgnore'\">\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Abort' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Ignore' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: YesNoCancel -->\r\n      <ng-container *ngSwitchCase=\"'YesNoCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: YesNo -->\r\n      <ng-container *ngSwitchCase=\"'YesNo'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: RetryCancel -->\r\n      <ng-container *ngSwitchCase=\"'RetryCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: CancelTryContinue -->\r\n      <ng-container *ngSwitchCase=\"'CancelTryContinue'\">\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Try' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Continue' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: Custom -->\r\n      <ng-container *ngSwitchCase=\"'Custom'\">\r\n        <ng-container *ngFor=\"let customButton of options.customButtons ?? []; let i = index\">\r\n          <ng-container *ngTemplateOutlet=\"customTemplate; context: { customButton: customButton }\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Templates -->\r\n    <ng-template #confirmTemplate let-action=\"action\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(action)\"\r\n                        [disabled]=\"isInvalid()\"\r\n                        color=\"primary\">\r\n        {{ locale(Texts, action) }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n    <ng-template #closeTemplate let-action=\"action\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(action)\"\r\n                        color=\"secondary\">\r\n        {{ locale(Texts, action) }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n    <ng-template #customTemplate\n                 let-customButton=\"customButton\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(customButton.action)\"\r\n                        [color]=\"customButton.color\">\r\n        {{ customButton.text }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n\r\n  </ngx-sirio-dialog-footer>\r\n\r\n</ngx-sirio-dialog>\r\n", styles: ["::ng-deep .sirio-dialog{background-color:#0000007f!important}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-sm .sirio-dialog-content{max-width:18.75rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-lg .sirio-dialog-content{max-width:50rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-xl .sirio-dialog-content{max-width:71.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i15.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i15.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DialogDirective, selector: "[dialog]" }, { kind: "component", type: SirioDialogComponent, selector: "ngx-sirio-dialog", inputs: ["type", "size", "drawerContext", "withCloseButton", "isDrawer", "dialogId"], outputs: ["closeEvent", "confirmEvent"] }, { kind: "component", type: SirioDialogBodyComponent, selector: "ngx-sirio-dialog-body" }, { kind: "component", type: SirioDialogHeaderComponent, selector: "ngx-sirio-dialog-header", inputs: ["closeButtonAriaLabel"], outputs: ["closeEvent"] }, { kind: "component", type: SirioDialogFooterComponent, selector: "ngx-sirio-dialog-footer", inputs: ["actionsLabel"], outputs: ["closeEvent", "confirmEvent"] }, { kind: "component", type: SirioButtonComponent, selector: "ngx-sirio-button", inputs: ["ariaExpanded", "ariaControls", "ariaActivedescendant", "ariaHaspopup", "ariaLabel", "ariaRequired", "ariaInvalid", "ariaDescribedby", "icon", "title", "role", "color", "isFloating", "isExtended", "isLight", "isSmall", "disabled", "isDropdown", "type", "dismissType", "isBtnBlock"], outputs: ["clickEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: SirioDialogTitleComponent, selector: "ngx-sirio-dialog-title" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogComponent, deps: [{ token: i2.LanguageService }, { token: SirioDialogExService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DialogComponent, isStandalone: true, selector: "dynamic-dialog", viewQueries: [{ propertyName: "formHost", first: true, predicate: ["formHost"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ngx-sirio-dialog (closeEvent)=\"doClose()\"\r\n                  dialog\r\n                  [type]=\"options.type ?? 'info'\"\r\n                  [size]=\"options.size ?? 'default'\"\r\n                  [isDrawer]=\"options.isDrawer ?? false\"\r\n                  [withCloseButton]=\"showCloseButton()\">\r\n\r\n  <ngx-sirio-dialog-header [hidden]=\"!showHeader()\">\r\n    <ngx-sirio-dialog-title [hidden]=\"!showTitle()\">{{ options.title }}</ngx-sirio-dialog-title>\r\n  </ngx-sirio-dialog-header>\r\n\r\n  <ngx-sirio-dialog-body>\r\n    <ng-template #formHost></ng-template>\r\n  </ngx-sirio-dialog-body>\r\n\r\n  <ngx-sirio-dialog-footer *ngIf=\"showFooter()\">\r\n    <ng-container [ngSwitch]=\"options.buttons\">\r\n      <!-- OK -->\r\n      <ng-container *ngSwitchCase=\"'OK'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: OKCancel -->\r\n      <ng-container *ngSwitchCase=\"'OKCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: ConfirmClose -->\r\n      <ng-container *ngSwitchCase=\"'ConfirmCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Confirm' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: AbortRetryIgnore -->\r\n      <ng-container *ngSwitchCase=\"'AbortRetryIgnore'\">\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Abort' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Ignore' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: YesNoCancel -->\r\n      <ng-container *ngSwitchCase=\"'YesNoCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: YesNo -->\r\n      <ng-container *ngSwitchCase=\"'YesNo'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: RetryCancel -->\r\n      <ng-container *ngSwitchCase=\"'RetryCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: CancelTryContinue -->\r\n      <ng-container *ngSwitchCase=\"'CancelTryContinue'\">\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Try' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Continue' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: Custom -->\r\n      <ng-container *ngSwitchCase=\"'Custom'\">\r\n        <ng-container *ngFor=\"let customButton of options.customButtons ?? []; let i = index\">\r\n          <ng-container *ngTemplateOutlet=\"customTemplate; context: { customButton: customButton }\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Templates -->\r\n    <ng-template #confirmTemplate let-action=\"action\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(action)\"\r\n                        [disabled]=\"isInvalid()\"\r\n                        color=\"primary\">\r\n        {{ locale(Texts, action) }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n    <ng-template #closeTemplate let-action=\"action\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(action)\"\r\n                        color=\"secondary\">\r\n        {{ locale(Texts, action) }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n    <ng-template #customTemplate\n                 let-customButton=\"customButton\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(customButton.action)\"\r\n                        [color]=\"customButton.color\">\r\n        {{ customButton.text }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n\r\n  </ngx-sirio-dialog-footer>\r\n\r\n</ngx-sirio-dialog>\r\n", styles: ["::ng-deep .sirio-dialog{background-color:#0000007f!important}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-sm .sirio-dialog-content{max-width:18.75rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-lg .sirio-dialog-content{max-width:50rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-xl .sirio-dialog-content{max-width:71.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i16.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i16.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i16.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DialogDirective, selector: "[dialog]" }, { kind: "component", type: SirioDialogComponent, selector: "ngx-sirio-dialog", inputs: ["type", "size", "drawerContext", "withCloseButton", "isDrawer", "dialogId"], outputs: ["closeEvent", "confirmEvent"] }, { kind: "component", type: SirioDialogBodyComponent, selector: "ngx-sirio-dialog-body" }, { kind: "component", type: SirioDialogHeaderComponent, selector: "ngx-sirio-dialog-header", inputs: ["closeButtonAriaLabel"], outputs: ["closeEvent"] }, { kind: "component", type: SirioDialogFooterComponent, selector: "ngx-sirio-dialog-footer", inputs: ["actionsLabel"], outputs: ["closeEvent", "confirmEvent"] }, { kind: "component", type: SirioButtonComponent, selector: "ngx-sirio-button", inputs: ["ariaExpanded", "ariaControls", "ariaActivedescendant", "ariaHaspopup", "ariaLabel", "ariaRequired", "ariaInvalid", "ariaDescribedby", "icon", "title", "role", "color", "isFloating", "isExtended", "isLight", "isSmall", "disabled", "isDropdown", "type", "dismissType", "isBtnBlock"], outputs: ["clickEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: SirioDialogTitleComponent, selector: "ngx-sirio-dialog-title" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
@@ -1133,8 +1202,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         SirioButtonComponent,
                         SirioDialogActionDirective,
                         SirioDialogTitleComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngx-sirio-dialog (closeEvent)=\"doClose()\"\r\n                  dialog\r\n                  [type]=\"options.type ?? 'info'\"\r\n                  [size]=\"options.size ?? 'default'\"\r\n                  [isDrawer]=\"options.isDrawer ?? false\"\r\n                  [withCloseButton]=\"showCloseButton()\">\r\n\r\n  <ngx-sirio-dialog-header [hidden]=\"!showHeader()\">\r\n    <ngx-sirio-dialog-title [hidden]=\"!showTitle()\">{{ options.title }}</ngx-sirio-dialog-title>\r\n  </ngx-sirio-dialog-header>\r\n\r\n  <ngx-sirio-dialog-body>\r\n    <ng-template #formHost></ng-template>\r\n  </ngx-sirio-dialog-body>\r\n\r\n  <ngx-sirio-dialog-footer *ngIf=\"showFooter()\">\r\n    <ng-container [ngSwitch]=\"options.buttons\">\r\n      <!-- OK -->\r\n      <ng-container *ngSwitchCase=\"'OK'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: OKCancel -->\r\n      <ng-container *ngSwitchCase=\"'OKCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: ConfirmClose -->\r\n      <ng-container *ngSwitchCase=\"'ConfirmCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Confirm' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: AbortRetryIgnore -->\r\n      <ng-container *ngSwitchCase=\"'AbortRetryIgnore'\">\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Abort' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Ignore' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: YesNoCancel -->\r\n      <ng-container *ngSwitchCase=\"'YesNoCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: YesNo -->\r\n      <ng-container *ngSwitchCase=\"'YesNo'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: RetryCancel -->\r\n      <ng-container *ngSwitchCase=\"'RetryCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: CancelTryContinue -->\r\n      <ng-container *ngSwitchCase=\"'CancelTryContinue'\">\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Try' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Continue' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: Custom -->\r\n      <ng-container *ngSwitchCase=\"'Custom'\">\r\n        <ng-container *ngFor=\"let customButton of options.customButtons ?? []; let i = index\">\r\n          <ng-container *ngTemplateOutlet=\"customTemplate; context: { customButton: customButton }\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Templates -->\r\n    <ng-template #confirmTemplate let-action=\"action\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(action)\"\r\n                        [disabled]=\"isInvalid()\"\r\n                        color=\"primary\">\r\n        {{ locale(Texts, action) }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n    <ng-template #closeTemplate let-action=\"action\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(action)\"\r\n                        color=\"secondary\">\r\n        {{ locale(Texts, action) }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n    <ng-template #customTemplate\n                 let-customButton=\"customButton\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(customButton.action)\"\r\n                        [color]=\"customButton.color\">\r\n        {{ customButton.text }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n\r\n  </ngx-sirio-dialog-footer>\r\n\r\n</ngx-sirio-dialog>\r\n", styles: ["::ng-deep .sirio-dialog{background-color:#0000007f!important}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-sm .sirio-dialog-content{max-width:18.75rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-lg .sirio-dialog-content{max-width:50rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-xl .sirio-dialog-content{max-width:71.25rem}\n"] }]
-        }], ctorParameters: () => [{ type: i2.LanguageService }], propDecorators: { formHost: [{
+                    ], template: "<ngx-sirio-dialog (closeEvent)=\"doClose()\"\r\n                  dialog\r\n                  [type]=\"options.type ?? 'info'\"\r\n                  [size]=\"options.size ?? 'default'\"\r\n                  [isDrawer]=\"options.isDrawer ?? false\"\r\n                  [withCloseButton]=\"showCloseButton()\">\r\n\r\n  <ngx-sirio-dialog-header [hidden]=\"!showHeader()\">\r\n    <ngx-sirio-dialog-title [hidden]=\"!showTitle()\">{{ options.title }}</ngx-sirio-dialog-title>\r\n  </ngx-sirio-dialog-header>\r\n\r\n  <ngx-sirio-dialog-body>\r\n    <ng-template #formHost></ng-template>\r\n  </ngx-sirio-dialog-body>\r\n\r\n  <ngx-sirio-dialog-footer *ngIf=\"showFooter()\">\r\n    <ng-container [ngSwitch]=\"options.buttons\">\r\n      <!-- OK -->\r\n      <ng-container *ngSwitchCase=\"'OK'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: OKCancel -->\r\n      <ng-container *ngSwitchCase=\"'OKCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'OK' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: ConfirmClose -->\r\n      <ng-container *ngSwitchCase=\"'ConfirmCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Confirm' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: AbortRetryIgnore -->\r\n      <ng-container *ngSwitchCase=\"'AbortRetryIgnore'\">\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Abort' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Ignore' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: YesNoCancel -->\r\n      <ng-container *ngSwitchCase=\"'YesNoCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: YesNo -->\r\n      <ng-container *ngSwitchCase=\"'YesNo'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Yes' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'No' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: RetryCancel -->\r\n      <ng-container *ngSwitchCase=\"'RetryCancel'\">\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Retry' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: CancelTryContinue -->\r\n      <ng-container *ngSwitchCase=\"'CancelTryContinue'\">\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Cancel' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"confirmTemplate; context: { action: 'Try' }\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"closeTemplate; context: { action: 'Continue' }\"></ng-container>\r\n      </ng-container>\r\n      <!-- Caso: Custom -->\r\n      <ng-container *ngSwitchCase=\"'Custom'\">\r\n        <ng-container *ngFor=\"let customButton of options.customButtons ?? []; let i = index\">\r\n          <ng-container *ngTemplateOutlet=\"customTemplate; context: { customButton: customButton }\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Templates -->\r\n    <ng-template #confirmTemplate let-action=\"action\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(action)\"\r\n                        [disabled]=\"isInvalid()\"\r\n                        color=\"primary\">\r\n        {{ locale(Texts, action) }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n    <ng-template #closeTemplate let-action=\"action\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(action)\"\r\n                        color=\"secondary\">\r\n        {{ locale(Texts, action) }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n    <ng-template #customTemplate\n                 let-customButton=\"customButton\">\r\n      <ngx-sirio-button (clickEvent)=\"doAction(customButton.action)\"\r\n                        [color]=\"customButton.color\">\r\n        {{ customButton.text }}\r\n      </ngx-sirio-button>\r\n    </ng-template>\r\n\r\n  </ngx-sirio-dialog-footer>\r\n\r\n</ngx-sirio-dialog>\r\n", styles: ["::ng-deep .sirio-dialog{background-color:#0000007f!important}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-sm .sirio-dialog-content{max-width:18.75rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-lg .sirio-dialog-content{max-width:50rem}::ng-deep .sirio-drawer .sirio-dialog .sirio-dialog-xl .sirio-dialog-content{max-width:71.25rem}\n"] }]
+        }], ctorParameters: () => [{ type: i2.LanguageService }, { type: SirioDialogExService }], propDecorators: { formHost: [{
                 type: ViewChild,
                 args: ['formHost', { read: ViewContainerRef, static: true }]
             }] } });
@@ -1293,7 +1362,7 @@ class DialogService {
         };
         return options;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogService, deps: [{ token: i1.SirioDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogService, deps: [{ token: SirioDialogExService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogService, decorators: [{
@@ -1301,7 +1370,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.SirioDialogService }] });
+        }], ctorParameters: () => [{ type: SirioDialogExService }] });
+class SirioDialogExService extends SirioDialogService {
+    // Fix for multiple dialog opening
+    dialogsStack = [];
+    openDialog(component, data) {
+        if (this.dialogComponentRef) {
+            this.dialogsStack.push({
+                componentRef: this.dialogComponentRef,
+                htmlRef: this.dialogComponentHTMLRef
+            });
+        }
+        const dialogElement = super.openDialog(component, data);
+        return dialogElement;
+    }
+    closeDialog() {
+        const result = super.closeDialog();
+        const dialog = this.dialogsStack.pop();
+        if (dialog?.componentRef) {
+            this.dialogComponentRef = dialog.componentRef;
+            this.dialogComponentHTMLRef = dialog.htmlRef;
+        }
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SirioDialogExService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SirioDialogExService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SirioDialogExService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 class FormatterService {
     constructor() { }
@@ -1482,7 +1582,8 @@ function openWindow(url, target = '_blank', features = {}) {
         featureList.push('noopener');
     if (noreferrer)
         featureList.push('noreferrer');
-    const newWindow = window.open(url, target, featureList.join(','));
+    const locationUrl = new URL(url, window.location.href);
+    const newWindow = window.open(locationUrl.toString(), target, featureList.join(','));
     if (newWindow && focus) {
         newWindow.focus();
     }
@@ -1546,12 +1647,10 @@ class FunctionService {
         this.injector = injector;
     }
     invokable(func) {
-        if (typeof func?.invoke === 'function') {
-            return (...args) => func.invoke(args);
-        }
-        else {
-            return () => { };
-        }
+        return makeInvokable(func, () => { });
+    }
+    asInvokable(func) {
+        return makeInvokable(func, null);
     }
     executeOnce(observable, callback) {
         if (!observable)
@@ -1593,6 +1692,9 @@ class FunctionService {
     newGuid() {
         return generateGuid();
     }
+    range(from, to) {
+        return Array.from({ length: to - from + 1 }, (_, i) => from + i);
+    }
     getContext() {
         return ToBoundArrows(this, [
             "openForm",
@@ -1601,7 +1703,8 @@ class FunctionService {
             "executeOnce",
             "asObservable",
             "setTimeout",
-            "newGuid"
+            "newGuid",
+            "range"
         ]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FunctionService, deps: [{ token: MetadataService }, { token: DialogService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1610,6 +1713,15 @@ class FunctionService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FunctionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: MetadataService }, { type: DialogService }, { type: i0.Injector }] });
+function isFunctionWrapper(func) {
+    return (typeof func?.invoke === 'function');
+}
+function makeInvokable(func, fallback) {
+    if (isFunctionWrapper(func)) {
+        return (...args) => func.invoke(args);
+    }
+    return fallback;
+}
 
 ;
 class FormService {
@@ -1668,25 +1780,15 @@ class FormService {
     }
     moveUp(control, path, index) {
         const formArray = this.applyPath(control, path);
-        if (formArray instanceof FormArray) {
-            if (index <= 0 || index >= formArray.length)
-                return false;
-            const control = formArray.at(index);
-            formArray.removeAt(index);
-            formArray.insert(index - 1, control);
-            return true;
+        if (formArray instanceof FormArrayEx) {
+            return formArray.moveUp(index);
         }
         return false;
     }
     moveDown(control, path, index) {
         const formArray = this.applyPath(control, path);
-        if (formArray instanceof FormArray) {
-            if (index < 0 || index >= formArray.length - 1)
-                return false;
-            const control = formArray.at(index);
-            formArray.removeAt(index);
-            formArray.insert(index + 1, control);
-            return true;
+        if (formArray instanceof FormArrayEx) {
+            return formArray.moveDown(index);
         }
         return false;
     }
@@ -1699,10 +1801,11 @@ class FormService {
             c.updateValueAndValidity({ emitEvent });
         }
     }
-    countInvalid(controls) {
+    countErrors(controls, options) {
+        const { expandArray = true, expandGroup = true } = options ?? {};
         let errors = 0;
         for (const control of controls) {
-            errors += this.collectErrors(control);
+            errors += this.collectErrors(control, expandArray, expandGroup);
         }
         return errors;
     }
@@ -1789,13 +1892,7 @@ class FormService {
         else if (control instanceof FormArray) {
             const currentValue = this.asArray(value);
             while (control.length < currentValue.length) {
-                const itemToAdd = currentValue[control.length];
-                if (hasFactory(control)) {
-                    control.addItem();
-                }
-                else {
-                    control.push(this.createControlFromValue(itemToAdd));
-                }
+                control.push(new FormGroup({}));
             }
             while (control.length > currentValue.length) {
                 control.removeAt(control.length - 1);
@@ -1891,6 +1988,19 @@ class FormService {
             buildControl: (value) => this.buildControl(value)
         };
     }
+    *enumerateControls(control) {
+        yield control;
+        if (control instanceof FormGroup) {
+            for (const child of Object.values(control.controls)) {
+                yield* this.enumerateControls(child);
+            }
+        }
+        else if (control instanceof FormArray) {
+            for (const child of control.controls) {
+                yield* this.enumerateControls(child);
+            }
+        }
+    }
     applyPath(control, path, options) {
         const warn = (message) => {
             if (options?.emitWarn)
@@ -2022,32 +2132,20 @@ class FormService {
     createControlFromArray(array) {
         return array.map(item => this.createControlFromValue(item));
     }
-    *enumerateControls(control) {
-        yield control;
-        if (control instanceof FormGroup) {
+    collectErrors(control, expandArray, expandGroup) {
+        if (control.disabled)
+            return 0;
+        let errors = control.errors ? 1 : 0;
+        if (control instanceof FormGroup && expandGroup) {
             for (const child of Object.values(control.controls)) {
-                yield* this.enumerateControls(child);
-            }
-        }
-        else if (control instanceof FormArray) {
-            for (const child of control.controls) {
-                yield* this.enumerateControls(child);
+                errors += this.collectErrors(child, expandArray, expandGroup);
             }
         }
-    }
-    collectErrors(control) {
-        let errors = 0;
-        if (control.disabled)
-            return errors;
-        if (control instanceof FormGroup || control instanceof FormArray) {
-            const children = Object.values(control.controls);
-            for (const child of children) {
-                errors += this.collectErrors(child);
+        if (control instanceof FormArray && expandArray) {
+            for (const child of Object.values(control.controls)) {
+                errors += this.collectErrors(child, expandArray, expandGroup);
             }
         }
-        else if (control.invalid) {
-            errors++;
-        }
         return errors;
     }
     setUnknown(control) {
@@ -2563,8 +2661,8 @@ class ProgrammabilityService {
     invalidateAll() {
         this.invalidateAllExpression();
     }
-    watch(formGroup, dependencies, callback) {
-        this.watchingDependencies(formGroup, dependencies, callback);
+    watch(formGroup, dependencies, callback, destroyRef) {
+        this.watchingDependencies(formGroup, dependencies, callback, destroyRef ?? this.destroyRef);
     }
     getDependencies(formGroup, expression) {
         const context = this.getContext(formGroup);
@@ -2643,16 +2741,21 @@ class ProgrammabilityService {
                 this.weakService.call(this, watchKey, () => {
                     this.watchingExpression(formGroup, expression, () => {
                         this.invalidateExpression(expression);
+                        options.cacheInvalidated?.();
                         logInvalidate(expression);
-                    });
+                    }, options?.destroyRef);
                     return true;
                 });
             }
-            return this.weakService.call(this, expression, evaluate, null, this.onErrorHandler, () => !cacheControl.isVolatile);
         }
-        else {
-            return evaluate();
+        let result = cacheable
+            ? this.weakService.call(this, expression, evaluate, null, this.onErrorHandler, () => !cacheControl.isVolatile)
+            : evaluate();
+        let invoke = null;
+        if (options?.invokeArgs && (invoke = this.functionService.asInvokable(result))) {
+            result = invoke(...options.invokeArgs);
         }
+        return result;
     }
     evalTemplate(formGroup, expression, options = {}) {
         const logError = (expression, error) => {
@@ -2691,7 +2794,7 @@ class ProgrammabilityService {
                 this.watchingTemplateExpression(formGroup, expression, () => {
                     this.invalidateExpression(expression);
                     logInvalidate(expression);
-                });
+                }, options?.destroyRef);
                 return true;
             });
             return this.weakService.call(this, expression, evaluate, null, null, () => !cacheControl.isVolatile);
@@ -2789,7 +2892,7 @@ class ProgrammabilityService {
         }
         return context;
     }
-    watchingExpression(formGroup, expression, callback) {
+    watchingExpression(formGroup, expression, callback, destroyRef) {
         const logDependencies = (dependencies) => {
             if (!this.verbose)
                 return;
@@ -2798,10 +2901,10 @@ class ProgrammabilityService {
         const context = this.getContext(formGroup);
         const dependencies = this.feelService.getDependencies(expression, context);
         logDependencies(dependencies);
-        this.watchingDependencies(formGroup, dependencies, callback);
+        this.watchingDependencies(formGroup, dependencies, callback, destroyRef ?? this.destroyRef);
     }
     ;
-    watchingTemplateExpression(formGroup, expression, callback) {
+    watchingTemplateExpression(formGroup, expression, callback, destroyRef) {
         const logDependencies = (dependencies) => {
             if (!this.verbose)
                 return;
@@ -2810,10 +2913,10 @@ class ProgrammabilityService {
         const context = this.getContext(formGroup);
         const dependencies = this.feelService.getTemplateDependencies(expression, context);
         logDependencies(dependencies);
-        this.watchingDependencies(formGroup, dependencies, callback);
+        this.watchingDependencies(formGroup, dependencies, callback, destroyRef ?? this.destroyRef);
     }
     ;
-    watchingDependencies(formGroup, dependencies, callback) {
+    watchingDependencies(formGroup, dependencies, callback, destroyRef) {
         const logWatching = (dependence) => {
             if (!this.verbose)
                 return;
@@ -2836,14 +2939,14 @@ class ProgrammabilityService {
             console.log("Scope Refreshed: ", path);
         };
         const valueSubscribe = (control) => {
-            this.subscribeService.subscribeChanges(control.valueChanges, control, control.value, this.destroyRef, callback, logValueChanged);
+            this.subscribeService.subscribeChanges(control.valueChanges, control, control.value, destroyRef, callback, logValueChanged);
         };
         const statusSubscribe = (control) => {
-            this.subscribeService.subscribeChanges(this.formService.statusChanges(control, callback), control, control.status, this.destroyRef, callback, logStatusChanged);
+            this.subscribeService.subscribeChanges(this.formService.statusChanges(control, callback), control, control.status, destroyRef, callback, logStatusChanged);
         };
         const subscribeScope = (dependence) => {
             this.scope.onRefresh
-                .pipe(takeUntilDestroyed(this.destroyRef))
+                .pipe(takeUntilDestroyed(destroyRef))
                 .subscribe((path) => {
                 if (matchPath(path, dependence)) {
                     callback();
@@ -2878,7 +2981,7 @@ class ProgrammabilityService {
                 }
                 else {
                     this.formService.waitForControl(formGroup, path, options)
-                        .pipe(takeUntilDestroyed(this.destroyRef))
+                        .pipe(takeUntilDestroyed(destroyRef))
                         .subscribe(control => {
                         subscribeControl(control, status, dependence);
                         callback();
@@ -2937,13 +3040,13 @@ class ValidationService {
             collection.set(control, { component, formGroup });
         }
     }
-    setupCollection(collection) {
+    setupCollection(collection, destroyRef) {
         collection.forEach((componentValidation, control) => {
             const component = componentValidation.component;
             const currentGroup = componentValidation.formGroup;
             const required = component?.validate?.required;
             const rules = this.getRules(component);
-            const [requiredValidator, validators, asyncValidators, watching] = this.validateRules(currentGroup, component, required, rules);
+            const [requiredValidator, validators, asyncValidators, watching] = this.validateRules(currentGroup, component, required, rules, destroyRef);
             control.setValidators(validators);
             control.setAsyncValidators(asyncValidators);
             if (requiredValidator)
@@ -2974,7 +3077,7 @@ class ValidationService {
             };
         });
     }
-    validateRules(formGroup, component, required, validations) {
+    validateRules(formGroup, component, required, validations, destroyRef) {
         const skipValidation = this.resolveSkipValidation(component);
         const validators = [];
         const asyncValidators = [];
@@ -3004,7 +3107,7 @@ class ValidationService {
             });
         }
         const watching = (control) => {
-            this.watchForValidation(formGroup, skipValidation, control, component.key, callbacks, validations);
+            this.watchForValidation(formGroup, skipValidation, control, component.key, callbacks, validations, destroyRef);
         };
         return [requiredValidator, validators, asyncValidators, watching];
     }
@@ -3074,7 +3177,7 @@ class ValidationService {
         const validationError = { error: true, message };
         return validationError;
     }
-    watchForValidation(formGroup, skipValidation, control, key, callbacks, validations) {
+    watchForValidation(formGroup, skipValidation, control, key, callbacks, validations, destroyRef) {
         const expressions = [];
         if (typeof skipValidation === "string" && this.programmability.isExpression(skipValidation)) {
             expressions.push("=" + this.programmability.getExpression(skipValidation));
@@ -3097,7 +3200,7 @@ class ValidationService {
                 callbacks.invoke();
                 control.updateValueAndValidity();
             });
-        });
+        }, destroyRef);
     }
     logValidation = (component, rule, control, result) => {
         if (this.programmability.verbose) {
@@ -3177,33 +3280,36 @@ class DisableService {
             collection.set(control, { parentGroup, component });
         }
     }
-    setupCollection(collection) {
+    setupCollection(collection, destroyRef) {
         collection.forEach((disableContext, control) => {
-            this.applyRule(disableContext.parentGroup, control, disableContext);
+            this.applyRule(disableContext.parentGroup, control, disableContext, destroyRef);
         });
     }
-    applyRule(formGroup, control, context) {
-        // se riabilito un FormGroup vengono riabilitato tutti i child
-        // mentre dovrebbero essere rivalutati se hanno una condizione o un valore static.
+    selfDisabled = new WeakMap();
+    applyRule(formGroup, control, context, destroyRef) {
         const { key, disabled } = context.component ?? {};
         const logDisabled = (value) => {
             if (!this.programmability.verbose)
                 return;
             console.log(value ? "Disable" : "Enable", control, { path: this.getPath(control), formGroup });
         };
+        const container = this.isContainer(control);
         const disableControl = (value) => {
+            this.selfDisabled.set(control, value ?? false);
             if (value === true) {
-                if (control.disabled)
+                if (control.disabled && !container)
                     return;
                 control.disable();
                 logDisabled(value);
             }
             else {
-                if (control.enabled)
+                if (control.enabled && !container)
                     return;
                 control.enable();
                 logDisabled(value);
             }
+            if (container)
+                this.normalize(control);
         };
         if (typeof disabled === 'boolean') {
             disableControl(disabled);
@@ -3214,13 +3320,13 @@ class DisableService {
                 const dependencies = this.programmability.getDependencies(formGroup, expression)
                     .filter(dep => dep !== key);
                 const applyExpression = () => {
-                    const result = this.programmability.evaluateBoolean(formGroup, disabled, { cacheable: false });
+                    const result = this.programmability.evaluateBoolean(formGroup, disabled, { cacheable: false, destroyRef: destroyRef });
                     disableControl(result);
                 };
                 if (dependencies.length > 0) {
                     this.programmability.watch(formGroup, dependencies, () => {
                         applyExpression();
-                    });
+                    }, destroyRef);
                 }
                 applyExpression();
             }
@@ -3234,6 +3340,21 @@ class DisableService {
     getPath(control) {
         return this.formService.getPath(control).join(".");
     }
+    normalize(control) {
+        if (!control.enabled)
+            return;
+        for (const child of this.formService.enumerateControls(control)) {
+            if (this.selfDisabled.has(child)) {
+                const selfDisabled = this.selfDisabled.get(child);
+                if (child.enabled && selfDisabled)
+                    child.disable();
+            }
+        }
+    }
+    isContainer(control) {
+        return control instanceof FormGroup
+            || control instanceof FormArray;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DisableService, deps: [{ token: ProgrammabilityService }, { token: FormService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DisableService });
 }
@@ -3256,16 +3377,16 @@ class ComputeService {
             collection.set(control, { component, parentGroup });
         }
     }
-    setupCollection(collection) {
+    setupCollection(collection, destroyRef) {
         collection.forEach((computeContext, control) => {
-            this.applyExpression(control, computeContext);
+            this.applyExpression(control, computeContext, destroyRef);
         });
     }
     canAddToCollection(component) {
         const expression = component?.expression;
         return this.programmability.isExpression(expression);
     }
-    applyExpression(control, context) {
+    applyExpression(control, context, destroyRef) {
         const formGroup = context.parentGroup;
         const { key, expression, conditional } = context.component ?? {};
         const deactivate = conditional?.hide;
@@ -3282,12 +3403,12 @@ class ComputeService {
             if (this.programmability.isExpression(expression)) {
                 const applyExpression = () => {
                     if (this.programmability.isExpression(deactivate)) {
-                        const isDeactivate = this.programmability.evaluateBoolean(formGroup, deactivate, { cacheable: false });
+                        const isDeactivate = this.programmability.evaluateBoolean(formGroup, deactivate, { cacheable: false, destroyRef: destroyRef });
                         if (!!isDeactivate) {
                             return;
                         }
                     }
-                    const result = this.programmability.evaluate(formGroup, expression, { cacheable: false });
+                    const result = this.programmability.evaluate(formGroup, expression, { cacheable: false, destroyRef: destroyRef });
                     assignValue(result);
                 };
                 const dependencies = this.programmability.getDependencies(formGroup, toFeelable({
@@ -3297,7 +3418,7 @@ class ComputeService {
                 if (dependencies.length > 0) {
                     this.programmability.watch(formGroup, dependencies, () => {
                         setTimeout(() => applyExpression());
-                    });
+                    }, destroyRef);
                 }
                 setTimeout(() => applyExpression());
             }
@@ -3322,44 +3443,57 @@ class StatusService {
         this.subscribeService = subscribeService;
         this.destroyRef = destroyRef;
     }
-    createCollection() {
-        return new Set();
+    createCollection(key) {
+        return new StatusCollection(key);
     }
     addToCollection(collection, control, component) {
-        if (!collection.has(control) && this.canAddToCollection(component)) {
+        if (!collection.has(control) && this.canAddToCollection(control, component)) {
             collection.add(control);
         }
     }
-    setupCollection(key, collection) {
-        this.invalidMap.set(key, {
-            collection,
-            dirty: true,
-            cached: 0
-        });
-        collection.forEach(control => {
-            this.subscribeService.subscribeChanges(control.statusChanges, control, control.status, this.destroyRef, () => {
-                const entry = this.invalidMap.get(key);
-                if (entry) {
-                    entry.dirty = true;
-                }
+    setupCollection(collection, destroyRef) {
+        const key = collection.key;
+        const root = key != null;
+        if (root) {
+            this.invalidMap.set(key, {
+                collection,
+                dirty: true,
+                cached: 0
             });
+        }
+        const markDirty = () => {
+            const entry = this.invalidMap.get(key);
+            if (entry) {
+                entry.dirty = true;
+            }
+        };
+        collection.forEach(control => {
+            if (!root) {
+                control.updateValueAndValidity({ onlySelf: true, emitEvent: true });
+            }
+            this.subscribeService.subscribeChanges(control.statusChanges, control, control.status, destroyRef ?? this.destroyRef, () => markDirty());
         });
     }
-    countInvalid(key) {
+    countErrors(key) {
         const entry = this.invalidMap.get(key);
         if (!entry)
             return 0;
-        if (entry.dirty) {
-            entry.cached = this.formService.countInvalid(entry.collection);
-            entry.dirty = false;
-        }
+        if (!entry.dirty)
+            return entry.cached;
+        entry.dirty = false;
+        entry.cached = entry.collection.countErrors(controls => this.formService.countErrors(controls, { expandArray: false, expandGroup: true }));
         return entry.cached;
     }
     invalidMap = new Map();
-    canAddToCollection(component) {
-        const required = component?.validate?.required;
-        const hasRules = Array.isArray(component?.validations) && component.validations.length > 0;
-        return required === true || hasRules;
+    canAddToCollection(control, component) {
+        if (control instanceof FormArray) {
+            return true;
+        }
+        else {
+            const required = component?.validate?.required;
+            const hasRules = Array.isArray(component?.validations) && component.validations.length > 0;
+            return required === true || hasRules || control.validator != null || control.asyncValidator != null;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatusService, deps: [{ token: FormService }, { token: SubscribeService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatusService });
@@ -3367,6 +3501,55 @@ class StatusService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatusService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FormService }, { type: SubscribeService }, { type: i0.DestroyRef }] });
+class StatusCollection {
+    key;
+    constructor(key) {
+        this.key = key;
+    }
+    controls = new Set();
+    children = new Map();
+    add(control) {
+        this.controls.add(control);
+        return this;
+    }
+    remove(control) {
+        this.controls.delete(control);
+        return this;
+    }
+    has(control) {
+        return this.controls.has(control);
+    }
+    clear() {
+        this.controls.clear();
+        this.children.clear();
+    }
+    createCollection(key) {
+        let collection = this.children.get(key);
+        if (!collection) {
+            collection = new StatusCollection();
+            this.children.set(key, collection);
+        }
+        return collection;
+    }
+    getCollection(key) {
+        return this.children.get(key);
+    }
+    removeCollection(key) {
+        return this.children.delete(key);
+    }
+    forEach(callback) {
+        this.controls.forEach(callback);
+    }
+    countErrors(errorCounter, deep = true) {
+        let errors = errorCounter(this.controls);
+        if (deep) {
+            for (const child of this.children.values()) {
+                errors += child.countErrors(errorCounter, true);
+            }
+        }
+        return errors;
+    }
+}
 
 class EventService {
     programmability;
@@ -3390,32 +3573,34 @@ class EventService {
     addToCollection(collection, control, formGroup, component) {
         collection.set(control, { component, formGroup });
     }
-    setupCollection(collection) {
+    setupCollection(collection, destroyRef) {
         collection.forEach((componentValidation, control) => {
             const component = componentValidation.component;
             const currentGroup = componentValidation.formGroup;
             const events = component.events;
             if (!events || typeof events !== 'object')
                 return;
-            this.processHandler(events.onChange, currentGroup, control, control.valueChanges, control.value);
-            this.processHandler(events.onStatusChange, currentGroup, control, control.statusChanges, control.status);
+            this.processHandler(events.onChange, currentGroup, control, control.valueChanges, control.value, destroyRef);
+            this.processHandler(events.onStatusChange, currentGroup, control, control.statusChanges, control.status, destroyRef);
         });
     }
-    processHandler(handler, formGroup, control, observable$, initial) {
+    processHandler(handler, formGroup, control, observable$, initial, destroyRef) {
         if (!this.programmability.isExpression(handler))
             return;
-        this.subscribeService.subscribeChanges(observable$, control, initial, this.destroyRef, (oldValue, newValue) => {
+        this.subscribeService.subscribeChanges(observable$, control, initial, destroyRef ?? this.destroyRef, (oldValue, newValue) => {
             if (this.suppress)
                 return;
+            const event = {
+                control: control,
+                oldValue: oldValue,
+                newValue: newValue
+            };
             this.programmability.evaluate(formGroup, handler, {
                 cacheable: false,
                 extendContext: () => ({
-                    "event": {
-                        control: control,
-                        oldValue: oldValue,
-                        newValue: newValue
-                    }
-                })
+                    "event": event
+                }),
+                invokeArgs: [event]
             });
         });
     }
@@ -3426,6 +3611,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: ProgrammabilityService }, { type: SubscribeService }, { type: i0.DestroyRef }] });
 
+class LifetimeService {
+    environmentInjector;
+    injectors = new Map();
+    constructor(environmentInjector) {
+        this.environmentInjector = environmentInjector;
+    }
+    resolve(key) {
+        let injector = this.injectors.get(key);
+        if (!injector) {
+            injector = createEnvironmentInjector([], this.environmentInjector);
+            this.injectors.set(key, injector);
+        }
+        return injector.get(DestroyRef);
+    }
+    destroy(key) {
+        const injector = this.injectors.get(key);
+        if (!injector)
+            return;
+        injector.destroy();
+        this.injectors.delete(key);
+    }
+    ngOnDestroy() {
+        for (const injector of this.injectors.values()) {
+            injector.destroy();
+        }
+        this.injectors.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LifetimeService, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LifetimeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LifetimeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.EnvironmentInjector }] });
+
 class FormBuilderService {
     validationService;
     disableService;
@@ -3433,13 +3652,17 @@ class FormBuilderService {
     statusService;
     eventService;
     metadata;
-    constructor(validationService, disableService, computeService, statusService, eventService, metadata) {
+    lifetime;
+    destroyRef;
+    constructor(validationService, disableService, computeService, statusService, eventService, metadata, lifetime, destroyRef) {
         this.validationService = validationService;
         this.disableService = disableService;
         this.computeService = computeService;
         this.statusService = statusService;
         this.eventService = eventService;
         this.metadata = metadata;
+        this.lifetime = lifetime;
+        this.destroyRef = destroyRef;
     }
     buildForm(formGroup, forms, groupMode = "default") {
         const validationCollection = this.validationService.createCollection();
@@ -3447,7 +3670,7 @@ class FormBuilderService {
         const eventCollection = this.eventService.createCollection();
         const computeCollection = this.computeService.createCollection();
         forms.forEach((form) => {
-            const statusCollection = this.statusService.createCollection();
+            const statusCollection = this.statusService.createCollection(form);
             const currentGroup = this.applyPath(formGroup, form.path, groupMode);
             if (this.hasPath(form.path)) {
                 this.disableService.addToCollection(disableCollection, currentGroup, formGroup, form);
@@ -3455,7 +3678,7 @@ class FormBuilderService {
             form.rows?.forEach((row) => {
                 this.addControls(currentGroup, row.components, groupMode, disableCollection, computeCollection, validationCollection, statusCollection, eventCollection);
             });
-            this.statusService.setupCollection(form, statusCollection);
+            this.statusService.setupCollection(statusCollection);
         });
         this.disableService.setupCollection(disableCollection);
         this.computeService.setupCollection(computeCollection);
@@ -3541,7 +3764,7 @@ class FormBuilderService {
                 const itemComponent = this.getArrayItem(component);
                 if (itemComponent.key) {
                     const currentGroup = this.applyPath(formGroup, itemComponent.path, groupMode);
-                    const formArray = this.createFormArray(currentGroup, itemComponent, groupMode);
+                    const formArray = this.createFormArray(currentGroup, itemComponent, groupMode, statusCollection);
                     this.validationService.addToCollection(validationCollection, formArray, currentGroup, component);
                     this.statusService.addToCollection(statusCollection, formArray, component);
                     this.eventService.addToCollection(eventCollection, formArray, currentGroup, component);
@@ -3617,91 +3840,47 @@ class FormBuilderService {
             return { key: null, path: null, rows: [] };
         }
     }
-    createFormArray(formGroup, itemComponent, groupMode) {
+    createFormArray(formGroup, itemComponent, groupMode, statusCollection) {
         const formComponent = this;
-        const prepareItem = function (formGroup) {
-            const statusCollection = formComponent.statusService.createCollection();
+        const lifetime = this.lifetime;
+        const setupItem = function (formGroup) {
+            const statusItemCollection = statusCollection.createCollection(formGroup);
             const validationCollection = formComponent.validationService.createCollection();
             const eventCollection = formComponent.eventService.createCollection();
             const disableCollection = formComponent.disableService.createCollection();
             const computeCollection = formComponent.computeService.createCollection();
             itemComponent.rows?.forEach((row) => {
-                formComponent.addControls(formGroup, row.components, groupMode, disableCollection, computeCollection, validationCollection, statusCollection, eventCollection);
+                formComponent.addControls(formGroup, row.components, groupMode, disableCollection, computeCollection, validationCollection, statusItemCollection, eventCollection);
             });
-            // ignore statusCollection
-            formComponent.disableService.setupCollection(disableCollection);
-            formComponent.computeService.setupCollection(computeCollection);
-            formComponent.validationService.setupCollection(validationCollection);
-            formComponent.eventService.setupCollection(eventCollection);
-        };
-        const createItem = function (addToArray = false) {
-            const newGroup = new FormGroup({});
-            if (addToArray)
-                this.push(newGroup);
-            prepareItem(newGroup);
-            return newGroup;
-        };
-        const addItem = function () {
-            if (hasFactory(this)) {
-                const newGroup = this.createItem(true);
-                return newGroup;
-            }
-            else {
-                throw new Error('Cannot add item: the FormArray does not implement FormArrayWithFactory.');
-            }
+            const destroyRef = lifetime.resolve(formGroup);
+            formComponent.disableService.setupCollection(disableCollection, destroyRef);
+            formComponent.computeService.setupCollection(computeCollection, destroyRef);
+            formComponent.validationService.setupCollection(validationCollection, destroyRef);
+            formComponent.eventService.setupCollection(eventCollection, destroyRef);
+            formComponent.statusService.setupCollection(statusItemCollection, destroyRef);
         };
-        const overrideArray = (array) => {
-            const createItem = array.createItem.bind(array);
-            array.createItem = function (addToArray) {
-                const formGroup = createItem(addToArray);
-                prepareItem(formGroup);
-                return formGroup;
-            };
+        const cleanupItem = function (formGroup) {
+            statusCollection.removeCollection(formGroup);
+            lifetime.destroy(formGroup);
         };
         const existing = formGroup.get(itemComponent.key);
-        if (existing instanceof FormArray && hasFactory(existing)) {
-            overrideArray(existing);
-            return existing;
-        }
-        const formArray = new FormArray([]);
-        formGroup.addControl(itemComponent.key, formArray);
-        const resizeFormArray = this.resizeFormArray;
-        const createNewArray = function () {
-            const newArray = new FormArray([]);
-            return prepareArray(newArray);
-        };
-        const prepareArray = (array) => {
-            const dynamicArray = array;
-            dynamicArray.addItem = addItem;
-            dynamicArray.createItem = createItem;
-            dynamicArray.resize = resize;
-            dynamicArray.createNewArray = createNewArray;
-            return dynamicArray;
-        };
-        const resize = function (size) {
-            if (hasFactory(this)) {
-                const newArray = resizeFormArray(this, size);
-                prepareArray(newArray);
-                formGroup.setControl(itemComponent.key, newArray);
-            }
-        };
-        // used externally: addItem, resize
-        return prepareArray(formArray);
-    }
-    resizeFormArray(formArray, size) {
-        if (formArray.length < size) {
-            const newArray = new FormArray(formArray.controls);
-            while (formArray.length < size) {
-                formArray.addItem();
-            }
-            return newArray;
-        }
-        else if (formArray.length > size) {
-            return new FormArray(formArray.controls.slice(0, size));
+        let formArray = null;
+        if (existing instanceof FormArrayEx) {
+            formArray = existing;
         }
         else {
-            return formArray;
+            formArray = new FormArrayEx([]);
+            formGroup.addControl(itemComponent.key, formArray);
         }
+        formArray.controlsChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(e => {
+            if (e?.type == "add")
+                setupItem(e.control);
+            else if (e?.type == "remove")
+                cleanupItem(e.control);
+        });
+        return formArray;
     }
     getContainers(component) {
         if (component.type === 'group') {
@@ -3757,21 +3936,12 @@ class FormBuilderService {
                 return null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormBuilderService, deps: [{ token: ValidationService }, { token: DisableService }, { token: ComputeService }, { token: StatusService }, { token: EventService }, { token: MetadataService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormBuilderService, deps: [{ token: ValidationService }, { token: DisableService }, { token: ComputeService }, { token: StatusService }, { token: EventService }, { token: MetadataService }, { token: LifetimeService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormBuilderService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormBuilderService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: ValidationService }, { type: DisableService }, { type: ComputeService }, { type: StatusService }, { type: EventService }, { type: MetadataService }] });
-function hasFactory(array) {
-    if (!array)
-        return false;
-    const current = array;
-    return typeof current.createItem === 'function'
-        && typeof current.addItem === 'function'
-        && typeof current.resize === 'function'
-        && typeof current.createNewArray === 'function';
-}
+        }], ctorParameters: () => [{ type: ValidationService }, { type: DisableService }, { type: ComputeService }, { type: StatusService }, { type: EventService }, { type: MetadataService }, { type: LifetimeService }, { type: i0.DestroyRef }] });
 
 function groupByRow(forms) {
     return forms.map(form => ({
@@ -3879,16 +4049,18 @@ class ActionsCellRendererComponent {
     }
     clickButton(action, event) {
         if (action.click) {
+            const event = {
+                params: this.params,
+                action: action,
+                data: this.getData(),
+                rowIndex: this.getRowIndex()
+            };
             const options = {
                 cacheable: false,
                 extendContext: () => ({
-                    "event": {
-                        params: this.params,
-                        action: action,
-                        data: this.getData(),
-                        rowIndex: this.getRowIndex()
-                    }
-                })
+                    "event": event
+                }),
+                invokeArgs: [event]
             };
             return this.programmability.evaluate(this.getFormGroup(), action.click, options);
         }
@@ -3898,15 +4070,17 @@ class ActionsCellRendererComponent {
         return this.params.data ?? this;
     }
     getOptions() {
+        const event = {
+            params: this.params,
+            data: this.getData(),
+            rowIndex: this.getRowIndex()
+        };
         return {
             //cacheable: false,
             extendContext: () => ({
-                "event": {
-                    params: this.params,
-                    data: this.getData(),
-                    rowIndex: this.getRowIndex()
-                }
-            })
+                "event": event
+            }),
+            invokeArgs: [event]
         };
     }
     getData() {
@@ -3922,7 +4096,7 @@ class ActionsCellRendererComponent {
         return this.params.api.getGridOption("context").cacheContext;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionsCellRendererComponent, deps: [{ token: ProgrammabilityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ActionsCellRendererComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"btn-small-group\">\r\n  <ng-container *ngFor=\"let action of params.component.actions\">\r\n    <ngx-sirio-button class=\"btn-small\"\r\n                      *ngIf=\"!evaluateBoolean(action.disabled)\"\r\n                      [ariaLabel]=\"evaluateString(action.label)\"\r\n                      [title]=\"evaluateString(action.label)\"\r\n                      [color]=\"null\"\r\n                      (clickEvent)=\"clickButton(action, $event)\"\r\n                      [icon]=\"evaluateString(action.icon)\">\r\n    </ngx-sirio-button>\r\n  </ng-container>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SirioButtonComponent, selector: "ngx-sirio-button", inputs: ["ariaExpanded", "ariaControls", "ariaActivedescendant", "ariaHaspopup", "ariaLabel", "ariaRequired", "ariaInvalid", "ariaDescribedby", "icon", "title", "role", "color", "isFloating", "isExtended", "isLight", "isSmall", "disabled", "isDropdown", "type", "dismissType", "isBtnBlock"], outputs: ["clickEvent", "focusEvent", "blurEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ActionsCellRendererComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"btn-small-group\">\r\n  <ng-container *ngFor=\"let action of params.component.actions\">\r\n    <ngx-sirio-button class=\"btn-small\"\r\n                      *ngIf=\"!evaluateBoolean(action.disabled)\"\r\n                      [ariaLabel]=\"evaluateString(action.label)\"\r\n                      [title]=\"evaluateString(action.label)\"\r\n                      [color]=\"null\"\r\n                      (clickEvent)=\"clickButton(action, $event)\"\r\n                      [icon]=\"evaluateString(action.icon)\">\r\n    </ngx-sirio-button>\r\n  </ng-container>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SirioButtonComponent, selector: "ngx-sirio-button", inputs: ["ariaExpanded", "ariaControls", "ariaActivedescendant", "ariaHaspopup", "ariaLabel", "ariaRequired", "ariaInvalid", "ariaDescribedby", "icon", "title", "role", "color", "isFloating", "isExtended", "isLight", "isSmall", "disabled", "isDropdown", "type", "dismissType", "isBtnBlock"], outputs: ["clickEvent", "focusEvent", "blurEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionsCellRendererComponent, decorators: [{
             type: Component,
@@ -4081,7 +4255,7 @@ class SetFilterComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SetFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SetFilterComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div style=\"padding: 5px;background-color: white;\">\r\n\r\n  <div style=\"padding: 5px\">\r\n    <ngx-sirio-input type=\"text\"\r\n                     [placeholder]=\"Texts.TypeToSearch\"\r\n                     [(ngModel)]=\"searchText\"\r\n                     (ngModelChange)=\"onSearchChange()\">\r\n    </ngx-sirio-input>\r\n  </div>\r\n\r\n  <div style=\"padding: 5px; max-height: 200px; overflow-y: auto;\">\r\n    <ngx-sirio-checkbox [(ngModel)]=\"selectAll\" (ngModelChange)=\"onSelectAllChange()\">{{Texts.SelectAll}}</ngx-sirio-checkbox>\r\n\r\n    <ngx-sirio-checkbox-group>\r\n      <ngx-sirio-checkbox *ngFor=\"let option of filteredOptions\"\r\n                          [(ngModel)]=\"option.selected\"\r\n                          [value]=\"option.value\"\r\n                          (change)=\"onSelectionChange()\">\r\n        {{ option.label }}\r\n      </ngx-sirio-checkbox>\r\n    </ngx-sirio-checkbox-group>\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SirioInputComponent, selector: "ngx-sirio-input", inputs: ["disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "type", "name", "placeholder", "textHelp", "textFeedback", "rows", "cols", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "role"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioCheckboxComponent, selector: "ngx-sirio-checkbox", inputs: ["disabled", "name", "textHelp", "textFeedback", "value", "ariaInvalid", "ariaDescribedBy", "disabledState", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioCheckboxGroupComponent, selector: "ngx-sirio-checkbox-group", inputs: ["textHelp", "textFeedback", "label", "labelPopover", "ariaLabelPopoverButton", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SetFilterComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div style=\"padding: 5px;background-color: white;\">\r\n\r\n  <div style=\"padding: 5px\">\r\n    <ngx-sirio-input type=\"text\"\r\n                     [placeholder]=\"Texts.TypeToSearch\"\r\n                     [(ngModel)]=\"searchText\"\r\n                     (ngModelChange)=\"onSearchChange()\">\r\n    </ngx-sirio-input>\r\n  </div>\r\n\r\n  <div style=\"padding: 5px; max-height: 200px; overflow-y: auto;\">\r\n    <ngx-sirio-checkbox [(ngModel)]=\"selectAll\" (ngModelChange)=\"onSelectAllChange()\">{{Texts.SelectAll}}</ngx-sirio-checkbox>\r\n\r\n    <ngx-sirio-checkbox-group>\r\n      <ngx-sirio-checkbox *ngFor=\"let option of filteredOptions\"\r\n                          [(ngModel)]=\"option.selected\"\r\n                          [value]=\"option.value\"\r\n                          (change)=\"onSelectionChange()\">\r\n        {{ option.label }}\r\n      </ngx-sirio-checkbox>\r\n    </ngx-sirio-checkbox-group>\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i17.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i17.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SirioInputComponent, selector: "ngx-sirio-input", inputs: ["disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "type", "name", "placeholder", "textHelp", "textFeedback", "rows", "cols", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "role"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioCheckboxComponent, selector: "ngx-sirio-checkbox", inputs: ["disabled", "name", "textHelp", "textFeedback", "value", "ariaInvalid", "ariaDescribedBy", "disabledState", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioCheckboxGroupComponent, selector: "ngx-sirio-checkbox-group", inputs: ["textHelp", "textFeedback", "label", "labelPopover", "ariaLabelPopoverButton", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SetFilterComponent, decorators: [{
             type: Component,
@@ -4142,16 +4316,18 @@ class HostCellRendererComponent {
         }
     }
     evaluate(value) {
+        const event = {
+            params: this.params,
+            value: this.getValue(),
+            data: this.getData(),
+            rowIndex: this.getRowIndex()
+        };
         const options = {
             cacheable: false,
             extendContext: () => ({
-                "event": {
-                    params: this.params,
-                    value: this.getValue(),
-                    data: this.getData(),
-                    rowIndex: this.getRowIndex()
-                }
-            })
+                "event": event
+            }),
+            invokeArgs: [event]
         };
         return this.programmability.evaluate(this.getFormGroup(), value, options);
     }
@@ -4351,15 +4527,17 @@ class GridService {
             return [];
         }
     }
-    onSelectionChanged(component, formGroup, event) {
+    onSelectionChanged(component, formGroup, gridEvent) {
         if (component.selectionChanged) {
+            const event = {
+                selectedRows: gridEvent.api.getSelectedRows()
+            };
             return this.programmability.evaluate(formGroup, component.selectionChanged, {
                 cacheable: false,
                 extendContext: () => ({
-                    "event": {
-                        selectedRows: event.api.getSelectedRows()
-                    }
-                })
+                    "event": event
+                }),
+                invokeArgs: [event]
             });
         }
     }
@@ -4756,26 +4934,30 @@ class GridService {
     onRowSelectable(component, formGroup, data) {
         if (!data)
             return false;
+        const event = {
+            data: data
+        };
         const result = this.programmability.evaluate(formGroup, component.rowSelectable, {
             cacheable: false,
             extendContext: () => ({
-                "event": {
-                    data: data
-                }
-            })
+                "event": event
+            }),
+            invokeArgs: [event]
         });
         return result === true;
     }
     onRowSelected(component, formGroup, data) {
         if (!data)
             return false;
+        const event = {
+            data: data
+        };
         const result = this.programmability.evaluate(formGroup, component.rowSelected, {
             cacheable: false,
             extendContext: () => ({
-                "event": {
-                    data: data
-                }
-            })
+                "event": event
+            }),
+            invokeArgs: [event]
         });
         return result === true;
     }
@@ -5698,7 +5880,7 @@ class ReadOnlyDirective {
             return true;
         return (value === "yes");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReadOnlyDirective, deps: [{ token: i16.NgControl }, { token: GlobalService }, { token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReadOnlyDirective, deps: [{ token: i17.NgControl }, { token: GlobalService }, { token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ReadOnlyDirective, isStandalone: true, selector: "[readonly]", inputs: { readonly: "readonly", placeholder: "placeholder", componentRef: "componentRef", properties: "properties" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReadOnlyDirective, decorators: [{
@@ -5707,7 +5889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[readonly]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i16.NgControl }, { type: GlobalService }, { type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { readonly: [{
+        }], ctorParameters: () => [{ type: i17.NgControl }, { type: GlobalService }, { type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { readonly: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -5770,15 +5952,15 @@ class RepeatDirective {
     }
     ngOnChanges(changes) {
         if (changes["repeat"] || changes["allowAddRemove"]) {
-            const formArray = this.controlContainer.control;
-            if (hasFactory(formArray)) {
-                if (Number.isInteger(this.repeat) && this.repeat >= 0) {
-                    formArray.resize(this.repeat);
-                }
+            const control = this.controlContainer.control;
+            if (!(control instanceof FormArrayEx))
+                return;
+            if (Number.isInteger(this.repeat) && this.repeat >= 0) {
+                control.resize(this.repeat, () => new FormGroup({}));
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RepeatDirective, deps: [{ token: i16.ControlContainer }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RepeatDirective, deps: [{ token: i17.ControlContainer }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: RepeatDirective, isStandalone: true, selector: "[repeat], [allowAddRemove]", inputs: { repeat: "repeat", allowAddRemove: "allowAddRemove" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RepeatDirective, decorators: [{
@@ -5787,7 +5969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[repeat], [allowAddRemove]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i16.ControlContainer }], propDecorators: { repeat: [{
+        }], ctorParameters: () => [{ type: i17.ControlContainer }], propDecorators: { repeat: [{
                 type: Input
             }], allowAddRemove: [{
                 type: Input
@@ -6054,7 +6236,7 @@ class RecursionDirective {
         }
         return childArray;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RecursionDirective, deps: [{ token: i16.ControlContainer }, { token: FormService }, { token: CacheContextService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RecursionDirective, deps: [{ token: i17.ControlContainer }, { token: FormService }, { token: CacheContextService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: RecursionDirective, isStandalone: true, selector: "[recursion]", inputs: { formGroup: "formGroup", component: ["recursion", "component"] }, providers: [
             CacheContextService
         ], exportAs: ["recursion"], usesOnChanges: true, ngImport: i0 });
@@ -6069,7 +6251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CacheContextService
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i16.ControlContainer }, { type: FormService }, { type: CacheContextService }], propDecorators: { formGroup: [{
+        }], ctorParameters: () => [{ type: i17.ControlContainer }, { type: FormService }, { type: CacheContextService }], propDecorators: { formGroup: [{
                 type: Input
             }], component: [{
                 type: Input,
@@ -6246,14 +6428,19 @@ class DropdownDirective {
             .subscribe((e) => {
             if (!this.onSelectionChanged)
                 return;
-            this.onSelectionChanged(() => ({
-                "event": {
-                    selectedOption: {
-                        value: e.component.value,
-                        label: e.component.text
-                    }
+            const event = {
+                selectedOption: {
+                    value: e.component.value,
+                    label: e.component.text
                 }
-            }));
+            };
+            const options = {
+                extendContext: () => ({
+                    "event": event
+                }),
+                invokeArgs: [event]
+            };
+            this.onSelectionChanged(options);
         });
     }
     canValidate = false;
@@ -7317,6 +7504,12 @@ class TooltipControl extends Control {
 class DisplayFieldControl extends Control {
 }
 
+class NavigatorControl extends Control {
+}
+
+class TreelistControl extends Control {
+}
+
 function createControl(context) {
     switch (context.metadata.type) {
         case "default":
@@ -7402,6 +7595,10 @@ function createControl(context) {
             return new TabControl(context);
         case "accordion":
             return new AccordionControl(context);
+        case "navigator":
+            return new NavigatorControl(context);
+        case "treelist":
+            return new TreelistControl(context);
         default:
             return new Control(context);
     }
@@ -7560,21 +7757,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class DateDirective {
     sirioDatepicker;
+    pick = null;
+    minDate = null;
+    maxDate = null;
     constructor(sirioDatepicker) {
         this.sirioDatepicker = sirioDatepicker;
         const registerOnChange = this.sirioDatepicker.registerOnChange.bind(this.sirioDatepicker);
+        const _this = this;
         this.sirioDatepicker.registerOnChange = function (fn) {
             registerOnChange(function (value) {
-                fn(dateToStore(value));
+                fn(dateToStore(value, _this.displayFormat));
             });
         };
         const writeValue = this.sirioDatepicker.writeValue.bind(this.sirioDatepicker);
         this.sirioDatepicker.writeValue = function (value, event, updateCalendar) {
-            writeValue(dateToDisplay(value), event, updateCalendar);
+            writeValue(dateToDisplay(value, _this.displayFormat), event, updateCalendar);
+        };
+    }
+    ngOnChanges(changes) {
+        if (changes["pick"] || changes["minDate"] || changes["maxDate"]) {
+            this.configurePicker();
+        }
+    }
+    ngAfterViewInit() {
+        this.configurePicker();
+    }
+    displayFormat = "dd/MM/yyyy";
+    configurePicker() {
+        var datePicker = this.sirioDatepicker?.calendarRef;
+        if (!datePicker)
+            return;
+        const pickLevel = this.getPickLevel();
+        const displayFormat = this.displayFormat = this.getDisplayFormat(pickLevel);
+        let options = {
+            pickLevel: pickLevel,
+            startView: pickLevel,
+            format: displayFormat.toLowerCase(),
+            minDate: this.getDate(this.minDate),
+            maxDate: this.getDate(this.maxDate)
         };
+        datePicker.setOptions(options);
+    }
+    getPickLevel() {
+        switch (this.pick) {
+            case "month": return 1;
+            case "year": return 2;
+            case "date":
+            default:
+                return 0;
+        }
+    }
+    getDate(value) {
+        if (value instanceof Date)
+            return isValid(value) ? value : null;
+        if (typeof value === 'string') {
+            const date = parseISO(value);
+            return isValid(date) ? date : null;
+        }
+        return null;
+    }
+    getDisplayFormat(pickLevel) {
+        switch (pickLevel) {
+            case 1: return 'MM/yyyy';
+            case 2: return 'yyyy';
+            case 0:
+            default:
+                return 'dd/MM/yyyy';
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateDirective, deps: [{ token: i1.SirioDatepickerComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DateDirective, isStandalone: true, selector: "[isoDate]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DateDirective, isStandalone: true, selector: "[isoDate]", inputs: { pick: "pick", minDate: "minDate", maxDate: "maxDate" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateDirective, decorators: [{
             type: Directive,
@@ -7584,68 +7836,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.SirioDatepickerComponent, decorators: [{
                     type: Host
-                }] }] });
-const dislayFormat = 'dd/mm/yyyy';
-const storeFormat = 'yyyy-mm-dd';
-function dateToDisplay(value) {
+                }] }], propDecorators: { pick: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }] } });
+function dateToDisplay(value, displayFormat = 'dd/MM/yyyy') {
     if (typeof value === "string") {
-        const date = parseStore(value) ?? parseDisplay(value);
+        const date = parseStore(value) ?? parseDisplay(value, 'dd/MM/yyyy');
         return (date == null)
             ? value
-            : Datepicker.formatDate(date, dislayFormat, 'it');
+            : formatDisplay(date, displayFormat);
     }
     else {
         return null;
     }
 }
-function dateToStore(value) {
+function dateToStore(value, displayFormat = 'dd/MM/yyyy') {
     if (typeof value === "string") {
-        const date = parseStore(value) ?? parseDisplay(value);
+        const date = parseStore(value) ?? parseDisplay(value, displayFormat);
         return (date == null)
             ? null
-            : Datepicker.formatDate(date, storeFormat, 'it');
+            : formatStore(date);
     }
     else {
         return null;
     }
 }
-function parseDisplay(value) {
-    const regex = /^(\d{2})\/(\d{2})\/(\d{4})$/;
-    const match = value.match(regex);
-    if (!match)
+function formatDisplay(value, displayFormat) {
+    return format(value, displayFormat);
+}
+function parseDisplay(value, displayFormat) {
+    const date = parse(value, displayFormat, new Date());
+    if (!isValid(date))
         return null;
-    const day = parseInt(match[1], 10);
-    const month = parseInt(match[2], 10);
-    const year = parseInt(match[3], 10);
-    const date = new Date(year, month - 1, day);
-    if (date.getFullYear() === year &&
-        date.getMonth() === month - 1 &&
-        date.getDate() === day) {
-        return date;
-    }
-    else {
+    if (format(date, displayFormat) !== value) {
         return null;
     }
+    date.setHours(0, 0, 0, 0);
+    return date;
+}
+function formatStore(value) {
+    return format(value, 'yyyy-MM-dd');
 }
 function parseStore(value) {
-    const regex = /^(\d{4})-(\d{2})-(\d{2})(T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})?)?$/;
-    const match = value.match(regex);
-    if (!match) {
+    const date = parseISO(value);
+    if (!isValid(date))
         return null;
-    }
-    const year = parseInt(match[1], 10);
-    const month = parseInt(match[2], 10);
-    const day = parseInt(match[3], 10);
-    const date = new Date(year, month - 1, day);
-    if (date.getFullYear() === year &&
-        date.getMonth() === month - 1 &&
-        date.getDate() === day) {
-        return date;
-    }
-    else {
-        return null;
-    }
+    date.setHours(0, 0, 0, 0);
+    return date;
+}
+function configureLocale() {
+    const locales = Datepicker.locales;
+    locales['it'] = {
+        days: [
+            'Domenica',
+            'Lunedì',
+            'Martedì',
+            'Mercoledì',
+            'Giovedì',
+            'Venerdì',
+            'Sabato',
+        ],
+        daysMin: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
+        months: [
+            'Gennaio',
+            'Febbraio',
+            'Marzo',
+            'Aprile',
+            'Maggio',
+            'Giugno',
+            'Luglio',
+            'Agosto',
+            'Settembre',
+            'Ottobre',
+            'Novembre',
+            'Dicembre',
+        ],
+        monthsShort: [
+            'Gen',
+            'Feb',
+            'Mar',
+            'Apr',
+            'Mag',
+            'Giu',
+            'Lug',
+            'Ago',
+            'Set',
+            'Ott',
+            'Nov',
+            'Dic',
+        ],
+        today: 'Oggi',
+        clear: 'Pulisci',
+        format: 'dd/mm/yyyy',
+        weekStart: 1
+    };
 }
+;
+configureLocale();
 
 class NumberDirective {
     sirioInput;
@@ -7767,6 +8058,80 @@ function valueToStore(value) {
     }
 }
 
+class NavigatorStateDirective {
+    _total = 0;
+    _index = 0;
+    _requestedIndex = 0;
+    initialized = false;
+    ngAfterViewInit() {
+        this.initialized = true;
+    }
+    indexChange = new EventEmitter();
+    set total(value) {
+        this._total = value ?? 0;
+        this.recalculate(false);
+    }
+    get total() {
+        return this._total;
+    }
+    get index() {
+        return this._index;
+    }
+    set index(value) {
+        this._requestedIndex = value ?? 0;
+        this.recalculate(true);
+    }
+    canNext() {
+        return this._index < this._total - 1;
+    }
+    canPrevious() {
+        return this._index > 0;
+    }
+    next() {
+        if (this.canNext())
+            this.setIndex(this._index + 1, true);
+    }
+    previous() {
+        if (this.canPrevious())
+            this.setIndex(this._index - 1, true);
+    }
+    recalculate(preserveIndex) {
+        const newIndex = Math.max(0, Math.min(this._requestedIndex, this._total - 1));
+        if (newIndex === this._index) {
+            return;
+        }
+        this._index = newIndex;
+        if (!preserveIndex)
+            this._requestedIndex = this._index;
+        if (this.initialized) {
+            this.indexChange.emit(this._index);
+        }
+    }
+    setIndex(value, emit) {
+        if (value == null || isNaN(value)) {
+            return;
+        }
+        this._requestedIndex = value;
+        this.recalculate(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavigatorStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: NavigatorStateDirective, isStandalone: true, selector: "[navigatorState]", inputs: { total: "total", index: "index" }, outputs: { indexChange: "indexChange" }, exportAs: ["navigatorState"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavigatorStateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[navigatorState]',
+                    exportAs: 'navigatorState',
+                    standalone: true
+                }]
+        }], propDecorators: { indexChange: [{
+                type: Output
+            }], total: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }] } });
+
 class TextDirective {
     sirioInput;
     renderer;
@@ -7931,7 +8296,7 @@ class ValueSyncDirective {
         this.sub?.unsubscribe();
         this.sub = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ValueSyncDirective, deps: [{ token: i16.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ValueSyncDirective, deps: [{ token: i17.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ValueSyncDirective, isStandalone: true, selector: "[valueSync]", inputs: { valueSync: "valueSync" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ValueSyncDirective, decorators: [{
@@ -7940,7 +8305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[valueSync]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i16.NgControl }], propDecorators: { valueSync: [{
+        }], ctorParameters: () => [{ type: i17.NgControl }], propDecorators: { valueSync: [{
                 type: Input
             }] } });
 
@@ -8011,14 +8376,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class TabItemDirective {
     componentRef;
     disabled;
+    label;
     ngOnChanges(changes) {
-        if (changes["disabled"]) {
-            const tabControl = this.componentRef;
+        const tabControl = this.componentRef;
+        if (changes["disabled"] || changes["label"]) {
             tabControl.cd.markForCheck();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TabItemDirective, isStandalone: true, selector: "[tabItem]", inputs: { componentRef: "componentRef", disabled: "disabled" }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TabItemDirective, isStandalone: true, selector: "[tabItem]", inputs: { componentRef: "componentRef", disabled: "disabled", label: "label" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemDirective, decorators: [{
             type: Directive,
@@ -8030,6 +8396,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], label: [{
+                type: Input
             }] } });
 
 class CollapseDirective {
@@ -8182,11 +8550,11 @@ class CollapseDirective {
     }
     onExpandOccurred() {
         if (this.onExpand)
-            this.onExpand();
+            this.onExpand({ invokeArgs: [] });
     }
     onCollapseOccurred() {
         if (this.onCollapse)
-            this.onCollapse();
+            this.onCollapse({ invokeArgs: [] });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.DestroyRef }, { token: ListenerService }, { token: i2.LanguageService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: CollapseDirective, isStandalone: true, selector: "[collapse]", inputs: { maxHeight: ["collapse", "maxHeight"], onCollapse: "onCollapse", onExpand: "onExpand", component: ["register", "component"] }, providers: [
@@ -8243,6 +8611,237 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     type: Host
                 }] }, { type: i0.DestroyRef }] });
 
+class TreeListDirective {
+    el;
+    listenerService;
+    nodes = [];
+    constructor(el, listenerService) {
+        this.el = el;
+        this.listenerService = listenerService;
+    }
+    ngOnChanges(changes) {
+        if (changes['nodes'] && this.initialized) {
+            this.rebuild();
+        }
+    }
+    ngAfterViewInit() {
+        this.initialized = true;
+        this.rebuild();
+    }
+    initialized = false;
+    rows = [];
+    rebuild() {
+        queueMicrotask(() => {
+            this.rows = Array.from(this.el.nativeElement.querySelectorAll('tbody tr'));
+            this.initToggles();
+            this.refreshTree();
+        });
+    }
+    getChildren(id) {
+        return this.rows.filter(r => r.dataset['parent'] === id);
+    }
+    setVisible(row, visible) {
+        row.classList.toggle('hidden', !visible);
+    }
+    updateVisibility(parentId, parentVisible, parentExpanded) {
+        const children = this.getChildren(parentId);
+        for (const child of children) {
+            const childVisible = parentVisible && parentExpanded;
+            this.setVisible(child, childVisible);
+            const childExpanded = child.dataset['expanded'] === 'true';
+            this.updateVisibility(child.dataset['id'], childVisible, childExpanded);
+        }
+    }
+    isExpanded(row) {
+        return row.dataset['expanded'] === 'true';
+    }
+    refreshTree() {
+        this.rows
+            .filter(r => !r.dataset['parent'])
+            .forEach(root => {
+            this.setVisible(root, true);
+            this.updateVisibility(root.dataset['id'], true, root.dataset['expanded'] === 'true');
+        });
+    }
+    initToggles() {
+        const toggles = this.el.nativeElement.querySelectorAll('.toggle');
+        toggles.forEach((toggle) => {
+            if (toggle.dataset['bound'] === 'true') {
+                return;
+            }
+            toggle.dataset['bound'] = 'true';
+            const row = toggle.closest('tr');
+            this.refreshToggleIcon(toggle, this.isExpanded(row));
+            this.listenerService.listen(toggle, 'click', (e) => {
+                e.stopPropagation();
+                const expanded = this.isExpanded(row);
+                row.dataset['expanded'] = (!expanded).toString();
+                this.refreshToggleIcon(toggle, this.isExpanded(row));
+                this.refreshTree();
+            });
+        });
+    }
+    refreshToggleIcon(target, expanded) {
+        target.classList.remove('fas', 'fa-angle-down', 'fa-angle-right');
+        target.classList.add('fas');
+        target.classList.add(expanded ? 'fa-angle-down' : 'fa-angle-right');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeListDirective, deps: [{ token: i0.ElementRef }, { token: ListenerService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TreeListDirective, isStandalone: true, selector: "[treelist]", inputs: { nodes: ["treelist", "nodes"] }, providers: [
+            ListenerService
+        ], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[treelist]',
+                    standalone: true,
+                    providers: [
+                        ListenerService
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ListenerService }], propDecorators: { nodes: [{
+                type: Input,
+                args: ['treelist']
+            }] } });
+
+class FileListReadonlyDirective {
+    host;
+    renderer;
+    readonly = false;
+    constructor(host, renderer) {
+        this.host = host;
+        this.renderer = renderer;
+    }
+    ngAfterViewChecked() {
+        const buttons = this.host.nativeElement.querySelectorAll('.sirio-upload-file-list button');
+        buttons.forEach(button => {
+            if (this.readonly) {
+                this.renderer.setAttribute(button, 'disabled', '');
+            }
+            else {
+                this.renderer.removeAttribute(button, 'disabled');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileListReadonlyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: FileListReadonlyDirective, isStandalone: true, selector: "ngx-sirio-file-upload", inputs: { readonly: "readonly" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileListReadonlyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ngx-sirio-file-upload',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { readonly: [{
+                type: Input
+            }] } });
+
+class BadgeComponent {
+    badge;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BadgeComponent, isStandalone: true, selector: "app-badge", inputs: { badge: "badge" }, ngImport: i0, template: "<div *ngIf=\"badge?.type\"\r\n      class=\"sirio-tag\"\r\n      style=\"margin-left:10px\"\r\n      [ngClass]=\"'sirio-bg-' + badge.type\">\r\n  {{ badge.text }}\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-badge', standalone: true, imports: [NgClass, NgIf], template: "<div *ngIf=\"badge?.type\"\r\n      class=\"sirio-tag\"\r\n      style=\"margin-left:10px\"\r\n      [ngClass]=\"'sirio-bg-' + badge.type\">\r\n  {{ badge.text }}\r\n</div>\r\n" }]
+        }], propDecorators: { badge: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class TabBadgesDirective {
+    host;
+    appRef;
+    environmentInjector;
+    renderer;
+    destroyRef;
+    constructor(host, appRef, environmentInjector, renderer, destroyRef) {
+        this.host = host;
+        this.appRef = appRef;
+        this.environmentInjector = environmentInjector;
+        this.renderer = renderer;
+        this.destroyRef = destroyRef;
+        this.destroyRef.onDestroy(() => {
+            this.dispose();
+        });
+    }
+    ngAfterViewInit() {
+        for (const [index, badge] of this.pendingBadges) {
+            this.setBadge(index, badge);
+        }
+    }
+    setBadge(index, badge) {
+        this.pendingBadges.set(index, badge);
+        let badgeRef = this.badges.get(index);
+        if (!badgeRef) {
+            const anchor = this.findAnchor(index);
+            if (!anchor)
+                return;
+            badgeRef = this.createBadge(anchor);
+            this.badges.set(index, badgeRef);
+        }
+        badgeRef.setInput('badge', badge);
+    }
+    badges = new Map();
+    pendingBadges = new Map();
+    findAnchor(index) {
+        const anchors = this.host.nativeElement.querySelectorAll('ngx-sirio-tab-nav-item a');
+        return anchors.item(index);
+    }
+    createBadge(anchor) {
+        const badgeRef = createComponent(BadgeComponent, {
+            environmentInjector: this.environmentInjector
+        });
+        this.appRef.attachView(badgeRef.hostView);
+        this.renderer.appendChild(anchor, badgeRef.location.nativeElement);
+        return badgeRef;
+    }
+    dispose() {
+        for (const badgeRef of this.badges.values()) {
+            badgeRef.destroy();
+        }
+        this.badges.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabBadgesDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }, { token: i0.Renderer2 }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TabBadgesDirective, isStandalone: true, selector: "[tabBadges]", exportAs: ["tabBadges"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabBadgesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tabBadges]',
+                    exportAs: 'tabBadges',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }, { type: i0.Renderer2 }, { type: i0.DestroyRef }] });
+class TabBadgeDirective {
+    tabBadges;
+    tabIndex;
+    badge = null;
+    ngOnChanges(changes) {
+        if (!changes['badge'])
+            return;
+        this.tabBadges?.setBadge(this.tabIndex, this.badge);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TabBadgeDirective, isStandalone: true, selector: "[tabBadge]", inputs: { tabBadges: "tabBadges", tabIndex: "tabIndex", badge: "badge" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tabBadge]',
+                    standalone: true
+                }]
+        }], propDecorators: { tabBadges: [{
+                type: Input,
+                args: [{ required: true }]
+            }], tabIndex: [{
+                type: Input,
+                args: [{ required: true }]
+            }], badge: [{
+                type: Input
+            }] } });
+
 function toLocalString(d) {
     if (!isValidDateObject(d))
         return null;
@@ -8476,7 +9075,7 @@ class DateTimeValidationDirective {
         this.cleanupValidation(validationTarget);
         this.renderer.addClass(validationTarget, className);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateTimeValidationDirective, deps: [{ token: i16.NgControl }, { token: i0.DestroyRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateTimeValidationDirective, deps: [{ token: i17.NgControl }, { token: i0.DestroyRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DateTimeValidationDirective, isStandalone: true, selector: "[dateTimeValidator]", inputs: { isWarning: "isWarning", showWhenValid: "showWhenValid" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateTimeValidationDirective, decorators: [{
@@ -8485,7 +9084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[dateTimeValidator]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i16.NgControl }, { type: i0.DestroyRef }, { type: i0.Renderer2 }], propDecorators: { isWarning: [{
+        }], ctorParameters: () => [{ type: i17.NgControl }, { type: i0.DestroyRef }, { type: i0.Renderer2 }], propDecorators: { isWarning: [{
                 type: Input
             }], showWhenValid: [{
                 type: Input
@@ -8737,6 +9336,62 @@ function isMeaningful(x) {
 }
 ;
 
+function flattenTree(nodes, options) {
+    if (nodes == null) {
+        return [];
+    }
+    if (!Array.isArray(nodes)) {
+        console.warn('Expected an array but received:', nodes);
+        return [];
+    }
+    const result = [];
+    let idCounter = 1;
+    const getChildren = (node) => {
+        const c = options?.children;
+        if (!c)
+            return [];
+        if (typeof c === 'function') {
+            return c(node) ?? [];
+        }
+        const children = node[c];
+        return Array.isArray(children) ? children : [];
+    };
+    function visit(node, parentId, level) {
+        const currentId = idCounter++;
+        const children = getChildren(node);
+        const hasChildren = children.length > 0;
+        const flatNode = {
+            id: currentId,
+            parentId,
+            level,
+            hasChildren,
+            expanded: false,
+            data: node
+        };
+        result.push(flatNode);
+        options?.onCreate?.(flatNode);
+        for (const child of children) {
+            visit(child, currentId, level + 1);
+        }
+    }
+    for (const root of nodes) {
+        visit(root, null, 0);
+    }
+    return result;
+}
+
+class TimesPipe {
+    transform(value) {
+        return Array.from({ length: value }, (_, i) => i);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TimesPipe, isStandalone: true, name: "times" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimesPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'times', standalone: true }]
+        }] });
+
 class SanitizeService {
     sanitizer;
     constructor(sanitizer) {
@@ -8833,6 +9488,7 @@ class DynamicFieldsComponent {
     metadata;
     languageService;
     global;
+    functionService;
     formService;
     grid;
     chart;
@@ -8849,7 +9505,7 @@ class DynamicFieldsComponent {
     identityIndex;
     disableAutoFocus;
     Texts = Texts;
-    constructor(sanitizer, markdown, mime, programmability, weak, register, metadata, languageService, global, formService, grid, chart, dialog, autoFocus, el) {
+    constructor(sanitizer, markdown, mime, programmability, weak, register, metadata, languageService, global, functionService, formService, grid, chart, dialog, autoFocus, el) {
         this.sanitizer = sanitizer;
         this.markdown = markdown;
         this.mime = mime;
@@ -8859,6 +9515,7 @@ class DynamicFieldsComponent {
         this.metadata = metadata;
         this.languageService = languageService;
         this.global = global;
+        this.functionService = functionService;
         this.formService = formService;
         this.grid = grid;
         this.chart = chart;
@@ -8869,7 +9526,6 @@ class DynamicFieldsComponent {
     ngOnInit() {
         this.register.identify(this.identity, this.identityIndex);
         this.programmability.addEvaluatorProviders(this.form);
-        this.configureDatepicker();
     }
     ngOnChanges(changes) {
         if (changes['formGroup']) {
@@ -8917,7 +9573,7 @@ class DynamicFieldsComponent {
             return this.sanitizer.sanitizeSafeUrl(url);
         });
     }
-    evaluateHeight(value) {
+    evaluateSize(value) {
         if (typeof value === "number") {
             return value + "px";
         }
@@ -8954,6 +9610,52 @@ class DynamicFieldsComponent {
         const show = this.evaluateBoolean(conditional?.show);
         return !(hide === true || show === false);
     }
+    evaluateWithEvent(text, event) {
+        return this.programmability.evaluate(this.formGroup, text, this.getEventOptions(event));
+    }
+    evaluateWithEventAsBoolean(text, event, defaultValue) {
+        return this.programmability.evaluateBoolean(this.formGroup, text, this.getEventOptions(event)) ?? defaultValue;
+    }
+    evaluateWithEventAsString(text, event, defaultValue) {
+        return this.programmability.evaluateString(this.formGroup, text, this.getEventOptions(event)) ?? defaultValue;
+    }
+    evaluateWithEventAsHandler(text, event) {
+        return this.programmability.evaluate(this.formGroup, text, { ...this.getEventOptions(event), cacheable: false });
+    }
+    getTreeColumns(component) {
+        const columns = component.columns
+            || this.evaluate(component.columnsExpression)
+            || [];
+        return columns;
+    }
+    getTreeSource(component) {
+        const watchKey = `:evaluateTree(${component.dataSource})`;
+        return this.weak.call(this.formGroup, watchKey, () => {
+            const result = this.programmability.evaluate(this.formGroup, component.dataSource, {
+                cacheable: true,
+                cacheInvalidated: () => this.weak.invalidate(this.formGroup, watchKey)
+            });
+            const childFuncOrValue = this.evaluateFuncOrValue(component.children);
+            const expandedFuncOrValue = this.evaluateFuncOrValue(component.row?.expanded);
+            const cssClassFuncOrValue = this.evaluateFuncOrValue(component.row?.cssClass);
+            const toFlat = (data) => flattenTree(data, {
+                children: childFuncOrValue,
+                onCreate: node => {
+                    if (!component.row || typeof component.row !== 'object') {
+                        return;
+                    }
+                    node.expanded = this.invokeFuncOrValue(expandedFuncOrValue, node);
+                    node.meta = {
+                        cssClass: this.invokeFuncOrValue(cssClassFuncOrValue, node)
+                    };
+                }
+            });
+            if (isObservable(result)) {
+                return result.pipe(map(toFlat));
+            }
+            return of(toFlat(result));
+        });
+    }
     getTemplate(value) {
         return this.metadata.getFormByName(value);
     }
@@ -9080,13 +9782,16 @@ class DynamicFieldsComponent {
             return this.noData;
         }
     }
-    runExpression(expression) {
+    callExpression(expression) {
         if (!expression)
             return undefined;
-        const evaluate = this.evaluate.bind(this);
-        return (extendContext) => {
-            evaluate(expression, false, extendContext);
+        const evaluate = (options) => {
+            return this.programmability.evaluate(this.formGroup, expression, {
+                ...options,
+                cacheable: false
+            });
         };
+        return (options) => evaluate(options);
     }
     refreshRowSource(component) {
         return () => {
@@ -9095,14 +9800,13 @@ class DynamicFieldsComponent {
             }
         };
     }
-    addItem(formArray) {
-        if (hasFactory(formArray)) {
-            const addedItem = formArray.addItem();
-            this.autoFocus.mark(addedItem);
-            this.navigateItem(formArray);
-        }
+    addItem(formArray, state) {
+        const addedItem = new FormGroup({});
+        formArray.push(addedItem);
+        this.autoFocus.mark(addedItem);
+        setTimeout(() => state.index = state.total - 1);
     }
-    removeItem(formArray, index, withConfirm) {
+    removeItem(formArray, index, withConfirm, state) {
         if (withConfirm) {
             this.dialog.confirm(this.locale(Texts, 'ConfirmDelete'), {
                 "title": this.locale(Texts, 'Confirm'),
@@ -9110,25 +9814,15 @@ class DynamicFieldsComponent {
                 "onResult": (result) => {
                     if (result.action === "Yes") {
                         formArray.removeAt(index);
-                        this.navigateItem(formArray);
+                        setTimeout(() => state.index = Math.min(state.index, state.total - 1));
                     }
                 }
             });
         }
         else {
             formArray.removeAt(index);
-            this.navigateItem(formArray);
         }
     }
-    navigationIndex = 0;
-    navigateItem(formArray, delta = 0) {
-        if (!formArray || formArray.length === 0) {
-            this.navigationIndex = -1;
-            return;
-        }
-        const lastIndex = formArray.length - 1;
-        this.navigationIndex = Math.min(lastIndex, Math.max(0, this.navigationIndex + delta));
-    }
     moveUpItem(formArray, index) {
         const control = formArray.at(index);
         formArray.removeAt(index);
@@ -9255,16 +9949,17 @@ class DynamicFieldsComponent {
         if (!this.applyInlineStyles(styles, component.inlineStyle))
             return null;
         return styles;
-        //const layout = component.layout;
-        //if (!this.hasPosition(component.layout)) {
-        //  return null;
-        //}
-        //return {
-        //  ...(layout.y != null ? { top: `${layout.y}px` } : {}),
-        //  ...(layout.x != null ? { left: `${layout.x}px` } : {}),
-        //  ...(layout.width != null ? { width: `${layout.width}px` } : {}),
-        //  ...(layout.height != null ? { height: `${layout.height}px` } : {}),
-        //};
+    }
+    getClass(component) {
+        const classes = {};
+        this.applyCssClasses(classes, component.cssClass);
+        return classes;
+    }
+    getStyle(component) {
+        const styles = {};
+        if (!this.applyInlineStyles(styles, component.inlineStyle))
+            return null;
+        return styles;
     }
     getTextAlignment(component) {
         switch (component.textAlign) {
@@ -9284,6 +9979,13 @@ class DynamicFieldsComponent {
             [`${ruleName}-fill`]: alignment === 'fill'
         };
     }
+    getJustify(align) {
+        switch (align) {
+            case 'right': return 'flex-end';
+            case 'center': return 'center';
+            default: return 'flex-start';
+        }
+    }
     getLightView(component) {
         const className = 'light-view';
         const value = component.properties?.useLightReadonly
@@ -9307,6 +10009,9 @@ class DynamicFieldsComponent {
             return this.noData;
         }
     }
+    isTextOverflow(el) {
+        return el.scrollWidth > el.clientWidth;
+    }
     noData = of([]);
     get language() {
         return this.languageService.getLanguage();
@@ -9314,6 +10019,17 @@ class DynamicFieldsComponent {
     invalidate(text) {
         return this.programmability.invalidate(text);
     }
+    getEventOptions(value) {
+        if (value == null)
+            return {};
+        const options = {
+            extendContext: () => ({
+                "event": value
+            }),
+            invokeArgs: [value]
+        };
+        return options;
+    }
     getControlFromPath(path) {
         const control = path
             ? this.formGroup.get(path)
@@ -9380,72 +10096,22 @@ class DynamicFieldsComponent {
         Object.assign(target, styles);
         return true;
     }
-    //private hasPosition(layout?: {
-    //  x?: number | null;
-    //  y?: number | null;
-    //}): boolean {
-    //  return layout?.x != null || layout?.y != null;
-    //}
-    configureDatepicker() {
-        Datepicker.locales['it'] = {
-            days: [
-                'Domenica',
-                'Lunedì',
-                'Martedì',
-                'Mercoledì',
-                'Giovedì',
-                'Venerdì',
-                'Sabato',
-            ],
-            daysMin: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
-            months: [
-                'Gennaio',
-                'Febbraio',
-                'Marzo',
-                'Aprile',
-                'Maggio',
-                'Giugno',
-                'Luglio',
-                'Agosto',
-                'Settembre',
-                'Ottobre',
-                'Novembre',
-                'Dicembre',
-            ],
-            monthsShort: [
-                'Gen',
-                'Feb',
-                'Mar',
-                'Apr',
-                'Mag',
-                'Giu',
-                'Lug',
-                'Ago',
-                'Set',
-                'Ott',
-                'Nov',
-                'Dic',
-            ],
-            today: 'Oggi',
-            clear: 'Pulisci',
-            format: 'dd/mm/yyyy',
-            weekStart: 1
-        };
-    }
-    ;
-    markForAutoFocus(formGroup) {
-        formGroup['_autoFocus'] = true;
+    evaluateFuncOrValue(value) {
+        const expr = this.programmability.evaluate(this.formGroup, value);
+        return this.functionService.asInvokable(expr) ?? expr;
     }
-    requireAutoFocus(formGroup) {
-        return formGroup['_autoFocus'] === true;
+    invokeFuncOrValue(funcOrValue, ...args) {
+        if (typeof funcOrValue === "function")
+            return funcOrValue(...args);
+        return funcOrValue;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DynamicFieldsComponent, deps: [{ token: SanitizeService }, { token: MarkdownService }, { token: MimeService }, { token: ProgrammabilityService }, { token: WeakService }, { token: RegisterService }, { token: MetadataService }, { token: i2.LanguageService }, { token: GlobalService }, { token: FormService }, { token: GridService }, { token: ChartService }, { token: DialogService }, { token: AutoFocusService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DynamicFieldsComponent, deps: [{ token: SanitizeService }, { token: MarkdownService }, { token: MimeService }, { token: ProgrammabilityService }, { token: WeakService }, { token: RegisterService }, { token: MetadataService }, { token: i2.LanguageService }, { token: GlobalService }, { token: FunctionService }, { token: FormService }, { token: GridService }, { token: ChartService }, { token: DialogService }, { token: AutoFocusService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DynamicFieldsComponent, isStandalone: true, selector: "app-dynamic-fields", inputs: { form: "form", rows: "rows", formGroup: "formGroup", alignment: "alignment", readOnly: "readOnly", recursionLevel: "recursionLevel", identity: "identity", identityIndex: "identityIndex", disableAutoFocus: "disableAutoFocus" }, providers: [
             RegisterService,
             ProgrammabilityService,
             GridService,
             ChartService
-        ], 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            <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n              <!-- #region textfield -->\r\n              <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-input type=\"text\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                                 [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 [textcase]=\"component.textCase\"\r\n                                 [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #textfield\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"textfield\">\r\n                </ngx-sirio-input>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region select -->\r\n              <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [refresh]=\"refreshValues(component)\"\r\n                                  dropdown\r\n                                  [onSelectionChanged]=\"runExpression(component.selectionChanged)\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #select\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"select\">\r\n                  <ngx-sirio-select-panel>\r\n                    <ngx-sirio-input *ngIf=\"component.searchable\" class=\"searchable\" type=\"text\" [placeholder]=\"locale(Texts, 'TypeToSearch')\"></ngx-sirio-input>\r\n                    <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n                  </ngx-sirio-select-panel>\r\n                </ngx-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                <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [isMultiple]=\"true\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [refresh]=\"refreshValues(component)\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #taglist\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"taglist\">\r\n                  <ngx-sirio-select-panel>\r\n                    <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n                  </ngx-sirio-select-panel>\r\n                </ngx-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                <ngx-sirio-input type=\"number\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                                 [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 number\r\n                                 [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n                                 [minimum]=\"evaluateNumber(component.minimum)\"\r\n                                 [maximum]=\"evaluateNumber(component.maximum)\"\r\n                                 [decimalDigits]=\"evaluateNumber(component.decimalDigits)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #number\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"number\">\r\n                </ngx-sirio-input>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region datetime -->\r\n              <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ng-container [ngSwitch]=\"component.subtype\">\r\n                  <!-- #region date -->\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n                                          [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n                                          [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                          [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [ngClass]=\"getTextAlignment(component)\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          isoDate\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #date\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"date\">\r\n                    </ngx-sirio-datepicker>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region time -->\r\n                  <ng-container *ngSwitchCase=\"'time'\">\r\n                    <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n                                          [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                          [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                          [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [ngClass]=\"getTextAlignment(component)\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #time\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"time\">\r\n                    </ngx-sirio-timepicker>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region datetime -->\r\n                  <ng-container *ngSwitchCase=\"'datetime'\">\r\n                    <div [formControlName]=\"component.key\"\r\n                         dateTimeCoordinator\r\n                         dateTimeValidator\r\n                         [isWarning]=\"isWarning(component)\"\r\n                         [showWhenValid]=\"false\"\r\n                         [datePicker]=\"date\"\r\n                         [timePicker]=\"time\"\r\n                         [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                         [properties]=\"component.properties\"\r\n                         [valueSync]=\"component.valueSync\"\r\n                         #datetime\r\n                         [register]=\"component\"\r\n                         [componentRef]=\"datetime\"\r\n                         class=\"datetime-container\">\r\n                      <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n                                            [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n                                            [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                            [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                            [ngClass]=\"getTextAlignment(component)\"\r\n                                            isoDate\r\n                                            #date>\r\n                      </ngx-sirio-datepicker>\r\n                      <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n                                            [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                            [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                            [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                            [ngClass]=\"getTextAlignment(component)\"\r\n                                            #time>\r\n                      </ngx-sirio-timepicker>\r\n                    </div>\r\n                    <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                      <span class=\"sirio-form-feedback\">{{textFeedback}}</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                      <p class=\"sirio-helper-text\">{{textHelp}}</p>\r\n                    </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region toggle -->\r\n                    <ng-container *ngSwitchCase=\"'toggle'\">\r\n                      <ngx-sirio-toggle [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                        [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                        [textFeedback]=\"getTextFeedback(component)\"\r\n                                        [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [properties]=\"component.properties\"\r\n                                        [formControlName]=\"component.key\"\r\n                                        validation\r\n                                        [canValidate]=\"true\"\r\n                                        [isWarning]=\"isWarning(component)\"\r\n                                        [showWhenValid]=\"false\"\r\n                                        [valueSync]=\"component.valueSync\"\r\n                                        #toggle\r\n                                        [register]=\"component\"\r\n                                        [componentRef]=\"toggle\">\r\n                        {{ evaluateString(locale(component, 'label')) }}\r\n                      </ngx-sirio-toggle>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-checkbox [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #checkbox\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"checkbox\">\r\n                        {{ evaluateString(locale(component, 'label')) }}\r\n                      </ngx-sirio-checkbox>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region chip -->\r\n                    <ng-container *ngSwitchCase=\"'chip'\">\r\n                      <ngx-sirio-chip-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                  [properties]=\"component.properties\"\r\n                                                  [formControlName]=\"component.key\"\r\n                                                  validation\r\n                                                  [canValidate]=\"true\"\r\n                                                  [isWarning]=\"isWarning(component)\"\r\n                                                  [showWhenValid]=\"false\"\r\n                                                  [refresh]=\"refreshValues(component)\"\r\n                                                  [valueSync]=\"component.valueSync\"\r\n                                                  #chipradio\r\n                                                  [register]=\"component\"\r\n                                                  [componentRef]=\"chipradio\">\r\n                        <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n                                              type=\"radio\"\r\n                                              [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-input-chip>\r\n                      </ngx-sirio-chip-radio-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                             [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                             [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                             [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                             [textFeedback]=\"getTextFeedback(component)\"\r\n                                             [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                             [properties]=\"component.properties\"\r\n                                             [formControlName]=\"component.key\"\r\n                                             validation\r\n                                             [canValidate]=\"true\"\r\n                                             [isWarning]=\"isWarning(component)\"\r\n                                             [showWhenValid]=\"false\"\r\n                                             [refresh]=\"refreshValues(component)\"\r\n                                             [valueSync]=\"component.valueSync\"\r\n                                             #radio\r\n                                             [register]=\"component\"\r\n                                             [componentRef]=\"radio\">\r\n                        <ngx-sirio-radio-button *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-radio-button>\r\n                      </ngx-sirio-radio-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region chip -->\r\n                    <ng-container *ngSwitchCase=\"'chip'\">\r\n                      <ngx-sirio-chip-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                     [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                     [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                     [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                     [textFeedback]=\"getTextFeedback(component)\"\r\n                                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                     [properties]=\"component.properties\"\r\n                                                     [formControlName]=\"component.key\"\r\n                                                     validation\r\n                                                     [canValidate]=\"true\"\r\n                                                     [isWarning]=\"isWarning(component)\"\r\n                                                     [showWhenValid]=\"false\"\r\n                                                     [refresh]=\"refreshValues(component)\"\r\n                                                     [valueSync]=\"component.valueSync\"\r\n                                                     #chipcheckbox\r\n                                                     [register]=\"component\"\r\n                                                     [componentRef]=\"chipcheckbox\">\r\n                        <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n                                              type=\"checkbox\"\r\n                                              [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-input-chip>\r\n                      </ngx-sirio-chip-checkbox-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                [textFeedback]=\"getTextFeedback(component)\"\r\n                                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                [properties]=\"component.properties\"\r\n                                                [formControlName]=\"component.key\"\r\n                                                validation\r\n                                                [canValidate]=\"true\"\r\n                                                [isWarning]=\"isWarning(component)\"\r\n                                                [showWhenValid]=\"false\"\r\n                                                [refresh]=\"refreshValues(component)\"\r\n                                                [valueSync]=\"component.valueSync\"\r\n                                                #checkbox\r\n                                                [register]=\"component\"\r\n                                                [componentRef]=\"checkbox\">\r\n                        <ngx-sirio-checkbox *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-checkbox>\r\n                      </ngx-sirio-checkbox-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                <ngx-sirio-input type=\"textarea\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 [textcase]=\"component.textCase\"\r\n                                 [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #textarea\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"textarea\">\r\n                </ngx-sirio-input>\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                  <ngx-sirio-file-upload [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                         [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                         [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                         [accept]=\"getMimeTypes(component.accept)\"\r\n                                         [multiple]=\"evaluateBoolean(component.multiple)\"\r\n                                         (fileUploadedEvent)=\"fileUploaded($event)\"\r\n                                         [showFilelist]=\"!component.showDetails\"\r\n                                         [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                         [textFeedback]=\"getTextFeedback(component)\"\r\n                                         [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                         [properties]=\"component.properties\"\r\n                                         [formControlName]=\"component.key\"\r\n                                         validation\r\n                                         [canValidate]=\"true\"\r\n                                         [isWarning]=\"isWarning(component)\"\r\n                                         [showWhenValid]=\"false\"\r\n                                         [valueSync]=\"component.valueSync\"\r\n                                         #filepicker\r\n                                         [register]=\"component\"\r\n                                         [componentRef]=\"filepicker\">\r\n                    <span class=\"fas fa-arrow-up\" aria-hidden=\"true\"></span>\r\n                    {{ locale(Texts, 'Upload') }}\r\n                  </ngx-sirio-file-upload>\r\n                </div>\r\n                <ng-container *ngIf=\"component.showDetails\">\r\n                  <app-dynamic-fields [form]=\"form\"\r\n                                      [formGroup]=\"formGroup\"\r\n                                      [rows]=\"createUploadTables(component)\"\r\n                                      contextId=\"fileList\"></app-dynamic-fields>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region range -->\r\n              <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-slider [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n                                  [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #range\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"range\">\r\n                </ngx-sirio-slider>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region displayfield -->\r\n              <ng-container *ngSwitchCase=\"'displayfield'\">\r\n                <div class=\"sirio-control\"\r\n                     [ngClass]=\"[getTextAlignment(component), 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                    <button *ngIf=\"component.tooltip\"\r\n                            sirioTooltip\r\n                            [content]=\"component.tooltip\"\r\n                            [hasPopover]=\"true\"\r\n                            [attr.aria-label]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                            class=\"sirio-label-popover fas fa-info-circle\"></button>\r\n                  </div>\r\n                  <div class=\"sirio-form-control data-display\" [ngClass]=\"component.fieldtype\">\r\n                    <ng-container [ngSwitch]=\"component.fieldtype\">\r\n                      <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                        <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\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 *ngSwitchDefault>\r\n                        <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\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                  </div>\r\n                  <p *ngIf=\"component.description\" class=\"sirio-helper-text\">\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                    <ng-container [formArrayName]=\"component.key\"\r\n                                  [formGroup]=\"formGroup\"\r\n                                  [recursion]=\"component\"\r\n                                  #recursion=\"recursion\"\r\n                                  [repeat]=\"evaluateNumber(component.repetitions)\"\r\n                                  [allowAddRemove]=\"evaluateBoolean(component.allowAddRemove)\">\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-container *ngIf=\"component.subtype == 'navigation'\">\r\n                          <ng-container *ngTemplateOutlet=\"navigation; context: { formArray: formArray }\"></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                              <div [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclisttab\">\r\n                                <ngx-sirio-tab [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                               [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                               [tabCount]=\"formArray.controls.length\"\r\n                                               #dynamiclisttab>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ngx-sirio-tab-item [label]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\">\r\n                                      <ng-container *ngIf=\"i === dynamiclisttab.activeIndex\">\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=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove\">\r\n                                            <div style=\"text-align:right\">\r\n                                              <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n                                            </div>\r\n                                          </ng-container>\r\n                                        </div>\r\n                                      </ng-container>\r\n                                    </ngx-sirio-tab-item>\r\n                                  </ng-container>\r\n                                </ngx-sirio-tab>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region accordion -->\r\n                            <ng-container *ngSwitchCase=\"'accordion'\">\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclistaccordion\">\r\n                                <ngx-sirio-accordion [accordionCount]=\"formArray.controls.length\"\r\n                                                     #dynamiclistaccordion>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ngx-sirio-accordion-panel #panel accordionPanel>\r\n                                      <ngx-sirio-accordion-header>\r\n                                        <span [innerText]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\"></span>\r\n                                      </ngx-sirio-accordion-header>\r\n                                      <ngx-sirio-accordion-body>\r\n                                        <ng-container *ngIf=\"panel.panelIsOpen\">\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=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove\">\r\n                                              <div style=\"text-align:right\">\r\n                                                <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n                                              </div>\r\n                                            </ng-container>\r\n                                          </div>\r\n                                        </ng-container>\r\n                                      </ngx-sirio-accordion-body>\r\n                                    </ngx-sirio-accordion-panel>\r\n                                  </ng-container>\r\n                                </ngx-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                                                <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\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, 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                                                <ngx-sirio-button [ngxSirioCollapseTrigger]=\"collapseTemplate\"\r\n                                                                  [color]=\"null\" [icon]=\"collapse.isOpen ? 'fas fa-chevron-down' : 'fas fa-chevron-right' \" />\r\n                                              </div>\r\n                                              <div *ngIf=\"!collapse.isOpen\" class=\"recursion-title\">\r\n                                                <div class=\"recursion-text\">\r\n                                                  <ng-container *ngIf=\"!collapse.isOpen\">\r\n                                                    {{ recursionData.itemsArray.length }} elementi presenti\r\n                                                  </ng-container>\r\n                                                </div>\r\n                                              </div>\r\n                                              <div class=\"recursion-content\">\r\n                                                <ngx-sirio-collapse #collapseTemplate\r\n                                                                    #collapse=\"collapseExtension\"\r\n                                                                    collapseExtension>\r\n                                                  <div *ngIf=\"collapse.isOpen\" 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                                                </ngx-sirio-collapse>\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[navigationIndex] as item\">\r\n                                  <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (navigationIndex + 1) }}</label>\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                                <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                  <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\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, 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 }\"></ng-container>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\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                    <ngx-sirio-button (click)=\"moveUpItem(formArray, i)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"upLabel\"\r\n                                      [title]=\"upLabel\"\r\n                                      [color]=\"null\" icon=\"fas fa-arrow-up\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ upLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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                    <ngx-sirio-button (click)=\"moveDownItem(formArray, i)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"downLabel\"\r\n                                      [title]=\"downLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-arrow-down\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ downLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnRemove let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n                    <ngx-sirio-button (click)=\"removeItem(formArray, i, true)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"removeLabel\"\r\n                                      [title]=\"removeLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-trash\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ removeLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n                    <ngx-sirio-button (click)=\"addItem(formArray)\"\r\n                                      class=\"add-item\"\r\n                                      [ariaLabel]=\"addLabel\"\r\n                                      [title]=\"addLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-plus\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ addLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove\">\r\n                    <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove\">\r\n                    <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, 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 sirio-display-feedback\">{{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-helper-text\">{{textHelp}}</p>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #navigation let-formArray=\"formArray\">\r\n                  <nav class=\"sirio-pagination\">\r\n                    <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n                      <div class=\"sirio-pagination-page\">\r\n                        <select class=\"sirio-form-control\"\r\n                                [(ngModel)]=\"navigationIndex\"\r\n                                [ngModelOptions]=\"{ standalone: true }\">\r\n                          <option *ngFor=\"let _ of formArray.controls; let i = index\" [ngValue]=\"i\">\r\n                            {{ i + 1 }}\r\n                          </option>\r\n                        </select>\r\n                        {{ locale(Texts, 'Of') }}\r\n                        <span>{{ formArray.controls.length }}</span> {{ locale(Texts, 'Elements') }}\r\n                      </div>\r\n                      <div class=\"sirio-pagination-cursor\">\r\n                        <ul class=\"sirio-pagination-list\">\r\n                          <li [class.disabled]=\"navigationIndex == 0\">\r\n                            <a href=\"javascript:void(0)\"\r\n                               (click)=\"navigateItem(formArray, -1)\"\r\n                               [title]=\"locale(Texts, 'PreviousElement')\"\r\n                               [class.disabled]=\"navigationIndex == 0\">\r\n                              <span aria-hidden=\"true\" class=\"fas fa-angle-left\"></span>\r\n                            </a>\r\n                          </li>\r\n                          <li [class.disabled]=\"navigationIndex == formArray.controls.length - 1\">\r\n                            <a href=\"javascript:void(0)\"\r\n                               (click)=\"navigateItem(formArray, 1)\"\r\n                               [title]=\"locale(Texts, 'NextElement')\"\r\n                               [class.disabled]=\"navigationIndex == formArray.controls.length - 1\">\r\n                              <span aria-hidden=\"true\" class=\"fas fa-angle-right\"></span>\r\n                            </a>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </ng-container>\r\n                    <div class=\"actions\">\r\n                      <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray }\"></ng-container>\r\n                      <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && navigationIndex != -1\">\r\n                        <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: navigationIndex }\"></ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </nav>\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 [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]=\"resolvePath(component.path)\"\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                    <ngx-sirio-tab #tab\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"tab\"\r\n                                   [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                   [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                   [isNavLine]=\"component.navigation\"\r\n                                   [isVertical]=\"component.vertical\"\r\n                                   tabControl>\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <ngx-sirio-tab-item [label]=\"evaluateString(locale(panel, 'label'))\"\r\n                                            [icon]=\"evaluateString(panel.icon)\"\r\n                                            [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n                                            #tabPanel\r\n                                            tabItem\r\n                                            [componentRef]=\"tab\"\r\n                                            *ngIf=\"evaluateConditional(panel.conditional)\">\r\n                          <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                            <div *ngIf=\"tabPanel.isActive\">\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                            </div>\r\n                          </ng-container>\r\n                        </ngx-sirio-tab-item>\r\n                      </ng-container>\r\n                    </ngx-sirio-tab>\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                    <ngx-sirio-accordion #accordion\r\n                                         [register]=\"component\"\r\n                                         [componentRef]=\"accordion\">\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <ngx-sirio-accordion-panel *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                                   [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n                          <ngx-sirio-accordion-header>\r\n                            <span [innerText]=\"evaluateString(locale(panel, 'label'))\"></span>\r\n                          </ngx-sirio-accordion-header>\r\n                          <ngx-sirio-accordion-body>\r\n                            <div>\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                                                    [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                            </div>\r\n                          </ngx-sirio-accordion-body>\r\n                        </ngx-sirio-accordion-panel>\r\n                      </ng-container>\r\n                    </ngx-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]=\"runExpression(component.onCollapse)\"\r\n                     [onExpand]=\"runExpression(component.onExpand)\"\r\n                     #text\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"text\">\r\n                  <!--Reset View Context-->\r\n                  <div tabindex=\"0\" style=\"display:none\"></div>\r\n                  <div class=\"flex\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                    <ng-container *ngIf=\"component.tooltip\">\r\n                      <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n                      <button class=\"sirio-label-popover fas fa-info-circle\"\r\n                              sirioTooltip\r\n                              [attr.aria-label]=\"locale(Texts, 'Information')\"\r\n                              [hasPopover]=\"true\"\r\n                              [customTemplate]=\"tooltipWrapper.getTemplateRef()\"></button>\r\n                      <ng-template #tooltipTemplate let-component=\"component\">\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                                 [columnDefs]=\"component.columns || evaluate(component.columnsExpression) || []\"\r\n                                 [rowSource]=\"getRowSource(component)\"\r\n                                 [refresh]=\"refreshRowSource(component)\"\r\n                                 [style.height]=\"component.autoHeight ? null : evaluateHeight(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                  <ngx-sirio-button (clickEvent)=\"clickButton(component, $event)\"\r\n                                    [color]=\"evaluateColor(component.color)\"\r\n                                    [disabled]=\"evaluateBoolean(component.disabled)\"\r\n                                    #button\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"button\">\r\n                    <ng-container *ngIf=\"evaluateString(component.icon) as icon; else noIcon\">\r\n                      <span *ngIf=\"component.iconPosition!='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n                      {{ evaluateString(locale(component, 'label')) }}\r\n                      <span *ngIf=\"component.iconPosition=='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n                    </ng-container>\r\n                    <ng-template #noIcon>\r\n                      {{ evaluateString(locale(component, 'label')) }}\r\n                    </ng-template>\r\n                  </ngx-sirio-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                <ngx-sirio-alert [type]=\"component.role\"\r\n                                 [labelClose]=\"locale(Texts, 'Close')\"\r\n                                 [preventClose]=\"evaluateBoolean(component.preventClose)\"\r\n                                 #alert\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"alert\">\r\n                  <ngx-sirio-alert-message>\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </ngx-sirio-alert-message>\r\n                </ngx-sirio-alert>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region notice -->\r\n              <ng-container *ngSwitchCase=\"'notice'\">\r\n                <ngx-sirio-notify #notice\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"notice\">\r\n                  <ngx-sirio-notify-body [title]=\"evaluateString(locale(component, 'title'))\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </ngx-sirio-notify-body>\r\n                </ngx-sirio-notify>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tooltip -->\r\n              <ng-container *ngSwitchCase=\"'tooltip'\">\r\n                <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n                <button class=\"sirio-label-popover fas fa-info-circle\"\r\n                        sirioTooltip\r\n                        [hasPopover]=\"true\"\r\n                        [customTemplate]=\"tooltipWrapper.getTemplateRef()\"\r\n                        #tooltip\r\n                        [register]=\"component\"\r\n                        [componentRef]=\"tooltip\"></button>\r\n                <ng-template #tooltipTemplate let-component=\"component\">\r\n                  <div class=\"sirio-tooltip-body\">\r\n                    <p *ngIf=\"component.title\" class=\"sirio-tooltip-heading sirio-space-down\">\r\n                      {{ evaluateString(locale(component, 'title')) }}\r\n                    </p>\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                <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n                           [observe]=\"getChartData(component)\"\r\n                           [callback]=\"invalidateChart(component)\"\r\n                           [style.height.px]=\"component.height\"\r\n                           #chart\r\n                           [register]=\"component\"\r\n                           [componentRef]=\"chart\" />\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 sirio-display-feedback\">{{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-helper-text\">{{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            </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}.sirio-control.is-disabled .sirio-input-group .sirio-input-group-text,.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{border:0px}.sirio-control.is-readonly .sirio-form-control{background-color:#fff!important;color:#454d56}.sirio-form-control[type=number]:disabled{background-image:none}ngx-sirio-alert.prevent-close .sirio-alert-close{display:none}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.col-host .sirio-accordion-body{overflow:unset!important}.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-dropdown .searchable{position:absolute;width:100%;display:none;left:0}.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}\n", ".sirio-control.ng-invalid .sirio-form-feedback,.sirio-display-feedback{color:#aa224f;display:inline-block}.sirio-control.ng-invalid .sirio-input-group-text{color:#aa224f;border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label{color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label:before,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label{color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:before,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:after,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:after{background-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-upload.sirio-is-invalid button{background-color:#aa224f;border-color:#aa224f}\n", ".sirio-control.text-left input.sirio-form-control,.sirio-control.text-left textarea.sirio-form-control,.sirio-control.text-left div.sirio-form-control{text-align:left}.sirio-control.text-center input.sirio-form-control,.sirio-control.text-center textarea.sirio-form-control,.sirio-control.text-center div.sirio-form-control{text-align:center}.sirio-control.text-right input.sirio-form-control,.sirio-control.text-right textarea.sirio-form-control,.sirio-control.text-right div.sirio-form-control{text-align:right}.sirio-control.text-center input.sirio-datepicker,.sirio-control.text-center input.sirio-timepicker,.sirio-control.text-right input.sirio-datepicker,.sirio-control.text-right input.sirio-timepicker{padding-right:40px}.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}.col-host.component-center ngx-sirio-toggle .sirio-form-toggle label{margin-bottom:0}\n", ".sirio-control .sirio-form-control.data-display{border-color:#e3e5e8}.sirio-control .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.sirio-control .sirio-form-control.data-display.text,.sirio-control .sirio-form-control:hover.data-display.text{overflow:auto;height:auto;margin-top:-6px;color:#454d56}.sirio-control .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.sirio-control .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n", ".sirio-control.light-readonly label:hover,.sirio-control.light-view div.sirio-label:hover{color:#454d56}.sirio-control.light-readonly input.sirio-form-control,.sirio-control.light-readonly .sirio-dropdown .sirio-dropdown-select,.sirio-control.light-readonly textarea.sirio-form-control,.sirio-control.light-view div.sirio-form-control{background:none!important;border:0px;padding-left:0}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{background:none}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}.sirio-upload.sirio-control.light-readonly label,.sirio-upload.sirio-control.is-disabled label{pointer-events:none}\n", ":root{--sirio-spinner-blue: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%2300368F' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\");--sirio-spinner-white: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='white' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\")}.sirio-control .sirio-is-pending,.sirio-control.sirio-is-pending input.sirio-form-control,.sirio-control.sirio-is-pending .sirio-dropdown .sirio-form-control,.sirio-form-check.sirio-control.sirio-is-pending{background-image:var(--sirio-spinner-blue);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}textarea.sirio-form-control.sirio-is-pending{background-position:top .9375rem right .9375rem}.sirio-control.sirio-is-pending input.sirio-form-control{background-position:right .9375rem top 50%}.sirio-upload.sirio-control.sirio-is-pending ngx-sirio-button .sirio-btn-primary{background-image:var(--sirio-spinner-white);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}.sirio-control.sirio-is-pending fieldset{background-image:var(--sirio-spinner-blue);background-repeat:no-repeat;background-position:right .9375rem top 1rem;background-size:1rem;padding-right:2.25rem}\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 .is-open{overflow:visible!important}.dynamiclist-table ngx-sirio-button button{padding:7px}\n", ".df-field-dynamiclist .sirio-pagination{width:100%;background-color:#f2f6fc;margin:0}.df-field-dynamiclist .sirio-pagination-page{background-color:#f2f6fc}.df-field-dynamiclist .sirio-pagination-cursor{margin-left:0}.df-field-dynamiclist .actions{margin-left:auto}\n", ".datetime-container{display:flex;gap:8px;align-items:flex-end}.datetime-container{display:flex;gap:8px}.datetime-container ngx-sirio-datepicker{flex:1}.datetime-container ngx-sirio-timepicker{flex:1}.datetime-container+.sirio-form-feedback{color:#aa224f;display:inline-block}\n", ".sirio-tab.sirio-tab-vertical .sirio-tab-item{width:100%}\n", ".sirio-tooltip .sirio-tooltip-body{white-space:pre-line}\n"], dependencies: [{ kind: "component", type: DynamicFieldsComponent, selector: "app-dynamic-fields", inputs: ["form", "rows", "formGroup", "alignment", "readOnly", "recursionLevel", "identity", "identityIndex", "disableAutoFocus"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i15.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i15.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i15.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i15.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i16.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i16.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i16.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i16.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i16.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i16.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i16.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i16.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i16.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AdornerDirective, selector: "[prefixAdorner], [suffixAdorner]", inputs: ["prefixAdorner", "suffixAdorner"] }, { kind: "directive", type: ReadOnlyDirective, selector: "[readonly]", inputs: ["readonly", "placeholder", "componentRef", "properties"] }, { kind: "directive", type: DisplayDirective, selector: "[hide], [show]", inputs: ["hide", "show"] }, { kind: "directive", type: FrameSecurityDirective, selector: "[frameSecurity]", inputs: ["frameSecurity"] }, { kind: "directive", type: ValidationPatchDirective, selector: "[validation]" }, { kind: "directive", type: DropdownDirective, selector: "[dropdown]", inputs: ["register", "onSelectionChanged"] }, { kind: "directive", type: UpdateBlurDirective, selector: "[updateBlur]" }, { kind: "directive", type: RepeatDirective, selector: "[repeat], [allowAddRemove]", inputs: ["repeat", "allowAddRemove"] }, { kind: "directive", type: RecursionDirective, selector: "[recursion]", inputs: ["formGroup", "recursion"], exportAs: ["recursion"] }, { kind: "directive", type: TabDirective, selector: "[tabCount]", inputs: ["tabCount"] }, { kind: "directive", type: GridDirective, selector: "[rowSource], [columnDefs], [selectable], [multiSelect], [suppressActions]", inputs: ["rowSource", "columnDefs", "selectable", "multiSelect", "suppressActions", "formGroup", "register"] }, { kind: "directive", type: ChangeDirective, selector: "[observe]", inputs: ["observe", "callback"] }, { kind: "directive", type: RegisterDirective, selector: "[register]", inputs: ["register", "componentRef"] }, { kind: "directive", type: RefreshDirective, selector: "[refresh]", inputs: ["refresh", "componentRef"] }, { kind: "directive", type: AccordionDirective, selector: "[accordionCount]", inputs: ["accordionCount"] }, { kind: "directive", type: DateDirective, selector: "[isoDate]" }, { kind: "directive", type: NumberDirective, selector: "[number]", inputs: ["defaultValue", "minimum", "maximum", "decimalDigits"] }, { kind: "directive", type: TextDirective, selector: "[textcase], [maxlength]", inputs: ["textcase", "maxlength"] }, { kind: "directive", type: ValueSyncDirective, selector: "[valueSync]", inputs: ["valueSync"] }, { kind: "directive", type: TabControlDirective, selector: "[tabControl]", inputs: ["register"] }, { kind: "directive", type: TabItemDirective, selector: "[tabItem]", inputs: ["componentRef", "disabled"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["collapse", "onCollapse", "onExpand", "register"] }, { kind: "directive", type: AccordionPanelDirective, selector: "[accordionPanel]" }, { kind: "directive", type: CollapsePatchDirective, selector: "[collapseExtension]", exportAs: ["collapseExtension"] }, { kind: "directive", type: DateTimeCoordinatorDirective, selector: "[dateTimeCoordinator]", inputs: ["datePicker", "timePicker"] }, { kind: "directive", type: DateTimeValidationDirective, selector: "[dateTimeValidator]", inputs: ["isWarning", "showWhenValid"] }, { kind: "directive", type: AlertDirective, selector: "[preventClose]", inputs: ["preventClose"] }, { kind: "directive", type: RequiredOnInputDirective, selector: "[requiredOnInput]", inputs: ["requiredOnInput"] }, { kind: "component", type: SirioInputComponent, selector: "ngx-sirio-input", inputs: ["disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "type", "name", "placeholder", "textHelp", "textFeedback", "rows", "cols", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "role"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioSelectComponent, selector: "ngx-sirio-select", inputs: ["placeholder", "disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "isMultiple", "textHelp", "textFeedback", "ariaLabel", "ariaInvalid", "ariaDescribedBy"], outputs: ["focusEvent", "blurEvent", "keydownEvent"] }, { kind: "component", type: SirioSelectOptionComponent, selector: "ngx-sirio-select-option", inputs: ["value"], outputs: ["optionSelected", "blurEvent"] }, { kind: "component", type: SirioSelectPanelComponent, selector: "ngx-sirio-select-panel", outputs: ["optionSelected", "panelOpened", "panelClosed"] }, { kind: "component", type: SirioCheckboxGroupComponent, selector: "ngx-sirio-checkbox-group", inputs: ["textHelp", "textFeedback", "label", "labelPopover", "ariaLabelPopoverButton", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioCheckboxComponent, selector: "ngx-sirio-checkbox", inputs: ["disabled", "name", "textHelp", "textFeedback", "value", "ariaInvalid", "ariaDescribedBy", "disabledState", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioDatepickerComponent, selector: "ngx-sirio-datepicker", inputs: ["name", "placeholder", "textHelp", "textFeedback", "label", "labelPopover", "ariaLabelPopoverButton", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "value", "disabledState"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent", "datechangeEvent"] }, { kind: "component", type: SirioTimepickerComponent, selector: "ngx-sirio-timepicker", inputs: ["name", "label", "labelPopover", "ariaLabelPopoverButton", "placeholder", "textHelp", "textFeedback", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioRadioGroupComponent, selector: "ngx-sirio-radio-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioRadioButtonComponent, selector: "ngx-sirio-radio-button", inputs: ["disabledState", "label", "name", "textHelp", "textFeedback", "ariaInvalid", "ariaDescribedBy", "value", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioTabComponent, selector: "ngx-sirio-tab", inputs: ["isVertical", "isNavLine", "leftArrowLabel", "rightArrowLabel", "tabActive"], outputs: ["tabChange"] }, { kind: "component", type: SirioTabItemComponent, selector: "ngx-sirio-tab-item", inputs: ["label", "disabled", "icon"] }, { kind: "component", type: SirioAccordionComponent, selector: "ngx-sirio-accordion", inputs: ["dark"] }, { kind: "component", type: SirioAccordionPanelComponent, selector: "ngx-sirio-accordion-panel", inputs: ["active", "disabled"], outputs: ["opened", "closed"] }, { kind: "component", type: SirioAccordionHeaderComponent, selector: "ngx-sirio-accordion-header" }, { kind: "component", type: SirioAccordionBodyComponent, selector: "ngx-sirio-accordion-body" }, { kind: "component", type: SirioButtonComponent, selector: "ngx-sirio-button", inputs: ["ariaExpanded", "ariaControls", "ariaActivedescendant", "ariaHaspopup", "ariaLabel", "ariaRequired", "ariaInvalid", "ariaDescribedby", "icon", "title", "role", "color", "isFloating", "isExtended", "isLight", "isSmall", "disabled", "isDropdown", "type", "dismissType", "isBtnBlock"], outputs: ["clickEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: SirioFileUploadComponent, selector: "ngx-sirio-file-upload", inputs: ["multiple", "color", "accept", "maxFiles", "showFilelist", "label", "labelPopover", "ariaLabelPopoverButton", "name", "textHelp", "textFeedback", "ariaLabel", "ariaLabelDeleteFileButton", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "fileUploadedEvent", "fileDeletedEvent", "uploadErrorEvent", "blurEvent"] }, { kind: "component", type: SirioToggleComponent, selector: "ngx-sirio-toggle", inputs: ["name", "textHelp", "textFeedback", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioChipCheckboxGroupComponent, selector: "ngx-sirio-chip-checkbox-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioChipRadioGroupComponent, selector: "ngx-sirio-chip-radio-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioInputChipComponent, selector: "ngx-sirio-input-chip", inputs: ["disabledState", "name", "textHelp", "textFeedback", "value", "ariaInvalid", "ariaDescribedBy", "type", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioAlertComponent, selector: "ngx-sirio-alert", inputs: ["type", "labelClose", "isVisible"], outputs: ["closeEvent"] }, { kind: "component", type: SirioAlertMessageComponent, selector: "ngx-sirio-alert-message" }, { kind: "component", type: SirioSliderComponent, selector: "ngx-sirio-slider", inputs: ["disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "description", "min", "max", "ariaInvalid", "ariaDescribedBy", "textHelp", "textFeedback"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioNotifyComponent, selector: "ngx-sirio-notify", inputs: ["isDark"] }, { kind: "component", type: SirioNotifyBodyComponent, selector: "ngx-sirio-notify-body", inputs: ["title"] }, { kind: "directive", type: SirioTooltipDirective, selector: "[sirioTooltip]", inputs: ["sirioTooltip", "content", "hasAction", "hasPopover", "actionLabel", "actionIconClass", "clickOutside", "position", "customTemplate"], outputs: ["clickEvent"] }, { kind: "component", type: SirioCollapseComponent, selector: "ngx-sirio-collapse", inputs: ["isOpen"], outputs: ["opened", "closed"] }, { kind: "directive", type: SirioCollapseTriggerDirective, selector: "[ngxSirioCollapseTrigger]", inputs: ["id", "ngxSirioCollapseTrigger"] }, { kind: "component", type: TemplateWrapperComponent, selector: "app-template-wrapper", inputs: ["template", "context"] }, { kind: "component", type: DynamicHostComponent, selector: "app-dynamic-host", inputs: ["register", "properties", "formGroup"] }, { kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: AgCharts, selector: "ag-charts", inputs: ["options"], outputs: ["onChartReady"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], 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            <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n              <!-- #region textfield -->\r\n              <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-input type=\"text\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                                 [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 [textcase]=\"component.textCase\"\r\n                                 [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #textfield\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"textfield\">\r\n                </ngx-sirio-input>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region select -->\r\n              <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [refresh]=\"refreshValues(component)\"\r\n                                  dropdown\r\n                                  [onSelectionChanged]=\"callExpression(component.selectionChanged)\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #select\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"select\">\r\n                  <ngx-sirio-select-panel>\r\n                    <ngx-sirio-input *ngIf=\"component.searchable\" class=\"searchable\" type=\"text\" [placeholder]=\"locale(Texts, 'TypeToSearch')\"></ngx-sirio-input>\r\n                    <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n                  </ngx-sirio-select-panel>\r\n                </ngx-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                <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [isMultiple]=\"true\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [refresh]=\"refreshValues(component)\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #taglist\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"taglist\">\r\n                  <ngx-sirio-select-panel>\r\n                    <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n                  </ngx-sirio-select-panel>\r\n                </ngx-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                <ngx-sirio-input type=\"number\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                                 [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 number\r\n                                 [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n                                 [minimum]=\"evaluateNumber(component.minimum)\"\r\n                                 [maximum]=\"evaluateNumber(component.maximum)\"\r\n                                 [decimalDigits]=\"evaluateNumber(component.decimalDigits)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #number\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"number\">\r\n                </ngx-sirio-input>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region datetime -->\r\n              <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ng-container [ngSwitch]=\"component.subtype\">\r\n                  <!-- #region date -->\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n                                          [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n                                          [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                          [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [ngClass]=\"getTextAlignment(component)\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          isoDate\r\n                                          [pick]=\"component.pick\"\r\n                                          [minDate]=\"evaluateString(component.range?.min)\"\r\n                                          [maxDate]=\"evaluateString(component.range?.max)\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #date\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"date\">\r\n                    </ngx-sirio-datepicker>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region time -->\r\n                  <ng-container *ngSwitchCase=\"'time'\">\r\n                    <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n                                          [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                          [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                          [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [ngClass]=\"getTextAlignment(component)\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #time\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"time\">\r\n                    </ngx-sirio-timepicker>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region datetime -->\r\n                  <ng-container *ngSwitchCase=\"'datetime'\">\r\n                    <div [formControlName]=\"component.key\"\r\n                         dateTimeCoordinator\r\n                         dateTimeValidator\r\n                         [isWarning]=\"isWarning(component)\"\r\n                         [showWhenValid]=\"false\"\r\n                         [datePicker]=\"date\"\r\n                         [timePicker]=\"time\"\r\n                         [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                         [properties]=\"component.properties\"\r\n                         [valueSync]=\"component.valueSync\"\r\n                         #datetime\r\n                         [register]=\"component\"\r\n                         [componentRef]=\"datetime\"\r\n                         class=\"datetime-container\">\r\n                      <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n                                            [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n                                            [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                            [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                            [ngClass]=\"getTextAlignment(component)\"\r\n                                            isoDate\r\n                                            [minDate]=\"evaluateString(component.range?.min)\"\r\n                                            [maxDate]=\"evaluateString(component.range?.max)\"\r\n                                            #date>\r\n                      </ngx-sirio-datepicker>\r\n                      <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n                                            [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                            [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                            [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                            [ngClass]=\"getTextAlignment(component)\"\r\n                                            #time>\r\n                      </ngx-sirio-timepicker>\r\n                    </div>\r\n                    <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                      <span class=\"sirio-form-feedback\">{{textFeedback}}</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                      <p class=\"sirio-helper-text\">{{textHelp}}</p>\r\n                    </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region toggle -->\r\n                    <ng-container *ngSwitchCase=\"'toggle'\">\r\n                      <ngx-sirio-toggle [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                        [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                        [textFeedback]=\"getTextFeedback(component)\"\r\n                                        [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [properties]=\"component.properties\"\r\n                                        [formControlName]=\"component.key\"\r\n                                        validation\r\n                                        [canValidate]=\"true\"\r\n                                        [isWarning]=\"isWarning(component)\"\r\n                                        [showWhenValid]=\"false\"\r\n                                        [valueSync]=\"component.valueSync\"\r\n                                        #toggle\r\n                                        [register]=\"component\"\r\n                                        [componentRef]=\"toggle\">\r\n                        <div [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'label')))\"></div>\r\n                      </ngx-sirio-toggle>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-checkbox [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #checkbox\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"checkbox\">\r\n                        <div [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'label')))\"></div>\r\n                      </ngx-sirio-checkbox>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region chip -->\r\n                    <ng-container *ngSwitchCase=\"'chip'\">\r\n                      <ngx-sirio-chip-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                  [properties]=\"component.properties\"\r\n                                                  [formControlName]=\"component.key\"\r\n                                                  validation\r\n                                                  [canValidate]=\"true\"\r\n                                                  [isWarning]=\"isWarning(component)\"\r\n                                                  [showWhenValid]=\"false\"\r\n                                                  [refresh]=\"refreshValues(component)\"\r\n                                                  [valueSync]=\"component.valueSync\"\r\n                                                  #chipradio\r\n                                                  [register]=\"component\"\r\n                                                  [componentRef]=\"chipradio\">\r\n                        <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n                                              type=\"radio\"\r\n                                              [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-input-chip>\r\n                      </ngx-sirio-chip-radio-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                             [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                             [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                             [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                             [textFeedback]=\"getTextFeedback(component)\"\r\n                                             [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                             [properties]=\"component.properties\"\r\n                                             [formControlName]=\"component.key\"\r\n                                             validation\r\n                                             [canValidate]=\"true\"\r\n                                             [isWarning]=\"isWarning(component)\"\r\n                                             [showWhenValid]=\"false\"\r\n                                             [refresh]=\"refreshValues(component)\"\r\n                                             [valueSync]=\"component.valueSync\"\r\n                                             #radio\r\n                                             [register]=\"component\"\r\n                                             [componentRef]=\"radio\">\r\n                        <ngx-sirio-radio-button *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n                          <div [innerHTML]=\"toHTML(evaluateTemplate(locale(option, 'label')))\"></div>\r\n                        </ngx-sirio-radio-button>\r\n                      </ngx-sirio-radio-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region chip -->\r\n                    <ng-container *ngSwitchCase=\"'chip'\">\r\n                      <ngx-sirio-chip-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                     [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                     [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                     [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                     [textFeedback]=\"getTextFeedback(component)\"\r\n                                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                     [properties]=\"component.properties\"\r\n                                                     [formControlName]=\"component.key\"\r\n                                                     validation\r\n                                                     [canValidate]=\"true\"\r\n                                                     [isWarning]=\"isWarning(component)\"\r\n                                                     [showWhenValid]=\"false\"\r\n                                                     [refresh]=\"refreshValues(component)\"\r\n                                                     [valueSync]=\"component.valueSync\"\r\n                                                     #chipcheckbox\r\n                                                     [register]=\"component\"\r\n                                                     [componentRef]=\"chipcheckbox\">\r\n                        <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n                                              type=\"checkbox\"\r\n                                              [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-input-chip>\r\n                      </ngx-sirio-chip-checkbox-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                [textFeedback]=\"getTextFeedback(component)\"\r\n                                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                [properties]=\"component.properties\"\r\n                                                [formControlName]=\"component.key\"\r\n                                                validation\r\n                                                [canValidate]=\"true\"\r\n                                                [isWarning]=\"isWarning(component)\"\r\n                                                [showWhenValid]=\"false\"\r\n                                                [refresh]=\"refreshValues(component)\"\r\n                                                [valueSync]=\"component.valueSync\"\r\n                                                #checkbox\r\n                                                [register]=\"component\"\r\n                                                [componentRef]=\"checkbox\">\r\n                        <ngx-sirio-checkbox *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n                          <div [innerHTML]=\"toHTML(evaluateTemplate(locale(option, 'label')))\"></div>\r\n                        </ngx-sirio-checkbox>\r\n                      </ngx-sirio-checkbox-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                <ngx-sirio-input type=\"textarea\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 [textcase]=\"component.textCase\"\r\n                                 [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #textarea\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"textarea\">\r\n                </ngx-sirio-input>\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                  <ngx-sirio-file-upload [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                         [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                         [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                         [accept]=\"getMimeTypes(component.accept)\"\r\n                                         [multiple]=\"evaluateBoolean(component.multiple)\"\r\n                                         (fileUploadedEvent)=\"fileUploaded($event)\"\r\n                                         [showFilelist]=\"!component.showDetails\"\r\n                                         [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                         [textFeedback]=\"getTextFeedback(component)\"\r\n                                         [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                         [properties]=\"component.properties\"\r\n                                         [formControlName]=\"component.key\"\r\n                                         validation\r\n                                         [canValidate]=\"true\"\r\n                                         [isWarning]=\"isWarning(component)\"\r\n                                         [showWhenValid]=\"false\"\r\n                                         [valueSync]=\"component.valueSync\"\r\n                                         #filepicker\r\n                                         [register]=\"component\"\r\n                                         [componentRef]=\"filepicker\">\r\n                    <span class=\"fas fa-arrow-up\" aria-hidden=\"true\"></span>\r\n                    {{ evaluateString(locale(component, 'text')) || locale(Texts, 'Upload') }}\r\n                  </ngx-sirio-file-upload>\r\n                </div>\r\n                <ng-container *ngIf=\"component.showDetails\">\r\n                  <app-dynamic-fields [form]=\"form\"\r\n                                      [formGroup]=\"formGroup\"\r\n                                      [rows]=\"createUploadTables(component)\"\r\n                                      contextId=\"fileList\"></app-dynamic-fields>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region range -->\r\n              <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-slider [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n                                  [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #range\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"range\">\r\n                </ngx-sirio-slider>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region displayfield -->\r\n              <ng-container *ngSwitchCase=\"'displayfield'\">\r\n                <div class=\"sirio-control\"\r\n                     [ngClass]=\"[getTextAlignment(component), 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                    <button *ngIf=\"component.tooltip\"\r\n                            sirioTooltip\r\n                            [content]=\"component.tooltip\"\r\n                            [hasPopover]=\"true\"\r\n                            [attr.aria-label]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                            class=\"sirio-label-popover fas fa-info-circle\"></button>\r\n                  </div>\r\n                  <div class=\"sirio-form-control data-display\" [ngClass]=\"component.fieldtype\">\r\n                    <ng-container [ngSwitch]=\"component.fieldtype\">\r\n                      <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                        <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\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 *ngSwitchDefault>\r\n                        <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\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                  </div>\r\n                  <p *ngIf=\"component.description\" class=\"sirio-helper-text\">\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                    <ng-container [formArrayName]=\"component.key\"\r\n                                  [formGroup]=\"formGroup\"\r\n                                  [recursion]=\"component\"\r\n                                  #recursion=\"recursion\"\r\n                                  [repeat]=\"evaluateNumber(component.repetitions)\"\r\n                                  [allowAddRemove]=\"evaluateBoolean(component.allowAddRemove)\">\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                              <div [register]=\"component\"\r\n                                   [componentRef]=\"tabInstance\">\r\n                                <ngx-sirio-tab [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                               [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                               [tabCount]=\"formArray.controls.length\"\r\n                                               tabBadges\r\n                                               #tabBadgesRef=\"tabBadges\"\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                                      <ngx-sirio-tab-item tabItem\r\n                                                          [componentRef]=\"tabInstance\"\r\n                                                          [label]=\"evaluateWithEventAsString(locale(component, 'label'), event )\"\r\n                                                          tabBadge\r\n                                                          [tabBadges]=\"tabBadgesRef\"\r\n                                                          [tabIndex]=\"i\"\r\n                                                          [badge]=\"evaluateWithEvent(component.badge, event)\"\r\n                                                          #tabItemInstance>\r\n                                        <ng-container *ngIf=\"tabItemInstance.isActive\">\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-container>\r\n                                      </ngx-sirio-tab-item>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </ngx-sirio-tab>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region accordion -->\r\n                            <ng-container *ngSwitchCase=\"'accordion'\">\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclistaccordion\">\r\n                                <ngx-sirio-accordion [accordionCount]=\"formArray.controls.length\"\r\n                                                     #dynamiclistaccordion>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ngx-sirio-accordion-panel #panel accordionPanel>\r\n                                      <ngx-sirio-accordion-header>\r\n                                        <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                          <div>{{ evaluateWithEventAsString(locale(component, 'label'), event) }}</div>\r\n                                          <app-badge *ngIf=\"evaluateWithEvent(component.badge, event) as badge\" [badge]=\"badge\"></app-badge>\r\n                                        </div>\r\n                                      </ngx-sirio-accordion-header>\r\n                                      <ngx-sirio-accordion-body>\r\n                                        <ng-container *ngIf=\"panel.panelIsOpen\">\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-container>\r\n                                      </ngx-sirio-accordion-body>\r\n                                    </ngx-sirio-accordion-panel>\r\n                                  </ng-container>\r\n                                </ngx-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                                                  <app-badge *ngIf=\"evaluateWithEvent(component.badge, event) as badge\" [badge]=\"badge\"></app-badge>\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                                                <ngx-sirio-button [ngxSirioCollapseTrigger]=\"collapseTemplate\"\r\n                                                                  [color]=\"null\" [icon]=\"collapse.isOpen ? 'fas fa-chevron-down' : 'fas fa-chevron-right' \" />\r\n                                              </div>\r\n                                              <div *ngIf=\"!collapse.isOpen\" class=\"recursion-title\">\r\n                                                <div class=\"recursion-text\">\r\n                                                  <ng-container *ngIf=\"!collapse.isOpen\">\r\n                                                    {{ recursionData.itemsArray.length }} elementi presenti\r\n                                                  </ng-container>\r\n                                                </div>\r\n                                              </div>\r\n                                              <div class=\"recursion-content\">\r\n                                                <ngx-sirio-collapse #collapseTemplate\r\n                                                                    #collapse=\"collapseExtension\"\r\n                                                                    collapseExtension>\r\n                                                  <div *ngIf=\"collapse.isOpen\" 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                                                </ngx-sirio-collapse>\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                                        <app-badge *ngIf=\"evaluateWithEvent(component.badge, event) as badge\" [badge]=\"badge\"></app-badge>\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                                <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\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: i } as event\">\r\n                                        <label>{{ evaluateWithEventAsString(locale(component, 'label'), event) }}</label>\r\n                                        <app-badge *ngIf=\"evaluateWithEvent(component.badge, event) as badge\" [badge]=\"badge\"></app-badge>\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                    </ng-container>\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                    <ngx-sirio-button (click)=\"moveUpItem(formArray, i)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"upLabel\"\r\n                                      [title]=\"upLabel\"\r\n                                      [color]=\"null\" icon=\"fas fa-arrow-up\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ upLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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                    <ngx-sirio-button (click)=\"moveDownItem(formArray, i)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"downLabel\"\r\n                                      [title]=\"downLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-arrow-down\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ downLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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                    <ngx-sirio-button (click)=\"removeItem(formArray, i, true, state)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"removeLabel\"\r\n                                      [title]=\"removeLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-trash\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ removeLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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                    <ngx-sirio-button (click)=\"addItem(formArray, state)\"\r\n                                      class=\"add-item\"\r\n                                      [ariaLabel]=\"addLabel\"\r\n                                      [title]=\"addLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-plus\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ addLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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 sirio-display-feedback\">{{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-helper-text\">{{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                  <nav class=\"sirio-pagination\">\r\n                    <ng-container *ngIf=\"state.total\">\r\n                      <div class=\"sirio-pagination-page\">\r\n                        <select class=\"sirio-form-control\"\r\n                                [(ngModel)]=\"state.index\"\r\n                                [ngModelOptions]=\"{ standalone: true }\">\r\n                          <option *ngFor=\"let i of state.total | times\" [ngValue]=\"i\">\r\n                            {{ i + 1 }}\r\n                          </option>\r\n                        </select>\r\n                        {{ locale(Texts, 'Of') }}\r\n                        <span>{{ state.total }}</span> {{ locale(Texts, 'Elements') }}\r\n                      </div>\r\n                      <div class=\"sirio-pagination-cursor\">\r\n                        <ul class=\"sirio-pagination-list\">\r\n                          <li [class.disabled]=\"!state.canPrevious()\">\r\n                            <a href=\"javascript:void(0)\"\r\n                               (click)=\"state.previous()\"\r\n                               [title]=\"locale(Texts, 'PreviousElement')\"\r\n                               [class.disabled]=\"!state.canPrevious()\">\r\n                              <span aria-hidden=\"true\" class=\"fas fa-angle-left\"></span>\r\n                            </a>\r\n                          </li>\r\n                          <li [class.disabled]=\"!state.canNext()\">\r\n                            <a href=\"javascript:void(0)\"\r\n                               (click)=\"state.next()\"\r\n                               [title]=\"locale(Texts, 'NextElement')\"\r\n                               [class.disabled]=\"!state.canNext()\">\r\n                              <span aria-hidden=\"true\" class=\"fas fa-angle-right\"></span>\r\n                            </a>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </ng-container>\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                  </nav>\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 [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]=\"resolvePath(component.path)\"\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                    <ngx-sirio-tab #tabInstance\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"tabInstance\"\r\n                                   [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                   [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                   [isNavLine]=\"component.navigation\"\r\n                                   [isVertical]=\"component.vertical\"\r\n                                   tabControl\r\n                                   tabBadges\r\n                                   #tabBadgesRef=\"tabBadges\">\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <ngx-sirio-tab-item [label]=\"evaluateString(locale(panel, 'label'))\"\r\n                                            [icon]=\"evaluateString(panel.icon)\"\r\n                                            [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n                                            #tabItemInstance\r\n                                            tabItem\r\n                                            [componentRef]=\"tabInstance\"\r\n                                            *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                            tabBadge\r\n                                            [tabBadges]=\"tabBadgesRef\"\r\n                                            [tabIndex]=\"i\"\r\n                                            [badge]=\"evaluate(panel.badge)\">\r\n                          <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                            <div *ngIf=\"tabItemInstance.isActive\">\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                            </div>\r\n                          </ng-container>\r\n                        </ngx-sirio-tab-item>\r\n                      </ng-container>\r\n                    </ngx-sirio-tab>\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                    <ngx-sirio-accordion #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                          <ngx-sirio-accordion-panel *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                                     [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n                            <ngx-sirio-accordion-header>\r\n                              <div class=\"badge-header\">\r\n                                <div>{{ evaluateString(locale(panel, 'label')) }}</div>\r\n                                <app-badge *ngIf=\"evaluate(panel.badge) as badge\" [badge]=\"badge\"></app-badge>\r\n                              </div>\r\n                            </ngx-sirio-accordion-header>\r\n                            <ngx-sirio-accordion-body>\r\n                              <div>\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                              </div>\r\n                            </ngx-sirio-accordion-body>\r\n                          </ngx-sirio-accordion-panel>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ngx-sirio-accordion>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region text -->\r\n              <ng-container *ngSwitchCase=\"'text'\">\r\n                <div [collapse]=\"component.collapseTo\"\r\n                     [onCollapse]=\"callExpression(component.onCollapse)\"\r\n                     [onExpand]=\"callExpression(component.onExpand)\"\r\n                     #text\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"text\">\r\n                  <!--Reset View Context-->\r\n                  <div tabindex=\"0\" style=\"display:none\"></div>\r\n                  <div class=\"flex\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                    <ng-container *ngIf=\"component.tooltip\">\r\n                      <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n                      <button class=\"sirio-label-popover fas fa-info-circle\"\r\n                              sirioTooltip\r\n                              [attr.aria-label]=\"locale(Texts, 'Information')\"\r\n                              [hasPopover]=\"true\"\r\n                              [customTemplate]=\"tooltipWrapper.getTemplateRef()\"></button>\r\n                      <ng-template #tooltipTemplate let-component=\"component\">\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                                 [columnDefs]=\"component.columns || evaluate(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                  <ngx-sirio-button (clickEvent)=\"clickButton(component, $event)\"\r\n                                    [color]=\"evaluateColor(component.color)\"\r\n                                    [disabled]=\"evaluateBoolean(component.disabled)\"\r\n                                    #button\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"button\">\r\n                    <ng-container *ngIf=\"evaluateString(component.icon) as icon; else noIcon\">\r\n                      <span *ngIf=\"component.iconPosition!='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n                      {{ evaluateString(locale(component, 'label')) }}\r\n                      <span *ngIf=\"component.iconPosition=='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n                    </ng-container>\r\n                    <ng-template #noIcon>\r\n                      {{ evaluateString(locale(component, 'label')) }}\r\n                    </ng-template>\r\n                  </ngx-sirio-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                <ngx-sirio-alert [type]=\"component.role\"\r\n                                 [labelClose]=\"locale(Texts, 'Close')\"\r\n                                 [preventClose]=\"evaluateBoolean(component.preventClose)\"\r\n                                 #alert\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"alert\">\r\n                  <ngx-sirio-alert-message>\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </ngx-sirio-alert-message>\r\n                </ngx-sirio-alert>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region notice -->\r\n              <ng-container *ngSwitchCase=\"'notice'\">\r\n                <ngx-sirio-notify #notice\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"notice\">\r\n                  <ngx-sirio-notify-body [title]=\"evaluateString(locale(component, 'title'))\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </ngx-sirio-notify-body>\r\n                </ngx-sirio-notify>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tooltip -->\r\n              <ng-container *ngSwitchCase=\"'tooltip'\">\r\n                <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n                <button class=\"sirio-label-popover fas fa-info-circle\"\r\n                        sirioTooltip\r\n                        [hasPopover]=\"true\"\r\n                        [customTemplate]=\"tooltipWrapper.getTemplateRef()\"\r\n                        #tooltip\r\n                        [register]=\"component\"\r\n                        [componentRef]=\"tooltip\"></button>\r\n                <ng-template #tooltipTemplate let-component=\"component\">\r\n                  <div class=\"sirio-tooltip-body\">\r\n                    <p *ngIf=\"component.title\" class=\"sirio-tooltip-heading sirio-space-down\">\r\n                      {{ evaluateString(locale(component, 'title')) }}\r\n                    </p>\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                <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n                           [observe]=\"getChartData(component)\"\r\n                           [callback]=\"invalidateChart(component)\"\r\n                           [style.height.px]=\"component.height\"\r\n                           #chart\r\n                           [register]=\"component\"\r\n                           [componentRef]=\"chart\" />\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 sirio-display-feedback\">{{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-helper-text\">{{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                    <nav class=\"sirio-pagination\">\r\n                      <ng-container *ngIf=\"state.total\">\r\n                        <div class=\"sirio-pagination-page\">\r\n                          <select class=\"sirio-form-control\"\r\n                                  [(ngModel)]=\"state.index\"\r\n                                  [ngModelOptions]=\"{ standalone: true }\">\r\n                            <option *ngFor=\"let i of state.total | times\" [ngValue]=\"i\">\r\n                              {{ i + 1 }}\r\n                            </option>\r\n                          </select>\r\n                          {{ locale(Texts, 'Of') }}\r\n                          <span>{{ state.total }}</span> {{ locale(Texts, 'Elements') }}\r\n                        </div>\r\n                        <div class=\"sirio-pagination-cursor\">\r\n                          <ul class=\"sirio-pagination-list\">\r\n                            <li [class.disabled]=\"!state.canPrevious()\">\r\n                              <a href=\"javascript:void(0)\"\r\n                                 [title]=\"locale(Texts, 'PreviousElement')\"\r\n                                 (click)=\"state.previous()\"\r\n                                 [class.disabled]=\"!state.canPrevious()\">\r\n                                <span aria-hidden=\"true\" class=\"fas fa-angle-left\"></span>\r\n                              </a>\r\n                            </li>\r\n                            <li [class.disabled]=\"!state.canNext()\">\r\n                              <a href=\"javascript:void(0)\"\r\n                                 [title]=\"locale(Texts, 'NextElement')\"\r\n                                 (click)=\"state.next()\"\r\n                                 [class.disabled]=\"!state.canNext()\">\r\n                                <span aria-hidden=\"true\" class=\"fas fa-angle-right\"></span>\r\n                              </a>\r\n                            </li>\r\n                          </ul>\r\n                        </div>\r\n                      </ng-container>\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                    </nav>\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                    <ngx-sirio-button \r\n                                      class=\"add-item\"\r\n                                      [ariaLabel]=\"addLabel\"\r\n                                      [title]=\"addLabel\"\r\n                                      (click)=\"evaluateWithEventAsHandler(component.addExpression, { total: total })\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-plus\">\r\n                      <ng-container>\r\n                        {{ addLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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                    <ngx-sirio-button \r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"removeLabel\"\r\n                                      [title]=\"removeLabel\"\r\n                                      (click)=\"evaluateWithEventAsHandler(component.removeExpression, { index: i, total: total })\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-trash\">\r\n                      <ng-container>\r\n                        {{ removeLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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}.sirio-control.is-disabled .sirio-input-group .sirio-input-group-text,.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{border:0px}.sirio-control.is-readonly .sirio-form-control{background-color:#fff!important;color:#454d56}.sirio-form-control[type=number]:disabled{background-image:none}ngx-sirio-alert.prevent-close .sirio-alert-close{display:none}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.col-host .sirio-accordion-body{overflow:unset!important}.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-dropdown .searchable{position:absolute;width:100%;display:none;left:0}.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}\n", ".sirio-control.ng-invalid .sirio-form-feedback,.sirio-display-feedback{color:#aa224f;display:inline-block}.sirio-control.ng-invalid .sirio-input-group-text{color:#aa224f;border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label{color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label:before,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label{color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:before,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:after,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:after{background-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-upload.sirio-is-invalid button{background-color:#aa224f;border-color:#aa224f}\n", ".sirio-control.text-left input.sirio-form-control,.sirio-control.text-left textarea.sirio-form-control,.sirio-control.text-left div.sirio-form-control{text-align:left}.sirio-control.text-center input.sirio-form-control,.sirio-control.text-center textarea.sirio-form-control,.sirio-control.text-center div.sirio-form-control{text-align:center}.sirio-control.text-right input.sirio-form-control,.sirio-control.text-right textarea.sirio-form-control,.sirio-control.text-right div.sirio-form-control{text-align:right}.sirio-control.text-center input.sirio-datepicker,.sirio-control.text-center input.sirio-timepicker,.sirio-control.text-right input.sirio-datepicker,.sirio-control.text-right input.sirio-timepicker{padding-right:40px}.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}.col-host.component-center ngx-sirio-toggle .sirio-form-toggle label{margin-bottom:0}\n", ".sirio-control .sirio-form-control.data-display{border-color:#e3e5e8}.sirio-control .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.sirio-control .sirio-form-control.data-display.text,.sirio-control .sirio-form-control:hover.data-display.text{overflow:auto;height:auto;margin-top:-6px;color:#454d56}.sirio-control .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.sirio-control .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n", ".sirio-control.light-readonly label:hover,.sirio-control.light-view div.sirio-label:hover{color:#454d56}.sirio-control.light-readonly input.sirio-form-control,.sirio-control.light-readonly .sirio-dropdown .sirio-dropdown-select,.sirio-control.light-readonly textarea.sirio-form-control,.sirio-control.light-view div.sirio-form-control{background:none!important;border:0px;padding-left:0}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{background:none}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}.sirio-upload.sirio-control.light-readonly label,.sirio-upload.sirio-control.is-disabled label{pointer-events:none}\n", ":root{--sirio-spinner-blue: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%2300368F' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\");--sirio-spinner-white: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='white' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\")}.sirio-control .sirio-is-pending,.sirio-control.sirio-is-pending input.sirio-form-control,.sirio-control.sirio-is-pending .sirio-dropdown .sirio-form-control,.sirio-form-check.sirio-control.sirio-is-pending{background-image:var(--sirio-spinner-blue);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}textarea.sirio-form-control.sirio-is-pending{background-position:top .9375rem right .9375rem}.sirio-control.sirio-is-pending input.sirio-form-control{background-position:right .9375rem top 50%}.sirio-upload.sirio-control.sirio-is-pending ngx-sirio-button .sirio-btn-primary{background-image:var(--sirio-spinner-white);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}.sirio-control.sirio-is-pending fieldset{background-image:var(--sirio-spinner-blue);background-repeat:no-repeat;background-position:right .9375rem top 1rem;background-size:1rem;padding-right:2.25rem}\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 .is-open{overflow:visible!important}.dynamiclist-table ngx-sirio-button button{padding:7px}\n", ".df-field-dynamiclist .sirio-pagination{width:100%;background-color:#f2f6fc;margin:0}.df-field-dynamiclist .sirio-pagination-page{background-color:#f2f6fc}.df-field-dynamiclist .sirio-pagination-cursor{margin-left:0}.df-field-dynamiclist .actions{margin-left:auto}\n", ".datetime-container{display:flex;gap:8px;align-items:flex-end}.datetime-container{display:flex;gap:8px}.datetime-container ngx-sirio-datepicker{flex:1}.datetime-container ngx-sirio-timepicker{flex:1}.datetime-container+.sirio-form-feedback{color:#aa224f;display:inline-block}\n", ".sirio-tab.sirio-tab-vertical .sirio-tab-item{width:100%}\n", ".treelist{overflow-y:auto;border:1px solid #cfd6e0;border-radius:6px}.treelist .hidden{display:none}.treelist .toggle{cursor:pointer;margin-right:6px}.treelist table{width:100%;border:none;border-collapse:collapse;border-spacing:0;overflow:visible;table-layout:fixed}.treelist thead th{position:sticky;top:0;z-index:10;background-color:#0b2c5f;color:#fff;font-weight:600;vertical-align:middle;padding:4px;border-right:1px solid #3a5a8a}.treelist thead th:last-child{border-right:none}.treelist tbody td{padding:4px;border-right:1px solid #d9e1ec;border-bottom:1px solid #d9e1ec}.treelist tbody td>div{display:flex;align-items:center;overflow:hidden}.treelist tbody td .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treelist tbody td:last-child{border-right:none}.treelist tbody tr:hover{background-color:#e9eef6}.treelist thead th:first-child{border-top-left-radius:6px}.treelist thead th:last-child{border-top-right-radius:6px}\n", ".sirio-tooltip .sirio-tooltip-body{white-space:pre-line}\n", ".sirio-pagination{width:100%}.sirio-pagination-cursor{margin-left:0;margin-right:auto}\n"], dependencies: [{ kind: "component", type: DynamicFieldsComponent, selector: "app-dynamic-fields", inputs: ["form", "rows", "formGroup", "alignment", "readOnly", "recursionLevel", "identity", "identityIndex", "disableAutoFocus"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i16.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i16.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i16.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i16.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i16.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i17.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i17.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i17.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i17.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i17.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i17.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i17.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i17.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i17.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i17.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i17.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AdornerDirective, selector: "[prefixAdorner], [suffixAdorner]", inputs: ["prefixAdorner", "suffixAdorner"] }, { kind: "directive", type: ReadOnlyDirective, selector: "[readonly]", inputs: ["readonly", "placeholder", "componentRef", "properties"] }, { kind: "directive", type: DisplayDirective, selector: "[hide], [show]", inputs: ["hide", "show"] }, { kind: "directive", type: FrameSecurityDirective, selector: "[frameSecurity]", inputs: ["frameSecurity"] }, { kind: "directive", type: ValidationPatchDirective, selector: "[validation]" }, { kind: "directive", type: DropdownDirective, selector: "[dropdown]", inputs: ["register", "onSelectionChanged"] }, { kind: "directive", type: UpdateBlurDirective, selector: "[updateBlur]" }, { kind: "directive", type: RepeatDirective, selector: "[repeat], [allowAddRemove]", inputs: ["repeat", "allowAddRemove"] }, { kind: "directive", type: RecursionDirective, selector: "[recursion]", inputs: ["formGroup", "recursion"], exportAs: ["recursion"] }, { kind: "directive", type: TabDirective, selector: "[tabCount]", inputs: ["tabCount"] }, { kind: "directive", type: GridDirective, selector: "[rowSource], [columnDefs], [selectable], [multiSelect], [suppressActions]", inputs: ["rowSource", "columnDefs", "selectable", "multiSelect", "suppressActions", "formGroup", "register"] }, { kind: "directive", type: ChangeDirective, selector: "[observe]", inputs: ["observe", "callback"] }, { kind: "directive", type: RegisterDirective, selector: "[register]", inputs: ["register", "componentRef"] }, { kind: "directive", type: RefreshDirective, selector: "[refresh]", inputs: ["refresh", "componentRef"] }, { kind: "directive", type: AccordionDirective, selector: "[accordionCount]", inputs: ["accordionCount"] }, { kind: "directive", type: DateDirective, selector: "[isoDate]", inputs: ["pick", "minDate", "maxDate"] }, { kind: "directive", type: NumberDirective, selector: "[number]", inputs: ["defaultValue", "minimum", "maximum", "decimalDigits"] }, { kind: "directive", type: TextDirective, selector: "[textcase], [maxlength]", inputs: ["textcase", "maxlength"] }, { kind: "directive", type: ValueSyncDirective, selector: "[valueSync]", inputs: ["valueSync"] }, { kind: "directive", type: TabControlDirective, selector: "[tabControl]", inputs: ["register"] }, { kind: "directive", type: TabItemDirective, selector: "[tabItem]", inputs: ["componentRef", "disabled", "label"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["collapse", "onCollapse", "onExpand", "register"] }, { kind: "directive", type: AccordionPanelDirective, selector: "[accordionPanel]" }, { kind: "directive", type: CollapsePatchDirective, selector: "[collapseExtension]", exportAs: ["collapseExtension"] }, { kind: "directive", type: TreeListDirective, selector: "[treelist]", inputs: ["treelist"] }, { kind: "directive", type: DateTimeCoordinatorDirective, selector: "[dateTimeCoordinator]", inputs: ["datePicker", "timePicker"] }, { kind: "directive", type: DateTimeValidationDirective, selector: "[dateTimeValidator]", inputs: ["isWarning", "showWhenValid"] }, { kind: "directive", type: AlertDirective, selector: "[preventClose]", inputs: ["preventClose"] }, { kind: "directive", type: RequiredOnInputDirective, selector: "[requiredOnInput]", inputs: ["requiredOnInput"] }, { kind: "directive", type: NavigatorStateDirective, selector: "[navigatorState]", inputs: ["total", "index"], outputs: ["indexChange"], exportAs: ["navigatorState"] }, { kind: "directive", type: TabBadgesDirective, selector: "[tabBadges]", exportAs: ["tabBadges"] }, { kind: "directive", type: TabBadgeDirective, selector: "[tabBadge]", inputs: ["tabBadges", "tabIndex", "badge"] }, { kind: "directive", type: FileListReadonlyDirective, selector: "ngx-sirio-file-upload", inputs: ["readonly"] }, { kind: "component", type: SirioInputComponent, selector: "ngx-sirio-input", inputs: ["disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "type", "name", "placeholder", "textHelp", "textFeedback", "rows", "cols", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "role"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioSelectComponent, selector: "ngx-sirio-select", inputs: ["placeholder", "disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "isMultiple", "textHelp", "textFeedback", "ariaLabel", "ariaInvalid", "ariaDescribedBy"], outputs: ["focusEvent", "blurEvent", "keydownEvent"] }, { kind: "component", type: SirioSelectOptionComponent, selector: "ngx-sirio-select-option", inputs: ["value"], outputs: ["optionSelected", "blurEvent"] }, { kind: "component", type: SirioSelectPanelComponent, selector: "ngx-sirio-select-panel", outputs: ["optionSelected", "panelOpened", "panelClosed"] }, { kind: "component", type: SirioCheckboxGroupComponent, selector: "ngx-sirio-checkbox-group", inputs: ["textHelp", "textFeedback", "label", "labelPopover", "ariaLabelPopoverButton", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioCheckboxComponent, selector: "ngx-sirio-checkbox", inputs: ["disabled", "name", "textHelp", "textFeedback", "value", "ariaInvalid", "ariaDescribedBy", "disabledState", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioDatepickerComponent, selector: "ngx-sirio-datepicker", inputs: ["name", "placeholder", "textHelp", "textFeedback", "label", "labelPopover", "ariaLabelPopoverButton", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "value", "disabledState"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent", "datechangeEvent"] }, { kind: "component", type: SirioTimepickerComponent, selector: "ngx-sirio-timepicker", inputs: ["name", "label", "labelPopover", "ariaLabelPopoverButton", "placeholder", "textHelp", "textFeedback", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioRadioGroupComponent, selector: "ngx-sirio-radio-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioRadioButtonComponent, selector: "ngx-sirio-radio-button", inputs: ["disabledState", "label", "name", "textHelp", "textFeedback", "ariaInvalid", "ariaDescribedBy", "value", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioTabComponent, selector: "ngx-sirio-tab", inputs: ["isVertical", "isNavLine", "leftArrowLabel", "rightArrowLabel", "tabActive"], outputs: ["tabChange"] }, { kind: "component", type: SirioTabItemComponent, selector: "ngx-sirio-tab-item", inputs: ["label", "disabled", "icon"] }, { kind: "component", type: SirioAccordionComponent, selector: "ngx-sirio-accordion", inputs: ["dark"] }, { kind: "component", type: SirioAccordionPanelComponent, selector: "ngx-sirio-accordion-panel", inputs: ["active", "disabled"], outputs: ["opened", "closed"] }, { kind: "component", type: SirioAccordionHeaderComponent, selector: "ngx-sirio-accordion-header" }, { kind: "component", type: SirioAccordionBodyComponent, selector: "ngx-sirio-accordion-body" }, { kind: "component", type: SirioButtonComponent, selector: "ngx-sirio-button", inputs: ["ariaExpanded", "ariaControls", "ariaActivedescendant", "ariaHaspopup", "ariaLabel", "ariaRequired", "ariaInvalid", "ariaDescribedby", "icon", "title", "role", "color", "isFloating", "isExtended", "isLight", "isSmall", "disabled", "isDropdown", "type", "dismissType", "isBtnBlock"], outputs: ["clickEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: SirioFileUploadComponent, selector: "ngx-sirio-file-upload", inputs: ["multiple", "color", "accept", "maxFiles", "showFilelist", "label", "labelPopover", "ariaLabelPopoverButton", "name", "textHelp", "textFeedback", "ariaLabel", "ariaLabelDeleteFileButton", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "fileUploadedEvent", "fileDeletedEvent", "uploadErrorEvent", "blurEvent"] }, { kind: "component", type: SirioToggleComponent, selector: "ngx-sirio-toggle", inputs: ["name", "textHelp", "textFeedback", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioChipCheckboxGroupComponent, selector: "ngx-sirio-chip-checkbox-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioChipRadioGroupComponent, selector: "ngx-sirio-chip-radio-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioInputChipComponent, selector: "ngx-sirio-input-chip", inputs: ["disabledState", "name", "textHelp", "textFeedback", "value", "ariaInvalid", "ariaDescribedBy", "type", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioAlertComponent, selector: "ngx-sirio-alert", inputs: ["type", "labelClose", "isVisible"], outputs: ["closeEvent"] }, { kind: "component", type: SirioAlertMessageComponent, selector: "ngx-sirio-alert-message" }, { kind: "component", type: SirioSliderComponent, selector: "ngx-sirio-slider", inputs: ["disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "description", "min", "max", "ariaInvalid", "ariaDescribedBy", "textHelp", "textFeedback"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioNotifyComponent, selector: "ngx-sirio-notify", inputs: ["isDark"] }, { kind: "component", type: SirioNotifyBodyComponent, selector: "ngx-sirio-notify-body", inputs: ["title"] }, { kind: "directive", type: SirioTooltipDirective, selector: "[sirioTooltip]", inputs: ["sirioTooltip", "content", "hasAction", "hasPopover", "actionLabel", "actionIconClass", "clickOutside", "position", "customTemplate"], outputs: ["clickEvent"] }, { kind: "component", type: SirioCollapseComponent, selector: "ngx-sirio-collapse", inputs: ["isOpen"], outputs: ["opened", "closed"] }, { kind: "directive", type: SirioCollapseTriggerDirective, selector: "[ngxSirioCollapseTrigger]", inputs: ["id", "ngxSirioCollapseTrigger"] }, { kind: "component", type: TemplateWrapperComponent, selector: "app-template-wrapper", inputs: ["template", "context"] }, { kind: "component", type: DynamicHostComponent, selector: "app-dynamic-host", inputs: ["register", "properties", "formGroup"] }, { kind: "component", type: BadgeComponent, selector: "app-badge", inputs: ["badge"] }, { kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: AgCharts, selector: "ag-charts", inputs: ["options"], outputs: ["onChartReady"] }, { kind: "pipe", type: TimesPipe, name: "times" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DynamicFieldsComponent, decorators: [{
             type: Component,
@@ -9453,8 +10119,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         AdornerDirective, ReadOnlyDirective, DisplayDirective, FrameSecurityDirective, ValidationPatchDirective,
                         DropdownDirective, UpdateBlurDirective, RepeatDirective, RecursionDirective, TabDirective, GridDirective, ChangeDirective,
                         RegisterDirective, RefreshDirective, AccordionDirective, DateDirective, NumberDirective, TextDirective, ValueSyncDirective,
-                        TabControlDirective, TabItemDirective, CollapseDirective, AccordionPanelDirective, CollapsePatchDirective,
-                        DateTimeCoordinatorDirective, DateTimeValidationDirective, AlertDirective, RequiredOnInputDirective,
+                        TabControlDirective, TabItemDirective, CollapseDirective, AccordionPanelDirective, CollapsePatchDirective, TreeListDirective,
+                        DateTimeCoordinatorDirective, DateTimeValidationDirective, AlertDirective, RequiredOnInputDirective, NavigatorStateDirective,
+                        TabBadgesDirective, TabBadgeDirective, FileListReadonlyDirective,
                         SirioInputComponent,
                         SirioSelectComponent, SirioSelectOptionComponent, SirioSelectPanelComponent,
                         SirioCheckboxGroupComponent, SirioCheckboxComponent, SirioDatepickerComponent, SirioTimepickerComponent,
@@ -9466,14 +10133,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         SirioNotifyComponent, SirioNotifyBodyComponent, SirioNotifyActionComponent, SirioNotifyLinkComponent,
                         SirioTooltipDirective, SirioCollapseComponent, SirioCollapseTriggerDirective,
                         SirioPaginatorComponent,
-                        TemplateWrapperComponent, DynamicHostComponent,
-                        AgGridAngular, AgCharts], providers: [
+                        TemplateWrapperComponent, DynamicHostComponent, BadgeComponent,
+                        AgGridAngular, AgCharts,
+                        TimesPipe], providers: [
                         RegisterService,
                         ProgrammabilityService,
                         GridService,
                         ChartService
-                    ], encapsulation: ViewEncapsulation.None, 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            <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n              <!-- #region textfield -->\r\n              <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-input type=\"text\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                                 [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 [textcase]=\"component.textCase\"\r\n                                 [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #textfield\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"textfield\">\r\n                </ngx-sirio-input>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region select -->\r\n              <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [refresh]=\"refreshValues(component)\"\r\n                                  dropdown\r\n                                  [onSelectionChanged]=\"runExpression(component.selectionChanged)\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #select\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"select\">\r\n                  <ngx-sirio-select-panel>\r\n                    <ngx-sirio-input *ngIf=\"component.searchable\" class=\"searchable\" type=\"text\" [placeholder]=\"locale(Texts, 'TypeToSearch')\"></ngx-sirio-input>\r\n                    <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n                  </ngx-sirio-select-panel>\r\n                </ngx-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                <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [isMultiple]=\"true\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [refresh]=\"refreshValues(component)\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #taglist\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"taglist\">\r\n                  <ngx-sirio-select-panel>\r\n                    <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n                  </ngx-sirio-select-panel>\r\n                </ngx-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                <ngx-sirio-input type=\"number\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                                 [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 number\r\n                                 [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n                                 [minimum]=\"evaluateNumber(component.minimum)\"\r\n                                 [maximum]=\"evaluateNumber(component.maximum)\"\r\n                                 [decimalDigits]=\"evaluateNumber(component.decimalDigits)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #number\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"number\">\r\n                </ngx-sirio-input>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region datetime -->\r\n              <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ng-container [ngSwitch]=\"component.subtype\">\r\n                  <!-- #region date -->\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n                                          [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n                                          [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                          [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [ngClass]=\"getTextAlignment(component)\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          isoDate\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #date\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"date\">\r\n                    </ngx-sirio-datepicker>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region time -->\r\n                  <ng-container *ngSwitchCase=\"'time'\">\r\n                    <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n                                          [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                          [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                          [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [ngClass]=\"getTextAlignment(component)\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #time\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"time\">\r\n                    </ngx-sirio-timepicker>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region datetime -->\r\n                  <ng-container *ngSwitchCase=\"'datetime'\">\r\n                    <div [formControlName]=\"component.key\"\r\n                         dateTimeCoordinator\r\n                         dateTimeValidator\r\n                         [isWarning]=\"isWarning(component)\"\r\n                         [showWhenValid]=\"false\"\r\n                         [datePicker]=\"date\"\r\n                         [timePicker]=\"time\"\r\n                         [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                         [properties]=\"component.properties\"\r\n                         [valueSync]=\"component.valueSync\"\r\n                         #datetime\r\n                         [register]=\"component\"\r\n                         [componentRef]=\"datetime\"\r\n                         class=\"datetime-container\">\r\n                      <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n                                            [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n                                            [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                            [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                            [ngClass]=\"getTextAlignment(component)\"\r\n                                            isoDate\r\n                                            #date>\r\n                      </ngx-sirio-datepicker>\r\n                      <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n                                            [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                            [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                            [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                            [ngClass]=\"getTextAlignment(component)\"\r\n                                            #time>\r\n                      </ngx-sirio-timepicker>\r\n                    </div>\r\n                    <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                      <span class=\"sirio-form-feedback\">{{textFeedback}}</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                      <p class=\"sirio-helper-text\">{{textHelp}}</p>\r\n                    </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region toggle -->\r\n                    <ng-container *ngSwitchCase=\"'toggle'\">\r\n                      <ngx-sirio-toggle [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                        [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                        [textFeedback]=\"getTextFeedback(component)\"\r\n                                        [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [properties]=\"component.properties\"\r\n                                        [formControlName]=\"component.key\"\r\n                                        validation\r\n                                        [canValidate]=\"true\"\r\n                                        [isWarning]=\"isWarning(component)\"\r\n                                        [showWhenValid]=\"false\"\r\n                                        [valueSync]=\"component.valueSync\"\r\n                                        #toggle\r\n                                        [register]=\"component\"\r\n                                        [componentRef]=\"toggle\">\r\n                        {{ evaluateString(locale(component, 'label')) }}\r\n                      </ngx-sirio-toggle>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-checkbox [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #checkbox\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"checkbox\">\r\n                        {{ evaluateString(locale(component, 'label')) }}\r\n                      </ngx-sirio-checkbox>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region chip -->\r\n                    <ng-container *ngSwitchCase=\"'chip'\">\r\n                      <ngx-sirio-chip-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                  [properties]=\"component.properties\"\r\n                                                  [formControlName]=\"component.key\"\r\n                                                  validation\r\n                                                  [canValidate]=\"true\"\r\n                                                  [isWarning]=\"isWarning(component)\"\r\n                                                  [showWhenValid]=\"false\"\r\n                                                  [refresh]=\"refreshValues(component)\"\r\n                                                  [valueSync]=\"component.valueSync\"\r\n                                                  #chipradio\r\n                                                  [register]=\"component\"\r\n                                                  [componentRef]=\"chipradio\">\r\n                        <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n                                              type=\"radio\"\r\n                                              [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-input-chip>\r\n                      </ngx-sirio-chip-radio-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                             [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                             [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                             [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                             [textFeedback]=\"getTextFeedback(component)\"\r\n                                             [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                             [properties]=\"component.properties\"\r\n                                             [formControlName]=\"component.key\"\r\n                                             validation\r\n                                             [canValidate]=\"true\"\r\n                                             [isWarning]=\"isWarning(component)\"\r\n                                             [showWhenValid]=\"false\"\r\n                                             [refresh]=\"refreshValues(component)\"\r\n                                             [valueSync]=\"component.valueSync\"\r\n                                             #radio\r\n                                             [register]=\"component\"\r\n                                             [componentRef]=\"radio\">\r\n                        <ngx-sirio-radio-button *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-radio-button>\r\n                      </ngx-sirio-radio-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region chip -->\r\n                    <ng-container *ngSwitchCase=\"'chip'\">\r\n                      <ngx-sirio-chip-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                     [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                     [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                     [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                     [textFeedback]=\"getTextFeedback(component)\"\r\n                                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                     [properties]=\"component.properties\"\r\n                                                     [formControlName]=\"component.key\"\r\n                                                     validation\r\n                                                     [canValidate]=\"true\"\r\n                                                     [isWarning]=\"isWarning(component)\"\r\n                                                     [showWhenValid]=\"false\"\r\n                                                     [refresh]=\"refreshValues(component)\"\r\n                                                     [valueSync]=\"component.valueSync\"\r\n                                                     #chipcheckbox\r\n                                                     [register]=\"component\"\r\n                                                     [componentRef]=\"chipcheckbox\">\r\n                        <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n                                              type=\"checkbox\"\r\n                                              [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-input-chip>\r\n                      </ngx-sirio-chip-checkbox-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                [textFeedback]=\"getTextFeedback(component)\"\r\n                                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                [properties]=\"component.properties\"\r\n                                                [formControlName]=\"component.key\"\r\n                                                validation\r\n                                                [canValidate]=\"true\"\r\n                                                [isWarning]=\"isWarning(component)\"\r\n                                                [showWhenValid]=\"false\"\r\n                                                [refresh]=\"refreshValues(component)\"\r\n                                                [valueSync]=\"component.valueSync\"\r\n                                                #checkbox\r\n                                                [register]=\"component\"\r\n                                                [componentRef]=\"checkbox\">\r\n                        <ngx-sirio-checkbox *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-checkbox>\r\n                      </ngx-sirio-checkbox-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                <ngx-sirio-input type=\"textarea\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 [textcase]=\"component.textCase\"\r\n                                 [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #textarea\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"textarea\">\r\n                </ngx-sirio-input>\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                  <ngx-sirio-file-upload [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                         [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                         [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                         [accept]=\"getMimeTypes(component.accept)\"\r\n                                         [multiple]=\"evaluateBoolean(component.multiple)\"\r\n                                         (fileUploadedEvent)=\"fileUploaded($event)\"\r\n                                         [showFilelist]=\"!component.showDetails\"\r\n                                         [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                         [textFeedback]=\"getTextFeedback(component)\"\r\n                                         [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                         [properties]=\"component.properties\"\r\n                                         [formControlName]=\"component.key\"\r\n                                         validation\r\n                                         [canValidate]=\"true\"\r\n                                         [isWarning]=\"isWarning(component)\"\r\n                                         [showWhenValid]=\"false\"\r\n                                         [valueSync]=\"component.valueSync\"\r\n                                         #filepicker\r\n                                         [register]=\"component\"\r\n                                         [componentRef]=\"filepicker\">\r\n                    <span class=\"fas fa-arrow-up\" aria-hidden=\"true\"></span>\r\n                    {{ locale(Texts, 'Upload') }}\r\n                  </ngx-sirio-file-upload>\r\n                </div>\r\n                <ng-container *ngIf=\"component.showDetails\">\r\n                  <app-dynamic-fields [form]=\"form\"\r\n                                      [formGroup]=\"formGroup\"\r\n                                      [rows]=\"createUploadTables(component)\"\r\n                                      contextId=\"fileList\"></app-dynamic-fields>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region range -->\r\n              <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-slider [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n                                  [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #range\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"range\">\r\n                </ngx-sirio-slider>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region displayfield -->\r\n              <ng-container *ngSwitchCase=\"'displayfield'\">\r\n                <div class=\"sirio-control\"\r\n                     [ngClass]=\"[getTextAlignment(component), 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                    <button *ngIf=\"component.tooltip\"\r\n                            sirioTooltip\r\n                            [content]=\"component.tooltip\"\r\n                            [hasPopover]=\"true\"\r\n                            [attr.aria-label]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                            class=\"sirio-label-popover fas fa-info-circle\"></button>\r\n                  </div>\r\n                  <div class=\"sirio-form-control data-display\" [ngClass]=\"component.fieldtype\">\r\n                    <ng-container [ngSwitch]=\"component.fieldtype\">\r\n                      <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                        <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\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 *ngSwitchDefault>\r\n                        <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\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                  </div>\r\n                  <p *ngIf=\"component.description\" class=\"sirio-helper-text\">\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                    <ng-container [formArrayName]=\"component.key\"\r\n                                  [formGroup]=\"formGroup\"\r\n                                  [recursion]=\"component\"\r\n                                  #recursion=\"recursion\"\r\n                                  [repeat]=\"evaluateNumber(component.repetitions)\"\r\n                                  [allowAddRemove]=\"evaluateBoolean(component.allowAddRemove)\">\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-container *ngIf=\"component.subtype == 'navigation'\">\r\n                          <ng-container *ngTemplateOutlet=\"navigation; context: { formArray: formArray }\"></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                              <div [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclisttab\">\r\n                                <ngx-sirio-tab [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                               [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                               [tabCount]=\"formArray.controls.length\"\r\n                                               #dynamiclisttab>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ngx-sirio-tab-item [label]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\">\r\n                                      <ng-container *ngIf=\"i === dynamiclisttab.activeIndex\">\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=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove\">\r\n                                            <div style=\"text-align:right\">\r\n                                              <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n                                            </div>\r\n                                          </ng-container>\r\n                                        </div>\r\n                                      </ng-container>\r\n                                    </ngx-sirio-tab-item>\r\n                                  </ng-container>\r\n                                </ngx-sirio-tab>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region accordion -->\r\n                            <ng-container *ngSwitchCase=\"'accordion'\">\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclistaccordion\">\r\n                                <ngx-sirio-accordion [accordionCount]=\"formArray.controls.length\"\r\n                                                     #dynamiclistaccordion>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ngx-sirio-accordion-panel #panel accordionPanel>\r\n                                      <ngx-sirio-accordion-header>\r\n                                        <span [innerText]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\"></span>\r\n                                      </ngx-sirio-accordion-header>\r\n                                      <ngx-sirio-accordion-body>\r\n                                        <ng-container *ngIf=\"panel.panelIsOpen\">\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=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove\">\r\n                                              <div style=\"text-align:right\">\r\n                                                <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n                                              </div>\r\n                                            </ng-container>\r\n                                          </div>\r\n                                        </ng-container>\r\n                                      </ngx-sirio-accordion-body>\r\n                                    </ngx-sirio-accordion-panel>\r\n                                  </ng-container>\r\n                                </ngx-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                                                <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\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, 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                                                <ngx-sirio-button [ngxSirioCollapseTrigger]=\"collapseTemplate\"\r\n                                                                  [color]=\"null\" [icon]=\"collapse.isOpen ? 'fas fa-chevron-down' : 'fas fa-chevron-right' \" />\r\n                                              </div>\r\n                                              <div *ngIf=\"!collapse.isOpen\" class=\"recursion-title\">\r\n                                                <div class=\"recursion-text\">\r\n                                                  <ng-container *ngIf=\"!collapse.isOpen\">\r\n                                                    {{ recursionData.itemsArray.length }} elementi presenti\r\n                                                  </ng-container>\r\n                                                </div>\r\n                                              </div>\r\n                                              <div class=\"recursion-content\">\r\n                                                <ngx-sirio-collapse #collapseTemplate\r\n                                                                    #collapse=\"collapseExtension\"\r\n                                                                    collapseExtension>\r\n                                                  <div *ngIf=\"collapse.isOpen\" 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                                                </ngx-sirio-collapse>\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[navigationIndex] as item\">\r\n                                  <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (navigationIndex + 1) }}</label>\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                                <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                  <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n                                    <div>\r\n                                      <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\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, 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 }\"></ng-container>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\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                    <ngx-sirio-button (click)=\"moveUpItem(formArray, i)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"upLabel\"\r\n                                      [title]=\"upLabel\"\r\n                                      [color]=\"null\" icon=\"fas fa-arrow-up\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ upLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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                    <ngx-sirio-button (click)=\"moveDownItem(formArray, i)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"downLabel\"\r\n                                      [title]=\"downLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-arrow-down\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ downLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnRemove let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n                    <ngx-sirio-button (click)=\"removeItem(formArray, i, true)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"removeLabel\"\r\n                                      [title]=\"removeLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-trash\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ removeLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-button>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #btnAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n                    <ngx-sirio-button (click)=\"addItem(formArray)\"\r\n                                      class=\"add-item\"\r\n                                      [ariaLabel]=\"addLabel\"\r\n                                      [title]=\"addLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-plus\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ addLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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-i=\"i\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove\">\r\n                    <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #buttonsAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n                  <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove\">\r\n                    <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, 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 sirio-display-feedback\">{{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-helper-text\">{{textHelp}}</p>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #navigation let-formArray=\"formArray\">\r\n                  <nav class=\"sirio-pagination\">\r\n                    <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n                      <div class=\"sirio-pagination-page\">\r\n                        <select class=\"sirio-form-control\"\r\n                                [(ngModel)]=\"navigationIndex\"\r\n                                [ngModelOptions]=\"{ standalone: true }\">\r\n                          <option *ngFor=\"let _ of formArray.controls; let i = index\" [ngValue]=\"i\">\r\n                            {{ i + 1 }}\r\n                          </option>\r\n                        </select>\r\n                        {{ locale(Texts, 'Of') }}\r\n                        <span>{{ formArray.controls.length }}</span> {{ locale(Texts, 'Elements') }}\r\n                      </div>\r\n                      <div class=\"sirio-pagination-cursor\">\r\n                        <ul class=\"sirio-pagination-list\">\r\n                          <li [class.disabled]=\"navigationIndex == 0\">\r\n                            <a href=\"javascript:void(0)\"\r\n                               (click)=\"navigateItem(formArray, -1)\"\r\n                               [title]=\"locale(Texts, 'PreviousElement')\"\r\n                               [class.disabled]=\"navigationIndex == 0\">\r\n                              <span aria-hidden=\"true\" class=\"fas fa-angle-left\"></span>\r\n                            </a>\r\n                          </li>\r\n                          <li [class.disabled]=\"navigationIndex == formArray.controls.length - 1\">\r\n                            <a href=\"javascript:void(0)\"\r\n                               (click)=\"navigateItem(formArray, 1)\"\r\n                               [title]=\"locale(Texts, 'NextElement')\"\r\n                               [class.disabled]=\"navigationIndex == formArray.controls.length - 1\">\r\n                              <span aria-hidden=\"true\" class=\"fas fa-angle-right\"></span>\r\n                            </a>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </ng-container>\r\n                    <div class=\"actions\">\r\n                      <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray }\"></ng-container>\r\n                      <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && navigationIndex != -1\">\r\n                        <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: navigationIndex }\"></ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </nav>\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 [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]=\"resolvePath(component.path)\"\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                    <ngx-sirio-tab #tab\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"tab\"\r\n                                   [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                   [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                   [isNavLine]=\"component.navigation\"\r\n                                   [isVertical]=\"component.vertical\"\r\n                                   tabControl>\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <ngx-sirio-tab-item [label]=\"evaluateString(locale(panel, 'label'))\"\r\n                                            [icon]=\"evaluateString(panel.icon)\"\r\n                                            [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n                                            #tabPanel\r\n                                            tabItem\r\n                                            [componentRef]=\"tab\"\r\n                                            *ngIf=\"evaluateConditional(panel.conditional)\">\r\n                          <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                            <div *ngIf=\"tabPanel.isActive\">\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                            </div>\r\n                          </ng-container>\r\n                        </ngx-sirio-tab-item>\r\n                      </ng-container>\r\n                    </ngx-sirio-tab>\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                    <ngx-sirio-accordion #accordion\r\n                                         [register]=\"component\"\r\n                                         [componentRef]=\"accordion\">\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <ngx-sirio-accordion-panel *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                                   [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n                          <ngx-sirio-accordion-header>\r\n                            <span [innerText]=\"evaluateString(locale(panel, 'label'))\"></span>\r\n                          </ngx-sirio-accordion-header>\r\n                          <ngx-sirio-accordion-body>\r\n                            <div>\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                                                    [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                            </div>\r\n                          </ngx-sirio-accordion-body>\r\n                        </ngx-sirio-accordion-panel>\r\n                      </ng-container>\r\n                    </ngx-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]=\"runExpression(component.onCollapse)\"\r\n                     [onExpand]=\"runExpression(component.onExpand)\"\r\n                     #text\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"text\">\r\n                  <!--Reset View Context-->\r\n                  <div tabindex=\"0\" style=\"display:none\"></div>\r\n                  <div class=\"flex\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                    <ng-container *ngIf=\"component.tooltip\">\r\n                      <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n                      <button class=\"sirio-label-popover fas fa-info-circle\"\r\n                              sirioTooltip\r\n                              [attr.aria-label]=\"locale(Texts, 'Information')\"\r\n                              [hasPopover]=\"true\"\r\n                              [customTemplate]=\"tooltipWrapper.getTemplateRef()\"></button>\r\n                      <ng-template #tooltipTemplate let-component=\"component\">\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                                 [columnDefs]=\"component.columns || evaluate(component.columnsExpression) || []\"\r\n                                 [rowSource]=\"getRowSource(component)\"\r\n                                 [refresh]=\"refreshRowSource(component)\"\r\n                                 [style.height]=\"component.autoHeight ? null : evaluateHeight(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                  <ngx-sirio-button (clickEvent)=\"clickButton(component, $event)\"\r\n                                    [color]=\"evaluateColor(component.color)\"\r\n                                    [disabled]=\"evaluateBoolean(component.disabled)\"\r\n                                    #button\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"button\">\r\n                    <ng-container *ngIf=\"evaluateString(component.icon) as icon; else noIcon\">\r\n                      <span *ngIf=\"component.iconPosition!='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n                      {{ evaluateString(locale(component, 'label')) }}\r\n                      <span *ngIf=\"component.iconPosition=='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n                    </ng-container>\r\n                    <ng-template #noIcon>\r\n                      {{ evaluateString(locale(component, 'label')) }}\r\n                    </ng-template>\r\n                  </ngx-sirio-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                <ngx-sirio-alert [type]=\"component.role\"\r\n                                 [labelClose]=\"locale(Texts, 'Close')\"\r\n                                 [preventClose]=\"evaluateBoolean(component.preventClose)\"\r\n                                 #alert\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"alert\">\r\n                  <ngx-sirio-alert-message>\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </ngx-sirio-alert-message>\r\n                </ngx-sirio-alert>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region notice -->\r\n              <ng-container *ngSwitchCase=\"'notice'\">\r\n                <ngx-sirio-notify #notice\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"notice\">\r\n                  <ngx-sirio-notify-body [title]=\"evaluateString(locale(component, 'title'))\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </ngx-sirio-notify-body>\r\n                </ngx-sirio-notify>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tooltip -->\r\n              <ng-container *ngSwitchCase=\"'tooltip'\">\r\n                <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n                <button class=\"sirio-label-popover fas fa-info-circle\"\r\n                        sirioTooltip\r\n                        [hasPopover]=\"true\"\r\n                        [customTemplate]=\"tooltipWrapper.getTemplateRef()\"\r\n                        #tooltip\r\n                        [register]=\"component\"\r\n                        [componentRef]=\"tooltip\"></button>\r\n                <ng-template #tooltipTemplate let-component=\"component\">\r\n                  <div class=\"sirio-tooltip-body\">\r\n                    <p *ngIf=\"component.title\" class=\"sirio-tooltip-heading sirio-space-down\">\r\n                      {{ evaluateString(locale(component, 'title')) }}\r\n                    </p>\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                <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n                           [observe]=\"getChartData(component)\"\r\n                           [callback]=\"invalidateChart(component)\"\r\n                           [style.height.px]=\"component.height\"\r\n                           #chart\r\n                           [register]=\"component\"\r\n                           [componentRef]=\"chart\" />\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 sirio-display-feedback\">{{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-helper-text\">{{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            </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}.sirio-control.is-disabled .sirio-input-group .sirio-input-group-text,.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{border:0px}.sirio-control.is-readonly .sirio-form-control{background-color:#fff!important;color:#454d56}.sirio-form-control[type=number]:disabled{background-image:none}ngx-sirio-alert.prevent-close .sirio-alert-close{display:none}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.col-host .sirio-accordion-body{overflow:unset!important}.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-dropdown .searchable{position:absolute;width:100%;display:none;left:0}.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}\n", ".sirio-control.ng-invalid .sirio-form-feedback,.sirio-display-feedback{color:#aa224f;display:inline-block}.sirio-control.ng-invalid .sirio-input-group-text{color:#aa224f;border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label{color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label:before,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label{color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:before,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:after,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:after{background-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-upload.sirio-is-invalid button{background-color:#aa224f;border-color:#aa224f}\n", ".sirio-control.text-left input.sirio-form-control,.sirio-control.text-left textarea.sirio-form-control,.sirio-control.text-left div.sirio-form-control{text-align:left}.sirio-control.text-center input.sirio-form-control,.sirio-control.text-center textarea.sirio-form-control,.sirio-control.text-center div.sirio-form-control{text-align:center}.sirio-control.text-right input.sirio-form-control,.sirio-control.text-right textarea.sirio-form-control,.sirio-control.text-right div.sirio-form-control{text-align:right}.sirio-control.text-center input.sirio-datepicker,.sirio-control.text-center input.sirio-timepicker,.sirio-control.text-right input.sirio-datepicker,.sirio-control.text-right input.sirio-timepicker{padding-right:40px}.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}.col-host.component-center ngx-sirio-toggle .sirio-form-toggle label{margin-bottom:0}\n", ".sirio-control .sirio-form-control.data-display{border-color:#e3e5e8}.sirio-control .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.sirio-control .sirio-form-control.data-display.text,.sirio-control .sirio-form-control:hover.data-display.text{overflow:auto;height:auto;margin-top:-6px;color:#454d56}.sirio-control .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.sirio-control .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n", ".sirio-control.light-readonly label:hover,.sirio-control.light-view div.sirio-label:hover{color:#454d56}.sirio-control.light-readonly input.sirio-form-control,.sirio-control.light-readonly .sirio-dropdown .sirio-dropdown-select,.sirio-control.light-readonly textarea.sirio-form-control,.sirio-control.light-view div.sirio-form-control{background:none!important;border:0px;padding-left:0}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{background:none}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}.sirio-upload.sirio-control.light-readonly label,.sirio-upload.sirio-control.is-disabled label{pointer-events:none}\n", ":root{--sirio-spinner-blue: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%2300368F' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\");--sirio-spinner-white: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='white' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\")}.sirio-control .sirio-is-pending,.sirio-control.sirio-is-pending input.sirio-form-control,.sirio-control.sirio-is-pending .sirio-dropdown .sirio-form-control,.sirio-form-check.sirio-control.sirio-is-pending{background-image:var(--sirio-spinner-blue);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}textarea.sirio-form-control.sirio-is-pending{background-position:top .9375rem right .9375rem}.sirio-control.sirio-is-pending input.sirio-form-control{background-position:right .9375rem top 50%}.sirio-upload.sirio-control.sirio-is-pending ngx-sirio-button .sirio-btn-primary{background-image:var(--sirio-spinner-white);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}.sirio-control.sirio-is-pending fieldset{background-image:var(--sirio-spinner-blue);background-repeat:no-repeat;background-position:right .9375rem top 1rem;background-size:1rem;padding-right:2.25rem}\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 .is-open{overflow:visible!important}.dynamiclist-table ngx-sirio-button button{padding:7px}\n", ".df-field-dynamiclist .sirio-pagination{width:100%;background-color:#f2f6fc;margin:0}.df-field-dynamiclist .sirio-pagination-page{background-color:#f2f6fc}.df-field-dynamiclist .sirio-pagination-cursor{margin-left:0}.df-field-dynamiclist .actions{margin-left:auto}\n", ".datetime-container{display:flex;gap:8px;align-items:flex-end}.datetime-container{display:flex;gap:8px}.datetime-container ngx-sirio-datepicker{flex:1}.datetime-container ngx-sirio-timepicker{flex:1}.datetime-container+.sirio-form-feedback{color:#aa224f;display:inline-block}\n", ".sirio-tab.sirio-tab-vertical .sirio-tab-item{width:100%}\n", ".sirio-tooltip .sirio-tooltip-body{white-space:pre-line}\n"] }]
-        }], ctorParameters: () => [{ type: SanitizeService }, { type: MarkdownService }, { type: MimeService }, { type: ProgrammabilityService }, { type: WeakService }, { type: RegisterService }, { type: MetadataService }, { type: i2.LanguageService }, { type: GlobalService }, { type: FormService }, { type: GridService }, { type: ChartService }, { type: DialogService }, { type: AutoFocusService }, { type: i0.ElementRef }], propDecorators: { form: [{
+                    ], encapsulation: ViewEncapsulation.None, 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            <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n              <!-- #region textfield -->\r\n              <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-input type=\"text\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                                 [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 [textcase]=\"component.textCase\"\r\n                                 [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #textfield\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"textfield\">\r\n                </ngx-sirio-input>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region select -->\r\n              <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [refresh]=\"refreshValues(component)\"\r\n                                  dropdown\r\n                                  [onSelectionChanged]=\"callExpression(component.selectionChanged)\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #select\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"select\">\r\n                  <ngx-sirio-select-panel>\r\n                    <ngx-sirio-input *ngIf=\"component.searchable\" class=\"searchable\" type=\"text\" [placeholder]=\"locale(Texts, 'TypeToSearch')\"></ngx-sirio-input>\r\n                    <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n                  </ngx-sirio-select-panel>\r\n                </ngx-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                <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [isMultiple]=\"true\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [refresh]=\"refreshValues(component)\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #taglist\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"taglist\">\r\n                  <ngx-sirio-select-panel>\r\n                    <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n                  </ngx-sirio-select-panel>\r\n                </ngx-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                <ngx-sirio-input type=\"number\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                                 [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 number\r\n                                 [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n                                 [minimum]=\"evaluateNumber(component.minimum)\"\r\n                                 [maximum]=\"evaluateNumber(component.maximum)\"\r\n                                 [decimalDigits]=\"evaluateNumber(component.decimalDigits)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #number\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"number\">\r\n                </ngx-sirio-input>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region datetime -->\r\n              <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ng-container [ngSwitch]=\"component.subtype\">\r\n                  <!-- #region date -->\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n                                          [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n                                          [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                          [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [ngClass]=\"getTextAlignment(component)\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          isoDate\r\n                                          [pick]=\"component.pick\"\r\n                                          [minDate]=\"evaluateString(component.range?.min)\"\r\n                                          [maxDate]=\"evaluateString(component.range?.max)\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #date\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"date\">\r\n                    </ngx-sirio-datepicker>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region time -->\r\n                  <ng-container *ngSwitchCase=\"'time'\">\r\n                    <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n                                          [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                          [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                          [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [ngClass]=\"getTextAlignment(component)\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #time\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"time\">\r\n                    </ngx-sirio-timepicker>\r\n                  </ng-container>\r\n                  <!-- #endregion -->\r\n                  <!-- #region datetime -->\r\n                  <ng-container *ngSwitchCase=\"'datetime'\">\r\n                    <div [formControlName]=\"component.key\"\r\n                         dateTimeCoordinator\r\n                         dateTimeValidator\r\n                         [isWarning]=\"isWarning(component)\"\r\n                         [showWhenValid]=\"false\"\r\n                         [datePicker]=\"date\"\r\n                         [timePicker]=\"time\"\r\n                         [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                         [properties]=\"component.properties\"\r\n                         [valueSync]=\"component.valueSync\"\r\n                         #datetime\r\n                         [register]=\"component\"\r\n                         [componentRef]=\"datetime\"\r\n                         class=\"datetime-container\">\r\n                      <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n                                            [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n                                            [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                            [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                            [ngClass]=\"getTextAlignment(component)\"\r\n                                            isoDate\r\n                                            [minDate]=\"evaluateString(component.range?.min)\"\r\n                                            [maxDate]=\"evaluateString(component.range?.max)\"\r\n                                            #date>\r\n                      </ngx-sirio-datepicker>\r\n                      <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n                                            [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n                                            [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                            [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                            [ngClass]=\"getTextAlignment(component)\"\r\n                                            #time>\r\n                      </ngx-sirio-timepicker>\r\n                    </div>\r\n                    <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n                      <span class=\"sirio-form-feedback\">{{textFeedback}}</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n                      <p class=\"sirio-helper-text\">{{textHelp}}</p>\r\n                    </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region toggle -->\r\n                    <ng-container *ngSwitchCase=\"'toggle'\">\r\n                      <ngx-sirio-toggle [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                        [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                        [textFeedback]=\"getTextFeedback(component)\"\r\n                                        [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                        [properties]=\"component.properties\"\r\n                                        [formControlName]=\"component.key\"\r\n                                        validation\r\n                                        [canValidate]=\"true\"\r\n                                        [isWarning]=\"isWarning(component)\"\r\n                                        [showWhenValid]=\"false\"\r\n                                        [valueSync]=\"component.valueSync\"\r\n                                        #toggle\r\n                                        [register]=\"component\"\r\n                                        [componentRef]=\"toggle\">\r\n                        <div [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'label')))\"></div>\r\n                      </ngx-sirio-toggle>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-checkbox [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                          [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                          [properties]=\"component.properties\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\r\n                                          [valueSync]=\"component.valueSync\"\r\n                                          #checkbox\r\n                                          [register]=\"component\"\r\n                                          [componentRef]=\"checkbox\">\r\n                        <div [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'label')))\"></div>\r\n                      </ngx-sirio-checkbox>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region chip -->\r\n                    <ng-container *ngSwitchCase=\"'chip'\">\r\n                      <ngx-sirio-chip-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                  [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                  [properties]=\"component.properties\"\r\n                                                  [formControlName]=\"component.key\"\r\n                                                  validation\r\n                                                  [canValidate]=\"true\"\r\n                                                  [isWarning]=\"isWarning(component)\"\r\n                                                  [showWhenValid]=\"false\"\r\n                                                  [refresh]=\"refreshValues(component)\"\r\n                                                  [valueSync]=\"component.valueSync\"\r\n                                                  #chipradio\r\n                                                  [register]=\"component\"\r\n                                                  [componentRef]=\"chipradio\">\r\n                        <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n                                              type=\"radio\"\r\n                                              [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-input-chip>\r\n                      </ngx-sirio-chip-radio-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                             [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                             [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                             [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                             [textFeedback]=\"getTextFeedback(component)\"\r\n                                             [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                             [properties]=\"component.properties\"\r\n                                             [formControlName]=\"component.key\"\r\n                                             validation\r\n                                             [canValidate]=\"true\"\r\n                                             [isWarning]=\"isWarning(component)\"\r\n                                             [showWhenValid]=\"false\"\r\n                                             [refresh]=\"refreshValues(component)\"\r\n                                             [valueSync]=\"component.valueSync\"\r\n                                             #radio\r\n                                             [register]=\"component\"\r\n                                             [componentRef]=\"radio\">\r\n                        <ngx-sirio-radio-button *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n                          <div [innerHTML]=\"toHTML(evaluateTemplate(locale(option, 'label')))\"></div>\r\n                        </ngx-sirio-radio-button>\r\n                      </ngx-sirio-radio-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                  <ng-container [ngSwitch]=\"component.subtype\">\r\n                    <!-- #region chip -->\r\n                    <ng-container *ngSwitchCase=\"'chip'\">\r\n                      <ngx-sirio-chip-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                     [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                     [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                     [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                     [textFeedback]=\"getTextFeedback(component)\"\r\n                                                     [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                     [properties]=\"component.properties\"\r\n                                                     [formControlName]=\"component.key\"\r\n                                                     validation\r\n                                                     [canValidate]=\"true\"\r\n                                                     [isWarning]=\"isWarning(component)\"\r\n                                                     [showWhenValid]=\"false\"\r\n                                                     [refresh]=\"refreshValues(component)\"\r\n                                                     [valueSync]=\"component.valueSync\"\r\n                                                     #chipcheckbox\r\n                                                     [register]=\"component\"\r\n                                                     [componentRef]=\"chipcheckbox\">\r\n                        <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n                                              type=\"checkbox\"\r\n                                              [value]=\"option.value\">\r\n                          {{ locale(option, 'label') }}\r\n                        </ngx-sirio-input-chip>\r\n                      </ngx-sirio-chip-checkbox-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                    <!-- #region default -->\r\n                    <ng-container *ngSwitchDefault>\r\n                      <ngx-sirio-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                                [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                                [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                                [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                                [textFeedback]=\"getTextFeedback(component)\"\r\n                                                [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                                [properties]=\"component.properties\"\r\n                                                [formControlName]=\"component.key\"\r\n                                                validation\r\n                                                [canValidate]=\"true\"\r\n                                                [isWarning]=\"isWarning(component)\"\r\n                                                [showWhenValid]=\"false\"\r\n                                                [refresh]=\"refreshValues(component)\"\r\n                                                [valueSync]=\"component.valueSync\"\r\n                                                #checkbox\r\n                                                [register]=\"component\"\r\n                                                [componentRef]=\"checkbox\">\r\n                        <ngx-sirio-checkbox *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n                          <div [innerHTML]=\"toHTML(evaluateTemplate(locale(option, 'label')))\"></div>\r\n                        </ngx-sirio-checkbox>\r\n                      </ngx-sirio-checkbox-group>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                  </ng-container>\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                <ngx-sirio-input type=\"textarea\"\r\n                                 [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                 [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                 [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                 [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n                                 [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                 [properties]=\"component.properties\"\r\n                                 [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                 [textFeedback]=\"getTextFeedback(component)\"\r\n                                 [formControlName]=\"component.key\"\r\n                                 [textcase]=\"component.textCase\"\r\n                                 [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                                 [ngClass]=\"getTextAlignment(component)\"\r\n                                 updateBlur\r\n                                 [requiredOnInput]=\"component.validate?.required\"\r\n                                 validation\r\n                                 [canValidate]=\"true\"\r\n                                 [isWarning]=\"isWarning(component)\"\r\n                                 [showWhenValid]=\"false\"\r\n                                 [valueSync]=\"component.valueSync\"\r\n                                 #textarea\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"textarea\">\r\n                </ngx-sirio-input>\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                  <ngx-sirio-file-upload [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                                         [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                         [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                         [accept]=\"getMimeTypes(component.accept)\"\r\n                                         [multiple]=\"evaluateBoolean(component.multiple)\"\r\n                                         (fileUploadedEvent)=\"fileUploaded($event)\"\r\n                                         [showFilelist]=\"!component.showDetails\"\r\n                                         [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                         [textFeedback]=\"getTextFeedback(component)\"\r\n                                         [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                         [properties]=\"component.properties\"\r\n                                         [formControlName]=\"component.key\"\r\n                                         validation\r\n                                         [canValidate]=\"true\"\r\n                                         [isWarning]=\"isWarning(component)\"\r\n                                         [showWhenValid]=\"false\"\r\n                                         [valueSync]=\"component.valueSync\"\r\n                                         #filepicker\r\n                                         [register]=\"component\"\r\n                                         [componentRef]=\"filepicker\">\r\n                    <span class=\"fas fa-arrow-up\" aria-hidden=\"true\"></span>\r\n                    {{ evaluateString(locale(component, 'text')) || locale(Texts, 'Upload') }}\r\n                  </ngx-sirio-file-upload>\r\n                </div>\r\n                <ng-container *ngIf=\"component.showDetails\">\r\n                  <app-dynamic-fields [form]=\"form\"\r\n                                      [formGroup]=\"formGroup\"\r\n                                      [rows]=\"createUploadTables(component)\"\r\n                                      contextId=\"fileList\"></app-dynamic-fields>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region range -->\r\n              <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n                <ngx-sirio-slider [label]=\"evaluateString(locale(component, 'label'))\"\r\n                                  [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n                                  [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n                                  [properties]=\"component.properties\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n                                  [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n                                  [valueSync]=\"component.valueSync\"\r\n                                  #range\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"range\">\r\n                </ngx-sirio-slider>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region displayfield -->\r\n              <ng-container *ngSwitchCase=\"'displayfield'\">\r\n                <div class=\"sirio-control\"\r\n                     [ngClass]=\"[getTextAlignment(component), 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                    <button *ngIf=\"component.tooltip\"\r\n                            sirioTooltip\r\n                            [content]=\"component.tooltip\"\r\n                            [hasPopover]=\"true\"\r\n                            [attr.aria-label]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n                            class=\"sirio-label-popover fas fa-info-circle\"></button>\r\n                  </div>\r\n                  <div class=\"sirio-form-control data-display\" [ngClass]=\"component.fieldtype\">\r\n                    <ng-container [ngSwitch]=\"component.fieldtype\">\r\n                      <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                        <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\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 *ngSwitchDefault>\r\n                        <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\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                  </div>\r\n                  <p *ngIf=\"component.description\" class=\"sirio-helper-text\">\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                    <ng-container [formArrayName]=\"component.key\"\r\n                                  [formGroup]=\"formGroup\"\r\n                                  [recursion]=\"component\"\r\n                                  #recursion=\"recursion\"\r\n                                  [repeat]=\"evaluateNumber(component.repetitions)\"\r\n                                  [allowAddRemove]=\"evaluateBoolean(component.allowAddRemove)\">\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                              <div [register]=\"component\"\r\n                                   [componentRef]=\"tabInstance\">\r\n                                <ngx-sirio-tab [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                               [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                               [tabCount]=\"formArray.controls.length\"\r\n                                               tabBadges\r\n                                               #tabBadgesRef=\"tabBadges\"\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                                      <ngx-sirio-tab-item tabItem\r\n                                                          [componentRef]=\"tabInstance\"\r\n                                                          [label]=\"evaluateWithEventAsString(locale(component, 'label'), event )\"\r\n                                                          tabBadge\r\n                                                          [tabBadges]=\"tabBadgesRef\"\r\n                                                          [tabIndex]=\"i\"\r\n                                                          [badge]=\"evaluateWithEvent(component.badge, event)\"\r\n                                                          #tabItemInstance>\r\n                                        <ng-container *ngIf=\"tabItemInstance.isActive\">\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-container>\r\n                                      </ngx-sirio-tab-item>\r\n                                    </ng-container>\r\n                                  </ng-container>\r\n                                </ngx-sirio-tab>\r\n                              </div>\r\n                            </ng-container>\r\n                            <!-- #endregion -->\r\n                            <!-- #region accordion -->\r\n                            <ng-container *ngSwitchCase=\"'accordion'\">\r\n                              <div [register]=\"component\"\r\n                                   [componentRef]=\"dynamiclistaccordion\">\r\n                                <ngx-sirio-accordion [accordionCount]=\"formArray.controls.length\"\r\n                                                     #dynamiclistaccordion>\r\n                                  <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n                                    <ngx-sirio-accordion-panel #panel accordionPanel>\r\n                                      <ngx-sirio-accordion-header>\r\n                                        <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n                                          <div>{{ evaluateWithEventAsString(locale(component, 'label'), event) }}</div>\r\n                                          <app-badge *ngIf=\"evaluateWithEvent(component.badge, event) as badge\" [badge]=\"badge\"></app-badge>\r\n                                        </div>\r\n                                      </ngx-sirio-accordion-header>\r\n                                      <ngx-sirio-accordion-body>\r\n                                        <ng-container *ngIf=\"panel.panelIsOpen\">\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-container>\r\n                                      </ngx-sirio-accordion-body>\r\n                                    </ngx-sirio-accordion-panel>\r\n                                  </ng-container>\r\n                                </ngx-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                                                  <app-badge *ngIf=\"evaluateWithEvent(component.badge, event) as badge\" [badge]=\"badge\"></app-badge>\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                                                <ngx-sirio-button [ngxSirioCollapseTrigger]=\"collapseTemplate\"\r\n                                                                  [color]=\"null\" [icon]=\"collapse.isOpen ? 'fas fa-chevron-down' : 'fas fa-chevron-right' \" />\r\n                                              </div>\r\n                                              <div *ngIf=\"!collapse.isOpen\" class=\"recursion-title\">\r\n                                                <div class=\"recursion-text\">\r\n                                                  <ng-container *ngIf=\"!collapse.isOpen\">\r\n                                                    {{ recursionData.itemsArray.length }} elementi presenti\r\n                                                  </ng-container>\r\n                                                </div>\r\n                                              </div>\r\n                                              <div class=\"recursion-content\">\r\n                                                <ngx-sirio-collapse #collapseTemplate\r\n                                                                    #collapse=\"collapseExtension\"\r\n                                                                    collapseExtension>\r\n                                                  <div *ngIf=\"collapse.isOpen\" 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                                                </ngx-sirio-collapse>\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                                        <app-badge *ngIf=\"evaluateWithEvent(component.badge, event) as badge\" [badge]=\"badge\"></app-badge>\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                                <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\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: i } as event\">\r\n                                        <label>{{ evaluateWithEventAsString(locale(component, 'label'), event) }}</label>\r\n                                        <app-badge *ngIf=\"evaluateWithEvent(component.badge, event) as badge\" [badge]=\"badge\"></app-badge>\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                    </ng-container>\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                    <ngx-sirio-button (click)=\"moveUpItem(formArray, i)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"upLabel\"\r\n                                      [title]=\"upLabel\"\r\n                                      [color]=\"null\" icon=\"fas fa-arrow-up\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ upLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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                    <ngx-sirio-button (click)=\"moveDownItem(formArray, i)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"downLabel\"\r\n                                      [title]=\"downLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-arrow-down\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ downLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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                    <ngx-sirio-button (click)=\"removeItem(formArray, i, true, state)\"\r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"removeLabel\"\r\n                                      [title]=\"removeLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-trash\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ removeLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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                    <ngx-sirio-button (click)=\"addItem(formArray, state)\"\r\n                                      class=\"add-item\"\r\n                                      [ariaLabel]=\"addLabel\"\r\n                                      [title]=\"addLabel\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-plus\">\r\n                      <ng-container *ngIf=\"!compact\">\r\n                        {{ addLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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 sirio-display-feedback\">{{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-helper-text\">{{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                  <nav class=\"sirio-pagination\">\r\n                    <ng-container *ngIf=\"state.total\">\r\n                      <div class=\"sirio-pagination-page\">\r\n                        <select class=\"sirio-form-control\"\r\n                                [(ngModel)]=\"state.index\"\r\n                                [ngModelOptions]=\"{ standalone: true }\">\r\n                          <option *ngFor=\"let i of state.total | times\" [ngValue]=\"i\">\r\n                            {{ i + 1 }}\r\n                          </option>\r\n                        </select>\r\n                        {{ locale(Texts, 'Of') }}\r\n                        <span>{{ state.total }}</span> {{ locale(Texts, 'Elements') }}\r\n                      </div>\r\n                      <div class=\"sirio-pagination-cursor\">\r\n                        <ul class=\"sirio-pagination-list\">\r\n                          <li [class.disabled]=\"!state.canPrevious()\">\r\n                            <a href=\"javascript:void(0)\"\r\n                               (click)=\"state.previous()\"\r\n                               [title]=\"locale(Texts, 'PreviousElement')\"\r\n                               [class.disabled]=\"!state.canPrevious()\">\r\n                              <span aria-hidden=\"true\" class=\"fas fa-angle-left\"></span>\r\n                            </a>\r\n                          </li>\r\n                          <li [class.disabled]=\"!state.canNext()\">\r\n                            <a href=\"javascript:void(0)\"\r\n                               (click)=\"state.next()\"\r\n                               [title]=\"locale(Texts, 'NextElement')\"\r\n                               [class.disabled]=\"!state.canNext()\">\r\n                              <span aria-hidden=\"true\" class=\"fas fa-angle-right\"></span>\r\n                            </a>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </ng-container>\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                  </nav>\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 [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]=\"resolvePath(component.path)\"\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                    <ngx-sirio-tab #tabInstance\r\n                                   [register]=\"component\"\r\n                                   [componentRef]=\"tabInstance\"\r\n                                   [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n                                   [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n                                   [isNavLine]=\"component.navigation\"\r\n                                   [isVertical]=\"component.vertical\"\r\n                                   tabControl\r\n                                   tabBadges\r\n                                   #tabBadgesRef=\"tabBadges\">\r\n                      <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n                        <ngx-sirio-tab-item [label]=\"evaluateString(locale(panel, 'label'))\"\r\n                                            [icon]=\"evaluateString(panel.icon)\"\r\n                                            [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n                                            #tabItemInstance\r\n                                            tabItem\r\n                                            [componentRef]=\"tabInstance\"\r\n                                            *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                            tabBadge\r\n                                            [tabBadges]=\"tabBadgesRef\"\r\n                                            [tabIndex]=\"i\"\r\n                                            [badge]=\"evaluate(panel.badge)\">\r\n                          <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n                            <div *ngIf=\"tabItemInstance.isActive\">\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                            </div>\r\n                          </ng-container>\r\n                        </ngx-sirio-tab-item>\r\n                      </ng-container>\r\n                    </ngx-sirio-tab>\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                    <ngx-sirio-accordion #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                          <ngx-sirio-accordion-panel *ngIf=\"evaluateConditional(panel.conditional)\"\r\n                                                     [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n                            <ngx-sirio-accordion-header>\r\n                              <div class=\"badge-header\">\r\n                                <div>{{ evaluateString(locale(panel, 'label')) }}</div>\r\n                                <app-badge *ngIf=\"evaluate(panel.badge) as badge\" [badge]=\"badge\"></app-badge>\r\n                              </div>\r\n                            </ngx-sirio-accordion-header>\r\n                            <ngx-sirio-accordion-body>\r\n                              <div>\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                              </div>\r\n                            </ngx-sirio-accordion-body>\r\n                          </ngx-sirio-accordion-panel>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ngx-sirio-accordion>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region text -->\r\n              <ng-container *ngSwitchCase=\"'text'\">\r\n                <div [collapse]=\"component.collapseTo\"\r\n                     [onCollapse]=\"callExpression(component.onCollapse)\"\r\n                     [onExpand]=\"callExpression(component.onExpand)\"\r\n                     #text\r\n                     [register]=\"component\"\r\n                     [componentRef]=\"text\">\r\n                  <!--Reset View Context-->\r\n                  <div tabindex=\"0\" style=\"display:none\"></div>\r\n                  <div class=\"flex\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                    <ng-container *ngIf=\"component.tooltip\">\r\n                      <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n                      <button class=\"sirio-label-popover fas fa-info-circle\"\r\n                              sirioTooltip\r\n                              [attr.aria-label]=\"locale(Texts, 'Information')\"\r\n                              [hasPopover]=\"true\"\r\n                              [customTemplate]=\"tooltipWrapper.getTemplateRef()\"></button>\r\n                      <ng-template #tooltipTemplate let-component=\"component\">\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                                 [columnDefs]=\"component.columns || evaluate(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                  <ngx-sirio-button (clickEvent)=\"clickButton(component, $event)\"\r\n                                    [color]=\"evaluateColor(component.color)\"\r\n                                    [disabled]=\"evaluateBoolean(component.disabled)\"\r\n                                    #button\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"button\">\r\n                    <ng-container *ngIf=\"evaluateString(component.icon) as icon; else noIcon\">\r\n                      <span *ngIf=\"component.iconPosition!='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n                      {{ evaluateString(locale(component, 'label')) }}\r\n                      <span *ngIf=\"component.iconPosition=='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n                    </ng-container>\r\n                    <ng-template #noIcon>\r\n                      {{ evaluateString(locale(component, 'label')) }}\r\n                    </ng-template>\r\n                  </ngx-sirio-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                <ngx-sirio-alert [type]=\"component.role\"\r\n                                 [labelClose]=\"locale(Texts, 'Close')\"\r\n                                 [preventClose]=\"evaluateBoolean(component.preventClose)\"\r\n                                 #alert\r\n                                 [register]=\"component\"\r\n                                 [componentRef]=\"alert\">\r\n                  <ngx-sirio-alert-message>\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </ngx-sirio-alert-message>\r\n                </ngx-sirio-alert>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region notice -->\r\n              <ng-container *ngSwitchCase=\"'notice'\">\r\n                <ngx-sirio-notify #notice\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"notice\">\r\n                  <ngx-sirio-notify-body [title]=\"evaluateString(locale(component, 'title'))\">\r\n                    <div class=\"text-paragraph\"\r\n                         [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n                    </div>\r\n                  </ngx-sirio-notify-body>\r\n                </ngx-sirio-notify>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n              <!-- #region tooltip -->\r\n              <ng-container *ngSwitchCase=\"'tooltip'\">\r\n                <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n                <button class=\"sirio-label-popover fas fa-info-circle\"\r\n                        sirioTooltip\r\n                        [hasPopover]=\"true\"\r\n                        [customTemplate]=\"tooltipWrapper.getTemplateRef()\"\r\n                        #tooltip\r\n                        [register]=\"component\"\r\n                        [componentRef]=\"tooltip\"></button>\r\n                <ng-template #tooltipTemplate let-component=\"component\">\r\n                  <div class=\"sirio-tooltip-body\">\r\n                    <p *ngIf=\"component.title\" class=\"sirio-tooltip-heading sirio-space-down\">\r\n                      {{ evaluateString(locale(component, 'title')) }}\r\n                    </p>\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                <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n                           [observe]=\"getChartData(component)\"\r\n                           [callback]=\"invalidateChart(component)\"\r\n                           [style.height.px]=\"component.height\"\r\n                           #chart\r\n                           [register]=\"component\"\r\n                           [componentRef]=\"chart\" />\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 sirio-display-feedback\">{{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-helper-text\">{{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                    <nav class=\"sirio-pagination\">\r\n                      <ng-container *ngIf=\"state.total\">\r\n                        <div class=\"sirio-pagination-page\">\r\n                          <select class=\"sirio-form-control\"\r\n                                  [(ngModel)]=\"state.index\"\r\n                                  [ngModelOptions]=\"{ standalone: true }\">\r\n                            <option *ngFor=\"let i of state.total | times\" [ngValue]=\"i\">\r\n                              {{ i + 1 }}\r\n                            </option>\r\n                          </select>\r\n                          {{ locale(Texts, 'Of') }}\r\n                          <span>{{ state.total }}</span> {{ locale(Texts, 'Elements') }}\r\n                        </div>\r\n                        <div class=\"sirio-pagination-cursor\">\r\n                          <ul class=\"sirio-pagination-list\">\r\n                            <li [class.disabled]=\"!state.canPrevious()\">\r\n                              <a href=\"javascript:void(0)\"\r\n                                 [title]=\"locale(Texts, 'PreviousElement')\"\r\n                                 (click)=\"state.previous()\"\r\n                                 [class.disabled]=\"!state.canPrevious()\">\r\n                                <span aria-hidden=\"true\" class=\"fas fa-angle-left\"></span>\r\n                              </a>\r\n                            </li>\r\n                            <li [class.disabled]=\"!state.canNext()\">\r\n                              <a href=\"javascript:void(0)\"\r\n                                 [title]=\"locale(Texts, 'NextElement')\"\r\n                                 (click)=\"state.next()\"\r\n                                 [class.disabled]=\"!state.canNext()\">\r\n                                <span aria-hidden=\"true\" class=\"fas fa-angle-right\"></span>\r\n                              </a>\r\n                            </li>\r\n                          </ul>\r\n                        </div>\r\n                      </ng-container>\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                    </nav>\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                    <ngx-sirio-button \r\n                                      class=\"add-item\"\r\n                                      [ariaLabel]=\"addLabel\"\r\n                                      [title]=\"addLabel\"\r\n                                      (click)=\"evaluateWithEventAsHandler(component.addExpression, { total: total })\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-plus\">\r\n                      <ng-container>\r\n                        {{ addLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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                    <ngx-sirio-button \r\n                                      class=\"remove-item\"\r\n                                      [ariaLabel]=\"removeLabel\"\r\n                                      [title]=\"removeLabel\"\r\n                                      (click)=\"evaluateWithEventAsHandler(component.removeExpression, { index: i, total: total })\"\r\n                                      [color]=\"null\"\r\n                                      icon=\"fas fa-trash\">\r\n                      <ng-container>\r\n                        {{ removeLabel }}\r\n                      </ng-container>\r\n                    </ngx-sirio-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}.sirio-control.is-disabled .sirio-input-group .sirio-input-group-text,.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{border:0px}.sirio-control.is-readonly .sirio-form-control{background-color:#fff!important;color:#454d56}.sirio-form-control[type=number]:disabled{background-image:none}ngx-sirio-alert.prevent-close .sirio-alert-close{display:none}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.col-host .sirio-accordion-body{overflow:unset!important}.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-dropdown .searchable{position:absolute;width:100%;display:none;left:0}.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}\n", ".sirio-control.ng-invalid .sirio-form-feedback,.sirio-display-feedback{color:#aa224f;display:inline-block}.sirio-control.ng-invalid .sirio-input-group-text{color:#aa224f;border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label{color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label:before,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label{color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:before,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:after,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:after{background-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-upload.sirio-is-invalid button{background-color:#aa224f;border-color:#aa224f}\n", ".sirio-control.text-left input.sirio-form-control,.sirio-control.text-left textarea.sirio-form-control,.sirio-control.text-left div.sirio-form-control{text-align:left}.sirio-control.text-center input.sirio-form-control,.sirio-control.text-center textarea.sirio-form-control,.sirio-control.text-center div.sirio-form-control{text-align:center}.sirio-control.text-right input.sirio-form-control,.sirio-control.text-right textarea.sirio-form-control,.sirio-control.text-right div.sirio-form-control{text-align:right}.sirio-control.text-center input.sirio-datepicker,.sirio-control.text-center input.sirio-timepicker,.sirio-control.text-right input.sirio-datepicker,.sirio-control.text-right input.sirio-timepicker{padding-right:40px}.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}.col-host.component-center ngx-sirio-toggle .sirio-form-toggle label{margin-bottom:0}\n", ".sirio-control .sirio-form-control.data-display{border-color:#e3e5e8}.sirio-control .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.sirio-control .sirio-form-control.data-display.text,.sirio-control .sirio-form-control:hover.data-display.text{overflow:auto;height:auto;margin-top:-6px;color:#454d56}.sirio-control .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.sirio-control .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n", ".sirio-control.light-readonly label:hover,.sirio-control.light-view div.sirio-label:hover{color:#454d56}.sirio-control.light-readonly input.sirio-form-control,.sirio-control.light-readonly .sirio-dropdown .sirio-dropdown-select,.sirio-control.light-readonly textarea.sirio-form-control,.sirio-control.light-view div.sirio-form-control{background:none!important;border:0px;padding-left:0}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{background:none}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}.sirio-upload.sirio-control.light-readonly label,.sirio-upload.sirio-control.is-disabled label{pointer-events:none}\n", ":root{--sirio-spinner-blue: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%2300368F' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\");--sirio-spinner-white: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='white' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\")}.sirio-control .sirio-is-pending,.sirio-control.sirio-is-pending input.sirio-form-control,.sirio-control.sirio-is-pending .sirio-dropdown .sirio-form-control,.sirio-form-check.sirio-control.sirio-is-pending{background-image:var(--sirio-spinner-blue);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}textarea.sirio-form-control.sirio-is-pending{background-position:top .9375rem right .9375rem}.sirio-control.sirio-is-pending input.sirio-form-control{background-position:right .9375rem top 50%}.sirio-upload.sirio-control.sirio-is-pending ngx-sirio-button .sirio-btn-primary{background-image:var(--sirio-spinner-white);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}.sirio-control.sirio-is-pending fieldset{background-image:var(--sirio-spinner-blue);background-repeat:no-repeat;background-position:right .9375rem top 1rem;background-size:1rem;padding-right:2.25rem}\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 .is-open{overflow:visible!important}.dynamiclist-table ngx-sirio-button button{padding:7px}\n", ".df-field-dynamiclist .sirio-pagination{width:100%;background-color:#f2f6fc;margin:0}.df-field-dynamiclist .sirio-pagination-page{background-color:#f2f6fc}.df-field-dynamiclist .sirio-pagination-cursor{margin-left:0}.df-field-dynamiclist .actions{margin-left:auto}\n", ".datetime-container{display:flex;gap:8px;align-items:flex-end}.datetime-container{display:flex;gap:8px}.datetime-container ngx-sirio-datepicker{flex:1}.datetime-container ngx-sirio-timepicker{flex:1}.datetime-container+.sirio-form-feedback{color:#aa224f;display:inline-block}\n", ".sirio-tab.sirio-tab-vertical .sirio-tab-item{width:100%}\n", ".treelist{overflow-y:auto;border:1px solid #cfd6e0;border-radius:6px}.treelist .hidden{display:none}.treelist .toggle{cursor:pointer;margin-right:6px}.treelist table{width:100%;border:none;border-collapse:collapse;border-spacing:0;overflow:visible;table-layout:fixed}.treelist thead th{position:sticky;top:0;z-index:10;background-color:#0b2c5f;color:#fff;font-weight:600;vertical-align:middle;padding:4px;border-right:1px solid #3a5a8a}.treelist thead th:last-child{border-right:none}.treelist tbody td{padding:4px;border-right:1px solid #d9e1ec;border-bottom:1px solid #d9e1ec}.treelist tbody td>div{display:flex;align-items:center;overflow:hidden}.treelist tbody td .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treelist tbody td:last-child{border-right:none}.treelist tbody tr:hover{background-color:#e9eef6}.treelist thead th:first-child{border-top-left-radius:6px}.treelist thead th:last-child{border-top-right-radius:6px}\n", ".sirio-tooltip .sirio-tooltip-body{white-space:pre-line}\n", ".sirio-pagination{width:100%}.sirio-pagination-cursor{margin-left:0;margin-right:auto}\n"] }]
+        }], ctorParameters: () => [{ type: SanitizeService }, { type: MarkdownService }, { type: MimeService }, { type: ProgrammabilityService }, { type: WeakService }, { type: RegisterService }, { type: MetadataService }, { type: i2.LanguageService }, { type: GlobalService }, { type: FunctionService }, { type: FormService }, { type: GridService }, { type: ChartService }, { type: DialogService }, { type: AutoFocusService }, { type: i0.ElementRef }], propDecorators: { form: [{
                 type: Input
             }], rows: [{
                 type: Input
@@ -9628,15 +10296,15 @@ class DynamicFormComponent {
             return "inactive";
         }
         else if (this.progressStatus && !current) {
-            const errors = this.countInvalids(form);
+            const errors = this.countErrors(form);
             return errors > 0 ? "error" : "success";
         }
         else {
             return "active";
         }
     }
-    countInvalids(form) {
-        return this.statusService.countInvalid(form);
+    countErrors(form) {
+        return this.statusService.countErrors(form);
     }
     activateForm(event) {
         const formIndex = event.component.formIndex;
@@ -9879,8 +10547,9 @@ class DynamicFormComponent {
             MetadataService,
             FunctionService,
             SubscribeService,
-            StateService
-        ], viewQueries: [{ propertyName: "formDiv", first: true, predicate: ["default"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"schema\">\r\n\r\n  <form [formGroup]=\"formGroup\" class=\"ngs\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n\r\n        <!-- #region progress -->\r\n        <ngx-sirio-stepper-progress-bar *ngIf=\"showProgress\"\r\n                                        (eventClick)=\"activateForm($event)\"\r\n                                        [hasDropdown]=\"true\"\r\n                                        [dropDownLabel]=\"locale(Texts, 'Show')\">\r\n          <ng-container *ngFor=\"let form of forms, let formIndex = index\">\r\n            <ng-container *ngIf=\"!evaluateBoolean(form.disabled)\">\r\n              <ng-container *ngIf=\"getFormStatus(form, formIndex) as status\">\r\n                <ngx-sirio-stepper-progress-item [hasNavigation]=\"status !== 'inactive'\"\r\n                                                 [status]=\"status\"\r\n                                                 [label]=\"evaluateTemplate(locale(form, 'title'))\"\r\n                                                 #progressItem\r\n                                                 [componentRef]=\"progressItem\"\r\n                                                 [formIndex]=\"formIndex\" />\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ngx-sirio-stepper-progress-bar>\r\n        <!-- #endregion -->\r\n\r\n        <ng-container *ngIf=\"showNav\">\r\n\r\n          <div [ngClass]=\"navSize === 'small' ? 'col-md-2' : 'col-md-4'\">\r\n\r\n            <!-- #region sidenav -->\r\n            <ng-template #sidenavTemplate>\r\n              <ngx-sirio-sidenav>\r\n                <ng-container *ngFor=\"let form of forms, let formIndex = index\">\r\n                  <ng-container *ngIf=\"!evaluateBoolean(form.disabled)\">\r\n                    <ng-container *ngIf=\"getFormStatus(form, formIndex) as status\">\r\n                      <ng-container *ngIf=\"{ count: countInvalids(form) } as errors\">\r\n                        <ngx-sirio-sidenav-item [isActive]=\"activeNav == formIndex\"\r\n                                                (click)=\"activeNav = formIndex\"\r\n                                                [disabledState]=\"status === 'inactive'\"\r\n                                                (keydown.enter)=\"activeNav = formIndex\"\r\n                                                [withTag]=\"errors.count > 0\"\r\n                                                tagType=\"danger\"\r\n                                                [tagValue]=\"errors.count\"\r\n                                                tabindex=\"0\">\r\n                          {{ evaluateTemplate(locale(form, 'title')) }}\r\n                        </ngx-sirio-sidenav-item>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ngx-sirio-sidenav>\r\n            </ng-template>\r\n\r\n            <ngx-sirio-sidenav-mobile class=\"d-block d-lg-none\"\r\n                                      [openMenuLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                                      [openMenuAriaLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                                      [closeMenuLabel]=\"locale(Texts, 'CloseMenu')\"\r\n                                      closeMenuAriaLabel=\"locale(Texts, 'CloseMenu')\">\r\n              <ng-container *ngTemplateOutlet=\"sidenavTemplate\"></ng-container>\r\n            </ngx-sirio-sidenav-mobile>\r\n            <div class=\"d-none d-lg-block\">\r\n              <ng-container *ngTemplateOutlet=\"sidenavTemplate\"></ng-container>\r\n            </div>\r\n            <!-- #endregion -->\r\n\r\n          </div>\r\n\r\n          <div class=\"col-md-1\">\r\n            <div class=\"separator-horizontal\"></div>\r\n          </div>\r\n\r\n        </ng-container>\r\n\r\n        <div class=\"content-element-form\" [ngClass]=\"showNav ? (navSize === 'small' ? 'col-md-13' : 'col-md-11') : 'col-md-16'\">\r\n\r\n          <ng-container *ngFor=\"let form of forms, let sectionIndex = index\">\r\n            <div *ngIf=\"activeNav == sectionIndex && !evaluateBoolean(form.disabled)\"\r\n                 #default\r\n                 [register]=\"form\"\r\n                 [componentRef]=\"default\">\r\n              <h1 *ngIf=\"showFormTitle && form.title\" class=\"h3 form-title\">{{ evaluateTemplate(locale(form, 'title')) }}</h1>\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          </ng-container>\r\n\r\n          <ng-container *ngIf=\"showNavButton && (canNext() || canPrevious())\">\r\n\r\n            <div class=\"row section-navs\">\r\n              <div class=\"col-8 col-md-8\">\r\n                <ngx-sirio-button [color]=\"null\" *ngIf=\"canNext()\" (click)=\"goNext()\" class=\"nextSection\">\r\n                  {{ locale(Texts, 'NextSection') }}\r\n                  <span class=\"fa-solid fa-chevron-right\" style=\"margin-left: 10px\"></span>\r\n                </ngx-sirio-button>\r\n              </div>\r\n              <div class=\"col-8 col-md-8\">\r\n                <ngx-sirio-button [color]=\"null\" *ngIf=\"canPrevious()\" (click)=\"goPrevious()\" class=\"prevSection\">\r\n                  <span class=\"fa-solid fa-chevron-left\" style=\"margin-right: 10px\"></span>\r\n                  {{ locale(Texts, 'PreviousSection') }}\r\n                </ngx-sirio-button>\r\n              </div>\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </form>\r\n\r\n</ng-container>\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 button{padding:5px 10px;float:left;margin-left:0}.nextSection button{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-nav-item a{cursor:pointer}.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}}ngx-sirio-input-chip{margin-right:.5rem}.feel-editor-container.feel-editor-standalone{border:1px solid #454d56!important;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i16.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i16.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i16.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: RegisterDirective, selector: "[register]", inputs: ["register", "componentRef"] }, { kind: "directive", type: FormIndexDirective, selector: "[formIndex]", inputs: ["formIndex", "componentRef"] }, { kind: "component", type: SirioSidenavMobileComponent, selector: "ngx-sirio-sidenav-mobile", inputs: ["openMenuLabel", "openMenuLabelSubtitile", "openMenuAriaLabel", "closeMenuLabel", "closeMenuAriaLabel", "closeMenuLabelSubtitile", "userProfileLabel", "userProfileType", "userProfileName", "userProfileSurname", "showUserInfo", "opened"] }, { kind: "component", type: SirioSidenavComponent, selector: "ngx-sirio-sidenav", inputs: ["sidenavTitle", "ariaLabel"] }, { kind: "component", type: SirioSidenavItemComponent, selector: "ngx-sirio-sidenav-item", inputs: ["labelTrigger", "isCustomNavItem", "isTrigger", "routerLinkUrl", "routerLinkFragment", "routerLinkQueryParams", "routerLinkQueryParamsHandling", "routerLinkState", "routerLinkRelativeTo", "routerLinkPreserveFragment", "routerLinkReplaceUrl", "href", "hrefTarget", "ariaLabelDesc", "isOpen", "isActive", "withTag", "tagType", "tagValue", "disabledState"] }, { kind: "component", type: SirioButtonComponent, selector: "ngx-sirio-button", inputs: ["ariaExpanded", "ariaControls", "ariaActivedescendant", "ariaHaspopup", "ariaLabel", "ariaRequired", "ariaInvalid", "ariaDescribedby", "icon", "title", "role", "color", "isFloating", "isExtended", "isLight", "isSmall", "disabled", "isDropdown", "type", "dismissType", "isBtnBlock"], outputs: ["clickEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: SirioStepperProgressBarComponent, selector: "ngx-sirio-stepper-progress-bar", inputs: ["ariaLabel", "hasDropdown", "dropDownLabel", "dropDownText"], outputs: ["eventClick"] }, { kind: "component", type: SirioStepperProgressItemComponent, selector: "ngx-sirio-stepper-progress-item", inputs: ["status", "hasNavigation", "screenReaderText", "label"] }, { kind: "component", type: DynamicFieldsComponent, selector: "app-dynamic-fields", inputs: ["form", "rows", "formGroup", "alignment", "readOnly", "recursionLevel", "identity", "identityIndex", "disableAutoFocus"] }], encapsulation: i0.ViewEncapsulation.None });
+            StateService,
+            LifetimeService
+        ], viewQueries: [{ propertyName: "formDiv", first: true, predicate: ["default"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"schema\">\r\n\r\n  <div [formGroup]=\"formGroup\" class=\"ngs\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n\r\n        <!-- #region progress -->\r\n        <ngx-sirio-stepper-progress-bar *ngIf=\"showProgress\"\r\n                                        (eventClick)=\"activateForm($event)\"\r\n                                        [hasDropdown]=\"true\"\r\n                                        [dropDownLabel]=\"locale(Texts, 'Show')\">\r\n          <ng-container *ngFor=\"let form of forms, let formIndex = index\">\r\n            <ng-container *ngIf=\"!evaluateBoolean(form.disabled)\">\r\n              <ng-container *ngIf=\"getFormStatus(form, formIndex) as status\">\r\n                <ngx-sirio-stepper-progress-item [hasNavigation]=\"status !== 'inactive'\"\r\n                                                 [status]=\"status\"\r\n                                                 [label]=\"evaluateTemplate(locale(form, 'title'))\"\r\n                                                 #progressItem\r\n                                                 [componentRef]=\"progressItem\"\r\n                                                 [formIndex]=\"formIndex\" />\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ngx-sirio-stepper-progress-bar>\r\n        <!-- #endregion -->\r\n\r\n        <ng-container *ngIf=\"showNav\">\r\n\r\n          <div [ngClass]=\"navSize === 'small' ? 'col-md-2' : 'col-md-4'\">\r\n\r\n            <!-- #region sidenav -->\r\n            <ng-template #sidenavTemplate>\r\n              <ngx-sirio-sidenav>\r\n                <ng-container *ngFor=\"let form of forms, let formIndex = index\">\r\n                  <ng-container *ngIf=\"!evaluateBoolean(form.disabled)\">\r\n                    <ng-container *ngIf=\"getFormStatus(form, formIndex) as status\">\r\n                      <ng-container *ngIf=\"{ count: countErrors(form) } as errors\">\r\n                        <ngx-sirio-sidenav-item [isActive]=\"activeNav == formIndex\"\r\n                                                (click)=\"activeNav = formIndex\"\r\n                                                [disabledState]=\"status === 'inactive'\"\r\n                                                (keydown.enter)=\"activeNav = formIndex\"\r\n                                                [withTag]=\"errors.count > 0\"\r\n                                                tagType=\"danger\"\r\n                                                [tagValue]=\"errors.count\"\r\n                                                tabindex=\"0\">\r\n                          {{ evaluateTemplate(locale(form, 'title')) }}\r\n                        </ngx-sirio-sidenav-item>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ngx-sirio-sidenav>\r\n            </ng-template>\r\n\r\n            <ngx-sirio-sidenav-mobile class=\"d-block d-lg-none\"\r\n                                      [openMenuLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                                      [openMenuAriaLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                                      [closeMenuLabel]=\"locale(Texts, 'CloseMenu')\"\r\n                                      closeMenuAriaLabel=\"locale(Texts, 'CloseMenu')\">\r\n              <ng-container *ngTemplateOutlet=\"sidenavTemplate\"></ng-container>\r\n            </ngx-sirio-sidenav-mobile>\r\n            <div class=\"d-none d-lg-block\">\r\n              <ng-container *ngTemplateOutlet=\"sidenavTemplate\"></ng-container>\r\n            </div>\r\n            <!-- #endregion -->\r\n\r\n          </div>\r\n\r\n          <div class=\"col-md-1\">\r\n            <div class=\"separator-horizontal\"></div>\r\n          </div>\r\n\r\n        </ng-container>\r\n\r\n        <div class=\"content-element-form\" [ngClass]=\"showNav ? (navSize === 'small' ? 'col-md-13' : 'col-md-11') : 'col-md-16'\">\r\n\r\n          <ng-container *ngFor=\"let form of forms, let sectionIndex = index\">\r\n            <div *ngIf=\"activeNav == sectionIndex && !evaluateBoolean(form.disabled)\"\r\n                 #default\r\n                 [register]=\"form\"\r\n                 [componentRef]=\"default\">\r\n              <h1 *ngIf=\"showFormTitle && form.title\" class=\"h3 form-title\">{{ evaluateTemplate(locale(form, 'title')) }}</h1>\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          </ng-container>\r\n\r\n          <ng-container *ngIf=\"showNavButton && (canNext() || canPrevious())\">\r\n\r\n            <div class=\"row section-navs\">\r\n              <div class=\"col-8 col-md-8\">\r\n                <ngx-sirio-button [color]=\"null\" *ngIf=\"canNext()\" (click)=\"goNext()\" class=\"nextSection\">\r\n                  {{ locale(Texts, 'NextSection') }}\r\n                  <span class=\"fa-solid fa-chevron-right\" style=\"margin-left: 10px\"></span>\r\n                </ngx-sirio-button>\r\n              </div>\r\n              <div class=\"col-8 col-md-8\">\r\n                <ngx-sirio-button [color]=\"null\" *ngIf=\"canPrevious()\" (click)=\"goPrevious()\" class=\"prevSection\">\r\n                  <span class=\"fa-solid fa-chevron-left\" style=\"margin-right: 10px\"></span>\r\n                  {{ locale(Texts, 'PreviousSection') }}\r\n                </ngx-sirio-button>\r\n              </div>\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>\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 button{padding:5px 10px;float:left;margin-left:0}.nextSection button{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-nav-item a{cursor:pointer}.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}}ngx-sirio-input-chip{margin-right:.5rem}.feel-editor-container.feel-editor-standalone{border:1px solid #454d56!important;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i16.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i17.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i17.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: RegisterDirective, selector: "[register]", inputs: ["register", "componentRef"] }, { kind: "directive", type: FormIndexDirective, selector: "[formIndex]", inputs: ["formIndex", "componentRef"] }, { kind: "component", type: SirioSidenavMobileComponent, selector: "ngx-sirio-sidenav-mobile", inputs: ["openMenuLabel", "openMenuLabelSubtitile", "openMenuAriaLabel", "closeMenuLabel", "closeMenuAriaLabel", "closeMenuLabelSubtitile", "userProfileLabel", "userProfileType", "userProfileName", "userProfileSurname", "showUserInfo", "opened"] }, { kind: "component", type: SirioSidenavComponent, selector: "ngx-sirio-sidenav", inputs: ["sidenavTitle", "ariaLabel"] }, { kind: "component", type: SirioSidenavItemComponent, selector: "ngx-sirio-sidenav-item", inputs: ["labelTrigger", "isCustomNavItem", "isTrigger", "routerLinkUrl", "routerLinkFragment", "routerLinkQueryParams", "routerLinkQueryParamsHandling", "routerLinkState", "routerLinkRelativeTo", "routerLinkPreserveFragment", "routerLinkReplaceUrl", "href", "hrefTarget", "ariaLabelDesc", "isOpen", "isActive", "withTag", "tagType", "tagValue", "disabledState"] }, { kind: "component", type: SirioButtonComponent, selector: "ngx-sirio-button", inputs: ["ariaExpanded", "ariaControls", "ariaActivedescendant", "ariaHaspopup", "ariaLabel", "ariaRequired", "ariaInvalid", "ariaDescribedby", "icon", "title", "role", "color", "isFloating", "isExtended", "isLight", "isSmall", "disabled", "isDropdown", "type", "dismissType", "isBtnBlock"], outputs: ["clickEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: SirioStepperProgressBarComponent, selector: "ngx-sirio-stepper-progress-bar", inputs: ["ariaLabel", "hasDropdown", "dropDownLabel", "dropDownText"], outputs: ["eventClick"] }, { kind: "component", type: SirioStepperProgressItemComponent, selector: "ngx-sirio-stepper-progress-item", inputs: ["status", "hasNavigation", "screenReaderText", "label"] }, { kind: "component", type: DynamicFieldsComponent, selector: "app-dynamic-fields", inputs: ["form", "rows", "formGroup", "alignment", "readOnly", "recursionLevel", "identity", "identityIndex", "disableAutoFocus"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
@@ -9900,8 +10569,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MetadataService,
                         FunctionService,
                         SubscribeService,
-                        StateService
-                    ], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"schema\">\r\n\r\n  <form [formGroup]=\"formGroup\" class=\"ngs\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n\r\n        <!-- #region progress -->\r\n        <ngx-sirio-stepper-progress-bar *ngIf=\"showProgress\"\r\n                                        (eventClick)=\"activateForm($event)\"\r\n                                        [hasDropdown]=\"true\"\r\n                                        [dropDownLabel]=\"locale(Texts, 'Show')\">\r\n          <ng-container *ngFor=\"let form of forms, let formIndex = index\">\r\n            <ng-container *ngIf=\"!evaluateBoolean(form.disabled)\">\r\n              <ng-container *ngIf=\"getFormStatus(form, formIndex) as status\">\r\n                <ngx-sirio-stepper-progress-item [hasNavigation]=\"status !== 'inactive'\"\r\n                                                 [status]=\"status\"\r\n                                                 [label]=\"evaluateTemplate(locale(form, 'title'))\"\r\n                                                 #progressItem\r\n                                                 [componentRef]=\"progressItem\"\r\n                                                 [formIndex]=\"formIndex\" />\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ngx-sirio-stepper-progress-bar>\r\n        <!-- #endregion -->\r\n\r\n        <ng-container *ngIf=\"showNav\">\r\n\r\n          <div [ngClass]=\"navSize === 'small' ? 'col-md-2' : 'col-md-4'\">\r\n\r\n            <!-- #region sidenav -->\r\n            <ng-template #sidenavTemplate>\r\n              <ngx-sirio-sidenav>\r\n                <ng-container *ngFor=\"let form of forms, let formIndex = index\">\r\n                  <ng-container *ngIf=\"!evaluateBoolean(form.disabled)\">\r\n                    <ng-container *ngIf=\"getFormStatus(form, formIndex) as status\">\r\n                      <ng-container *ngIf=\"{ count: countInvalids(form) } as errors\">\r\n                        <ngx-sirio-sidenav-item [isActive]=\"activeNav == formIndex\"\r\n                                                (click)=\"activeNav = formIndex\"\r\n                                                [disabledState]=\"status === 'inactive'\"\r\n                                                (keydown.enter)=\"activeNav = formIndex\"\r\n                                                [withTag]=\"errors.count > 0\"\r\n                                                tagType=\"danger\"\r\n                                                [tagValue]=\"errors.count\"\r\n                                                tabindex=\"0\">\r\n                          {{ evaluateTemplate(locale(form, 'title')) }}\r\n                        </ngx-sirio-sidenav-item>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ngx-sirio-sidenav>\r\n            </ng-template>\r\n\r\n            <ngx-sirio-sidenav-mobile class=\"d-block d-lg-none\"\r\n                                      [openMenuLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                                      [openMenuAriaLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                                      [closeMenuLabel]=\"locale(Texts, 'CloseMenu')\"\r\n                                      closeMenuAriaLabel=\"locale(Texts, 'CloseMenu')\">\r\n              <ng-container *ngTemplateOutlet=\"sidenavTemplate\"></ng-container>\r\n            </ngx-sirio-sidenav-mobile>\r\n            <div class=\"d-none d-lg-block\">\r\n              <ng-container *ngTemplateOutlet=\"sidenavTemplate\"></ng-container>\r\n            </div>\r\n            <!-- #endregion -->\r\n\r\n          </div>\r\n\r\n          <div class=\"col-md-1\">\r\n            <div class=\"separator-horizontal\"></div>\r\n          </div>\r\n\r\n        </ng-container>\r\n\r\n        <div class=\"content-element-form\" [ngClass]=\"showNav ? (navSize === 'small' ? 'col-md-13' : 'col-md-11') : 'col-md-16'\">\r\n\r\n          <ng-container *ngFor=\"let form of forms, let sectionIndex = index\">\r\n            <div *ngIf=\"activeNav == sectionIndex && !evaluateBoolean(form.disabled)\"\r\n                 #default\r\n                 [register]=\"form\"\r\n                 [componentRef]=\"default\">\r\n              <h1 *ngIf=\"showFormTitle && form.title\" class=\"h3 form-title\">{{ evaluateTemplate(locale(form, 'title')) }}</h1>\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          </ng-container>\r\n\r\n          <ng-container *ngIf=\"showNavButton && (canNext() || canPrevious())\">\r\n\r\n            <div class=\"row section-navs\">\r\n              <div class=\"col-8 col-md-8\">\r\n                <ngx-sirio-button [color]=\"null\" *ngIf=\"canNext()\" (click)=\"goNext()\" class=\"nextSection\">\r\n                  {{ locale(Texts, 'NextSection') }}\r\n                  <span class=\"fa-solid fa-chevron-right\" style=\"margin-left: 10px\"></span>\r\n                </ngx-sirio-button>\r\n              </div>\r\n              <div class=\"col-8 col-md-8\">\r\n                <ngx-sirio-button [color]=\"null\" *ngIf=\"canPrevious()\" (click)=\"goPrevious()\" class=\"prevSection\">\r\n                  <span class=\"fa-solid fa-chevron-left\" style=\"margin-right: 10px\"></span>\r\n                  {{ locale(Texts, 'PreviousSection') }}\r\n                </ngx-sirio-button>\r\n              </div>\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </form>\r\n\r\n</ng-container>\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 button{padding:5px 10px;float:left;margin-left:0}.nextSection button{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-nav-item a{cursor:pointer}.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}}ngx-sirio-input-chip{margin-right:.5rem}.feel-editor-container.feel-editor-standalone{border:1px solid #454d56!important;border-radius:4px}\n"] }]
+                        StateService,
+                        LifetimeService
+                    ], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"schema\">\r\n\r\n  <div [formGroup]=\"formGroup\" class=\"ngs\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n\r\n        <!-- #region progress -->\r\n        <ngx-sirio-stepper-progress-bar *ngIf=\"showProgress\"\r\n                                        (eventClick)=\"activateForm($event)\"\r\n                                        [hasDropdown]=\"true\"\r\n                                        [dropDownLabel]=\"locale(Texts, 'Show')\">\r\n          <ng-container *ngFor=\"let form of forms, let formIndex = index\">\r\n            <ng-container *ngIf=\"!evaluateBoolean(form.disabled)\">\r\n              <ng-container *ngIf=\"getFormStatus(form, formIndex) as status\">\r\n                <ngx-sirio-stepper-progress-item [hasNavigation]=\"status !== 'inactive'\"\r\n                                                 [status]=\"status\"\r\n                                                 [label]=\"evaluateTemplate(locale(form, 'title'))\"\r\n                                                 #progressItem\r\n                                                 [componentRef]=\"progressItem\"\r\n                                                 [formIndex]=\"formIndex\" />\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ngx-sirio-stepper-progress-bar>\r\n        <!-- #endregion -->\r\n\r\n        <ng-container *ngIf=\"showNav\">\r\n\r\n          <div [ngClass]=\"navSize === 'small' ? 'col-md-2' : 'col-md-4'\">\r\n\r\n            <!-- #region sidenav -->\r\n            <ng-template #sidenavTemplate>\r\n              <ngx-sirio-sidenav>\r\n                <ng-container *ngFor=\"let form of forms, let formIndex = index\">\r\n                  <ng-container *ngIf=\"!evaluateBoolean(form.disabled)\">\r\n                    <ng-container *ngIf=\"getFormStatus(form, formIndex) as status\">\r\n                      <ng-container *ngIf=\"{ count: countErrors(form) } as errors\">\r\n                        <ngx-sirio-sidenav-item [isActive]=\"activeNav == formIndex\"\r\n                                                (click)=\"activeNav = formIndex\"\r\n                                                [disabledState]=\"status === 'inactive'\"\r\n                                                (keydown.enter)=\"activeNav = formIndex\"\r\n                                                [withTag]=\"errors.count > 0\"\r\n                                                tagType=\"danger\"\r\n                                                [tagValue]=\"errors.count\"\r\n                                                tabindex=\"0\">\r\n                          {{ evaluateTemplate(locale(form, 'title')) }}\r\n                        </ngx-sirio-sidenav-item>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ngx-sirio-sidenav>\r\n            </ng-template>\r\n\r\n            <ngx-sirio-sidenav-mobile class=\"d-block d-lg-none\"\r\n                                      [openMenuLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                                      [openMenuAriaLabel]=\"locale(Texts, 'OpenMenu')\"\r\n                                      [closeMenuLabel]=\"locale(Texts, 'CloseMenu')\"\r\n                                      closeMenuAriaLabel=\"locale(Texts, 'CloseMenu')\">\r\n              <ng-container *ngTemplateOutlet=\"sidenavTemplate\"></ng-container>\r\n            </ngx-sirio-sidenav-mobile>\r\n            <div class=\"d-none d-lg-block\">\r\n              <ng-container *ngTemplateOutlet=\"sidenavTemplate\"></ng-container>\r\n            </div>\r\n            <!-- #endregion -->\r\n\r\n          </div>\r\n\r\n          <div class=\"col-md-1\">\r\n            <div class=\"separator-horizontal\"></div>\r\n          </div>\r\n\r\n        </ng-container>\r\n\r\n        <div class=\"content-element-form\" [ngClass]=\"showNav ? (navSize === 'small' ? 'col-md-13' : 'col-md-11') : 'col-md-16'\">\r\n\r\n          <ng-container *ngFor=\"let form of forms, let sectionIndex = index\">\r\n            <div *ngIf=\"activeNav == sectionIndex && !evaluateBoolean(form.disabled)\"\r\n                 #default\r\n                 [register]=\"form\"\r\n                 [componentRef]=\"default\">\r\n              <h1 *ngIf=\"showFormTitle && form.title\" class=\"h3 form-title\">{{ evaluateTemplate(locale(form, 'title')) }}</h1>\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          </ng-container>\r\n\r\n          <ng-container *ngIf=\"showNavButton && (canNext() || canPrevious())\">\r\n\r\n            <div class=\"row section-navs\">\r\n              <div class=\"col-8 col-md-8\">\r\n                <ngx-sirio-button [color]=\"null\" *ngIf=\"canNext()\" (click)=\"goNext()\" class=\"nextSection\">\r\n                  {{ locale(Texts, 'NextSection') }}\r\n                  <span class=\"fa-solid fa-chevron-right\" style=\"margin-left: 10px\"></span>\r\n                </ngx-sirio-button>\r\n              </div>\r\n              <div class=\"col-8 col-md-8\">\r\n                <ngx-sirio-button [color]=\"null\" *ngIf=\"canPrevious()\" (click)=\"goPrevious()\" class=\"prevSection\">\r\n                  <span class=\"fa-solid fa-chevron-left\" style=\"margin-right: 10px\"></span>\r\n                  {{ locale(Texts, 'PreviousSection') }}\r\n                </ngx-sirio-button>\r\n              </div>\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>\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 button{padding:5px 10px;float:left;margin-left:0}.nextSection button{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-nav-item a{cursor:pointer}.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}}ngx-sirio-input-chip{margin-right:.5rem}.feel-editor-container.feel-editor-standalone{border:1px solid #454d56!important;border-radius:4px}\n"] }]
         }], ctorParameters: () => [{ type: ProgrammabilityService }, { type: FormBuilderService }, { type: ValidationService }, { type: StatusService }, { type: EventService }, { type: RegisterService }, { type: i2.LanguageService }, { type: SubscribeService }, { type: MetadataService }, { type: FormService }, { type: DialogService }, { type: i0.Injector }], propDecorators: { schema: [{
                 type: Input
             }], formGroup: [{
@@ -11120,6 +11790,22 @@ var functionFn = [
 		info: "Generates and returns a new globally unique identifier.\n\n---\n\n### Function signature\n\n```\nnewGuid(): string\n```\n\n---\n\n### Examples\n\n```ts\nconst id = newGuid();\n// \"550e8400-e29b-41d4-a716-446655440000\"\n```",
 		params: [
 		]
+	},
+	{
+		name: "range",
+		type: "function",
+		detail: "Creates an array containing all numbers within the specified range",
+		info: "Creates an array containing all integer values between the specified `from` and `to` bounds, inclusive.\n\nIf `from` is less than `to`, the sequence is ascending.\nIf `from` is greater than `to`, the sequence is descending.\n\n---\n\n### Function signature\n\n```\nrange(from: number, to: number): number[]\n```\n\n---\n\n### Examples\n\n```js\nrange(1, 5);\n```\n\nResult:\n\n```js\n[1, 2, 3, 4, 5]\n```\n\n```js\nrange(5, 1);\n```\n\nResult:\n\n```js\n[5, 4, 3, 2, 1]\n```\n",
+		params: [
+			{
+				name: "from",
+				type: "number"
+			},
+			{
+				name: "to",
+				type: "number"
+			}
+		]
 	}
 ];
 
@@ -11616,5 +12302,5 @@ const builtIn = [
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionControl, ButtonControl, ChartControl, CheckBoxControl, CheckListControl, ChipCheckListControl, ChipRadioControl, ContainerControl, Control, DataService, DateControl, DateTimeControl, DefaultConfirmationController, DefaultNotificationController, DefaultPromptController, DialogService, DisplayFieldControl, DynamicFormComponent, DynamicListControl, FeelService, FilePickerControl, FormControl, FormService, GlobalService, GroupControl, HtmlControl, IFrameControl, ImageControl, ItemControl, MarkdownService, NavigationService, NumberControl, RadioControl, SanitizeService, ScopeService, SelectControl, SeparatorControl, SpacerControl, TabControl, TableControl, TagListControl, TextAreaControl, TextControl, TextFieldControl, TimeControl, ToastService, ToggleControl, TooltipControl, builtIn, deepEqual, navigateTo, parseRoute, resolveRefs, resolveRefsAsync, subscribeOnce, syncronize };
+export { AccordionControl, ButtonControl, ChartControl, CheckBoxControl, CheckListControl, ChipCheckListControl, ChipRadioControl, ContainerControl, Control, DataService, DateControl, DateTimeControl, DefaultConfirmationController, DefaultNotificationController, DefaultPromptController, DialogService, DisplayFieldControl, DynamicFormComponent, DynamicListControl, FeelService, FilePickerControl, FormControl, FormService, GlobalService, GroupControl, HtmlControl, IFrameControl, ImageControl, ItemControl, MarkdownService, NavigationService, NumberControl, RadioControl, SanitizeService, ScopeService, SelectControl, SeparatorControl, SirioDialogExService, SpacerControl, TabControl, TableControl, TagListControl, TextAreaControl, TextControl, TextFieldControl, TimeControl, ToastService, ToggleControl, TooltipControl, builtIn, deepEqual, navigateTo, parseRoute, resolveRefs, resolveRefsAsync, subscribeOnce, syncronize };
 //# sourceMappingURL=wemake4u-form-player-se.mjs.map