@messaia/cdk 21.1.0-rc.22 → 21.1.0-rc.24

package/fesm2022/messaia-cdk.mjs

@@ -12664,6 +12664,18 @@ class TableColumn {
      * @property
      */
     filterOptionText;
+    /**
+     * @property filterTooltip
+     * @description Tooltip for the filter input.
+     * @type {(ctx?: IGenericListComponent<TEntity>) => any}
+     */
+    filterTooltip;
+    /**
+     * @property filterTooltipClass
+     * @description CSS class for the filter tooltip.
+     * @type {string}
+     */
+    filterTooltipClass;
     /**
      * The header text for the column.
      * @property
@@ -17277,26 +17289,27 @@ class FilterInputComponent {
      * @param event
      */
     onKeyDown(event) {
-        let e = event;
-        if (this.onlyNumber) {
-            if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
-                /* Allow: Ctrl+A */
-                (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
-                /* Allow: Ctrl+C */
-                (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
-                /* Allow: Ctrl+V */
-                (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
-                /* Allow: Ctrl+X */
-                (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
-                /* Allow: home, end, left, right */
-                (e.keyCode >= 35 && e.keyCode <= 39)) {
-                /* let it happen, don't do anything */
-                return;
-            }
-            /* Ensure that it is a number and stop the keypress */
-            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
-                e.preventDefault();
-            }
+        /* Allow navigation keys and control keys */
+        const allowedKeys = ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
+        /* Allow Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X */
+        if ((event.ctrlKey || event.metaKey) && ['a', 'c', 'v', 'x'].includes(event.key.toLowerCase())) {
+            return;
+        }
+        /* Allow Ctrl+Z, Ctrl+Y */
+        if ((event.ctrlKey || event.metaKey) && ['z', 'y'].includes(event.key.toLowerCase())) {
+            return;
+        }
+        /* Allow control keys */
+        if (event.ctrlKey || event.metaKey) {
+            return;
+        }
+        /* Allow navigation keys */
+        if (allowedKeys.includes(event.key)) {
+            return;
+        }
+        /* Block non-numeric characters */
+        if (event.key < '0' || event.key > '9') {
+            event.preventDefault();
         }
     }
     /**
@@ -18397,7 +18410,7 @@ class VdDynamicTableComponent {
         this.changeDetector.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\n    <div class=\"loading-progress\">\n        @if (dataSource?.isLoading) {\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        }\n    </div>\n}\n\n<!-- #region Data table -->\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n            <!-- #region Column def -->\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\n                        @if (column.type == ColumnType.Checkbox) {\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\n                        }\n                        @if (column.type != ColumnType.Checkbox) {\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\n                        }\n                    </th>\n                </ng-template>\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\n                        @switch (column.type) {\n                            <!-- #region Checkbox column -->\n                            @case (ColumnType.Checkbox) {\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum column -->\n                            @case (ColumnType.Enum) {\n                                <span>\n                                    @if (column.enumMetadata) {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index) {\n                                                @if (i < 2) {\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\n                                                }\n                                                @if (i === 1 && rowValue?.length > 2) {\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\n                                                }\n                                            }\n                                            <ng-template #template let-displayValue=\"displayValue\">\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\n                                                    <span>{{ displayValue }}</span>\n                                                </mat-chip-row>\n                                            </ng-template>\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\n                                            }\n                                        }\n                                    } @else {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\n                                                <div>\n                                                    @if (i<2) {\n                                                        <small i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small>\n                                                    }\n                                                    @if (i==1 && rowValue?.length > 2) {\n                                                        <small>, ...</small>\n                                                    }\n                                                </div>\n                                            }\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\n                                                }\n                                                }\n                                                }\n                                </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Toggle column -->\n                                @case (ColumnType.Toggle) {\n                                    @if (!formArray) {\n                                        <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Date column -->\n                                @case (ColumnType.Date) {\n                                    <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Text Input column -->\n                                @case (ColumnType.TextInput) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region VD-Select column -->\n                                @case (ColumnType.Select) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Action -->\n                                @case (ColumnType.Action) {\n                                    @if (column.menu) {\n                                        @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\n                                            <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\n                                        }\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Menu -->\n                                @case (ColumnType.Menu) {\n                                    @if (column.menu) {\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon -->\n                                @case (ColumnType.Icon) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if (column.icon?.matIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\n                                        }\n                                        @if (column.icon?.svgIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\n                                        }\n                                        @if (column.icon?.fontIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\n                                        }\n                                    </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon button -->\n                                @case (ColumnType.IconButton) {\n                                    <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\n                                        <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\n                                    </a>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Other column types -->\n                                @default {\n                                    <span [innerHtml]=\"rowValue??''\"></span>\n                                }\n                                <!-- #endregion -->\n                                }\n                                <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\n                                    @if (formGroup) {\n                                        <ng-container [formGroup]=\"formGroup\">\n                                            <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n                                            @if (!columnNameSegments.length) {\n                                                @switch (column.type) {\n                                                    <!-- #region Toggle column -->\n                                                    @case (ColumnType.Toggle) {\n                                                        <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region Text Input column -->\n                                                    @case (ColumnType.TextInput) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region VD-Select column -->\n                                                    @case (ColumnType.Select) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                }\n                                            } @else {\n                                                <!-- If not the last segment, create a nested form group -->\n                                                <ng-container [formGroupName]=\"columnNameSegments[0]\">\n                                                    <!-- Recursive call to handle nested segments -->\n                                                    <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\n                                                </ng-container>\n                                            }\n                                        </ng-container>\n                                    }\n                                </ng-template>\n                    </ng-template>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n            }\n\n            <!-- #region Filter row -->\n            @if (dataSource && filterable) {\n                @for (column of columns$ | async; track column) {\n                    <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                        <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\n                            <!-- #region Select filter -->\n                            @if(column.endpoint || column.enumType || column.options){\n                                <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\n                            }\n                            <!-- #region Text filter -->\n                            @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\n                                <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date filter -->\n                            @else if (column.type == ColumnType.Date) {\n                                <span filter-date></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Action filter (clear) -->\n                            @else if (column.type == ColumnType.Action) {\n                                <span filter-clear></span>\n                            }\n                            <!-- #endregion -->\n                        </th>\n                    </ng-container>\n                }\n            }\n            <!-- #endregion -->\n\n            <!-- #region Details column -->\n            <ng-container cdkColumnDef=\"expandedDetail\">\n                <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\n                    <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\n                        @if (templateRef && row === expandedRow) {\n                            <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\n                        }\n                    </div>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n\n            <!-- #region Filter header -->\n            @if (filterable) {\n                <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n            }\n            <!-- #endregion -->\n\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\n            <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\n\n            <!-- #region Detrails row -->\n            @if (detailsTemplate || templateRef) {\n                <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\n            }\n            <!-- #endregion -->\n    </table>\n\n    <!-- #region Modern No Results Message -->\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n        <div class=\"no-results-overlay\">\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n            <div class=\"no-results-text mat-body-1\">\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\n                <p i18n=\"@@tryAdjustFilters\">Try adjusting your filters or search criteria.</p>\n            </div>\n        </div>\n    }\n    <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n    <code>\n    <pre>{{formValue | json}}</pre>\n  </code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n    <ng-content select=\"[table-footer]\"></ng-content>\n    <span flex></span>\n    @if (paginable) {\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\n    }\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$2.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i16.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\n    <div class=\"loading-progress\">\n        @if (dataSource?.isLoading) {\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        }\n    </div>\n}\n\n<!-- #region Data table -->\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n            <!-- #region Column def -->\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\n                        @if (column.type == ColumnType.Checkbox) {\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\n                        }\n                        @if (column.type != ColumnType.Checkbox) {\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\n                        }\n                    </th>\n                </ng-template>\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\n                        @switch (column.type) {\n                            <!-- #region Checkbox column -->\n                            @case (ColumnType.Checkbox) {\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum column -->\n                            @case (ColumnType.Enum) {\n                                <span>\n                                    @if (column.enumMetadata) {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index) {\n                                                @if (i < 2) {\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\n                                                }\n                                                @if (i === 1 && rowValue?.length > 2) {\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\n                                                }\n                                            }\n                                            <ng-template #template let-displayValue=\"displayValue\">\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\n                                                    <span>{{ displayValue }}</span>\n                                                </mat-chip-row>\n                                            </ng-template>\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\n                                            }\n                                        }\n                                    } @else {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\n                                                <div>\n                                                    @if (i<2) {\n                                                        <small i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small>\n                                                    }\n                                                    @if (i==1 && rowValue?.length > 2) {\n                                                        <small>, ...</small>\n                                                    }\n                                                </div>\n                                            }\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\n                                                }\n                                                }\n                                                }\n                                </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Toggle column -->\n                                @case (ColumnType.Toggle) {\n                                    @if (!formArray) {\n                                        <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Date column -->\n                                @case (ColumnType.Date) {\n                                    <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Text Input column -->\n                                @case (ColumnType.TextInput) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region VD-Select column -->\n                                @case (ColumnType.Select) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Action -->\n                                @case (ColumnType.Action) {\n                                    @if (column.menu) {\n                                        @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\n                                            <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\n                                        }\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Menu -->\n                                @case (ColumnType.Menu) {\n                                    @if (column.menu) {\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon -->\n                                @case (ColumnType.Icon) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if (column.icon?.matIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\n                                        }\n                                        @if (column.icon?.svgIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\n                                        }\n                                        @if (column.icon?.fontIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\n                                        }\n                                    </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon button -->\n                                @case (ColumnType.IconButton) {\n                                    <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\n                                        <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\n                                    </a>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Other column types -->\n                                @default {\n                                    <span [innerHtml]=\"rowValue??''\"></span>\n                                }\n                                <!-- #endregion -->\n                                }\n                                <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\n                                    @if (formGroup) {\n                                        <ng-container [formGroup]=\"formGroup\">\n                                            <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n                                            @if (!columnNameSegments.length) {\n                                                @switch (column.type) {\n                                                    <!-- #region Toggle column -->\n                                                    @case (ColumnType.Toggle) {\n                                                        <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region Text Input column -->\n                                                    @case (ColumnType.TextInput) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region VD-Select column -->\n                                                    @case (ColumnType.Select) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                }\n                                            } @else {\n                                                <!-- If not the last segment, create a nested form group -->\n                                                <ng-container [formGroupName]=\"columnNameSegments[0]\">\n                                                    <!-- Recursive call to handle nested segments -->\n                                                    <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\n                                                </ng-container>\n                                            }\n                                        </ng-container>\n                                    }\n                                </ng-template>\n                    </ng-template>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n            }\n\n            <!-- #region Filter row -->\n            @if (dataSource && filterable) {\n                @for (column of columns$ | async; track column) {\n                    <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                        <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\n                            <!-- #region Select filter -->\n                            @if(column.endpoint || column.enumType || column.options){\n                                <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\n                            }\n                            <!-- #region Text filter -->\n                            @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\n                                <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date filter -->\n                            @else if (column.type == ColumnType.Date) {\n                                <span filter-date></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Action filter (clear) -->\n                            @else if (column.type == ColumnType.Action) {\n                                <span filter-clear></span>\n                            }\n                            <!-- #endregion -->\n                        </th>\n                    </ng-container>\n                }\n            }\n            <!-- #endregion -->\n\n            <!-- #region Details column -->\n            <ng-container cdkColumnDef=\"expandedDetail\">\n                <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\n                    <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\n                        @if (templateRef && row === expandedRow) {\n                            <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\n                        }\n                    </div>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n\n            <!-- #region Filter header -->\n            @if (filterable) {\n                <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n            }\n            <!-- #endregion -->\n\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\n            <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\n\n            <!-- #region Detrails row -->\n            @if (detailsTemplate || templateRef) {\n                <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\n            }\n            <!-- #endregion -->\n    </table>\n\n    <!-- #region Modern No Results Message -->\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n        <div class=\"no-results-overlay\">\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n            <div class=\"no-results-text mat-body-1\">\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\n                <p i18n=\"@@tryAdjustFilters\">Try adjusting your filters or search criteria.</p>\n            </div>\n        </div>\n    }\n    <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n    <code>\n    <pre>{{formValue | json}}</pre>\n  </code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n    <ng-content select=\"[table-footer]\"></ng-content>\n    <span flex></span>\n    @if (paginable) {\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\n    }\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$2.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i16.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: 
                 //----------------------
                 DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "enumMetadata", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: 
                 //----------------------
@@ -18451,7 +18464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             state('expanded', style({ height: AUTO_STYLE })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "@if (!static) {\n    <div class=\"loading-progress\">\n        @if (dataSource?.isLoading) {\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        }\n    </div>\n}\n\n<!-- #region Data table -->\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n            <!-- #region Column def -->\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\n                        @if (column.type == ColumnType.Checkbox) {\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\n                        }\n                        @if (column.type != ColumnType.Checkbox) {\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\n                        }\n                    </th>\n                </ng-template>\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\n                        @switch (column.type) {\n                            <!-- #region Checkbox column -->\n                            @case (ColumnType.Checkbox) {\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum column -->\n                            @case (ColumnType.Enum) {\n                                <span>\n                                    @if (column.enumMetadata) {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index) {\n                                                @if (i < 2) {\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\n                                                }\n                                                @if (i === 1 && rowValue?.length > 2) {\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\n                                                }\n                                            }\n                                            <ng-template #template let-displayValue=\"displayValue\">\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\n                                                    <span>{{ displayValue }}</span>\n                                                </mat-chip-row>\n                                            </ng-template>\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\n                                            }\n                                        }\n                                    } @else {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\n                                                <div>\n                                                    @if (i<2) {\n                                                        <small i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small>\n                                                    }\n                                                    @if (i==1 && rowValue?.length > 2) {\n                                                        <small>, ...</small>\n                                                    }\n                                                </div>\n                                            }\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\n                                                }\n                                                }\n                                                }\n                                </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Toggle column -->\n                                @case (ColumnType.Toggle) {\n                                    @if (!formArray) {\n                                        <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Date column -->\n                                @case (ColumnType.Date) {\n                                    <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Text Input column -->\n                                @case (ColumnType.TextInput) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region VD-Select column -->\n                                @case (ColumnType.Select) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Action -->\n                                @case (ColumnType.Action) {\n                                    @if (column.menu) {\n                                        @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\n                                            <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\n                                        }\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Menu -->\n                                @case (ColumnType.Menu) {\n                                    @if (column.menu) {\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon -->\n                                @case (ColumnType.Icon) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if (column.icon?.matIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\n                                        }\n                                        @if (column.icon?.svgIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\n                                        }\n                                        @if (column.icon?.fontIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\n                                        }\n                                    </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon button -->\n                                @case (ColumnType.IconButton) {\n                                    <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\n                                        <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\n                                    </a>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Other column types -->\n                                @default {\n                                    <span [innerHtml]=\"rowValue??''\"></span>\n                                }\n                                <!-- #endregion -->\n                                }\n                                <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\n                                    @if (formGroup) {\n                                        <ng-container [formGroup]=\"formGroup\">\n                                            <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n                                            @if (!columnNameSegments.length) {\n                                                @switch (column.type) {\n                                                    <!-- #region Toggle column -->\n                                                    @case (ColumnType.Toggle) {\n                                                        <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region Text Input column -->\n                                                    @case (ColumnType.TextInput) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region VD-Select column -->\n                                                    @case (ColumnType.Select) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                }\n                                            } @else {\n                                                <!-- If not the last segment, create a nested form group -->\n                                                <ng-container [formGroupName]=\"columnNameSegments[0]\">\n                                                    <!-- Recursive call to handle nested segments -->\n                                                    <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\n                                                </ng-container>\n                                            }\n                                        </ng-container>\n                                    }\n                                </ng-template>\n                    </ng-template>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n            }\n\n            <!-- #region Filter row -->\n            @if (dataSource && filterable) {\n                @for (column of columns$ | async; track column) {\n                    <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                        <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\n                            <!-- #region Select filter -->\n                            @if(column.endpoint || column.enumType || column.options){\n                                <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\n                            }\n                            <!-- #region Text filter -->\n                            @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\n                                <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date filter -->\n                            @else if (column.type == ColumnType.Date) {\n                                <span filter-date></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Action filter (clear) -->\n                            @else if (column.type == ColumnType.Action) {\n                                <span filter-clear></span>\n                            }\n                            <!-- #endregion -->\n                        </th>\n                    </ng-container>\n                }\n            }\n            <!-- #endregion -->\n\n            <!-- #region Details column -->\n            <ng-container cdkColumnDef=\"expandedDetail\">\n                <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\n                    <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\n                        @if (templateRef && row === expandedRow) {\n                            <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\n                        }\n                    </div>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n\n            <!-- #region Filter header -->\n            @if (filterable) {\n                <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n            }\n            <!-- #endregion -->\n\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\n            <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\n\n            <!-- #region Detrails row -->\n            @if (detailsTemplate || templateRef) {\n                <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\n            }\n            <!-- #endregion -->\n    </table>\n\n    <!-- #region Modern No Results Message -->\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n        <div class=\"no-results-overlay\">\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n            <div class=\"no-results-text mat-body-1\">\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\n                <p i18n=\"@@tryAdjustFilters\">Try adjusting your filters or search criteria.</p>\n            </div>\n        </div>\n    }\n    <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n    <code>\n    <pre>{{formValue | json}}</pre>\n  </code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n    <ng-content select=\"[table-footer]\"></ng-content>\n    <span flex></span>\n    @if (paginable) {\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\n    }\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
+                    ], template: "@if (!static) {\n    <div class=\"loading-progress\">\n        @if (dataSource?.isLoading) {\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        }\n    </div>\n}\n\n<!-- #region Data table -->\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n            <!-- #region Column def -->\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\n                        @if (column.type == ColumnType.Checkbox) {\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\n                        }\n                        @if (column.type != ColumnType.Checkbox) {\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\n                        }\n                    </th>\n                </ng-template>\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\n                        @switch (column.type) {\n                            <!-- #region Checkbox column -->\n                            @case (ColumnType.Checkbox) {\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum column -->\n                            @case (ColumnType.Enum) {\n                                <span>\n                                    @if (column.enumMetadata) {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index) {\n                                                @if (i < 2) {\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\n                                                }\n                                                @if (i === 1 && rowValue?.length > 2) {\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\n                                                }\n                                            }\n                                            <ng-template #template let-displayValue=\"displayValue\">\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\n                                                    <span>{{ displayValue }}</span>\n                                                </mat-chip-row>\n                                            </ng-template>\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\n                                            }\n                                        }\n                                    } @else {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\n                                                <div>\n                                                    @if (i<2) {\n                                                        <small i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small>\n                                                    }\n                                                    @if (i==1 && rowValue?.length > 2) {\n                                                        <small>, ...</small>\n                                                    }\n                                                </div>\n                                            }\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\n                                                }\n                                                }\n                                                }\n                                </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Toggle column -->\n                                @case (ColumnType.Toggle) {\n                                    @if (!formArray) {\n                                        <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Date column -->\n                                @case (ColumnType.Date) {\n                                    <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Text Input column -->\n                                @case (ColumnType.TextInput) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region VD-Select column -->\n                                @case (ColumnType.Select) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Action -->\n                                @case (ColumnType.Action) {\n                                    @if (column.menu) {\n                                        @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\n                                            <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\n                                        }\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Menu -->\n                                @case (ColumnType.Menu) {\n                                    @if (column.menu) {\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon -->\n                                @case (ColumnType.Icon) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if (column.icon?.matIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\n                                        }\n                                        @if (column.icon?.svgIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\n                                        }\n                                        @if (column.icon?.fontIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\n                                        }\n                                    </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon button -->\n                                @case (ColumnType.IconButton) {\n                                    <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\n                                        <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\n                                    </a>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Other column types -->\n                                @default {\n                                    <span [innerHtml]=\"rowValue??''\"></span>\n                                }\n                                <!-- #endregion -->\n                                }\n                                <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\n                                    @if (formGroup) {\n                                        <ng-container [formGroup]=\"formGroup\">\n                                            <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n                                            @if (!columnNameSegments.length) {\n                                                @switch (column.type) {\n                                                    <!-- #region Toggle column -->\n                                                    @case (ColumnType.Toggle) {\n                                                        <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region Text Input column -->\n                                                    @case (ColumnType.TextInput) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region VD-Select column -->\n                                                    @case (ColumnType.Select) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                }\n                                            } @else {\n                                                <!-- If not the last segment, create a nested form group -->\n                                                <ng-container [formGroupName]=\"columnNameSegments[0]\">\n                                                    <!-- Recursive call to handle nested segments -->\n                                                    <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\n                                                </ng-container>\n                                            }\n                                        </ng-container>\n                                    }\n                                </ng-template>\n                    </ng-template>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n            }\n\n            <!-- #region Filter row -->\n            @if (dataSource && filterable) {\n                @for (column of columns$ | async; track column) {\n                    <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                        <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\n                            <!-- #region Select filter -->\n                            @if(column.endpoint || column.enumType || column.options){\n                                <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\n                            }\n                            <!-- #region Text filter -->\n                            @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\n                                <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date filter -->\n                            @else if (column.type == ColumnType.Date) {\n                                <span filter-date></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Action filter (clear) -->\n                            @else if (column.type == ColumnType.Action) {\n                                <span filter-clear></span>\n                            }\n                            <!-- #endregion -->\n                        </th>\n                    </ng-container>\n                }\n            }\n            <!-- #endregion -->\n\n            <!-- #region Details column -->\n            <ng-container cdkColumnDef=\"expandedDetail\">\n                <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\n                    <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\n                        @if (templateRef && row === expandedRow) {\n                            <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\n                        }\n                    </div>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n\n            <!-- #region Filter header -->\n            @if (filterable) {\n                <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n            }\n            <!-- #endregion -->\n\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\n            <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\n\n            <!-- #region Detrails row -->\n            @if (detailsTemplate || templateRef) {\n                <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\n            }\n            <!-- #endregion -->\n    </table>\n\n    <!-- #region Modern No Results Message -->\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n        <div class=\"no-results-overlay\">\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n            <div class=\"no-results-text mat-body-1\">\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\n                <p i18n=\"@@tryAdjustFilters\">Try adjusting your filters or search criteria.</p>\n            </div>\n        </div>\n    }\n    <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n    <code>\n    <pre>{{formValue | json}}</pre>\n  </code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n    <ng-content select=\"[table-footer]\"></ng-content>\n    <span flex></span>\n    @if (paginable) {\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\n    }\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
         }], ctorParameters: () => [{ type: DynamicBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
@@ -24195,7 +24208,7 @@ class VdGenericFormComponent {
         console.log(message, optionalParams);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, outputs: { onInit: "init" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [context]=\"context\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #enumOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #selectOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                (selectionChange)=\"field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);\"\n                                                flex>\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n                                    <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'radio-form-field'\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-radio-group radioMatFormControl [formControlName]=\"field.name!\" layout=\"row\" class=\"radio-group-inside-field\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-radio-button [value]=\"option.id\" class=\"mat-radio-button-wrap\">\n                                                {{option.name}}\n                                            </mat-radio-button>\n                                        }\n                                    </mat-radio-group>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate  && editorTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate  && codeTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate  && customTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, outputs: { onInit: "init" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [context]=\"context\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #enumOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #selectOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                (selectionChange)=\"field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);\"\n                                                flex>\n                                        @for (option of (field?.options | func:formValue:formGroup:context) ?? []; track option.id) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n                                    <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'radio-form-field'\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-radio-group radioMatFormControl [formControlName]=\"field.name!\" layout=\"row\" class=\"radio-group-inside-field\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-radio-button [value]=\"option.id\" class=\"mat-radio-button-wrap\">\n                                                {{option.name}}\n                                            </mat-radio-button>\n                                        }\n                                    </mat-radio-group>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate  && editorTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate  && codeTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate  && customTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: "ngmodule", type: 
                 //--------------------
                 MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i11.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i11.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: 
                 //--------------------
@@ -24244,7 +24257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         RemoveWhitespaceDirective,
                         NativeElementInjectorDirective,
                         MatFormFieldRadioDirective
-                    ], template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [context]=\"context\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #enumOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #selectOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                (selectionChange)=\"field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);\"\n                                                flex>\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n                                    <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'radio-form-field'\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-radio-group radioMatFormControl [formControlName]=\"field.name!\" layout=\"row\" class=\"radio-group-inside-field\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-radio-button [value]=\"option.id\" class=\"mat-radio-button-wrap\">\n                                                {{option.name}}\n                                            </mat-radio-button>\n                                        }\n                                    </mat-radio-group>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate  && editorTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate  && codeTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate  && customTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"] }]
+                    ], template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [context]=\"context\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #enumOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #selectOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                (selectionChange)=\"field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);\"\n                                                flex>\n                                        @for (option of (field?.options | func:formValue:formGroup:context) ?? []; track option.id) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n                                    <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'radio-form-field'\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-radio-group radioMatFormControl [formControlName]=\"field.name!\" layout=\"row\" class=\"radio-group-inside-field\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-radio-button [value]=\"option.id\" class=\"mat-radio-button-wrap\">\n                                                {{option.name}}\n                                            </mat-radio-button>\n                                        }\n                                    </mat-radio-group>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate  && editorTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate  && codeTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate  && customTemplate.templateRef) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], classType: [{