@wemake4u/form-player-se 1.0.9 → 1.0.10

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

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, SkipSelf, Directive, Input, Host, ContentChild, forwardRef, ContentChildren, Component, ViewEncapsulation, EventEmitter, Output } from '@angular/core';
+import { Injectable, Optional, SkipSelf, Component, Directive, Input, Host, ContentChild, forwardRef, ContentChildren, ViewEncapsulation, EventEmitter, Output } from '@angular/core';
 import * as i10 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
-import { FormArray, FormControl as FormControl$1, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { isObservable, of, Subject, takeUntil } from 'rxjs';
+import { FormArray, FormControl as FormControl$1, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { isObservable, take, tap, of, Subject, takeUntil } from 'rxjs';
 import { evaluate } from 'feelers';
 import { evaluate as evaluate$1, unaryTest, parseExpression } from 'feelin';
 import { shareReplay, takeUntil as takeUntil$1, map } from 'rxjs/operators';
 import * as i1 from 'ngx-sirio-lib';
-import { SirioButtonComponent, SirioInputComponent, SirioValidationDirective, SirioSelectComponent, SirioSelectOptionComponent, SirioSelectPanelComponent, SirioCheckboxGroupComponent, SirioCheckboxComponent, SirioDatepickerComponent, SirioTimepickerComponent, SirioRadioGroupComponent, SirioRadioButtonComponent, SirioTabComponent, SirioTabItemComponent, SirioAccordionComponent, SirioAccordionPanelComponent, SirioAccordionHeaderComponent, SirioAccordionBodyComponent, SirioFileUploadComponent, SirioToggleComponent, SirioChipCheckboxGroupComponent, SirioChipRadioGroupComponent, SirioInputChipComponent, SirioAlertComponent, SirioAlertMessageComponent, SirioSliderComponent, SirioNotifyComponent, SirioNotifyBodyComponent, SirioTooltipDirective, SirioNotifyActionComponent, SirioNotifyLinkComponent, SirioSidenavMobileComponent, SirioSidenavComponent, SirioSidenavItemComponent, SirioStepperProgressBarComponent, SirioStepperProgressItemComponent } from 'ngx-sirio-lib';
+import { SirioButtonComponent, SirioInputComponent, SirioCheckboxComponent, SirioCheckboxGroupComponent, SirioValidationDirective, SirioSelectComponent, SirioSelectOptionComponent, SirioSelectPanelComponent, SirioDatepickerComponent, SirioTimepickerComponent, SirioRadioGroupComponent, SirioRadioButtonComponent, SirioTabComponent, SirioTabItemComponent, SirioAccordionComponent, SirioAccordionPanelComponent, SirioAccordionHeaderComponent, SirioAccordionBodyComponent, SirioFileUploadComponent, SirioToggleComponent, SirioChipCheckboxGroupComponent, SirioChipRadioGroupComponent, SirioInputChipComponent, SirioAlertComponent, SirioAlertMessageComponent, SirioSliderComponent, SirioNotifyComponent, SirioNotifyBodyComponent, SirioTooltipDirective, SirioNotifyActionComponent, SirioNotifyLinkComponent, SirioSidenavMobileComponent, SirioSidenavComponent, SirioSidenavItemComponent, SirioStepperProgressBarComponent, SirioStepperProgressItemComponent } from 'ngx-sirio-lib';
 import { Datepicker } from 'vanillajs-datepicker';
+import { ClientSideRowModelModule, InfiniteRowModelModule, PaginationModule, LocaleModule, CellStyleModule, ClientSideRowModelApiModule, TextFilterModule, NumberFilterModule, DateFilterModule, ColumnAutoSizeModule, ColumnApiModule, themeQuartz, iconSetAlpine } from 'ag-grid-community';
+import { AG_GRID_LOCALE_IT } from '@ag-grid-community/locale';
 import * as i1$2 from 'ag-grid-angular';
 import { AgGridAngular } from 'ag-grid-angular';
-import { ClientSideRowModelModule, InfiniteRowModelModule, PaginationModule, LocaleModule, CellStyleModule, ClientSideRowModelApiModule, TextFilterModule, NumberFilterModule, DateFilterModule, ColumnAutoSizeModule, ColumnApiModule, ValidationModule, themeQuartz, iconSetAlpine } from 'ag-grid-community';
-import { AG_GRID_LOCALE_IT } from '@ag-grid-community/locale';
 import sanitizeHtml from 'sanitize-html';
 import * as i1$3 from '@angular/platform-browser';
 import { marked } from 'marked';
@@ -247,15 +247,19 @@ class WeakService {
         const observable = isObservable(result);
         if (observable) {
             result = result.pipe(shareReplay(1));
-            const subscription = result
-                .subscribe({
-                next: (result) => {
-                    subscription.unsubscribe();
-                    cachedObject[key] = of(result);
-                },
-                error: (error) => console.error(error),
-                complete: () => console.log('Observable complete')
-            });
+            result = result.pipe(take(1), tap((res) => {
+                cachedObject[key] = of(res);
+            }), shareReplay(1));
+            //let subscription: Subscription;
+            //subscription = result
+            //  .subscribe({
+            //    next: (result: any) => {
+            //      subscription.unsubscribe();
+            //      cachedObject[key] = of(result);
+            //    },
+            //    error: (error : any) => console.error(error),
+            //    complete: () => console.log('Observable complete')
+            //  });
         }
         cachedObject[key] = result;
         return result;
@@ -536,16 +540,21 @@ class ProgrammabilityService {
             return null;
         }
         const options = new ProxyOptions();
+        const scope = this.scope ? this.scope.proxy() : null;
         options.extend = {
             parent: this.getParentContext(formGroup),
             getFormGroup: () => this.proxyService.getProxy(formGroup),
-            getScope: () => this.scope ? this.scope.proxy() : null,
+            getScope: () => scope,
             controls: () => this.register ? this.register.proxy() : null,
             notifyInfo: (message, delay) => this.toastService.notifyInfo(message, delay),
             notifySuccess: (message, delay) => this.toastService.notifySuccess(message, delay),
             notifyWarning: (message, delay) => this.toastService.notifyWarning(message, delay),
             notifyError: (message, delay) => this.toastService.notifyError(message, delay)
         };
+        const scopeSymbol = "_";
+        if (formGroup.get(scopeSymbol) === null) {
+            options.extend[scopeSymbol] = scope;
+        }
         if (proxyFn)
             proxyFn(options);
         return this.proxyService.getProxy(formGroup.value, options);
@@ -737,23 +746,823 @@ class MetadataService {
     getSchema() {
         return this.schema;
     }
-    setForms(forms) {
-        this.forms = forms ?? [];
+    setForms(forms) {
+        this.forms = forms ?? [];
+    }
+    getForms() {
+        return this.forms;
+    }
+    getFormByName(name) {
+        return this.forms.find(form => form.name === name);
+    }
+    schema = { forms: [] };
+    forms = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const Texts = {
+    TypeToSearch: "Digita per cercare...",
+    Upload: "Upload",
+    ScrollLeft: "Scorri a sinistra",
+    ScrollRight: "Scorri a destra",
+    AddItem: "Aggiungi",
+    RemoveItem: "Rimuovi",
+    PreviousSection: "Sezione precedente",
+    NextSection: "Sezione successiva",
+    Show: "Visualizza",
+    Remove: "Rimuovi",
+    Close: "Chiudi",
+    Name: "Nome",
+    Size: "Dimensione",
+    Type: "Tipo",
+    Actions: "Azioni",
+    ReadMore: "Leggi di più",
+    ReadLess: "Leggi di meno",
+    SelectAll: "Seleziona tutto",
+    ChooseOne: "Scegli uno",
+    True: "Vero",
+    False: "Falso",
+    Blank: "Vuoto",
+    NotBlank: "Non vuoto",
+};
+
+class ObjectURLRendererComponent {
+    params;
+    Texts = Texts;
+    agInit(params) {
+        this.params = params;
+    }
+    onClick(event) {
+        const fileURL = URL.createObjectURL(this.params.data);
+        window.open(fileURL, '_blank');
+        setTimeout(() => {
+            URL.revokeObjectURL(fileURL);
+        }, 1000);
+    }
+    refresh() {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectURLRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ObjectURLRendererComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<a [attr.aria-label]=\"Texts.Show\" title=\"{{ Texts.Show }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-paperclip\"></span>\r\n</a>\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectURLRendererComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, template: "<a [attr.aria-label]=\"Texts.Show\" title=\"{{ Texts.Show }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-paperclip\"></span>\r\n</a>\r\n" }]
+        }] });
+class DeleteRowCellRenderer {
+    params;
+    Texts = Texts;
+    agInit(params) {
+        this.params = params;
+    }
+    onClick(event) {
+        if ('remove' in this.params.data && typeof this.params.data.remove === 'function') {
+            this.params.data.remove();
+        }
+    }
+    refresh() {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeleteRowCellRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DeleteRowCellRenderer, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<a [attr.aria-label]=\"Texts.Remove\" title=\"{{ Texts.Remove }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-trash\"></span>\r\n</a>\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeleteRowCellRenderer, decorators: [{
+            type: Component,
+            args: [{ standalone: true, template: "<a [attr.aria-label]=\"Texts.Remove\" title=\"{{ Texts.Remove }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-trash\"></span>\r\n</a>\r\n" }]
+        }] });
+class ActionsCellRenderer {
+    programmability;
+    constructor(programmability) {
+        this.programmability = programmability;
+    }
+    params;
+    agInit(params) {
+        this.params = params;
+    }
+    refresh() {
+        return false;
+    }
+    evaluateBoolean(value) {
+        const options = {
+            proxyFn: (options) => {
+                options.extend["getParams"] = () => this.params;
+                options.extend["getData"] = () => this.getData();
+            }
+        };
+        return this.programmability.evaluateBoolean(this.getFormGroup(), value, options);
+    }
+    evaluateString(value) {
+        return this.programmability.evaluateString(this.getFormGroup(), value);
+    }
+    clickButton(action, event) {
+        if (action.click) {
+            const options = {
+                cacheable: false,
+                proxyFn: (options) => {
+                    options.extend["getParams"] = () => this.params;
+                    options.extend["getAction"] = () => action;
+                    options.extend["getData"] = () => this.getData();
+                }
+            };
+            return this.programmability.evaluate(this.getFormGroup(), action.click, options);
+        }
+    }
+    getData() {
+        return this.params.data;
+    }
+    getFormGroup() {
+        return this.params.formGroup;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsCellRenderer, deps: [{ token: ProgrammabilityService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionsCellRenderer, 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                      [ariaLabel]=\"evaluateString(action.label)\"\r\n                      [title]=\"evaluateString(action.label)\"\r\n                      [color]=\"null\"\r\n                      [disabled]=\"evaluateBoolean(action.disabled)\"\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: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.13", ngImport: i0, type: ActionsCellRenderer, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule, SirioButtonComponent
+                    ], 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                      [ariaLabel]=\"evaluateString(action.label)\"\r\n                      [title]=\"evaluateString(action.label)\"\r\n                      [color]=\"null\"\r\n                      [disabled]=\"evaluateBoolean(action.disabled)\"\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" }]
+        }], ctorParameters: () => [{ type: ProgrammabilityService }] });
+
+const getLabelSymbol = Symbol('getLabel');
+
+function isLabeledRecord(obj, isKey, isValue, getLabelSymbol) {
+    if (!isRecord(obj, isKey, isValue)) {
+        return false;
+    }
+    const getLabel = obj[getLabelSymbol];
+    return (getLabel !== undefined && typeof getLabel === 'function');
+}
+function isRecord(obj, isKey, isValue) {
+    if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) {
+        return false;
+    }
+    return Object.entries(obj).every(([key, val]) => {
+        return isKey(key) && isValue(val);
+    });
+}
+function isStringKey(key) {
+    return typeof key === 'string';
+}
+function isNumericKey(key) {
+    return typeof key === 'string' && !isNaN(Number(key));
+}
+function isBooleanKey(key) {
+    return key === 'true' || key === 'false';
+}
+
+class SetFilterComponent {
+    params;
+    fieldName;
+    Texts = Texts;
+    selectAll = true;
+    searchText = '';
+    options = [];
+    filteredOptions = [];
+    agInit(params) {
+        this.params = params;
+        this.fieldName = params.colDef.field;
+        const map = params.colDef.filterParams?.map;
+        const result = isRecord(map, key => typeof key === 'string' || typeof key === 'number', val => typeof val === 'string');
+        if (result) {
+            this.options = Object.entries(map).map(([key, label]) => ({
+                value: this.parseKey(key),
+                label: label,
+                selected: true
+            }));
+        }
+        else {
+            this.options = [];
+        }
+        this.filteredOptions = [...this.options];
+    }
+    isFilterActive() {
+        return this.options.some(o => !o.selected);
+    }
+    doesFilterPass(params) {
+        const value = this.resolvePath(params.data, this.fieldName);
+        return this.options.some(o => o.selected && o.value === value);
+    }
+    getModel() {
+        const selectedValues = this.options
+            .filter(o => o.selected)
+            .map(o => o.value);
+        if (selectedValues.length === this.options.length) {
+            return null;
+        }
+        if (selectedValues.length === 0) {
+            return {
+                filterType: 'text',
+                type: 'excludeAll'
+            };
+        }
+        const filters = selectedValues.map(value => ({
+            filterType: 'number',
+            type: 'equals',
+            filter: value
+        }));
+        if (filters.length === 1)
+            return filters[0];
+        return {
+            filterType: 'number',
+            operator: 'OR',
+            conditions: filters
+        };
+    }
+    setModel(model) {
+        const selected = model?.values ?? this.options.map(o => o.value);
+        this.options.forEach(o => o.selected = selected.includes(o.value));
+        this.updateFilteredOptions();
+    }
+    onSelectionChange() {
+        this.params.filterChangedCallback();
+    }
+    onSearchChange() {
+        this.updateFilteredOptions();
+    }
+    onSelectAllChange() {
+        this.setAll(this.selectAll);
+    }
+    parseKey(key) {
+        if (key === 'true')
+            return true;
+        if (key === 'false')
+            return false;
+        const num = Number(key);
+        return isNaN(num) ? key : num;
+    }
+    setAll(select) {
+        this.options.forEach(o => o.selected = select);
+        this.updateFilteredOptions();
+        this.params.filterChangedCallback();
+    }
+    updateFilteredOptions() {
+        const search = this.searchText.toLowerCase();
+        this.filteredOptions = this.options.filter(o => o.label.toLowerCase().includes(search));
+    }
+    resolvePath(obj, path) {
+        return path.split('.').reduce((acc, part) => acc?.[part], obj);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SetFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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.13", ngImport: i0, type: SetFilterComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FormsModule, SirioInputComponent,
+                        SirioCheckboxComponent, SirioCheckboxGroupComponent,
+                        SirioButtonComponent], 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" }]
+        }] });
+
+//import { FeelService } from '../services/feel.service';
+class FormatterService {
+    //constructor(private feelService: FeelService) { }
+    constructor() { }
+    formatCurrency(value, symbol = null) {
+        if (isNaN(value) || value === null || value === undefined) {
+            return value;
+        }
+        const numberValue = parseFloat(value);
+        if (isNaN(numberValue)) {
+            return value;
+        }
+        const result = numberValue.toFixed(2).replace(".", ",").replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        if (symbol) {
+            return symbol + ' ' + result;
+        }
+        else {
+            return result;
+        }
+    }
+    formatDate(value) {
+        if (!value)
+            return '';
+        const date = new Date(value);
+        if (isNaN(date.getTime()))
+            return '';
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    }
+    formatDateTime(value) {
+        if (!value)
+            return '';
+        const date = new Date(value);
+        if (isNaN(date.getTime()))
+            return '';
+        const hasTime = typeof value === 'string' && value.includes('T');
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        if (!hasTime) {
+            return `${day}/${month}/${year} 00:00:00`;
+        }
+        else {
+            const hours = String(date.getHours()).padStart(2, '0');
+            const minutes = String(date.getMinutes()).padStart(2, '0');
+            const seconds = String(date.getSeconds()).padStart(2, '0');
+            return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
+        }
+    }
+    formatInteger(value) {
+        if (isNaN(value) || value === null || value === undefined) {
+            return value;
+        }
+        const numberValue = parseInt(value, 10);
+        if (isNaN(numberValue)) {
+            return value;
+        }
+        return numberValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+    }
+    formatExpression(value, expression) {
+        return value;
+        //const result = this.feelService.evalExpression(expression, { value: value }) as string;
+        //return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormatterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormatterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormatterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class GridService {
+    formatter;
+    programmability;
+    constructor(formatter, programmability) {
+        this.formatter = formatter;
+        this.programmability = programmability;
+    }
+    getGridModules() {
+        return [
+            ClientSideRowModelModule,
+            InfiniteRowModelModule,
+            PaginationModule,
+            LocaleModule,
+            CellStyleModule,
+            ClientSideRowModelApiModule,
+            TextFilterModule,
+            NumberFilterModule,
+            DateFilterModule,
+            ColumnAutoSizeModule,
+            ColumnApiModule
+        ];
+    }
+    ;
+    getGridOptions(component, formGroup) {
+        const columnDefs = this.getGridColumns(component, formGroup);
+        const pagination = this.getGridPaginable(component);
+        const pageSize = this.getGridPageSize(component);
+        const texts = this.getGridTexts();
+        const theme = this.getGridTheme();
+        return {
+            defaultColDef: {
+                floatingFilter: (component.floatingFilter === true),
+                headerClass: (component.floatingFilter === true)
+                    ? 'show-filter' : 'hide-filter'
+            },
+            dataTypeDefinitions: this.getDataTypeDefinitions(),
+            columnDefs: columnDefs,
+            pagination: pagination,
+            paginationPageSize: pageSize,
+            cacheBlockSize: pageSize,
+            paginationPageSizeSelector: [5, 10, 20, 50],
+            localeText: texts,
+            enableCellTextSelection: true,
+            theme: theme,
+            onGridReady: (params) => {
+                params.api.autoSizeColumns(["actions"]);
+            }
+        };
+    }
+    getGridColumns(component, formGroup) {
+        if (Array.isArray(component.columns)) {
+            const columns = component.columns.map((column) => {
+                const colDef = {
+                    field: column.key,
+                    headerName: column.label,
+                };
+                this.setCellDataType(column, colDef);
+                const map = this.getMap(column, colDef, formGroup);
+                this.setCellRenderer(column, colDef, map);
+                this.setResizable(column, colDef);
+                this.setSortable(column, colDef);
+                this.setFilter(column, colDef, map);
+                this.setFilterParams(column, colDef, map);
+                this.setSuppressMovable(column, colDef);
+                this.setFlex(column, colDef);
+                this.setAlign(column, colDef);
+                this.setPinned(column, colDef);
+                this.setWidth(column, colDef);
+                this.setValueFormatter(column, colDef, map);
+                return colDef;
+            });
+            if (Array.isArray(component.actions) && component.actions.length > 0) {
+                columns.push({
+                    colId: 'actions',
+                    headerName: Texts.Actions,
+                    resizable: false,
+                    cellDataType: false,
+                    pinned: "right",
+                    cellRendererParams: {
+                        component: component,
+                        formGroup: formGroup
+                    },
+                    cellRenderer: ActionsCellRenderer,
+                    suppressKeyboardEvent: this.navigateInsideCell
+                });
+            }
+            return columns;
+        }
+        else {
+            return [];
+        }
+    }
+    setCellDataType(column, colDef) {
+        if (typeof column.dataType === "string"
+            && column.dataType.trim() !== ""
+            && column.dataType !== "auto") {
+            colDef.cellDataType = column.dataType;
+        }
+    }
+    setCellRenderer(column, colDef, map) {
+        if (column.format === "objectURL") {
+            colDef.cellRenderer = ObjectURLRendererComponent;
+        }
+        if (column.format === "deleteRow") {
+            colDef.cellRenderer = DeleteRowCellRenderer;
+        }
+        if (colDef.cellDataType === "boolean" && map) {
+            colDef.cellRenderer = (params) => {
+                return this.formatMap(params.value, map);
+            };
+        }
+    }
+    setResizable(column, colDef) {
+        colDef.resizable = (column.resize === true);
+    }
+    setSortable(column, colDef) {
+        colDef.sortable = (column.sort === true);
+    }
+    setFilter(column, colDef, map) {
+        if (column.filter === true) {
+            colDef.filter = true;
+            if (map) {
+                colDef.filter = SetFilterComponent;
+            }
+        }
+    }
+    setFilterParams(column, colDef, map) {
+        const filterParams = {};
+        if (column.dataType === 'uuid') {
+            this.setUuidFilterParams(filterParams);
+        }
+        else if (column.dataType === 'integer') {
+            this.setIntegerFilterParams(filterParams);
+        }
+        else if (column.dataType === 'date') {
+            this.setDateFilterParams(filterParams);
+        }
+        else if (column.dataType === 'boolean') {
+            this.setBooleanFilterParams(filterParams);
+        }
+        if (map) {
+            filterParams.map = map;
+        }
+        colDef.filterParams = filterParams;
+    }
+    setUuidFilterParams(filterParams) {
+        filterParams.filterOptions = ['equals', 'notEqual'];
+    }
+    setIntegerFilterParams(filterParams) {
+        filterParams.allowedCharPattern = '\\d';
+    }
+    setDateFilterParams(filterParams) {
+        filterParams.comparator = (filterLocalDateAtMidnight, cellValue) => {
+            if (!cellValue)
+                return -1;
+            const cellDate = new Date(cellValue);
+            if (isNaN(cellDate.getTime()))
+                return -1;
+            const cellDateNoTime = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
+            if (cellDateNoTime < filterLocalDateAtMidnight)
+                return -1;
+            if (cellDateNoTime > filterLocalDateAtMidnight)
+                return 1;
+            return 0;
+        };
+    }
+    setBooleanFilterParams(filterParams) {
+        filterParams.filterOptions = [
+            {
+                displayKey: 'includeAll',
+                displayName: Texts.ChooseOne,
+                numberOfInputs: 0,
+                predicate: ([filter], value) => true
+            },
+            {
+                displayKey: 'true',
+                displayName: Texts.True,
+                numberOfInputs: 0,
+                predicate: ([filter], value) => value === true
+            },
+            {
+                displayKey: 'false',
+                displayName: Texts.False,
+                numberOfInputs: 0,
+                predicate: ([filter], value) => value === false
+            },
+            {
+                displayKey: 'blank',
+                displayName: Texts.Blank,
+                numberOfInputs: 0,
+                predicate: ([filter], value) => value === null
+            },
+            {
+                displayKey: 'notBlank',
+                displayName: Texts.NotBlank,
+                numberOfInputs: 0,
+                predicate: ([filter], value) => value !== null
+            },
+        ];
+        filterParams.suppressAndOrCondition = true;
+    }
+    setSuppressMovable(column, colDef) {
+        if (!(column.move === true)) {
+            colDef.suppressMovable = true;
+        }
+    }
+    setFlex(column, colDef) {
+        if (column.flex === true) {
+            colDef.flex = 1;
+        }
+    }
+    setAlign(column, colDef) {
+        if (column.align === "left") {
+            colDef.cellStyle = { textAlign: 'left' };
+        }
+        else if (column.align === "center") {
+            colDef.cellStyle = { textAlign: 'center' };
+        }
+        else if (column.align === "right") {
+            colDef.cellStyle = { textAlign: 'right' };
+        }
+    }
+    setPinned(column, colDef) {
+        if (typeof column.pinned === "string") {
+            colDef.pinned = column.pinned;
+        }
+    }
+    setWidth(column, colDef) {
+        if (typeof column.width === "number") {
+            colDef.width = column.width;
+        }
+        if (typeof column.minWidth === "number") {
+            colDef.minWidth = column.minWidth;
+        }
+        if (typeof column.maxWidth === "number") {
+            colDef.maxWidth = column.maxWidth;
+        }
+    }
+    setValueFormatter(column, colDef, map) {
+        if (map) {
+            colDef.valueFormatter = (params) => this.formatMap(params.value, map);
+        }
+    }
+    getGridPaginable(component) {
+        return (typeof component.rowCount === 'number' && component.rowCount > 0);
+    }
+    getGridPageSize(component) {
+        if (typeof component.rowCount === 'number') {
+            return component.rowCount;
+        }
+    }
+    getGridTexts() {
+        return {
+            ...AG_GRID_LOCALE_IT,
+            "pageSizeSelectorLabel": "Elementi per pagina:",
+            "to": "-",
+        };
+    }
+    getGridTheme() {
+        return themeQuartz
+            .withPart(iconSetAlpine)
+            .withParams({
+            backgroundColor: "#FAFAFA",
+            borderColor: "#D9E4F7",
+            browserColorScheme: "light",
+            cellTextColor: "#00121A",
+            columnBorder: true,
+            fontFamily: "inherit",
+            fontSize: 16,
+            headerBackgroundColor: "#002460",
+            headerColumnBorder: true,
+            headerColumnResizeHandleColor: "#F2F6FC",
+            headerColumnResizeHandleWidth: 2,
+            headerFontSize: 16,
+            headerFontWeight: 600,
+            headerRowBorder: false,
+            headerTextColor: "#F2F6FC",
+            rowBorder: true
+        });
+    }
+    getDataTypeDefinitions() {
+        return {
+            uuid: {
+                baseDataType: 'text',
+                extendsDataType: 'text'
+            },
+            date: {
+                baseDataType: 'dateString',
+                extendsDataType: 'dateString',
+                dateParser: (value) => {
+                    return value ? new Date(value) : undefined;
+                },
+                valueFormatter: params => {
+                    return this.formatter.formatDate(params.value);
+                }
+            },
+            dateTime: {
+                baseDataType: 'dateString',
+                extendsDataType: 'dateString',
+                dateParser: (value) => {
+                    return value ? new Date(value) : undefined;
+                },
+                valueFormatter: params => {
+                    return this.formatter.formatDateTime(params.value);
+                }
+            },
+            currency: {
+                extendsDataType: 'number',
+                baseDataType: 'number',
+                valueFormatter: params => params.value == null
+                    ? ''
+                    : this.formatter.formatCurrency(params.value)
+            },
+            integer: {
+                extendsDataType: 'number',
+                baseDataType: 'number',
+                valueFormatter: params => params.value == null
+                    ? ''
+                    : this.formatter.formatInteger(params.value)
+            },
+            percentage: {
+                extendsDataType: 'number',
+                baseDataType: 'number',
+                valueFormatter: params => params.value == null
+                    ? ''
+                    : `${Math.round(params.value * 100)}%`,
+            },
+            flags: {
+                extendsDataType: 'number',
+                baseDataType: 'number'
+            }
+        };
+    }
+    getMap(column, colDef, formGroup) {
+        const allowed = (colDef.cellDataType === "boolean"
+            || colDef.cellDataType === "text"
+            || colDef.cellDataType === "number"
+            || colDef.cellDataType === "flags");
+        if (allowed && column.map) {
+            const map = this.programmability.evaluate(formGroup, column.mapValues);
+            const valid = isRecord(map, key => typeof key === 'string' || typeof key === 'number', val => typeof val === 'string');
+            if (!valid)
+                return null;
+            if (colDef.cellDataType === "flags") {
+                map[getLabelSymbol] = (key) => this.formatFlags(key, map);
+            }
+            return map;
+        }
+        else {
+            return null;
+        }
+    }
+    formatMap(value, map) {
+        if (value == null) {
+            return '';
+        }
+        if (map) {
+            var result = map[value];
+            if (result === undefined) {
+                const labeled = isLabeledRecord(map, key => typeof key === 'string' || typeof key === 'number', val => typeof val === 'string', getLabelSymbol);
+                if (labeled) {
+                    result = map[getLabelSymbol](value);
+                }
+            }
+            return result ?? value.toString();
+        }
+        else {
+            return value.toString();
+        }
+    }
+    formatFlags(value, map) {
+        if (typeof value === 'number' &&
+            isRecord(map, isNumericKey, val => typeof val === 'string')) {
+            if (value == 0) {
+                return map[0] ?? "0";
+            }
+            const availableFlags = Object.keys(map)
+                .map(Number)
+                .filter(flag => flag !== 0);
+            const flags = availableFlags.filter(flag => (value & flag) === flag);
+            const sumFlags = flags.reduce((sum, f) => sum | f, 0);
+            if ((value & sumFlags) !== value) {
+                return null;
+            }
+            return flags
+                .map(flag => map[flag])
+                .filter((label) => !!label)
+                .join(', ');
+        }
+        else {
+            return null;
+        }
+    }
+    navigateInsideCell({ event }) {
+        const GRID_CELL_CLASSNAME = "ag-cell";
+        const { key, shiftKey } = event;
+        const path = this.getEventPath(event);
+        const isTabForward = key === "Tab" && shiftKey === false;
+        const isTabBackward = key === "Tab" && shiftKey === true;
+        let suppressEvent = false;
+        // Handle cell children tabbing
+        if (isTabForward || isTabBackward) {
+            const eGridCell = path.find((el) => {
+                if (el.classList === undefined)
+                    return false;
+                return el.classList.contains(GRID_CELL_CLASSNAME);
+            });
+            if (!eGridCell) {
+                return suppressEvent;
+            }
+            const focusableChildrenElements = this.getAllFocusableElementsOf(eGridCell);
+            const lastCellChildEl = focusableChildrenElements[focusableChildrenElements.length - 1];
+            const firstCellChildEl = focusableChildrenElements[0];
+            // Suppress keyboard event if tabbing forward within the cell and the current focused element is not the last child
+            if (focusableChildrenElements.length === 0) {
+                return false;
+            }
+            const currentIndex = focusableChildrenElements.indexOf(document.activeElement);
+            if (isTabForward) {
+                const isLastChildFocused = lastCellChildEl && document.activeElement === lastCellChildEl;
+                if (!isLastChildFocused) {
+                    suppressEvent = true;
+                    if (currentIndex !== -1 || document.activeElement === eGridCell) {
+                        event.preventDefault();
+                        focusableChildrenElements[currentIndex + 1].focus();
+                    }
+                }
+            }
+            // Suppress keyboard event if tabbing backwards within the cell, and the current focused element is not the first child
+            else {
+                const cellHasFocusedChildren = eGridCell.contains(document.activeElement) &&
+                    eGridCell !== document.activeElement;
+                // Manually set focus to the last child element if cell doesn't have focused children
+                if (!cellHasFocusedChildren) {
+                    lastCellChildEl.focus();
+                    // Cancel keyboard press, so that it doesn't focus on the last child and then pass through the keyboard press to
+                    // move to the 2nd last child element
+                    event.preventDefault();
+                }
+                const isFirstChildFocused = firstCellChildEl && document.activeElement === firstCellChildEl;
+                if (!isFirstChildFocused) {
+                    suppressEvent = true;
+                    if (currentIndex !== -1 || document.activeElement === eGridCell) {
+                        event.preventDefault();
+                        focusableChildrenElements[currentIndex - 1].focus();
+                    }
+                }
+            }
+        }
+        return suppressEvent;
     }
-    getForms() {
-        return this.forms;
+    getEventPath(event) {
+        const path = [];
+        let currentTarget = event.target;
+        while (currentTarget) {
+            path.push(currentTarget);
+            currentTarget = currentTarget.parentElement;
+        }
+        return path;
     }
-    getFormByName(name) {
-        return this.forms.find(form => form.name === name);
+    getAllFocusableElementsOf(el) {
+        return Array.from(el.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter((focusableEl) => {
+            return focusableEl.tabIndex !== -1 && !focusableEl.hasAttribute('disabled');
+        });
     }
-    schema = { forms: [] };
-    forms = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridService, deps: [{ token: FormatterService }, { token: ProgrammabilityService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: FormatterService }, { type: ProgrammabilityService }] });
 
 class AdornerDirective {
     el;
@@ -2270,26 +3079,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     type: Host
                 }] }] });
 
-const Texts = {
-    TypeToSearch: "Digita per cercare...",
-    Upload: "Upload",
-    ScrollLeft: "Scorri a sinistra",
-    ScrollRight: "Scorri a destra",
-    AddItem: "Aggiungi",
-    RemoveItem: "Rimuovi",
-    PreviousSection: "Sezione precedente",
-    NextSection: "Sezione successiva",
-    Show: "Visualizza",
-    Remove: "Rimuovi",
-    Close: "Chiudi",
-    Name: "Nome",
-    Size: "Dimensione",
-    Type: "Tipo",
-    Actions: "Azioni",
-    ReadMore: "Leggi di più",
-    ReadLess: "Leggi di meno"
-};
-
 class CollapseDirective {
     el;
     renderer;
@@ -2399,263 +3188,91 @@ class CollapseDirective {
         this.button.childNodes[0].textContent = Texts.ReadLess;
         this.updateIcon('fa-chevron-up', 'fa-chevron-down');
     }
-    collapse() {
-        const element = this.el.nativeElement;
-        this.renderer.setStyle(element, 'max-height', `${this.currentHeight}px`);
-        this.renderer.setStyle(element, 'overflow', 'hidden');
-        this.button.childNodes[0].textContent = Texts.ReadMore;
-        this.updateIcon('fa-chevron-down', 'fa-chevron-up');
-    }
-    updateIcon(add, remove) {
-        if (this.iconSpan) {
-            this.renderer.removeClass(this.iconSpan, remove);
-            this.renderer.addClass(this.iconSpan, add);
-        }
-    }
-    ngOnDestroy() {
-        this.resetButton();
-        this.resetFocusHandler();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: CollapseDirective, isStandalone: true, selector: "[collapse]", inputs: { maxHeight: ["collapse", "maxHeight"] }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollapseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[collapse]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { maxHeight: [{
-                type: Input,
-                args: ['collapse']
-            }] } });
-
-class AccordionPanelDirective {
-    constructor(panel) {
-        panel.opened.subscribe((event) => {
-            const element = event.component.body.el.nativeElement;
-            // delay height calculation to allow for DOM updates
-            setTimeout(() => {
-                const scrollHeight = element.scrollHeight;
-                element.style.height = `${scrollHeight}px`;
-            }, 0);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionPanelDirective, deps: [{ token: i1.SirioAccordionPanelComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AccordionPanelDirective, isStandalone: true, selector: "[accordionPanel]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[accordionPanel]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i1.SirioAccordionPanelComponent, decorators: [{
-                    type: Host
-                }] }] });
-
-class TemplateWrapperComponent {
-    template;
-    context = {};
-    constructor() { }
-    getTemplateRef() {
-        const result = {
-            createEmbeddedView: (context) => {
-                return this.template.createEmbeddedView(this.context);
-            }
-        };
-        result.createEmbeddedViewImpl = () => {
-            return this.template.createEmbeddedView(this.context);
-        };
-        return result;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TemplateWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TemplateWrapperComponent, isStandalone: true, selector: "app-template-wrapper", inputs: { template: "template", context: "context" }, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TemplateWrapperComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-template-wrapper',
-                    template: '',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [], propDecorators: { template: [{
-                type: Input
-            }], context: [{
-                type: Input
-            }] } });
-
-class ObjectURLRendererComponent {
-    params;
-    Texts = Texts;
-    agInit(params) {
-        this.params = params;
-    }
-    onClick(event) {
-        const fileURL = URL.createObjectURL(this.params.data);
-        window.open(fileURL, '_blank');
-        setTimeout(() => {
-            URL.revokeObjectURL(fileURL);
-        }, 1000);
-    }
-    refresh() {
-        return false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectURLRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ObjectURLRendererComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<a [attr.aria-label]=\"Texts.Show\" title=\"{{ Texts.Show }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-paperclip\"></span>\r\n</a>\r\n" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectURLRendererComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, template: "<a [attr.aria-label]=\"Texts.Show\" title=\"{{ Texts.Show }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-paperclip\"></span>\r\n</a>\r\n" }]
-        }] });
-class DeleteRowCellRenderer {
-    params;
-    Texts = Texts;
-    agInit(params) {
-        this.params = params;
-    }
-    onClick(event) {
-        if ('remove' in this.params.data && typeof this.params.data.remove === 'function') {
-            this.params.data.remove();
-        }
-    }
-    refresh() {
-        return false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeleteRowCellRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DeleteRowCellRenderer, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<a [attr.aria-label]=\"Texts.Remove\" title=\"{{ Texts.Remove }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-trash\"></span>\r\n</a>\r\n" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeleteRowCellRenderer, decorators: [{
-            type: Component,
-            args: [{ standalone: true, template: "<a [attr.aria-label]=\"Texts.Remove\" title=\"{{ Texts.Remove }}\" href=\"javascript:void(0)\" (click)=\"onClick($event)\">\r\n  <span class=\"fas fa-trash\"></span>\r\n</a>\r\n" }]
-        }] });
-class ActionsCellRenderer {
-    programmability;
-    constructor(programmability) {
-        this.programmability = programmability;
-    }
-    params;
-    agInit(params) {
-        this.params = params;
-    }
-    refresh() {
-        return false;
-    }
-    evaluateBoolean(value) {
-        const options = {
-            proxyFn: (options) => {
-                options.extend["getParams"] = () => this.params;
-                options.extend["getData"] = () => this.getData();
-            }
-        };
-        return this.programmability.evaluateBoolean(this.getFormGroup(), value, options);
-    }
-    evaluateString(value) {
-        return this.programmability.evaluateString(this.getFormGroup(), value);
-    }
-    clickButton(action, event) {
-        if (action.click) {
-            const options = {
-                cacheable: false,
-                proxyFn: (options) => {
-                    options.extend["getParams"] = () => this.params;
-                    options.extend["getAction"] = () => action;
-                    options.extend["getData"] = () => this.getData();
-                }
-            };
-            return this.programmability.evaluate(this.getFormGroup(), action.click, options);
-        }
+    collapse() {
+        const element = this.el.nativeElement;
+        this.renderer.setStyle(element, 'max-height', `${this.currentHeight}px`);
+        this.renderer.setStyle(element, 'overflow', 'hidden');
+        this.button.childNodes[0].textContent = Texts.ReadMore;
+        this.updateIcon('fa-chevron-down', 'fa-chevron-up');
     }
-    getData() {
-        return this.params.data;
+    updateIcon(add, remove) {
+        if (this.iconSpan) {
+            this.renderer.removeClass(this.iconSpan, remove);
+            this.renderer.addClass(this.iconSpan, add);
+        }
     }
-    getFormGroup() {
-        return this.params.formGroup;
+    ngOnDestroy() {
+        this.resetButton();
+        this.resetFocusHandler();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsCellRenderer, deps: [{ token: ProgrammabilityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionsCellRenderer, 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                      [ariaLabel]=\"evaluateString(action.label)\"\r\n                      [title]=\"evaluateString(action.label)\"\r\n                      [color]=\"null\"\r\n                      [disabled]=\"evaluateBoolean(action.disabled)\"\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: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: CollapseDirective, isStandalone: true, selector: "[collapse]", inputs: { maxHeight: ["collapse", "maxHeight"] }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsCellRenderer, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [
-                        CommonModule, SirioButtonComponent
-                    ], 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                      [ariaLabel]=\"evaluateString(action.label)\"\r\n                      [title]=\"evaluateString(action.label)\"\r\n                      [color]=\"null\"\r\n                      [disabled]=\"evaluateBoolean(action.disabled)\"\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" }]
-        }], ctorParameters: () => [{ type: ProgrammabilityService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollapseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[collapse]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { maxHeight: [{
+                type: Input,
+                args: ['collapse']
+            }] } });
 
-const GRID_CELL_CLASSNAME = "ag-cell";
-function getEventPath(event) {
-    const path = [];
-    let currentTarget = event.target;
-    while (currentTarget) {
-        path.push(currentTarget);
-        currentTarget = currentTarget.parentElement;
+class AccordionPanelDirective {
+    constructor(panel) {
+        panel.opened.subscribe((event) => {
+            const element = event.component.body.el.nativeElement;
+            // delay height calculation to allow for DOM updates
+            setTimeout(() => {
+                const scrollHeight = element.scrollHeight;
+                element.style.height = `${scrollHeight}px`;
+            }, 0);
+        });
     }
-    return path;
-}
-function getAllFocusableElementsOf(el) {
-    return Array.from(el.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter((focusableEl) => {
-        return focusableEl.tabIndex !== -1 && !focusableEl.hasAttribute('disabled');
-    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionPanelDirective, deps: [{ token: i1.SirioAccordionPanelComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AccordionPanelDirective, isStandalone: true, selector: "[accordionPanel]", ngImport: i0 });
 }
-const GridUtils = {
-    navigateInsideCell({ event }) {
-        const { key, shiftKey } = event;
-        const path = getEventPath(event);
-        const isTabForward = key === "Tab" && shiftKey === false;
-        const isTabBackward = key === "Tab" && shiftKey === true;
-        let suppressEvent = false;
-        // Handle cell children tabbing
-        if (isTabForward || isTabBackward) {
-            const eGridCell = path.find((el) => {
-                if (el.classList === undefined)
-                    return false;
-                return el.classList.contains(GRID_CELL_CLASSNAME);
-            });
-            if (!eGridCell) {
-                return suppressEvent;
-            }
-            const focusableChildrenElements = getAllFocusableElementsOf(eGridCell);
-            const lastCellChildEl = focusableChildrenElements[focusableChildrenElements.length - 1];
-            const firstCellChildEl = focusableChildrenElements[0];
-            // Suppress keyboard event if tabbing forward within the cell and the current focused element is not the last child
-            if (focusableChildrenElements.length === 0) {
-                return false;
-            }
-            const currentIndex = focusableChildrenElements.indexOf(document.activeElement);
-            if (isTabForward) {
-                const isLastChildFocused = lastCellChildEl && document.activeElement === lastCellChildEl;
-                if (!isLastChildFocused) {
-                    suppressEvent = true;
-                    if (currentIndex !== -1 || document.activeElement === eGridCell) {
-                        event.preventDefault();
-                        focusableChildrenElements[currentIndex + 1].focus();
-                    }
-                }
-            }
-            // Suppress keyboard event if tabbing backwards within the cell, and the current focused element is not the first child
-            else {
-                const cellHasFocusedChildren = eGridCell.contains(document.activeElement) &&
-                    eGridCell !== document.activeElement;
-                // Manually set focus to the last child element if cell doesn't have focused children
-                if (!cellHasFocusedChildren) {
-                    lastCellChildEl.focus();
-                    // Cancel keyboard press, so that it doesn't focus on the last child and then pass through the keyboard press to
-                    // move to the 2nd last child element
-                    event.preventDefault();
-                }
-                const isFirstChildFocused = firstCellChildEl && document.activeElement === firstCellChildEl;
-                if (!isFirstChildFocused) {
-                    suppressEvent = true;
-                    if (currentIndex !== -1 || document.activeElement === eGridCell) {
-                        event.preventDefault();
-                        focusableChildrenElements[currentIndex - 1].focus();
-                    }
-                }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordionPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[accordionPanel]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.SirioAccordionPanelComponent, decorators: [{
+                    type: Host
+                }] }] });
+
+class TemplateWrapperComponent {
+    template;
+    context = {};
+    constructor() { }
+    getTemplateRef() {
+        const result = {
+            createEmbeddedView: (context) => {
+                return this.template.createEmbeddedView(this.context);
             }
-        }
-        return suppressEvent;
-    },
-};
+        };
+        result.createEmbeddedViewImpl = () => {
+            return this.template.createEmbeddedView(this.context);
+        };
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TemplateWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TemplateWrapperComponent, isStandalone: true, selector: "app-template-wrapper", inputs: { template: "template", context: "context" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TemplateWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-template-wrapper',
+                    template: '',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { template: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }] } });
 
 class SanitizeService {
     sanitizer;
@@ -2750,88 +3367,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-//import { FeelService } from '../services/feel.service';
-class FormatterService {
-    //constructor(private feelService: FeelService) { }
-    constructor() { }
-    formatCurrency(value, symbol = null) {
-        if (isNaN(value) || value === null || value === undefined) {
-            return value;
-        }
-        const numberValue = parseFloat(value);
-        if (isNaN(numberValue)) {
-            return value;
-        }
-        const result = numberValue.toFixed(2).replace(".", ",").replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-        if (symbol) {
-            return symbol + ' ' + result;
-        }
-        else {
-            return result;
-        }
-    }
-    formatDate(value) {
-        if (typeof value !== 'string' || !/^\d{4}-\d{2}-\d{2}(T|$)/.test(value)) {
-            return value;
-        }
-        const date = new Date(value);
-        if (isNaN(date.getTime())) {
-            return value;
-        }
-        const day = date.getDate().toString().padStart(2, '0');
-        const month = (date.getMonth() + 1).toString().padStart(2, '0');
-        const year = date.getFullYear();
-        return `${day}/${month}/${year}`;
-    }
-    formatInteger(value) {
-        if (isNaN(value) || value === null || value === undefined) {
-            return value;
-        }
-        const numberValue = parseInt(value, 10);
-        if (isNaN(numberValue)) {
-            return value;
-        }
-        return numberValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    }
-    formatExpression(value, expression) {
-        return value;
-        //const result = this.feelService.evalExpression(expression, { value: value }) as string;
-        //return result;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormatterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormatterService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormatterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 class DynamicFieldsComponent {
     sanitizer;
     markdown;
     mime;
     programmability;
     events;
-    formatter;
     weak;
     register;
     metadata;
+    grid;
     el;
     rows;
     formGroup;
     Texts = Texts;
-    constructor(sanitizer, markdown, mime, programmability, events, formatter, weak, register, metadata, el) {
+    constructor(sanitizer, markdown, mime, programmability, events, weak, register, metadata, grid, el) {
         this.sanitizer = sanitizer;
         this.markdown = markdown;
         this.mime = mime;
         this.programmability = programmability;
         this.events = events;
-        this.formatter = formatter;
         this.weak = weak;
         this.register = register;
         this.metadata = metadata;
+        this.grid = grid;
         this.el = el;
     }
     ngOnInit() {
@@ -2976,48 +3535,10 @@ class DynamicFieldsComponent {
         }
     }
     getGridOptions(component) {
-        return this.weak.call(component, 'getGridOptions', () => {
-            const columnDefs = this.getGridColumns(component);
-            const pagination = this.getGridPaginable(component);
-            const pageSize = this.getGridPageSize(component);
-            const texts = this.getGridTexts();
-            const theme = this.getGridTheme();
-            return {
-                defaultColDef: {
-                    floatingFilter: (component.floatingFilter === true),
-                    headerClass: (component.floatingFilter === true)
-                        ? 'show-filter' : 'hide-filter'
-                },
-                columnDefs: columnDefs,
-                pagination: pagination,
-                paginationPageSize: pageSize,
-                paginationPageSizeSelector: [5, 10, 20, 50],
-                localeText: texts,
-                enableCellTextSelection: true,
-                theme: theme,
-                onGridReady: (params) => {
-                    params.api.autoSizeColumns(["actions"]);
-                }
-            };
-        });
+        return this.weak.call(component, 'getGridOptions', () => this.grid.getGridOptions(component, this.formGroup));
     }
     getGridModules(component) {
-        return this.weak.call(component, 'getGridModules', () => {
-            return [
-                ClientSideRowModelModule,
-                InfiniteRowModelModule,
-                PaginationModule,
-                LocaleModule,
-                CellStyleModule,
-                ClientSideRowModelApiModule,
-                TextFilterModule,
-                NumberFilterModule,
-                DateFilterModule,
-                ColumnAutoSizeModule,
-                ColumnApiModule,
-                ValidationModule
-            ];
-        });
+        return this.weak.call(component, 'getGridModules', () => this.grid.getGridModules());
     }
     getGridData(component) {
         if (component.dataSource) {
@@ -3122,111 +3643,6 @@ class DynamicFieldsComponent {
             }
         }
     }
-    gridTexts = {
-        ...AG_GRID_LOCALE_IT,
-        "pageSizeSelectorLabel": "Elementi per pagina:",
-        "to": "-",
-    };
-    gridTheme = themeQuartz
-        .withPart(iconSetAlpine)
-        .withParams({
-        backgroundColor: "#FAFAFA",
-        borderColor: "#D9E4F7",
-        browserColorScheme: "light",
-        cellTextColor: "#00121A",
-        columnBorder: true,
-        fontFamily: "inherit",
-        fontSize: 16,
-        headerBackgroundColor: "#002460",
-        headerColumnBorder: true,
-        headerColumnResizeHandleColor: "#F2F6FC",
-        headerColumnResizeHandleWidth: 2,
-        headerFontSize: 16,
-        headerFontWeight: 600,
-        headerRowBorder: false,
-        headerTextColor: "#F2F6FC",
-        rowBorder: true
-    });
-    getGridColumns(component) {
-        if (Array.isArray(component.columns)) {
-            const columns = component.columns.map((column) => ({
-                field: column.key,
-                headerName: column.label,
-                resizable: column.resize === true,
-                sortable: column.sort === true,
-                filter: column.filter === true,
-                suppressMovable: !(column.move === true),
-                ...(column.flex === true && { flex: 1 }),
-                ...(column.align === "left" && { cellStyle: { textAlign: 'left' } }),
-                ...(column.align === "center" && { cellStyle: { textAlign: 'center' } }),
-                ...(column.align === "right" && { cellStyle: { textAlign: 'right' } }),
-                ...(typeof column.pinned === "string" && { pinned: column.pinned }),
-                ...(typeof column.flex === "number" && { flex: column.flex }),
-                ...(typeof column.width === "number" && { width: column.width }),
-                ...(typeof column.minWidth === "number" && { minWidth: column.minWidth }),
-                ...(typeof column.maxWidth === "number" && { maxWidth: column.maxWidth }),
-                valueFormatter: this.getGridFormatter(column),
-                cellRenderer: this.getGridRenderer(column)
-            }));
-            if (Array.isArray(component.actions) && component.actions.length > 0) {
-                columns.push({
-                    colId: 'actions',
-                    headerName: Texts.Actions,
-                    resizable: false,
-                    cellDataType: false,
-                    pinned: "right",
-                    cellRendererParams: {
-                        component: component,
-                        formGroup: this.formGroup
-                    },
-                    cellRenderer: ActionsCellRenderer,
-                    suppressKeyboardEvent: GridUtils.navigateInsideCell
-                });
-            }
-            return columns;
-        }
-        else {
-            return [];
-        }
-    }
-    getGridPaginable(component) {
-        return (typeof component.rowCount === 'number' && component.rowCount > 0);
-    }
-    getGridPageSize(component) {
-        if (typeof component.rowCount === 'number') {
-            return component.rowCount;
-        }
-    }
-    getGridTexts() {
-        return this.gridTexts;
-    }
-    getGridTheme() {
-        return this.gridTheme;
-    }
-    getGridFormatter(column) {
-        if (column.format) {
-            switch (column.format) {
-                case 'integer':
-                    return params => this.formatter.formatInteger(params.value);
-                case 'currency':
-                    return params => this.formatter.formatCurrency(params.value);
-                case 'date':
-                    return params => this.formatter.formatDate(params.value);
-            }
-        }
-        return undefined;
-    }
-    getGridRenderer(column) {
-        if (column.format) {
-            switch (column.format) {
-                case 'objectURL':
-                    return ObjectURLRendererComponent;
-                case "deleteRow":
-                    return DeleteRowCellRenderer;
-            }
-        }
-        return undefined;
-    }
     getAsObservable(value) {
         if (isObservable(value))
             return value;
@@ -3279,10 +3695,11 @@ class DynamicFieldsComponent {
         };
     }
     ;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFieldsComponent, deps: [{ token: SanitizeService }, { token: MarkdownService }, { token: MimeService }, { token: ProgrammabilityService }, { token: EventService }, { token: FormatterService }, { token: WeakService }, { token: RegisterService }, { token: MetadataService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFieldsComponent, deps: [{ token: SanitizeService }, { token: MarkdownService }, { token: MimeService }, { token: ProgrammabilityService }, { token: EventService }, { token: WeakService }, { token: RegisterService }, { token: MetadataService }, { token: GridService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicFieldsComponent, isStandalone: true, selector: "app-dynamic-fields", inputs: { rows: "rows", formGroup: "formGroup" }, providers: [
             RegisterService,
-            ProgrammabilityService
+            ProgrammabilityService,
+            GridService
         ], ngImport: i0, template: "<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 [class]=\"getClass(component)\">\r\n          <!-- #region textfield -->\r\n          <ng-container *ngSwitchCase=\"'textfield'\">\r\n            <ngx-sirio-input type=\"text\"\r\n                             ariaLabel=\"input\"\r\n                             [label]=\"evaluateString(component.label)\"\r\n                             [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                             [placeholder]=\"component.placeholder || ''\"\r\n                             [textHelp]=\"evaluateString(component.description)\"\r\n                             [textFeedback]=\"getTextFeedback(component)\"\r\n                             [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                             [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                             [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                             [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                             [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                             [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                             [formControlName]=\"component.key\"\r\n                             [textcase]=\"component.textCase\"\r\n                             [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                             updateBlur\r\n                             validation\r\n                             [canValidate]=\"true\"\r\n                             [isWarning]=\"isWarning(component)\"\r\n                             [showWhenValid]=\"false\"\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'\">\r\n            <ngx-sirio-select ariaLabel=\"select\"\r\n                              [label]=\"evaluateString(component.label)\"\r\n                              [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                              [placeholder]=\"component.placeholder || ''\"\r\n                              [textHelp]=\"evaluateString(component.description)\"\r\n                              [textFeedback]=\"getTextFeedback(component)\"\r\n                              [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                              [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                              [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                              [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                              [formControlName]=\"component.key\"\r\n                              validation\r\n                              [canValidate]=\"true\"\r\n                              [isWarning]=\"isWarning(component)\"\r\n                              [showWhenValid]=\"false\"\r\n                              dropdown\r\n                              #select\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"select\">\r\n              <ngx-sirio-select-panel ariaLabel=\"items\">\r\n                <ngx-sirio-input *ngIf=\"component.searchable\" class=\"searchable\" type=\"text\" [placeholder]=\"Texts.TypeToSearch\"></ngx-sirio-input>\r\n                <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ 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'\">\r\n            <ngx-sirio-select ariaLabel=\"select\"\r\n                              [label]=\"evaluateString(component.label)\"\r\n                              [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                              [placeholder]=\"component.placeholder || ''\"\r\n                              [textHelp]=\"evaluateString(component.description)\"\r\n                              [textFeedback]=\"getTextFeedback(component)\"\r\n                              [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                              [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                              [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                              [show]=\"evaluateBoolean(component.conditional?.show)\"\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                              #taglist\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"taglist\">\r\n              <ngx-sirio-select-panel ariaLabel=\"items\">\r\n                <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ 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'\">\r\n            <ngx-sirio-input type=\"number\"\r\n                             ariaLabel=\"input\"\r\n                             [label]=\"evaluateString(component.label)\"\r\n                             [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                             [placeholder]=\"component.placeholder || ''\"\r\n                             [textHelp]=\"evaluateString(component.description)\"\r\n                             [textFeedback]=\"getTextFeedback(component)\"\r\n                             [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                             [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                             [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                             [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                             [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                             [show]=\"evaluateBoolean(component.conditional?.show)\"\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                             validation\r\n                             [canValidate]=\"true\"\r\n                             [isWarning]=\"isWarning(component)\"\r\n                             [showWhenValid]=\"false\"\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'\">\r\n            <ng-container [ngSwitch]=\"component.subtype\">\r\n              <!-- #region date -->\r\n              <ng-container *ngSwitchCase=\"'date'\">\r\n                <ngx-sirio-datepicker ariaLabel=\"date\"\r\n                                      [label]=\"evaluateString(component.dateLabel)\"\r\n                                      [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                      [placeholder]=\"component.placeholder || ''\"\r\n                                      [textHelp]=\"evaluateString(component.description)\"\r\n                                      [textFeedback]=\"getTextFeedback(component)\"\r\n                                      [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                      [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                      [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                      [show]=\"evaluateBoolean(component.conditional?.show)\"\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                                      #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=\"time\"\r\n                                      [label]=\"evaluateString(component.timeLabel)\"\r\n                                      [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                      [placeholder]=\"component.placeholder || ''\"\r\n                                      [textHelp]=\"evaluateString(component.description)\"\r\n                                      [textFeedback]=\"getTextFeedback(component)\"\r\n                                      [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                      [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                      [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                      [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                      [formControlName]=\"component.key\"\r\n                                      validation\r\n                                      [canValidate]=\"true\"\r\n                                      [isWarning]=\"isWarning(component)\"\r\n                                      [showWhenValid]=\"false\"\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            </ng-container>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region checkbox -->\r\n          <ng-container *ngSwitchCase=\"'checkbox'\">\r\n            <ng-container [ngSwitch]=\"component.subtype\">\r\n              <!-- #region toggle -->\r\n              <ng-container *ngSwitchCase=\"'toggle'\">\r\n                <ngx-sirio-toggle ariaLabel=\"checkbox\"\r\n                                  [textHelp]=\"evaluateString(component.description)\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                  [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                  [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                  [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  #toggle\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"toggle\">\r\n                  {{ evaluateString(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=\"checkbox\"\r\n                                    [textHelp]=\"evaluateString(component.description)\"\r\n                                    [textFeedback]=\"getTextFeedback(component)\"\r\n                                    [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                    [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                    [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                    [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                    [formControlName]=\"component.key\"\r\n                                    validation\r\n                                    [canValidate]=\"true\"\r\n                                    [isWarning]=\"isWarning(component)\"\r\n                                    [showWhenValid]=\"false\"\r\n                                    #checkbox\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"checkbox\">\r\n                  {{ evaluateString(component.label) }}\r\n                </ngx-sirio-checkbox>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region radio -->\r\n          <ng-container *ngSwitchCase=\"'radio'\">\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=\"radio\"\r\n                                            [label]=\"evaluateString(component.label)\"\r\n                                            [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                            [textHelp]=\"evaluateString(component.description)\"\r\n                                            [textFeedback]=\"getTextFeedback(component)\"\r\n                                            [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                            [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                            [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                            [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                            [formControlName]=\"component.key\"\r\n                                            validation\r\n                                            [canValidate]=\"true\"\r\n                                            [isWarning]=\"isWarning(component)\"\r\n                                            [showWhenValid]=\"false\"\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                    {{ 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=\"radio\"\r\n                                       [label]=\"evaluateString(component.label)\"\r\n                                       [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                       [textHelp]=\"evaluateString(component.description)\"\r\n                                       [textFeedback]=\"getTextFeedback(component)\"\r\n                                       [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                       [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                       [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                       [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                       [formControlName]=\"component.key\"\r\n                                       validation\r\n                                       [canValidate]=\"true\"\r\n                                       [isWarning]=\"isWarning(component)\"\r\n                                       [showWhenValid]=\"false\"\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                    {{ 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          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region checklist -->\r\n          <ng-container *ngSwitchCase=\"'checklist'\">\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=\"checklist\"\r\n                                               [label]=\"evaluateString(component.label)\"\r\n                                               [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                               [textHelp]=\"evaluateString(component.description)\"\r\n                                               [textFeedback]=\"getTextFeedback(component)\"\r\n                                               [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                               [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                               [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                               [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                               [formControlName]=\"component.key\"\r\n                                               validation\r\n                                               [canValidate]=\"true\"\r\n                                               [isWarning]=\"isWarning(component)\"\r\n                                               [showWhenValid]=\"false\"\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                    {{ 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=\"checklist\"\r\n                                          [label]=\"evaluateString(component.label)\"\r\n                                          [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                          [textHelp]=\"evaluateString(component.description)\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                          [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                          [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                          [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\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                    {{ 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          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region textarea -->\r\n          <ng-container *ngSwitchCase=\"'textarea'\">\r\n            <ngx-sirio-input type=\"textarea\"\r\n                             ariaLabel=\"textarea\"\r\n                             [label]=\"evaluateString(component.label)\"\r\n                             [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                             [placeholder]=\"component.placeholder || ''\"\r\n                             [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                             [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                             [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                             [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                             [textHelp]=\"evaluateString(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                             updateBlur\r\n                             validation\r\n                             [canValidate]=\"true\"\r\n                             [isWarning]=\"isWarning(component)\"\r\n                             [showWhenValid]=\"false\"\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'\">\r\n            <ngx-sirio-file-upload ariaLabel=\"filepicker\"\r\n                                   [label]=\"evaluateString(component.label)\"\r\n                                   [labelPopover]=\"evaluateString(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(component.description)\"\r\n                                   [textFeedback]=\"getTextFeedback(component)\"\r\n                                   [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                   [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                   [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                   [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                   [formControlName]=\"component.key\"\r\n                                   validation\r\n                                   [canValidate]=\"true\"\r\n                                   [isWarning]=\"isWarning(component)\"\r\n                                   [showWhenValid]=\"false\"\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              {{ Texts.Upload }}\r\n            </ngx-sirio-file-upload>\r\n            <ng-container *ngIf=\"component.showDetails\">\r\n              <app-dynamic-fields [formGroup]=\"formGroup\" [rows]=\"createUploadTables(component)\"></app-dynamic-fields>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region text -->\r\n          <ng-container *ngSwitchCase=\"'text'\">\r\n            <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                 [collapse]=\"component.collapseTo\"\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(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                          [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(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                 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                 [innerHTML]=\"sanitize(evaluateTemplate(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(component.alt)\"\r\n                 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\"\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 dynamiclist -->\r\n          <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n            <ng-container [formArrayName]=\"component.path\" [repeat]=\"evaluateNumber(component.repetitions)\">\r\n              <ng-container [ngSwitch]=\"component.subtype\">\r\n                <ng-container *ngIf=\"getFormArray(formGroup.get(component.path)).controls.length > 0\">\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]=\"Texts.ScrollLeft\"\r\n                                     [rightArrowLabel]=\"Texts.ScrollRight\"\r\n                                     [tabCount]=\"getFormArray(formGroup.get(component.path)).controls.length\"\r\n                                     #dynamiclisttab>\r\n                        <ng-container *ngFor=\"let item of getFormArray(formGroup.get(component.path)).controls; let i = index;\" [formGroupName]=\"i\">\r\n                          <ngx-sirio-tab-item [label]=\"component.label + ' ' + (i + 1)\">\r\n                            <ng-container *ngIf=\"i === dynamiclisttab.activeIndex\">\r\n                              <div [ngClass]=\"{\r\n'group-top': component.verticalAlignment === 'start',\r\n'group-center': component.verticalAlignment === 'center',\r\n'group-bottom': component.verticalAlignment === 'end'}\">\r\n                                <div>\r\n                                  <app-dynamic-fields [formGroup]=\"getFormGroup(item)\" [rows]=\"component.rows\"></app-dynamic-fields>\r\n                                </div>\r\n                                <ng-container *ngIf=\"component.allowAddRemove\">\r\n                                  <div style=\"text-align:right\">\r\n                                    <ngx-sirio-button (click)=\"removeItem(component, i)\" class=\"remove-item\" [color]=\"null\" icon=\"fas fa-trash\">{{ Texts.RemoveItem }}</ngx-sirio-button>\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]=\"getFormArray(formGroup.get(component.path)).controls.length\"\r\n                                           #dynamiclistaccordion>\r\n                        <ng-container *ngFor=\"let item of getFormArray(formGroup.get(component.path)).controls; let i = index;\" [formGroupName]=\"i\">\r\n                          <ngx-sirio-accordion-panel #panel accordionPanel>\r\n                            <ngx-sirio-accordion-header>\r\n                              <span [innerText]=\"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 [ngClass]=\"{\r\n'group-top': component.verticalAlignment === 'start',\r\n'group-center': component.verticalAlignment === 'center',\r\n'group-bottom': component.verticalAlignment === 'end'}\">\r\n                                  <div>\r\n                                    <app-dynamic-fields [formGroup]=\"getFormGroup(item)\" [rows]=\"component.rows\"></app-dynamic-fields>\r\n                                  </div>\r\n                                  <ng-container *ngIf=\"component.allowAddRemove\">\r\n                                    <div style=\"text-align:right\">\r\n                                      <ngx-sirio-button (click)=\"removeItem(component, i)\" class=\"remove-item\" [color]=\"null\" icon=\"fas fa-trash\">{{ Texts.RemoveItem }}</ngx-sirio-button>\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 default -->\r\n                  <ng-container *ngSwitchDefault>\r\n                    <div [ngClass]=\"{'group-outline': component.showOutline === true}\"\r\n                         #dynamiclist\r\n                         [register]=\"component\"\r\n                         [componentRef]=\"dynamiclist\">\r\n                      <label>{{ evaluateString(component.label) }}</label>\r\n                      <ng-container *ngFor=\"let item of getFormArray(formGroup.get(component.path)).controls; let i = index;\" [formGroupName]=\"i\">\r\n                        <div [ngClass]=\"{\r\n        'group-top': component.verticalAlignment === 'start',\r\n        'group-center': component.verticalAlignment === 'center',\r\n        'group-bottom': component.verticalAlignment === 'end'}\">\r\n                          <div>\r\n                            <app-dynamic-fields [formGroup]=\"getFormGroup(item)\" [rows]=\"component.rows\"></app-dynamic-fields>\r\n                          </div>\r\n                          <ng-container *ngIf=\"component.allowAddRemove\">\r\n                            <div style=\"text-align:right\">\r\n                              <ngx-sirio-button (click)=\"removeItem(component, i)\" class=\"remove-item\" [color]=\"null\" icon=\"fas fa-trash\">{{ Texts.RemoveItem }}</ngx-sirio-button>\r\n                            </div>\r\n                          </ng-container>\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 *ngIf=\"component.allowAddRemove\">\r\n                  <ngx-sirio-button (click)=\"addItem(component)\" class=\"add-item\" [color]=\"null\" icon=\"fas fa-plus\">{{ Texts.AddItem }}</ngx-sirio-button>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region group -->\r\n          <ng-container *ngSwitchCase=\"'group'\">\r\n            <div [ngClass]=\"{\r\n                 'group-outline': component.showOutline === true,\r\n                 'group-top': component.verticalAlignment === 'start',\r\n                 'group-center': component.verticalAlignment === 'center',\r\n                 'group-bottom': component.verticalAlignment === 'end'}\"\r\n                 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n              <label>{{ evaluateString(component.label) }}</label>\r\n              <div #group\r\n                   [register]=\"component\"\r\n                   [componentRef]=\"group\">\r\n                <app-dynamic-fields [formGroup]=\"getFormGroup(getControlFromPath(component.path))\"\r\n                                    [rows]=\"component.rows\"></app-dynamic-fields>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region table -->\r\n          <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n               [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n              <label>{{ evaluateString(component.label) }}</label>\r\n              <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n                               [gridOptions]=\"getGridOptions(component)\"\r\n                               [rowSource]=\"(getGridData(component) | async) || []\"\r\n                               [style.height.px]=\"component.height\"\r\n                               #table\r\n                               [register]=\"component\"\r\n                               [componentRef]=\"table\" />\r\n            </ng-container>\r\n          </div>\r\n          <!-- #endregion -->\r\n          <!-- #region button -->\r\n          <ng-container *ngSwitchCase=\"'button'\">\r\n            <ngx-sirio-button (clickEvent)=\"clickButton(component, $event)\"\r\n                              [color]=\"evaluateColor(component.color)\"\r\n                              [icon]=\"evaluateString(component.icon)\"\r\n                              [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                              [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                              [disabled]=\"evaluateBoolean(component.disabled)\"\r\n                              #button\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"button\">\r\n              {{ evaluateString(component.label) }}\r\n            </ngx-sirio-button>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region separator -->\r\n          <ng-container *ngSwitchCase=\"'separator'\">\r\n            <div class=\"separator\"\r\n                 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\"\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                 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\"\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            <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n              <label [for]=\"component.id\">{{ evaluateString(component.label) }}</label>\r\n              <iframe [src]=\"evaluateUrl(component.url)\"\r\n                      [title]=\"evaluateString(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            </div>\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]=\"Texts.Close\"\r\n                             [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                             [show]=\"evaluateBoolean(component.conditional?.show)\"\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(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 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                              [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                              #notice\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"notice\">\r\n              <ngx-sirio-notify-body [title]=\"evaluateString(component.title)\">\r\n                <div class=\"text-paragraph\"\r\n                     [innerHTML]=\"toHTML(evaluateTemplate(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 range -->\r\n          <ng-container *ngSwitchCase=\"'range'\">\r\n            <ngx-sirio-slider [label]=\"evaluateString(component.label)\"\r\n                              [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                              [textHelp]=\"evaluateString(component.description)\"\r\n                              [textFeedback]=\"getTextFeedback(component)\"\r\n                              [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                              [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                              [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                              [show]=\"evaluateBoolean(component.conditional?.show)\"\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                              #range\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"range\">\r\n            </ngx-sirio-slider>\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                    [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                    [show]=\"evaluateBoolean(component.conditional?.show)\"\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(component.title) }}\r\n                </p>\r\n                <div class=\"text-paragraph\"\r\n                     [innerHTML]=\"toHTML(evaluateTemplate(component.text))\">\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region tab -->\r\n          <ng-container *ngSwitchCase=\"'tab'\">\r\n            <ngx-sirio-tab #tab\r\n                          [register]=\"component\"\r\n                          [componentRef]=\"tab\"\r\n                          [leftArrowLabel]=\"Texts.ScrollLeft\"\r\n                          [rightArrowLabel]=\"Texts.ScrollRight\"\r\n                          tabControl>\r\n              <ng-container *ngFor=\"let panel of component.panels\">\r\n                <ng-container *disableForm=\"{\r\n                  disabled: evaluateBoolean(panel.disabled),\r\n                  formGroup: formGroup,\r\n                  path: panel.path\r\n                }\">\r\n                </ng-container>\r\n                <ngx-sirio-tab-item [label]=\"evaluateString(panel.label)\"\r\n                                    [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n                                    *ngIf=\"evaluateConditional(panel.conditional)\">\r\n                  <div [ngClass]=\"{\r\n                      'group-top': component.verticalAlignment === 'start',\r\n                      'group-center': component.verticalAlignment === 'center',\r\n                      'group-bottom': component.verticalAlignment === 'end'}\">\r\n                    <div>\r\n                      <app-dynamic-fields [formGroup]=\"getFormGroup(getControlFromPath(panel.path))\"\r\n                                          [rows]=\"getTemplate(panel.template)?.rows\"></app-dynamic-fields>\r\n                    </div>\r\n                  </div>\r\n                </ngx-sirio-tab-item>\r\n              </ng-container>\r\n            </ngx-sirio-tab>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region accordion -->\r\n          <ng-container *ngSwitchCase=\"'accordion'\">\r\n            <ngx-sirio-accordion\r\n                #accordion\r\n                [register]=\"component\"\r\n                [componentRef]=\"accordion\">\r\n              <ng-container *ngFor=\"let panel of component.panels\">\r\n                <ng-container *disableForm=\"{\r\n                   disabled: evaluateBoolean(panel.disabled),\r\n                   formGroup: formGroup,\r\n                   path: panel.path\r\n                 }\">\r\n                </ng-container>\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(panel.label)\"></span>\r\n                  </ngx-sirio-accordion-header>\r\n                  <ngx-sirio-accordion-body>\r\n                    <div [ngClass]=\"{\r\n                      'group-top': component.verticalAlignment === 'start',\r\n                      'group-center': component.verticalAlignment === 'center',\r\n                      'group-bottom': component.verticalAlignment === 'end'}\">\r\n                      <div>\r\n                        <app-dynamic-fields [formGroup]=\"getFormGroup(getControlFromPath(panel.path))\"\r\n                                            [rows]=\"getTemplate(panel.template)?.rows\"></app-dynamic-fields>\r\n                      </div>\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          <!-- #endregion -->\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\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-top .row{align-items:baseline}.group-center .row{align-items:center}.group-bottom .row{align-items:end}.text-paragraph p{margin-bottom:0!important}.sirio-control.ng-invalid .sirio-form-feedback{color:#aa224f;display:inline-block}.sirio-control.ng-invalid .sirio-input-group-text{color:#aa224f;border-color:#aa224f}.sirio-control.fp-disabled .sirio-input-group .sirio-input-group-text,.sirio-control.fp-readonly .sirio-input-group .sirio-input-group-text{border:0px}.sirio-control.fp-readonly label:hover{color:#454d56}.sirio-control.fp-readonly input.sirio-form-control,.sirio-control.fp-readonly .sirio-dropdown .sirio-dropdown-select,.sirio-control.fp-readonly textarea.sirio-form-control{background:none!important;border:0px;padding:0}.sirio-control.fp-readonly .sirio-input-group .sirio-input-group-text{background:none}.sirio-control.fp-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.sirio-control.fp-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}.sirio-upload.sirio-control.fp-readonly label,.sirio-upload.sirio-control.fp-disabled label{pointer-events:none}.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}.sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.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}\n"], dependencies: [{ kind: "component", type: DynamicFieldsComponent, selector: "app-dynamic-fields", inputs: ["rows", "formGroup"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i10.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: AdornerDirective, selector: "[prefixAdorner], [suffixAdorner]", inputs: ["prefixAdorner", "suffixAdorner"] }, { kind: "directive", type: DisableDirective, selector: "[disableControl], [readonly]", inputs: ["disableControl", "readonly", "placeholder", "componentRef"] }, { kind: "directive", type: DisplayDirective, selector: "[hide], [show]", inputs: ["hide", "show"] }, { kind: "directive", type: FrameSecurityDirective, selector: "[frameSecurity]", inputs: ["frameSecurity"] }, { kind: "directive", type: DropdownDirective, selector: "[dropdown]" }, { kind: "directive", type: UpdateBlurDirective, selector: "[updateBlur]" }, { kind: "directive", type: RepeatDirective, selector: "[repeat]", inputs: ["repeat"] }, { kind: "directive", type: TabDirective, selector: "[tabCount]", inputs: ["tabCount"] }, { kind: "directive", type: GridDirective, selector: "[rowSource]", inputs: ["rowSource"] }, { kind: "directive", type: RegisterDirective, selector: "[register]", inputs: ["register", "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: DisableFormDirective, selector: "[disableForm]", inputs: ["disableForm"] }, { kind: "directive", type: TabControlDirective, selector: "[tabControl]" }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["collapse"] }, { kind: "directive", type: AccordionPanelDirective, selector: "[accordionPanel]" }, { 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: "directive", type: SirioValidationDirective, selector: "[validation]", inputs: ["canValidate", "isWarning", "showWhenValid"] }, { 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: TemplateWrapperComponent, selector: "app-template-wrapper", inputs: ["template", "context"] }, { 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", "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", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "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", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "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", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "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", "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", "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", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFieldsComponent, decorators: [{
@@ -3305,9 +3722,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TemplateWrapperComponent,
                         AgGridAngular], providers: [
                         RegisterService,
-                        ProgrammabilityService
+                        ProgrammabilityService,
+                        GridService
                     ], encapsulation: ViewEncapsulation.None, template: "<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 [class]=\"getClass(component)\">\r\n          <!-- #region textfield -->\r\n          <ng-container *ngSwitchCase=\"'textfield'\">\r\n            <ngx-sirio-input type=\"text\"\r\n                             ariaLabel=\"input\"\r\n                             [label]=\"evaluateString(component.label)\"\r\n                             [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                             [placeholder]=\"component.placeholder || ''\"\r\n                             [textHelp]=\"evaluateString(component.description)\"\r\n                             [textFeedback]=\"getTextFeedback(component)\"\r\n                             [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                             [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                             [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                             [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                             [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                             [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                             [formControlName]=\"component.key\"\r\n                             [textcase]=\"component.textCase\"\r\n                             [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n                             updateBlur\r\n                             validation\r\n                             [canValidate]=\"true\"\r\n                             [isWarning]=\"isWarning(component)\"\r\n                             [showWhenValid]=\"false\"\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'\">\r\n            <ngx-sirio-select ariaLabel=\"select\"\r\n                              [label]=\"evaluateString(component.label)\"\r\n                              [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                              [placeholder]=\"component.placeholder || ''\"\r\n                              [textHelp]=\"evaluateString(component.description)\"\r\n                              [textFeedback]=\"getTextFeedback(component)\"\r\n                              [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                              [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                              [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                              [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                              [formControlName]=\"component.key\"\r\n                              validation\r\n                              [canValidate]=\"true\"\r\n                              [isWarning]=\"isWarning(component)\"\r\n                              [showWhenValid]=\"false\"\r\n                              dropdown\r\n                              #select\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"select\">\r\n              <ngx-sirio-select-panel ariaLabel=\"items\">\r\n                <ngx-sirio-input *ngIf=\"component.searchable\" class=\"searchable\" type=\"text\" [placeholder]=\"Texts.TypeToSearch\"></ngx-sirio-input>\r\n                <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ 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'\">\r\n            <ngx-sirio-select ariaLabel=\"select\"\r\n                              [label]=\"evaluateString(component.label)\"\r\n                              [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                              [placeholder]=\"component.placeholder || ''\"\r\n                              [textHelp]=\"evaluateString(component.description)\"\r\n                              [textFeedback]=\"getTextFeedback(component)\"\r\n                              [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                              [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                              [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                              [show]=\"evaluateBoolean(component.conditional?.show)\"\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                              #taglist\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"taglist\">\r\n              <ngx-sirio-select-panel ariaLabel=\"items\">\r\n                <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ 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'\">\r\n            <ngx-sirio-input type=\"number\"\r\n                             ariaLabel=\"input\"\r\n                             [label]=\"evaluateString(component.label)\"\r\n                             [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                             [placeholder]=\"component.placeholder || ''\"\r\n                             [textHelp]=\"evaluateString(component.description)\"\r\n                             [textFeedback]=\"getTextFeedback(component)\"\r\n                             [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n                             [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n                             [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                             [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                             [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                             [show]=\"evaluateBoolean(component.conditional?.show)\"\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                             validation\r\n                             [canValidate]=\"true\"\r\n                             [isWarning]=\"isWarning(component)\"\r\n                             [showWhenValid]=\"false\"\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'\">\r\n            <ng-container [ngSwitch]=\"component.subtype\">\r\n              <!-- #region date -->\r\n              <ng-container *ngSwitchCase=\"'date'\">\r\n                <ngx-sirio-datepicker ariaLabel=\"date\"\r\n                                      [label]=\"evaluateString(component.dateLabel)\"\r\n                                      [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                      [placeholder]=\"component.placeholder || ''\"\r\n                                      [textHelp]=\"evaluateString(component.description)\"\r\n                                      [textFeedback]=\"getTextFeedback(component)\"\r\n                                      [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                      [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                      [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                      [show]=\"evaluateBoolean(component.conditional?.show)\"\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                                      #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=\"time\"\r\n                                      [label]=\"evaluateString(component.timeLabel)\"\r\n                                      [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                      [placeholder]=\"component.placeholder || ''\"\r\n                                      [textHelp]=\"evaluateString(component.description)\"\r\n                                      [textFeedback]=\"getTextFeedback(component)\"\r\n                                      [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                      [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                      [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                      [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                      [formControlName]=\"component.key\"\r\n                                      validation\r\n                                      [canValidate]=\"true\"\r\n                                      [isWarning]=\"isWarning(component)\"\r\n                                      [showWhenValid]=\"false\"\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            </ng-container>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region checkbox -->\r\n          <ng-container *ngSwitchCase=\"'checkbox'\">\r\n            <ng-container [ngSwitch]=\"component.subtype\">\r\n              <!-- #region toggle -->\r\n              <ng-container *ngSwitchCase=\"'toggle'\">\r\n                <ngx-sirio-toggle ariaLabel=\"checkbox\"\r\n                                  [textHelp]=\"evaluateString(component.description)\"\r\n                                  [textFeedback]=\"getTextFeedback(component)\"\r\n                                  [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                  [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                  [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                  [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                  [formControlName]=\"component.key\"\r\n                                  validation\r\n                                  [canValidate]=\"true\"\r\n                                  [isWarning]=\"isWarning(component)\"\r\n                                  [showWhenValid]=\"false\"\r\n                                  #toggle\r\n                                  [register]=\"component\"\r\n                                  [componentRef]=\"toggle\">\r\n                  {{ evaluateString(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=\"checkbox\"\r\n                                    [textHelp]=\"evaluateString(component.description)\"\r\n                                    [textFeedback]=\"getTextFeedback(component)\"\r\n                                    [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                    [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                    [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                    [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                    [formControlName]=\"component.key\"\r\n                                    validation\r\n                                    [canValidate]=\"true\"\r\n                                    [isWarning]=\"isWarning(component)\"\r\n                                    [showWhenValid]=\"false\"\r\n                                    #checkbox\r\n                                    [register]=\"component\"\r\n                                    [componentRef]=\"checkbox\">\r\n                  {{ evaluateString(component.label) }}\r\n                </ngx-sirio-checkbox>\r\n              </ng-container>\r\n              <!-- #endregion -->\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region radio -->\r\n          <ng-container *ngSwitchCase=\"'radio'\">\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=\"radio\"\r\n                                            [label]=\"evaluateString(component.label)\"\r\n                                            [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                            [textHelp]=\"evaluateString(component.description)\"\r\n                                            [textFeedback]=\"getTextFeedback(component)\"\r\n                                            [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                            [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                            [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                            [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                            [formControlName]=\"component.key\"\r\n                                            validation\r\n                                            [canValidate]=\"true\"\r\n                                            [isWarning]=\"isWarning(component)\"\r\n                                            [showWhenValid]=\"false\"\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                    {{ 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=\"radio\"\r\n                                       [label]=\"evaluateString(component.label)\"\r\n                                       [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                       [textHelp]=\"evaluateString(component.description)\"\r\n                                       [textFeedback]=\"getTextFeedback(component)\"\r\n                                       [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                       [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                       [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                       [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                       [formControlName]=\"component.key\"\r\n                                       validation\r\n                                       [canValidate]=\"true\"\r\n                                       [isWarning]=\"isWarning(component)\"\r\n                                       [showWhenValid]=\"false\"\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                    {{ 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          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region checklist -->\r\n          <ng-container *ngSwitchCase=\"'checklist'\">\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=\"checklist\"\r\n                                               [label]=\"evaluateString(component.label)\"\r\n                                               [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                               [textHelp]=\"evaluateString(component.description)\"\r\n                                               [textFeedback]=\"getTextFeedback(component)\"\r\n                                               [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                               [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                               [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                               [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                               [formControlName]=\"component.key\"\r\n                                               validation\r\n                                               [canValidate]=\"true\"\r\n                                               [isWarning]=\"isWarning(component)\"\r\n                                               [showWhenValid]=\"false\"\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                    {{ 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=\"checklist\"\r\n                                          [label]=\"evaluateString(component.label)\"\r\n                                          [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                                          [textHelp]=\"evaluateString(component.description)\"\r\n                                          [textFeedback]=\"getTextFeedback(component)\"\r\n                                          [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                          [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                          [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                          [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                          [formControlName]=\"component.key\"\r\n                                          validation\r\n                                          [canValidate]=\"true\"\r\n                                          [isWarning]=\"isWarning(component)\"\r\n                                          [showWhenValid]=\"false\"\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                    {{ 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          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region textarea -->\r\n          <ng-container *ngSwitchCase=\"'textarea'\">\r\n            <ngx-sirio-input type=\"textarea\"\r\n                             ariaLabel=\"textarea\"\r\n                             [label]=\"evaluateString(component.label)\"\r\n                             [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                             [placeholder]=\"component.placeholder || ''\"\r\n                             [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                             [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                             [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                             [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                             [textHelp]=\"evaluateString(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                             updateBlur\r\n                             validation\r\n                             [canValidate]=\"true\"\r\n                             [isWarning]=\"isWarning(component)\"\r\n                             [showWhenValid]=\"false\"\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'\">\r\n            <ngx-sirio-file-upload ariaLabel=\"filepicker\"\r\n                                   [label]=\"evaluateString(component.label)\"\r\n                                   [labelPopover]=\"evaluateString(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(component.description)\"\r\n                                   [textFeedback]=\"getTextFeedback(component)\"\r\n                                   [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                                   [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                                   [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                                   [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                                   [formControlName]=\"component.key\"\r\n                                   validation\r\n                                   [canValidate]=\"true\"\r\n                                   [isWarning]=\"isWarning(component)\"\r\n                                   [showWhenValid]=\"false\"\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              {{ Texts.Upload }}\r\n            </ngx-sirio-file-upload>\r\n            <ng-container *ngIf=\"component.showDetails\">\r\n              <app-dynamic-fields [formGroup]=\"formGroup\" [rows]=\"createUploadTables(component)\"></app-dynamic-fields>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region text -->\r\n          <ng-container *ngSwitchCase=\"'text'\">\r\n            <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                 [collapse]=\"component.collapseTo\"\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(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                          [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(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                 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                 [innerHTML]=\"sanitize(evaluateTemplate(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(component.alt)\"\r\n                 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\"\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 dynamiclist -->\r\n          <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n            <ng-container [formArrayName]=\"component.path\" [repeat]=\"evaluateNumber(component.repetitions)\">\r\n              <ng-container [ngSwitch]=\"component.subtype\">\r\n                <ng-container *ngIf=\"getFormArray(formGroup.get(component.path)).controls.length > 0\">\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]=\"Texts.ScrollLeft\"\r\n                                     [rightArrowLabel]=\"Texts.ScrollRight\"\r\n                                     [tabCount]=\"getFormArray(formGroup.get(component.path)).controls.length\"\r\n                                     #dynamiclisttab>\r\n                        <ng-container *ngFor=\"let item of getFormArray(formGroup.get(component.path)).controls; let i = index;\" [formGroupName]=\"i\">\r\n                          <ngx-sirio-tab-item [label]=\"component.label + ' ' + (i + 1)\">\r\n                            <ng-container *ngIf=\"i === dynamiclisttab.activeIndex\">\r\n                              <div [ngClass]=\"{\r\n'group-top': component.verticalAlignment === 'start',\r\n'group-center': component.verticalAlignment === 'center',\r\n'group-bottom': component.verticalAlignment === 'end'}\">\r\n                                <div>\r\n                                  <app-dynamic-fields [formGroup]=\"getFormGroup(item)\" [rows]=\"component.rows\"></app-dynamic-fields>\r\n                                </div>\r\n                                <ng-container *ngIf=\"component.allowAddRemove\">\r\n                                  <div style=\"text-align:right\">\r\n                                    <ngx-sirio-button (click)=\"removeItem(component, i)\" class=\"remove-item\" [color]=\"null\" icon=\"fas fa-trash\">{{ Texts.RemoveItem }}</ngx-sirio-button>\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]=\"getFormArray(formGroup.get(component.path)).controls.length\"\r\n                                           #dynamiclistaccordion>\r\n                        <ng-container *ngFor=\"let item of getFormArray(formGroup.get(component.path)).controls; let i = index;\" [formGroupName]=\"i\">\r\n                          <ngx-sirio-accordion-panel #panel accordionPanel>\r\n                            <ngx-sirio-accordion-header>\r\n                              <span [innerText]=\"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 [ngClass]=\"{\r\n'group-top': component.verticalAlignment === 'start',\r\n'group-center': component.verticalAlignment === 'center',\r\n'group-bottom': component.verticalAlignment === 'end'}\">\r\n                                  <div>\r\n                                    <app-dynamic-fields [formGroup]=\"getFormGroup(item)\" [rows]=\"component.rows\"></app-dynamic-fields>\r\n                                  </div>\r\n                                  <ng-container *ngIf=\"component.allowAddRemove\">\r\n                                    <div style=\"text-align:right\">\r\n                                      <ngx-sirio-button (click)=\"removeItem(component, i)\" class=\"remove-item\" [color]=\"null\" icon=\"fas fa-trash\">{{ Texts.RemoveItem }}</ngx-sirio-button>\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 default -->\r\n                  <ng-container *ngSwitchDefault>\r\n                    <div [ngClass]=\"{'group-outline': component.showOutline === true}\"\r\n                         #dynamiclist\r\n                         [register]=\"component\"\r\n                         [componentRef]=\"dynamiclist\">\r\n                      <label>{{ evaluateString(component.label) }}</label>\r\n                      <ng-container *ngFor=\"let item of getFormArray(formGroup.get(component.path)).controls; let i = index;\" [formGroupName]=\"i\">\r\n                        <div [ngClass]=\"{\r\n        'group-top': component.verticalAlignment === 'start',\r\n        'group-center': component.verticalAlignment === 'center',\r\n        'group-bottom': component.verticalAlignment === 'end'}\">\r\n                          <div>\r\n                            <app-dynamic-fields [formGroup]=\"getFormGroup(item)\" [rows]=\"component.rows\"></app-dynamic-fields>\r\n                          </div>\r\n                          <ng-container *ngIf=\"component.allowAddRemove\">\r\n                            <div style=\"text-align:right\">\r\n                              <ngx-sirio-button (click)=\"removeItem(component, i)\" class=\"remove-item\" [color]=\"null\" icon=\"fas fa-trash\">{{ Texts.RemoveItem }}</ngx-sirio-button>\r\n                            </div>\r\n                          </ng-container>\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 *ngIf=\"component.allowAddRemove\">\r\n                  <ngx-sirio-button (click)=\"addItem(component)\" class=\"add-item\" [color]=\"null\" icon=\"fas fa-plus\">{{ Texts.AddItem }}</ngx-sirio-button>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region group -->\r\n          <ng-container *ngSwitchCase=\"'group'\">\r\n            <div [ngClass]=\"{\r\n                 'group-outline': component.showOutline === true,\r\n                 'group-top': component.verticalAlignment === 'start',\r\n                 'group-center': component.verticalAlignment === 'center',\r\n                 'group-bottom': component.verticalAlignment === 'end'}\"\r\n                 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n              <label>{{ evaluateString(component.label) }}</label>\r\n              <div #group\r\n                   [register]=\"component\"\r\n                   [componentRef]=\"group\">\r\n                <app-dynamic-fields [formGroup]=\"getFormGroup(getControlFromPath(component.path))\"\r\n                                    [rows]=\"component.rows\"></app-dynamic-fields>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region table -->\r\n          <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n               [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n              <label>{{ evaluateString(component.label) }}</label>\r\n              <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n                               [gridOptions]=\"getGridOptions(component)\"\r\n                               [rowSource]=\"(getGridData(component) | async) || []\"\r\n                               [style.height.px]=\"component.height\"\r\n                               #table\r\n                               [register]=\"component\"\r\n                               [componentRef]=\"table\" />\r\n            </ng-container>\r\n          </div>\r\n          <!-- #endregion -->\r\n          <!-- #region button -->\r\n          <ng-container *ngSwitchCase=\"'button'\">\r\n            <ngx-sirio-button (clickEvent)=\"clickButton(component, $event)\"\r\n                              [color]=\"evaluateColor(component.color)\"\r\n                              [icon]=\"evaluateString(component.icon)\"\r\n                              [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                              [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                              [disabled]=\"evaluateBoolean(component.disabled)\"\r\n                              #button\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"button\">\r\n              {{ evaluateString(component.label) }}\r\n            </ngx-sirio-button>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region separator -->\r\n          <ng-container *ngSwitchCase=\"'separator'\">\r\n            <div class=\"separator\"\r\n                 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\"\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                 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\"\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            <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                 [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n              <label [for]=\"component.id\">{{ evaluateString(component.label) }}</label>\r\n              <iframe [src]=\"evaluateUrl(component.url)\"\r\n                      [title]=\"evaluateString(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            </div>\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]=\"Texts.Close\"\r\n                             [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                             [show]=\"evaluateBoolean(component.conditional?.show)\"\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(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 [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                              [show]=\"evaluateBoolean(component.conditional?.show)\"\r\n                              #notice\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"notice\">\r\n              <ngx-sirio-notify-body [title]=\"evaluateString(component.title)\">\r\n                <div class=\"text-paragraph\"\r\n                     [innerHTML]=\"toHTML(evaluateTemplate(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 range -->\r\n          <ng-container *ngSwitchCase=\"'range'\">\r\n            <ngx-sirio-slider [label]=\"evaluateString(component.label)\"\r\n                              [labelPopover]=\"evaluateString(component.tooltip)\"\r\n                              [textHelp]=\"evaluateString(component.description)\"\r\n                              [textFeedback]=\"getTextFeedback(component)\"\r\n                              [readonly]=\"evaluateBoolean(component.readonly)\"\r\n                              [disableControl]=\"evaluateBoolean(component.disabled)\"\r\n                              [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                              [show]=\"evaluateBoolean(component.conditional?.show)\"\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                              #range\r\n                              [register]=\"component\"\r\n                              [componentRef]=\"range\">\r\n            </ngx-sirio-slider>\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                    [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n                    [show]=\"evaluateBoolean(component.conditional?.show)\"\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(component.title) }}\r\n                </p>\r\n                <div class=\"text-paragraph\"\r\n                     [innerHTML]=\"toHTML(evaluateTemplate(component.text))\">\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region tab -->\r\n          <ng-container *ngSwitchCase=\"'tab'\">\r\n            <ngx-sirio-tab #tab\r\n                          [register]=\"component\"\r\n                          [componentRef]=\"tab\"\r\n                          [leftArrowLabel]=\"Texts.ScrollLeft\"\r\n                          [rightArrowLabel]=\"Texts.ScrollRight\"\r\n                          tabControl>\r\n              <ng-container *ngFor=\"let panel of component.panels\">\r\n                <ng-container *disableForm=\"{\r\n                  disabled: evaluateBoolean(panel.disabled),\r\n                  formGroup: formGroup,\r\n                  path: panel.path\r\n                }\">\r\n                </ng-container>\r\n                <ngx-sirio-tab-item [label]=\"evaluateString(panel.label)\"\r\n                                    [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n                                    *ngIf=\"evaluateConditional(panel.conditional)\">\r\n                  <div [ngClass]=\"{\r\n                      'group-top': component.verticalAlignment === 'start',\r\n                      'group-center': component.verticalAlignment === 'center',\r\n                      'group-bottom': component.verticalAlignment === 'end'}\">\r\n                    <div>\r\n                      <app-dynamic-fields [formGroup]=\"getFormGroup(getControlFromPath(panel.path))\"\r\n                                          [rows]=\"getTemplate(panel.template)?.rows\"></app-dynamic-fields>\r\n                    </div>\r\n                  </div>\r\n                </ngx-sirio-tab-item>\r\n              </ng-container>\r\n            </ngx-sirio-tab>\r\n          </ng-container>\r\n          <!-- #endregion -->\r\n          <!-- #region accordion -->\r\n          <ng-container *ngSwitchCase=\"'accordion'\">\r\n            <ngx-sirio-accordion\r\n                #accordion\r\n                [register]=\"component\"\r\n                [componentRef]=\"accordion\">\r\n              <ng-container *ngFor=\"let panel of component.panels\">\r\n                <ng-container *disableForm=\"{\r\n                   disabled: evaluateBoolean(panel.disabled),\r\n                   formGroup: formGroup,\r\n                   path: panel.path\r\n                 }\">\r\n                </ng-container>\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(panel.label)\"></span>\r\n                  </ngx-sirio-accordion-header>\r\n                  <ngx-sirio-accordion-body>\r\n                    <div [ngClass]=\"{\r\n                      'group-top': component.verticalAlignment === 'start',\r\n                      'group-center': component.verticalAlignment === 'center',\r\n                      'group-bottom': component.verticalAlignment === 'end'}\">\r\n                      <div>\r\n                        <app-dynamic-fields [formGroup]=\"getFormGroup(getControlFromPath(panel.path))\"\r\n                                            [rows]=\"getTemplate(panel.template)?.rows\"></app-dynamic-fields>\r\n                      </div>\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          <!-- #endregion -->\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\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-top .row{align-items:baseline}.group-center .row{align-items:center}.group-bottom .row{align-items:end}.text-paragraph p{margin-bottom:0!important}.sirio-control.ng-invalid .sirio-form-feedback{color:#aa224f;display:inline-block}.sirio-control.ng-invalid .sirio-input-group-text{color:#aa224f;border-color:#aa224f}.sirio-control.fp-disabled .sirio-input-group .sirio-input-group-text,.sirio-control.fp-readonly .sirio-input-group .sirio-input-group-text{border:0px}.sirio-control.fp-readonly label:hover{color:#454d56}.sirio-control.fp-readonly input.sirio-form-control,.sirio-control.fp-readonly .sirio-dropdown .sirio-dropdown-select,.sirio-control.fp-readonly textarea.sirio-form-control{background:none!important;border:0px;padding:0}.sirio-control.fp-readonly .sirio-input-group .sirio-input-group-text{background:none}.sirio-control.fp-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.sirio-control.fp-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}.sirio-upload.sirio-control.fp-readonly label,.sirio-upload.sirio-control.fp-disabled label{pointer-events:none}.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}.sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.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}\n"] }]
-        }], ctorParameters: () => [{ type: SanitizeService }, { type: MarkdownService }, { type: MimeService }, { type: ProgrammabilityService }, { type: EventService }, { type: FormatterService }, { type: WeakService }, { type: RegisterService }, { type: MetadataService }, { type: i0.ElementRef }], propDecorators: { rows: [{
+        }], ctorParameters: () => [{ type: SanitizeService }, { type: MarkdownService }, { type: MimeService }, { type: ProgrammabilityService }, { type: EventService }, { type: WeakService }, { type: RegisterService }, { type: MetadataService }, { type: GridService }, { type: i0.ElementRef }], propDecorators: { rows: [{
                 type: Input
             }], formGroup: [{
                 type: Input
@@ -3924,6 +4342,12 @@ class ODataSource {
                 else if (filter.type === "notBlank") {
                     return `${column} ne null`;
                 }
+                else if (filter.type === "true") {
+                    return `${column} eq true`;
+                }
+                else if (filter.type === "false") {
+                    return `${column} eq false`;
+                }
                 break;
             case "number":
                 if (filter.type === "equals") {
@@ -4025,10 +4449,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1$4.HttpClient }] });
 
-/*
- * Public API Surface of sirio
- */
-
 /**
  * Generated bundle index. Do not edit.
  */