@messaia/cdk 22.0.0-rc.4 → 22.0.0-rc.6

package/fesm2022/messaia-cdk.mjs

@@ -70,10 +70,10 @@ import { MatDividerModule, MatDivider } from '@angular/material/divider';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i3$4 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i3$3 from '@angular/cdk/platform';
-import * as i4$3 from '@angular/cdk/text-field';
 import * as i4$4 from '@angular/material/list';
 import { MatSelectionList, MatListOption, MatListModule } from '@angular/material/list';
+import * as i3$3 from '@angular/cdk/platform';
+import * as i4$3 from '@angular/cdk/text-field';
 import * as i2$7 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i3$5 from '@angular/material/sidenav';
@@ -12605,11 +12605,6 @@ class TableColumn {
      * @property
      */
     enumFilter;
-    /**
-     * Prefix for enum types.
-     * @property
-     */
-    enumPrefix;
     /**
      * The type of enum.
      * @property
@@ -18444,11 +18439,11 @@ class VdDynamicTableComponent {
         this.changeDetector.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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\n  class=\"mat-table-container scrollbar-secondary\"\n  [ngClass]=\"{'mat-table-sticky': sticky}\"\n  #scrollContainer\n>\n  <table\n    mat-table\n    #table\n    [dataSource]=\"dataSource\"\n    [dataSourceFilter]=\"dataSourceFilter\"\n    [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\"\n    [trackBy]=\"trackBy\"\n    matSort\n    matSortDisableClear\n    [matSortActive]=\"sortActive||'id'\"\n    [matSortDirection]=\"sortDirection\"\n    multiTemplateDataRows\n  >\n    @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n    <!-- #region Column def -->\n    <ng-container\n      [cdkColumnDef]=\"column.name\"\n      [sticky]=\"column.sticky\"\n      [stickyEnd]=\"column.stickyEnd\"\n    >\n      <ng-template\n        #header\n        [ngTemplateOutlet]=\"header\"\n        let-headerText=\"headerText\"\n        [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\"\n      >\n        <th\n          mat-header-cell\n          *cdkHeaderCellDef\n          [mat-sort-header]=\"column.sortBy || column.name\"\n          [hidden]=\"column.hidden\"\n          [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          [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\"\n          [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          [arrowPosition]=\"column.arrowBefore?'before':'after'\"\n        >\n          @if (column.type == ColumnType.Checkbox) {\n          <mat-checkbox\n            (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\"\n            [disabled]=\"!dataSource.paginator?.length\"\n            [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\"\n            [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"\n          ></mat-checkbox>\n          } @if (column.type != ColumnType.Checkbox) {\n          <span [matTooltip]=\"headerText\">{{headerText}}</span>\n          }\n        </th>\n      </ng-template>\n      <td\n        mat-cell\n        *cdkCellDef=\"let row; let rowIndex = dataIndex\"\n        [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\"\n        [matTooltipClass]=\"column.tooltipClass??''\"\n        [hidden]=\"column.hidden\"\n        [ngClass]=\"getRowClasses(column, row)\"\n        [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      >\n        <ng-template\n          #rowVal\n          [ngTemplateOutlet]=\"rowVal\"\n          let-rowValue\n          [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\"\n        >\n          @switch (column.type) {\n          <!-- #region Checkbox column -->\n          @case (ColumnType.Checkbox) {\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\"\n            [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n            [checked]=\"dataSource.selectionModel.isSelected(row)\"\n          ></mat-checkbox>\n          }\n          <!-- #endregion -->\n          <!-- #region Enum column -->\n          @case (ColumnType.Enum) {\n          <span>\n            @if (column.enumMetadata) { @if (column.multiple) { @for (item of\n            rowValue; track item; let i = $index) { @if (i < 2) {\n            <ng-template\n              let-displayValue=\"displayValue\"\n              [ngTemplateOutlet]=\"template\"\n              [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"\n            ></ng-template>\n            } @if (i === 1 && rowValue?.length > 2) {\n            <small\n              [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\"\n              matTooltipClass=\"mat-tooltip-multiline\"\n              >...</small\n            >\n            } }\n            <ng-template #template let-displayValue=\"displayValue\">\n              <mat-chip-row\n                disableRipple=\"true\"\n                selectable=\"false\"\n                [matTooltip]=\"displayValue\"\n              >\n                <span>{{ displayValue }}</span>\n              </mat-chip-row>\n            </ng-template>\n            } @else { @if (rowValue >= 0) {\n            <span\n              class=\"na\"\n              [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\"\n              [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"\n            ></span>\n            } } } @else { @if (column.multiple) { @for (item of rowValue; track\n            item; let i = $index; let last = $last) {\n            <div>\n              @if (i<2) {\n              <small i18n=\"@@selection\"\n                >{item | enum:column.enumType:column.enumPrefix, select, type\n                {type} other {{{item |\n                enum:column.enumType:column.enumPrefix}}}}</small\n              >\n              } @if (i==1 && rowValue?.length > 2) {\n              <small>, ...</small>\n              }\n            </div>\n            } } @else { @if (rowValue >= 0) {\n            <span i18n=\"@@selection\"\n              >{rowValue | enum:column.enumType:column.enumPrefix, select, type\n              {type} other {{{rowValue |\n              enum:column.enumType:column.enumPrefix}}}}</span\n            >\n            } } }\n          </span>\n          }\n          <!-- #endregion -->\n          <!-- #region Toggle column -->\n          @case (ColumnType.Toggle) { @if (!formArray) {\n          <mat-slide-toggle\n            [ngModel]=\"row | property:column.name\"\n            (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\"\n            (click)=\"$event.stopPropagation();\"\n            [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n            color=\"accent\"\n          ></mat-slide-toggle>\n          } @if (formArray) {\n          <ng-container\n            [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"recursiveContainer\"\n              [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n            ></ng-container>\n          </ng-container>\n          } }\n          <!-- #endregion -->\n          <!-- #region Date column -->\n          @case (ColumnType.Date) {\n          <span\n            >{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy\n            HH:mm:ss'}}</span\n          >\n          }\n          <!-- #endregion -->\n          <!-- #region Text Input column -->\n          @case (ColumnType.TextInput) { @if (!formArray) {\n          <mat-form-field\n            appearance=\"outline\"\n            layout=\"column\"\n            layout-align=\"center start\"\n            subscriptSizing=\"dynamic\"\n            dense-3\n            (click)=\"$event.stopPropagation();\"\n          >\n            @if (!formArray) {\n            <input\n              matInput\n              type=\"{{column.inputType}}\"\n              autocomplete=\"none\"\n              name=\"{{column.name}}{{rowIndex}}\"\n              [ngModel]=\"row | property:column.name\"\n              [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n              [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\"\n              [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\"\n              (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\"\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\n              (keydown.enter)=\"handleKeydownEnter($event)\"\n            />\n            }\n          </mat-form-field>\n          } @if (formArray) {\n          <ng-container\n            [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"recursiveContainer\"\n              [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n            ></ng-container>\n          </ng-container>\n          } }\n          <!-- #endregion -->\n          <!-- #region VD-Select column -->\n          @case (ColumnType.Select) { @if (!formArray) {\n          <mat-form-field\n            appearance=\"outline\"\n            layout=\"column\"\n            layout-align=\"center start\"\n            subscriptSizing=\"dynamic\"\n            dense-3\n            (click)=\"$event.stopPropagation();\"\n          >\n            @if (!formArray) {\n            <vd-select\n              name=\"{{column.name}}{{rowIndex}}\"\n              [enum]=\"column.enumType\"\n              [enumMetadata]=\"column.enumMetadata\"\n              [enumFilter]=\"$safeNavigationMigration(column?.enumFilter)  | func:row:context\"\n              [prefix]=\"column.enumPrefix\"\n              [options]=\"column.options\"\n              [defaultOption]=\"column.defaultOption??true\"\n              [ngModel]=\"row | property:column.name\"\n              (ngModelChange)=\"setNestedProperty(row, column.name, $event);\"\n              [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n              (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\"\n              (keydown.enter)=\"handleKeydownEnter($event)\"\n            ></vd-select>\n            }\n          </mat-form-field>\n          } @if (formArray) {\n          <ng-container\n            [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"recursiveContainer\"\n              [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n            ></ng-container>\n          </ng-container>\n          } }\n          <!-- #endregion -->\n          <!-- #region Action -->\n          @case (ColumnType.Action) { @if (column.menu) { @if (menu?.matMenu &&\n          !row.locked && hasVisibleRowMenuItems(row, column)) {\n          <div\n            id=\"menu-{{row.id}}\"\n            style=\"visibility: hidden; position: fixed\"\n            #contextMenuTrigger=\"matMenuTrigger\"\n            [matMenuTriggerFor]=\"menu.matMenu!\"\n          ></div>\n          }\n          <vd-dynamic-menu\n            [items]=\"[column.menu]\"\n            [data]=\"row\"\n            [context]=\"context\"\n            #menu\n          ></vd-dynamic-menu>\n          } }\n          <!-- #endregion -->\n          <!-- #region Menu -->\n          @case (ColumnType.Menu) { @if (column.menu) {\n          <vd-dynamic-menu\n            [items]=\"[column.menu]\"\n            [data]=\"row\"\n            [context]=\"context\"\n          ></vd-dynamic-menu>\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\n              fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n              [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n              >{{handleExpression($safeNavigationMigration(column.icon?.matIcon)!,\n              row)}}</mat-icon\n            >\n            } @if (column.icon?.svgIcon) {\n            <mat-icon\n              fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n              [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n              [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon?.svgIcon)!, row)!\"\n            ></mat-icon>\n            } @if (column.icon?.fontIcon) {\n            <mat-icon\n              fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n              [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n              [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon?.fontIcon)!, row)!\"\n            ></mat-icon>\n            }\n          </span>\n          }\n          <!-- #endregion -->\n          <!-- #region icon button -->\n          @case (ColumnType.IconButton) {\n          <a\n            mat-icon-button\n            (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\"\n          >\n            <mat-icon\n              fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\"\n              [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\"\n              >{{handleExpression(column.iconButton?.icon??'radio_button_checked',\n              row) || 'radio_button_checked'}}</mat-icon\n            >\n          </a>\n          }\n          <!-- #endregion -->\n          <!-- #region Other column types -->\n          @default {\n          <span [innerHtml]=\"rowValue??''\"></span>\n          }\n          <!-- #endregion -->\n          }\n          <ng-template\n            #recursiveContainer\n            let-columnNameSegments=\"segments\"\n            let-formGroup=\"formGroup\"\n            let-parentFormGroup=\"parentFormGroup\"\n          >\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) { @switch (column.type) {\n              <!-- #region Toggle column -->\n              @case (ColumnType.Toggle) {\n              <mat-slide-toggle\n                [formControl]=\"formGroup\"\n                (click)=\"$event.stopPropagation();\"\n                (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\"\n                [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n                color=\"accent\"\n              ></mat-slide-toggle>\n              }\n              <!-- #endregion -->\n              <!-- #region Text Input column -->\n              @case (ColumnType.TextInput) {\n              <mat-form-field\n                appearance=\"outline\"\n                subscriptSizing=\"dynamic\"\n                dense-3\n                layout=\"column\"\n                layout-align=\"center start\"\n                (click)=\"$event.stopPropagation();\"\n              >\n                <input\n                  matInput\n                  [formControl]=\"formGroup\"\n                  type=\"{{column.inputType}}\"\n                  autocomplete=\"none\"\n                  [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n                  [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\"\n                  [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\"\n                  (keydown.enter)=\"handleKeydownEnter($event)\"\n                />\n              </mat-form-field>\n              }\n              <!-- #endregion -->\n              <!-- #region VD-Select column -->\n              @case (ColumnType.Select) {\n              <mat-form-field\n                appearance=\"outline\"\n                subscriptSizing=\"dynamic\"\n                dense-3\n                layout=\"column\"\n                layout-align=\"center start\"\n                (click)=\"$event.stopPropagation();\"\n              >\n                <vd-select\n                  [formControl]=\"formGroup\"\n                  [enum]=\"column.enumType\"\n                  [enumMetadata]=\"column.enumMetadata\"\n                  [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\"\n                  [prefix]=\"column.enumPrefix\"\n                  [options]=\"column.options\"\n                  [defaultOption]=\"column.defaultOption??true\"\n                  [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n                  (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\"\n                  (keydown.enter)=\"handleKeydownEnter($event)\"\n                ></vd-select>\n              </mat-form-field>\n              }\n              <!-- #endregion -->\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\n                  [ngTemplateOutlet]=\"recursiveContainer\"\n                  [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"\n                ></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) { @for (column of columns$ | async; track\n    column) {\n    <ng-container\n      cdkColumnDef=\"filter.{{column.filter || column.name}}\"\n      [sticky]=\"column.sticky\"\n      [stickyEnd]=\"column.stickyEnd\"\n    >\n      <th\n        mat-header-cell\n        *cdkHeaderCellDef\n        [hidden]=\"column.hidden\"\n        [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        [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      >\n        <!-- #region Select filter -->\n        @if(column.endpoint || column.enumType || column.options){\n        <span\n          filter-select\n          [endpoint]=\"column.endpoint\"\n          [enum]=\"column.enumType\"\n          [enumMetadata]=\"column.enumMetadata\"\n          [enumFilter]=\"column.enumFilter | func:{}:context\"\n          [prefix]=\"column.enumPrefix\"\n          [options]=\"column.options\"\n          [text]=\"column.filterOptionText || 'name'\"\n        ></span>\n        }\n        <!-- #region Text filter -->\n        @else if(column.type == ColumnType.Text || column.type ==\n        ColumnType.TextInput || column.type == ColumnType.Number) {\n        <span\n          filter-input\n          [onlyNumber]=\"column.filterInputNumber??false\"\n          [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\"\n          [matTooltipClass]=\"column.filterTooltipClass??''\"\n          [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"\n        ></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    <!-- #endregion -->\n\n    <!-- #region Details column -->\n    <ng-container cdkColumnDef=\"expandedDetail\">\n      <td\n        mat-cell\n        *matCellDef=\"let row; let index = index\"\n        [attr.colspan]=\"(displayedColumns$ | async)?.length\"\n      >\n        <div\n          class=\"row-detail\"\n          [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\"\n          #detailsTemplate\n        >\n          @if (templateRef && row === expandedRow) {\n          <ng-container\n            *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"\n          ></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\n      mat-header-row\n      *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"\n    ></tr>\n    <tr\n      mat-row\n      *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\"\n      [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"\n      [class.expanded-row]=\"expandedRow === row\"\n      (click)=\"handleRowClick(index, row)\"\n      (contextmenu)=\"handleRowRightClick($event, row)\"\n    ></tr>\n\n    <!-- #region Detrails row -->\n    @if (detailsTemplate || templateRef) {\n    <tr\n      mat-row\n      *cdkRowDef=\"let row; columns: ['expandedDetail']\"\n      class=\"detail-row\"\n      [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"\n    ></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\">\n        Try adjusting your filters or search criteria.\n      </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\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    showFirstLastButtons=\"true\"\n  ></mat-paginator>\n  }\n</div>\n", 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$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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.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: i7.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: "22.0.7", 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) {\r\n    <div class=\"loading-progress\">\r\n        @if (dataSource?.isLoading) {\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        }\r\n    </div>\r\n}\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\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>\r\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n            <!-- #region Column def -->\r\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\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'\">\r\n                        @if (column.type == ColumnType.Checkbox) {\r\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>\r\n                        } @if (column.type != ColumnType.Checkbox) {\r\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n                        }\r\n                    </th>\r\n                </ng-template>\r\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}\">\r\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n                        @switch (column.type) {\r\n                            <!-- #region Checkbox column -->\r\n                            @case (ColumnType.Checkbox) {\r\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>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Enum column -->\r\n                            @case (ColumnType.Enum) {\r\n                                <span>\r\n                                    @if (column.enumMetadata) {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index) {\r\n                                                @if (i < 2) {\r\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n                                                }\r\n                                                @if (i === 1 && rowValue?.length > 2) {\r\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n                                                }\r\n                                            }\r\n                                            <ng-template #template let-displayValue=\"displayValue\">\r\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n                                                    <span>{{ displayValue }}</span>\r\n                                                </mat-chip-row>\r\n                                            </ng-template>\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n                                            }\r\n                                        }\r\n                                    } @else {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n                                                <div>\r\n                                                    @if (i<2) {\r\n                                                        <small>\r\n                                                            <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                                        </small>\r\n                                                    } @if (i==1 && rowValue?.length > 2) {\r\n                                                        <small>, ...</small>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Toggle column -->\r\n                            @case (ColumnType.Toggle) {\r\n                                @if (!formArray) {\r\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>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Date column -->\r\n                            @case (ColumnType.Date) {\r\n                                <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Text Input column -->\r\n                            @case (ColumnType.TextInput) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\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)\" />\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region VD-Select column -->\r\n                            @case (ColumnType.Select) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [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>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Action -->\r\n                            @case (ColumnType.Action) {\r\n                                @if (column.menu) {\r\n                                    @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n                                        <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n                                    }\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Menu -->\r\n                            @case (ColumnType.Menu) {\r\n                                @if (column.menu) {\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon -->\r\n                            @case (ColumnType.Icon) {\r\n                                <span layout=\"row\" layout-align=\"start center\">\r\n                                    @if(column && column.icon){\r\n                                        @if ( column.icon.matIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n                                        }\r\n                                        @if (column.icon.svgIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                        @if (column.icon.fontIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon button -->\r\n                            @case (ColumnType.IconButton) {\r\n                                <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\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>\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Other column types -->\r\n                            @default {\r\n                                <span [innerHtml]=\"rowValue??''\"></span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                        <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n                            @if (formGroup) {\r\n                                <ng-container [formGroup]=\"formGroup\">\r\n                                    <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n                                    @if (!columnNameSegments.length) {\r\n                                        @switch (column.type) {\r\n                                            <!-- #region Toggle column -->\r\n                                            @case (ColumnType.Toggle) {\r\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>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region Text Input column -->\r\n                                            @case (ColumnType.TextInput) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\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)\" />\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region VD-Select column -->\r\n                                            @case (ColumnType.Select) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [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>\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                        }\r\n                                    } @else {\r\n                                        <!-- If not the last segment, create a nested form group -->\r\n                                        <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n                                            <!-- Recursive call to handle nested segments -->\r\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n                                        </ng-container>\r\n                                    }\r\n                                </ng-container>\r\n                            }\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        }\r\n\r\n        <!-- #region Filter row -->\r\n        @if (dataSource && filterable) {\r\n            @for (column of columns$ | async; track column) {\r\n                <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\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}\">\r\n                        <!-- #region Select filter -->\r\n                        @if(column.endpoint || column.enumType || column.options){\r\n                            <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n                        }\r\n                        <!-- #region Text filter -->\r\n                        @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n                            <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Date filter -->\r\n                        @else if (column.type == ColumnType.Date) {\r\n                            <span filter-date></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Action filter (clear) -->\r\n                        @else if (column.type == ColumnType.Action) {\r\n                            <span filter-clear></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                    </th>\r\n                </ng-container>\r\n            }\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Details column -->\r\n        <ng-container cdkColumnDef=\"expandedDetail\">\r\n            <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n                <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n                    @if (templateRef && row === expandedRow) {\r\n                        <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n                    }\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Filter header -->\r\n        @if (filterable) {\r\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\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>\r\n\r\n        <!-- #region Detrails row -->\r\n        @if (detailsTemplate || templateRef) {\r\n            <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n    </table>\r\n\r\n    <!-- #region Modern No Results Message -->\r\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n        <div class=\"no-results-overlay\">\r\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n            <div class=\"no-results-text mat-body-1\">\r\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n                <p i18n=\"@@tryAdjustFilters\">\r\n                    Try adjusting your filters or search criteria.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    }\r\n    <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n    <code>\r\n  <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n    <ng-content select=\"[table-footer]\"></ng-content>\r\n    <span flex></span>\r\n    @if (paginable) {\r\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    }\r\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$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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.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: i7.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", 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: "component", type: MsaEnumDisplayComponent, selector: "msa-enum-display", inputs: ["value", "enumType", "metadata", "showIcon", "entity", "context"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: 
                 //----------------------
-                MapPipe, name: "map" }, { kind: "pipe", type: EnumPipe, name: "enum" }, { kind: "pipe", type: FormGroupPipe, name: "formGroup" }, { kind: "pipe", type: FuncPipe, name: "func" }, { kind: "pipe", type: JoinPipe, name: "join" }, { kind: "pipe", type: PropertyPipe, name: "property" }], animations: [
+                MapPipe, name: "map" }, { kind: "pipe", type: FormGroupPipe, name: "formGroup" }, { kind: "pipe", type: FuncPipe, name: "func" }, { kind: "pipe", type: JoinPipe, name: "join" }, { kind: "pipe", type: PropertyPipe, name: "property" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: AUTO_STYLE })),
@@ -18481,7 +18476,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         //----------------------
                         DataSourceFilterDirective,
                         DisableControlDirective,
-                        EnumPipe,
                         FilterDateComponent,
                         FilterInputComponent,
                         FilterSelectComponent,
@@ -18492,13 +18486,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         PropertyPipe,
                         VdDynamicMenuComponent,
                         VdSelectComponent,
+                        MsaEnumDisplayComponent
                     ], changeDetection: ChangeDetectionStrategy.Eager, animations: [
                         trigger('detailExpand', [
                             state('collapsed', style({ height: '0px', minHeight: '0' })),
                             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\n  class=\"mat-table-container scrollbar-secondary\"\n  [ngClass]=\"{'mat-table-sticky': sticky}\"\n  #scrollContainer\n>\n  <table\n    mat-table\n    #table\n    [dataSource]=\"dataSource\"\n    [dataSourceFilter]=\"dataSourceFilter\"\n    [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\"\n    [trackBy]=\"trackBy\"\n    matSort\n    matSortDisableClear\n    [matSortActive]=\"sortActive||'id'\"\n    [matSortDirection]=\"sortDirection\"\n    multiTemplateDataRows\n  >\n    @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n    <!-- #region Column def -->\n    <ng-container\n      [cdkColumnDef]=\"column.name\"\n      [sticky]=\"column.sticky\"\n      [stickyEnd]=\"column.stickyEnd\"\n    >\n      <ng-template\n        #header\n        [ngTemplateOutlet]=\"header\"\n        let-headerText=\"headerText\"\n        [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\"\n      >\n        <th\n          mat-header-cell\n          *cdkHeaderCellDef\n          [mat-sort-header]=\"column.sortBy || column.name\"\n          [hidden]=\"column.hidden\"\n          [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          [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\"\n          [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          [arrowPosition]=\"column.arrowBefore?'before':'after'\"\n        >\n          @if (column.type == ColumnType.Checkbox) {\n          <mat-checkbox\n            (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\"\n            [disabled]=\"!dataSource.paginator?.length\"\n            [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\"\n            [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"\n          ></mat-checkbox>\n          } @if (column.type != ColumnType.Checkbox) {\n          <span [matTooltip]=\"headerText\">{{headerText}}</span>\n          }\n        </th>\n      </ng-template>\n      <td\n        mat-cell\n        *cdkCellDef=\"let row; let rowIndex = dataIndex\"\n        [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\"\n        [matTooltipClass]=\"column.tooltipClass??''\"\n        [hidden]=\"column.hidden\"\n        [ngClass]=\"getRowClasses(column, row)\"\n        [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      >\n        <ng-template\n          #rowVal\n          [ngTemplateOutlet]=\"rowVal\"\n          let-rowValue\n          [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\"\n        >\n          @switch (column.type) {\n          <!-- #region Checkbox column -->\n          @case (ColumnType.Checkbox) {\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\"\n            [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n            [checked]=\"dataSource.selectionModel.isSelected(row)\"\n          ></mat-checkbox>\n          }\n          <!-- #endregion -->\n          <!-- #region Enum column -->\n          @case (ColumnType.Enum) {\n          <span>\n            @if (column.enumMetadata) { @if (column.multiple) { @for (item of\n            rowValue; track item; let i = $index) { @if (i < 2) {\n            <ng-template\n              let-displayValue=\"displayValue\"\n              [ngTemplateOutlet]=\"template\"\n              [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"\n            ></ng-template>\n            } @if (i === 1 && rowValue?.length > 2) {\n            <small\n              [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\"\n              matTooltipClass=\"mat-tooltip-multiline\"\n              >...</small\n            >\n            } }\n            <ng-template #template let-displayValue=\"displayValue\">\n              <mat-chip-row\n                disableRipple=\"true\"\n                selectable=\"false\"\n                [matTooltip]=\"displayValue\"\n              >\n                <span>{{ displayValue }}</span>\n              </mat-chip-row>\n            </ng-template>\n            } @else { @if (rowValue >= 0) {\n            <span\n              class=\"na\"\n              [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\"\n              [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"\n            ></span>\n            } } } @else { @if (column.multiple) { @for (item of rowValue; track\n            item; let i = $index; let last = $last) {\n            <div>\n              @if (i<2) {\n              <small i18n=\"@@selection\"\n                >{item | enum:column.enumType:column.enumPrefix, select, type\n                {type} other {{{item |\n                enum:column.enumType:column.enumPrefix}}}}</small\n              >\n              } @if (i==1 && rowValue?.length > 2) {\n              <small>, ...</small>\n              }\n            </div>\n            } } @else { @if (rowValue >= 0) {\n            <span i18n=\"@@selection\"\n              >{rowValue | enum:column.enumType:column.enumPrefix, select, type\n              {type} other {{{rowValue |\n              enum:column.enumType:column.enumPrefix}}}}</span\n            >\n            } } }\n          </span>\n          }\n          <!-- #endregion -->\n          <!-- #region Toggle column -->\n          @case (ColumnType.Toggle) { @if (!formArray) {\n          <mat-slide-toggle\n            [ngModel]=\"row | property:column.name\"\n            (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\"\n            (click)=\"$event.stopPropagation();\"\n            [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n            color=\"accent\"\n          ></mat-slide-toggle>\n          } @if (formArray) {\n          <ng-container\n            [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"recursiveContainer\"\n              [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n            ></ng-container>\n          </ng-container>\n          } }\n          <!-- #endregion -->\n          <!-- #region Date column -->\n          @case (ColumnType.Date) {\n          <span\n            >{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy\n            HH:mm:ss'}}</span\n          >\n          }\n          <!-- #endregion -->\n          <!-- #region Text Input column -->\n          @case (ColumnType.TextInput) { @if (!formArray) {\n          <mat-form-field\n            appearance=\"outline\"\n            layout=\"column\"\n            layout-align=\"center start\"\n            subscriptSizing=\"dynamic\"\n            dense-3\n            (click)=\"$event.stopPropagation();\"\n          >\n            @if (!formArray) {\n            <input\n              matInput\n              type=\"{{column.inputType}}\"\n              autocomplete=\"none\"\n              name=\"{{column.name}}{{rowIndex}}\"\n              [ngModel]=\"row | property:column.name\"\n              [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n              [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\"\n              [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\"\n              (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\"\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\n              (keydown.enter)=\"handleKeydownEnter($event)\"\n            />\n            }\n          </mat-form-field>\n          } @if (formArray) {\n          <ng-container\n            [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"recursiveContainer\"\n              [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n            ></ng-container>\n          </ng-container>\n          } }\n          <!-- #endregion -->\n          <!-- #region VD-Select column -->\n          @case (ColumnType.Select) { @if (!formArray) {\n          <mat-form-field\n            appearance=\"outline\"\n            layout=\"column\"\n            layout-align=\"center start\"\n            subscriptSizing=\"dynamic\"\n            dense-3\n            (click)=\"$event.stopPropagation();\"\n          >\n            @if (!formArray) {\n            <vd-select\n              name=\"{{column.name}}{{rowIndex}}\"\n              [enum]=\"column.enumType\"\n              [enumMetadata]=\"column.enumMetadata\"\n              [enumFilter]=\"$safeNavigationMigration(column?.enumFilter)  | func:row:context\"\n              [prefix]=\"column.enumPrefix\"\n              [options]=\"column.options\"\n              [defaultOption]=\"column.defaultOption??true\"\n              [ngModel]=\"row | property:column.name\"\n              (ngModelChange)=\"setNestedProperty(row, column.name, $event);\"\n              [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n              (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\"\n              (keydown.enter)=\"handleKeydownEnter($event)\"\n            ></vd-select>\n            }\n          </mat-form-field>\n          } @if (formArray) {\n          <ng-container\n            [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"recursiveContainer\"\n              [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n            ></ng-container>\n          </ng-container>\n          } }\n          <!-- #endregion -->\n          <!-- #region Action -->\n          @case (ColumnType.Action) { @if (column.menu) { @if (menu?.matMenu &&\n          !row.locked && hasVisibleRowMenuItems(row, column)) {\n          <div\n            id=\"menu-{{row.id}}\"\n            style=\"visibility: hidden; position: fixed\"\n            #contextMenuTrigger=\"matMenuTrigger\"\n            [matMenuTriggerFor]=\"menu.matMenu!\"\n          ></div>\n          }\n          <vd-dynamic-menu\n            [items]=\"[column.menu]\"\n            [data]=\"row\"\n            [context]=\"context\"\n            #menu\n          ></vd-dynamic-menu>\n          } }\n          <!-- #endregion -->\n          <!-- #region Menu -->\n          @case (ColumnType.Menu) { @if (column.menu) {\n          <vd-dynamic-menu\n            [items]=\"[column.menu]\"\n            [data]=\"row\"\n            [context]=\"context\"\n          ></vd-dynamic-menu>\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\n              fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n              [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n              >{{handleExpression($safeNavigationMigration(column.icon?.matIcon)!,\n              row)}}</mat-icon\n            >\n            } @if (column.icon?.svgIcon) {\n            <mat-icon\n              fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n              [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n              [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon?.svgIcon)!, row)!\"\n            ></mat-icon>\n            } @if (column.icon?.fontIcon) {\n            <mat-icon\n              fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n              [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n              [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon?.fontIcon)!, row)!\"\n            ></mat-icon>\n            }\n          </span>\n          }\n          <!-- #endregion -->\n          <!-- #region icon button -->\n          @case (ColumnType.IconButton) {\n          <a\n            mat-icon-button\n            (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\"\n          >\n            <mat-icon\n              fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\"\n              [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\"\n              >{{handleExpression(column.iconButton?.icon??'radio_button_checked',\n              row) || 'radio_button_checked'}}</mat-icon\n            >\n          </a>\n          }\n          <!-- #endregion -->\n          <!-- #region Other column types -->\n          @default {\n          <span [innerHtml]=\"rowValue??''\"></span>\n          }\n          <!-- #endregion -->\n          }\n          <ng-template\n            #recursiveContainer\n            let-columnNameSegments=\"segments\"\n            let-formGroup=\"formGroup\"\n            let-parentFormGroup=\"parentFormGroup\"\n          >\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) { @switch (column.type) {\n              <!-- #region Toggle column -->\n              @case (ColumnType.Toggle) {\n              <mat-slide-toggle\n                [formControl]=\"formGroup\"\n                (click)=\"$event.stopPropagation();\"\n                (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\"\n                [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n                color=\"accent\"\n              ></mat-slide-toggle>\n              }\n              <!-- #endregion -->\n              <!-- #region Text Input column -->\n              @case (ColumnType.TextInput) {\n              <mat-form-field\n                appearance=\"outline\"\n                subscriptSizing=\"dynamic\"\n                dense-3\n                layout=\"column\"\n                layout-align=\"center start\"\n                (click)=\"$event.stopPropagation();\"\n              >\n                <input\n                  matInput\n                  [formControl]=\"formGroup\"\n                  type=\"{{column.inputType}}\"\n                  autocomplete=\"none\"\n                  [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n                  [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\"\n                  [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\"\n                  (keydown.enter)=\"handleKeydownEnter($event)\"\n                />\n              </mat-form-field>\n              }\n              <!-- #endregion -->\n              <!-- #region VD-Select column -->\n              @case (ColumnType.Select) {\n              <mat-form-field\n                appearance=\"outline\"\n                subscriptSizing=\"dynamic\"\n                dense-3\n                layout=\"column\"\n                layout-align=\"center start\"\n                (click)=\"$event.stopPropagation();\"\n              >\n                <vd-select\n                  [formControl]=\"formGroup\"\n                  [enum]=\"column.enumType\"\n                  [enumMetadata]=\"column.enumMetadata\"\n                  [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\"\n                  [prefix]=\"column.enumPrefix\"\n                  [options]=\"column.options\"\n                  [defaultOption]=\"column.defaultOption??true\"\n                  [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n                  (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\"\n                  (keydown.enter)=\"handleKeydownEnter($event)\"\n                ></vd-select>\n              </mat-form-field>\n              }\n              <!-- #endregion -->\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\n                  [ngTemplateOutlet]=\"recursiveContainer\"\n                  [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"\n                ></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) { @for (column of columns$ | async; track\n    column) {\n    <ng-container\n      cdkColumnDef=\"filter.{{column.filter || column.name}}\"\n      [sticky]=\"column.sticky\"\n      [stickyEnd]=\"column.stickyEnd\"\n    >\n      <th\n        mat-header-cell\n        *cdkHeaderCellDef\n        [hidden]=\"column.hidden\"\n        [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        [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      >\n        <!-- #region Select filter -->\n        @if(column.endpoint || column.enumType || column.options){\n        <span\n          filter-select\n          [endpoint]=\"column.endpoint\"\n          [enum]=\"column.enumType\"\n          [enumMetadata]=\"column.enumMetadata\"\n          [enumFilter]=\"column.enumFilter | func:{}:context\"\n          [prefix]=\"column.enumPrefix\"\n          [options]=\"column.options\"\n          [text]=\"column.filterOptionText || 'name'\"\n        ></span>\n        }\n        <!-- #region Text filter -->\n        @else if(column.type == ColumnType.Text || column.type ==\n        ColumnType.TextInput || column.type == ColumnType.Number) {\n        <span\n          filter-input\n          [onlyNumber]=\"column.filterInputNumber??false\"\n          [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\"\n          [matTooltipClass]=\"column.filterTooltipClass??''\"\n          [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"\n        ></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    <!-- #endregion -->\n\n    <!-- #region Details column -->\n    <ng-container cdkColumnDef=\"expandedDetail\">\n      <td\n        mat-cell\n        *matCellDef=\"let row; let index = index\"\n        [attr.colspan]=\"(displayedColumns$ | async)?.length\"\n      >\n        <div\n          class=\"row-detail\"\n          [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\"\n          #detailsTemplate\n        >\n          @if (templateRef && row === expandedRow) {\n          <ng-container\n            *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"\n          ></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\n      mat-header-row\n      *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"\n    ></tr>\n    <tr\n      mat-row\n      *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\"\n      [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"\n      [class.expanded-row]=\"expandedRow === row\"\n      (click)=\"handleRowClick(index, row)\"\n      (contextmenu)=\"handleRowRightClick($event, row)\"\n    ></tr>\n\n    <!-- #region Detrails row -->\n    @if (detailsTemplate || templateRef) {\n    <tr\n      mat-row\n      *cdkRowDef=\"let row; columns: ['expandedDetail']\"\n      class=\"detail-row\"\n      [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"\n    ></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\">\n        Try adjusting your filters or search criteria.\n      </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\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    showFirstLastButtons=\"true\"\n  ></mat-paginator>\n  }\n</div>\n", 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) {\r\n    <div class=\"loading-progress\">\r\n        @if (dataSource?.isLoading) {\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        }\r\n    </div>\r\n}\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\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>\r\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n            <!-- #region Column def -->\r\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\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'\">\r\n                        @if (column.type == ColumnType.Checkbox) {\r\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>\r\n                        } @if (column.type != ColumnType.Checkbox) {\r\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n                        }\r\n                    </th>\r\n                </ng-template>\r\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}\">\r\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n                        @switch (column.type) {\r\n                            <!-- #region Checkbox column -->\r\n                            @case (ColumnType.Checkbox) {\r\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>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Enum column -->\r\n                            @case (ColumnType.Enum) {\r\n                                <span>\r\n                                    @if (column.enumMetadata) {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index) {\r\n                                                @if (i < 2) {\r\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n                                                }\r\n                                                @if (i === 1 && rowValue?.length > 2) {\r\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n                                                }\r\n                                            }\r\n                                            <ng-template #template let-displayValue=\"displayValue\">\r\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n                                                    <span>{{ displayValue }}</span>\r\n                                                </mat-chip-row>\r\n                                            </ng-template>\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n                                            }\r\n                                        }\r\n                                    } @else {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n                                                <div>\r\n                                                    @if (i<2) {\r\n                                                        <small>\r\n                                                            <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                                        </small>\r\n                                                    } @if (i==1 && rowValue?.length > 2) {\r\n                                                        <small>, ...</small>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Toggle column -->\r\n                            @case (ColumnType.Toggle) {\r\n                                @if (!formArray) {\r\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>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Date column -->\r\n                            @case (ColumnType.Date) {\r\n                                <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Text Input column -->\r\n                            @case (ColumnType.TextInput) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\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)\" />\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region VD-Select column -->\r\n                            @case (ColumnType.Select) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [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>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Action -->\r\n                            @case (ColumnType.Action) {\r\n                                @if (column.menu) {\r\n                                    @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n                                        <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n                                    }\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Menu -->\r\n                            @case (ColumnType.Menu) {\r\n                                @if (column.menu) {\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon -->\r\n                            @case (ColumnType.Icon) {\r\n                                <span layout=\"row\" layout-align=\"start center\">\r\n                                    @if(column && column.icon){\r\n                                        @if ( column.icon.matIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n                                        }\r\n                                        @if (column.icon.svgIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                        @if (column.icon.fontIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon button -->\r\n                            @case (ColumnType.IconButton) {\r\n                                <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\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>\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Other column types -->\r\n                            @default {\r\n                                <span [innerHtml]=\"rowValue??''\"></span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                        <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n                            @if (formGroup) {\r\n                                <ng-container [formGroup]=\"formGroup\">\r\n                                    <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n                                    @if (!columnNameSegments.length) {\r\n                                        @switch (column.type) {\r\n                                            <!-- #region Toggle column -->\r\n                                            @case (ColumnType.Toggle) {\r\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>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region Text Input column -->\r\n                                            @case (ColumnType.TextInput) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\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)\" />\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region VD-Select column -->\r\n                                            @case (ColumnType.Select) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [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>\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                        }\r\n                                    } @else {\r\n                                        <!-- If not the last segment, create a nested form group -->\r\n                                        <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n                                            <!-- Recursive call to handle nested segments -->\r\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n                                        </ng-container>\r\n                                    }\r\n                                </ng-container>\r\n                            }\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        }\r\n\r\n        <!-- #region Filter row -->\r\n        @if (dataSource && filterable) {\r\n            @for (column of columns$ | async; track column) {\r\n                <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\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}\">\r\n                        <!-- #region Select filter -->\r\n                        @if(column.endpoint || column.enumType || column.options){\r\n                            <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n                        }\r\n                        <!-- #region Text filter -->\r\n                        @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n                            <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Date filter -->\r\n                        @else if (column.type == ColumnType.Date) {\r\n                            <span filter-date></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Action filter (clear) -->\r\n                        @else if (column.type == ColumnType.Action) {\r\n                            <span filter-clear></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                    </th>\r\n                </ng-container>\r\n            }\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Details column -->\r\n        <ng-container cdkColumnDef=\"expandedDetail\">\r\n            <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n                <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n                    @if (templateRef && row === expandedRow) {\r\n                        <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n                    }\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Filter header -->\r\n        @if (filterable) {\r\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\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>\r\n\r\n        <!-- #region Detrails row -->\r\n        @if (detailsTemplate || templateRef) {\r\n            <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n    </table>\r\n\r\n    <!-- #region Modern No Results Message -->\r\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n        <div class=\"no-results-overlay\">\r\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n            <div class=\"no-results-text mat-body-1\">\r\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n                <p i18n=\"@@tryAdjustFilters\">\r\n                    Try adjusting your filters or search criteria.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    }\r\n    <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n    <code>\r\n  <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n    <ng-content select=\"[table-footer]\"></ng-content>\r\n    <span flex></span>\r\n    @if (paginable) {\r\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    }\r\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']
@@ -18650,7 +18645,6 @@ __decorate([
         maxWidth: 150,
         enumType: Grid,
         type: TableColumnType.Select,
-        enumPrefix: 'Grid_',
         defaultOption: false
     }),
     Display($localize `:@@display:Display`)
@@ -22480,7 +22474,7 @@ class VdChipsComponent extends AbstractMatFormField {
                 provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
                 useValue: { overlayPanelClass: 'vd-chips-autocomplete' }
             }
-        ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\r\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n            <span class=\"vd-chip-content\">\r\n                @if (!chipTemplate?.templateRef) {\r\n                    <span>\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{ chip }}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                        }\r\n                    </span>\r\n                }\r\n                @if (chipTemplate && chipTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n                }\r\n            </span>\r\n            @for (button of suffixButtons; track button; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if ((onLaunch.observers.length) > 0) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip-row>\r\n    }\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(!classType && opened)\r\n    {\r\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\r\n            <mat-option [value]=\"item\">\r\n                @if (!autocompleteOptionTemplate?.templateRef) {\r\n                    <span>{{item}}</span>\r\n                }\r\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                }\r\n            </mat-option>\r\n            <mat-divider *ngIf=\"!last\"></mat-divider>\r\n        }\r\n    }\r\n    @if (classType && opened) {\r\n        <mat-option hide=\"true\"></mat-option>\r\n        <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4$2.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i7.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\r\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n            <span class=\"vd-chip-content\">\r\n                @if (!chipTemplate?.templateRef) {\r\n                    <span>\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{ chip }}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                        }\r\n                    </span>\r\n                }\r\n                @if (chipTemplate && chipTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n                }\r\n            </span>\r\n            @for (button of suffixButtons; track button; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if ((onLaunch.observers.length) > 0) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip-row>\r\n    }\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(opened){\r\n        Class Type 2: {{ classType }}\r\n        @if(!classType)\r\n        {\r\n            <div>????</div>\r\n            @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\r\n                <mat-option [value]=\"item\">\r\n                    @if (!autocompleteOptionTemplate?.templateRef) {\r\n                        <span>{{item}}</span>\r\n                    }\r\n                    @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                        <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                    }\r\n                </mat-option>\r\n                @if(!last){\r\n                    <mat-divider></mat-divider>\r\n                }\r\n            }\r\n        }\r\n        @if (classType) {\r\n            <mat-option hide=\"true\"></mat-option>\r\n            <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n        }\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4$2.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i7.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdChipsComponent, decorators: [{
             type: Component,
@@ -22500,7 +22494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatIconModule,
                         MatInputModule,
                         VdDynamicTableComponent,
-                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\r\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n            <span class=\"vd-chip-content\">\r\n                @if (!chipTemplate?.templateRef) {\r\n                    <span>\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{ chip }}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                        }\r\n                    </span>\r\n                }\r\n                @if (chipTemplate && chipTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n                }\r\n            </span>\r\n            @for (button of suffixButtons; track button; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if ((onLaunch.observers.length) > 0) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip-row>\r\n    }\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(!classType && opened)\r\n    {\r\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\r\n            <mat-option [value]=\"item\">\r\n                @if (!autocompleteOptionTemplate?.templateRef) {\r\n                    <span>{{item}}</span>\r\n                }\r\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                }\r\n            </mat-option>\r\n            <mat-divider *ngIf=\"!last\"></mat-divider>\r\n        }\r\n    }\r\n    @if (classType && opened) {\r\n        <mat-option hide=\"true\"></mat-option>\r\n        <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"] }]
+                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\r\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n            <span class=\"vd-chip-content\">\r\n                @if (!chipTemplate?.templateRef) {\r\n                    <span>\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{ chip }}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                        }\r\n                    </span>\r\n                }\r\n                @if (chipTemplate && chipTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n                }\r\n            </span>\r\n            @for (button of suffixButtons; track button; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if ((onLaunch.observers.length) > 0) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip-row>\r\n    }\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(opened){\r\n        Class Type 2: {{ classType }}\r\n        @if(!classType)\r\n        {\r\n            <div>????</div>\r\n            @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\r\n                <mat-option [value]=\"item\">\r\n                    @if (!autocompleteOptionTemplate?.templateRef) {\r\n                        <span>{{item}}</span>\r\n                    }\r\n                    @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                        <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                    }\r\n                </mat-option>\r\n                @if(!last){\r\n                    <mat-divider></mat-divider>\r\n                }\r\n            }\r\n        }\r\n        @if (classType) {\r\n            <mat-option hide=\"true\"></mat-option>\r\n            <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n        }\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"] }]
         }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { dynamicTable: [{
                 type: ViewChild,
                 args: [VdDynamicTableComponent, { static: false }]
@@ -24242,6 +24236,265 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     `, styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
+/**
+ * @class MsaGenericFormMsaChipsFieldComponent
+ * @description Renders a VdChips case for `MsaGenericFormComponent`.
+ */
+class MsaGenericFormMsaChipsFieldComponent extends MsaGenericFormFieldBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormMsaChipsFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MsaGenericFormMsaChipsFieldComponent, isStandalone: true, selector: "msa-generic-form-msa-chips-field", usesInheritance: true, ngImport: i0, template: `Class Type 1: {{ field.classType }}
+        <mat-form-field [class]="field.cssClass">
+            <mat-label>{{field.label}}</mat-label>
+            <vd-chips #vdChip
+                      [formControlName]="field.name!"
+                      [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
+                      [params]="field.params || {} | func:formValue:formGroup:context"
+                      [searchField]="field.searchField"
+                      [searchFields]="field.searchFields"
+                      [filters]="field.filters"
+                      [selectFirst]="field.selectFirst"
+                      [classType]="field.classType"
+                      [projection]="field.projection"
+                      [key]="field.optionValueProperty"
+                      [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
+                      [removable]="!field.clear"
+                      [context]="context"
+                      [suffixButtons]="field.suffixButtons"
+                      [autocompleteCssClass]="field.autocompleteCssClass"
+                      (initSelect)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
+                      (selected)="!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)"
+                      (cleared)="field.clear && field.clear(formValue, formGroup, context);"
+                      [customValue]="field.customValue"
+                      layout="row"
+                      flex>
+                @if (field.chipTemplate; as chip) {
+                    <ng-template vd-chip let-chip="chip">
+                        <div [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></div>
+                    </ng-template>
+                } 
+                @if (field.autocompleteTemplate; as option) {
+                    <ng-template vd-autocomplete-option let-option="option">
+                        <div [outerHTML]="field.autocompleteTemplate(option, formValue, formGroup, context)"></div>
+                    </ng-template>
+                }                
+            </vd-chips>
+            @if (field.hint) {
+                <mat-hint>{{field.hint}}</mat-hint>
+            } 
+            @if (vdChip.emptyResult) {
+                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
+            } 
+            @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
+                <mat-error>{{errorMessage}}</mat-error>
+            }
+        </mat-form-field>
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "filters", "removable", "selectFirst", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormMsaChipsFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'msa-generic-form-msa-chips-field', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        FuncPipe,
+                        VdChipsComponent,
+                        VdChipDirective,
+                        VdAutocompleteOptionDirective
+                    ], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `Class Type 1: {{ field.classType }}
+        <mat-form-field [class]="field.cssClass">
+            <mat-label>{{field.label}}</mat-label>
+            <vd-chips #vdChip
+                      [formControlName]="field.name!"
+                      [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
+                      [params]="field.params || {} | func:formValue:formGroup:context"
+                      [searchField]="field.searchField"
+                      [searchFields]="field.searchFields"
+                      [filters]="field.filters"
+                      [selectFirst]="field.selectFirst"
+                      [classType]="field.classType"
+                      [projection]="field.projection"
+                      [key]="field.optionValueProperty"
+                      [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
+                      [removable]="!field.clear"
+                      [context]="context"
+                      [suffixButtons]="field.suffixButtons"
+                      [autocompleteCssClass]="field.autocompleteCssClass"
+                      (initSelect)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
+                      (selected)="!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)"
+                      (cleared)="field.clear && field.clear(formValue, formGroup, context);"
+                      [customValue]="field.customValue"
+                      layout="row"
+                      flex>
+                @if (field.chipTemplate; as chip) {
+                    <ng-template vd-chip let-chip="chip">
+                        <div [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></div>
+                    </ng-template>
+                } 
+                @if (field.autocompleteTemplate; as option) {
+                    <ng-template vd-autocomplete-option let-option="option">
+                        <div [outerHTML]="field.autocompleteTemplate(option, formValue, formGroup, context)"></div>
+                    </ng-template>
+                }                
+            </vd-chips>
+            @if (field.hint) {
+                <mat-hint>{{field.hint}}</mat-hint>
+            } 
+            @if (vdChip.emptyResult) {
+                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
+            } 
+            @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
+                <mat-error>{{errorMessage}}</mat-error>
+            }
+        </mat-form-field>
+    `, styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/**
+ * VdListOptionDirective class
+ */
+class VdListOptionDirective extends CdkPortal {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListOptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: VdListOptionDirective, isStandalone: true, selector: "[vd-list-option]ng-template", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vd-list-option]ng-template'
+                }]
+        }] });
+
+class VdListComponent extends AbstractSelectFormField {
+    /**
+     * Option template
+     */
+    optionTemplate;
+    /**
+     * The select element.
+     */
+    selectEl;
+    /**
+     * The select element.
+     */
+    filterInput;
+    /**
+     * Whether the select has a value.
+     */
+    get empty() { return this._readonly ? !this.currentValue : (this.selectEl?.selectedOptions?.isEmpty() ?? true); }
+    /**
+     * Constructor
+     */
+    constructor() {
+        super("vd-list");
+    }
+    /**
+     * Sets control focus
+     */
+    focus() {
+        this.selectEl?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\n            @if (!optionTemplate?.templateRef) {\n                <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\n                } @if (optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                }\n        </mat-list-option>\n        }\n        <!-- #endregion -->\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vd-list', host: { 'class': 'vd-list' }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], changeDetection: ChangeDetectionStrategy.Eager, imports: [
+                        CommonModule,
+                        MatSelectionList,
+                        MatListOption,
+                        FormsModule
+                    ], template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\n            @if (!optionTemplate?.templateRef) {\n                <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\n                } @if (optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                }\n        </mat-list-option>\n        }\n        <!-- #endregion -->\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
+                type: ContentChild,
+                args: [VdListOptionDirective]
+            }], selectEl: [{
+                type: ViewChild,
+                args: [MatSelectionList, { static: false }]
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput', { static: false }]
+            }] } });
+
+/**
+ * @class MsaGenericFormMsaListFieldComponent
+ * @description Renders a MsaList case for `MsaGenericFormComponent`.
+ */
+class MsaGenericFormMsaListFieldComponent extends MsaGenericFormFieldBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormMsaListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MsaGenericFormMsaListFieldComponent, isStandalone: true, selector: "msa-generic-form-msa-list-field", usesInheritance: true, ngImport: i0, template: `
+        <mat-form-field [class]="field.cssClass"
+                        floatLabel="always"
+                        class="form-field-type-list">
+            <mat-label>{{field.label}}</mat-label>
+            <vd-list [formControlName]="field.name!"
+                     [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
+                     [params]="field.params ??{} | func:formValue:formGroup:context"
+                     [projection]="field.projection"
+                     [mapper]="field.mapper"
+                     [compareWith]="field.compareWith"
+                     [loadData]="field.fetchCondition | func:formValue:formGroup:context"
+                     [optionValueProperty]="field.optionValueProperty"
+                     [optionTextProperty]="field.optionTextProperty"
+                     [multiple]="field.multiple"
+                     [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
+                     (itemSelected)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
+                     (itemChange)="field.itemChange && field.itemChange($event, formValue, formGroup, context);"
+                     [style.max-width]="field.maxWidth"
+                     [style.max-height]="field.maxHeight"
+                     flex>
+                @if (field.optionTemplate; as option) {
+                    <ng-template vd-list-option let-option="option">
+                        <span [outerHTML]="field.optionTemplate(option, formValue, formGroup, context)"></span>
+                    </ng-template>
+                }
+            </vd-list>
+            @if (field.hint) {
+                <mat-hint>{{field.hint}}</mat-hint>
+            } 
+            @for (errorMessage of  $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
+                <mat-error>{{errorMessage}}</mat-error>
+            }
+        </mat-form-field>
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormMsaListFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'msa-generic-form-msa-list-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, FuncPipe, VdListComponent], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
+        <mat-form-field [class]="field.cssClass"
+                        floatLabel="always"
+                        class="form-field-type-list">
+            <mat-label>{{field.label}}</mat-label>
+            <vd-list [formControlName]="field.name!"
+                     [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
+                     [params]="field.params ??{} | func:formValue:formGroup:context"
+                     [projection]="field.projection"
+                     [mapper]="field.mapper"
+                     [compareWith]="field.compareWith"
+                     [loadData]="field.fetchCondition | func:formValue:formGroup:context"
+                     [optionValueProperty]="field.optionValueProperty"
+                     [optionTextProperty]="field.optionTextProperty"
+                     [multiple]="field.multiple"
+                     [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
+                     (itemSelected)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
+                     (itemChange)="field.itemChange && field.itemChange($event, formValue, formGroup, context);"
+                     [style.max-width]="field.maxWidth"
+                     [style.max-height]="field.maxHeight"
+                     flex>
+                @if (field.optionTemplate; as option) {
+                    <ng-template vd-list-option let-option="option">
+                        <span [outerHTML]="field.optionTemplate(option, formValue, formGroup, context)"></span>
+                    </ng-template>
+                }
+            </vd-list>
+            @if (field.hint) {
+                <mat-hint>{{field.hint}}</mat-hint>
+            } 
+            @for (errorMessage of  $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
+                <mat-error>{{errorMessage}}</mat-error>
+            }
+        </mat-form-field>
+    `, styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
 /**
  * @class MsaGenericFormMsaSelectFieldComponent
  * @description Renders a MsaSelect case for `MsaGenericFormComponent`.
@@ -24758,7 +25011,7 @@ class MsaGenericFormSelectFieldComponent extends MsaGenericFormFieldBaseComponen
                         [disableControl]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
                         (selectionChange)="field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);"
                         flex>
-                @for (option of ($safeNavigationMigration(field?.options) | func:formValue:formGroup:context) ?? []; track option.id) {
+                @for (option of ($safeNavigationMigration(field.options) | func:formValue:formGroup:context) ?? []; track option.id) {
                     <mat-option [value]="option.id">{{option.name}}</mat-option>
                 }
             </mat-select>
@@ -24801,7 +25054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         [disableControl]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
                         (selectionChange)="field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);"
                         flex>
-                @for (option of ($safeNavigationMigration(field?.options) | func:formValue:formGroup:context) ?? []; track option.id) {
+                @for (option of ($safeNavigationMigration(field.options) | func:formValue:formGroup:context) ?? []; track option.id) {
                     <mat-option [value]="option.id">{{option.name}}</mat-option>
                 }
             </mat-select>
@@ -25150,265 +25403,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     `, styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
-/**
- * VdListOptionDirective class
- */
-class VdListOptionDirective extends CdkPortal {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListOptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: VdListOptionDirective, isStandalone: true, selector: "[vd-list-option]ng-template", usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListOptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[vd-list-option]ng-template'
-                }]
-        }] });
-
-class VdListComponent extends AbstractSelectFormField {
-    /**
-     * Option template
-     */
-    optionTemplate;
-    /**
-     * The select element.
-     */
-    selectEl;
-    /**
-     * The select element.
-     */
-    filterInput;
-    /**
-     * Whether the select has a value.
-     */
-    get empty() { return this._readonly ? !this.currentValue : (this.selectEl?.selectedOptions?.isEmpty() ?? true); }
-    /**
-     * Constructor
-     */
-    constructor() {
-        super("vd-list");
-    }
-    /**
-     * Sets control focus
-     */
-    focus() {
-        this.selectEl?.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list\n  i18n-placeholder\n  [(ngModel)]=\"value\"\n  #select=\"matSelectionList\"\n  (selectionChange)=\"handleChange($event)\"\n  [multiple]=\"multiple\"\n  [compareWith]=\"compareWith??defaultCompareWith\"\n  [disabled]=\"disabled || readonly\"\n  [hideSingleSelectionIndicator]=\"false\"\n  flex\n>\n  <!-- #region Options -->\n  @for (option of filteredOptions; track option; let first = $first) {\n  <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\n    @if (!optionTemplate?.templateRef) {\n    <span i18n=\"@@selection\"\n      >{option[optionTextProperty], select, option {option} other\n      {{{option[optionTextProperty]}}}}</span\n    >\n    } @if (optionTemplate?.templateRef) {\n    <ng-template\n      [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate?.templateRef)!\"\n      [ngTemplateOutletContext]=\"{ option: option }\"\n    ></ng-template>\n    }\n  </mat-list-option>\n  }\n  <!-- #endregion -->\n</mat-selection-list>\n", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vd-list', host: { 'class': 'vd-list' }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], changeDetection: ChangeDetectionStrategy.Eager, imports: [
-                        CommonModule,
-                        MatSelectionList,
-                        MatListOption,
-                        FormsModule,
-                    ], template: "<mat-selection-list\n  i18n-placeholder\n  [(ngModel)]=\"value\"\n  #select=\"matSelectionList\"\n  (selectionChange)=\"handleChange($event)\"\n  [multiple]=\"multiple\"\n  [compareWith]=\"compareWith??defaultCompareWith\"\n  [disabled]=\"disabled || readonly\"\n  [hideSingleSelectionIndicator]=\"false\"\n  flex\n>\n  <!-- #region Options -->\n  @for (option of filteredOptions; track option; let first = $first) {\n  <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\n    @if (!optionTemplate?.templateRef) {\n    <span i18n=\"@@selection\"\n      >{option[optionTextProperty], select, option {option} other\n      {{{option[optionTextProperty]}}}}</span\n    >\n    } @if (optionTemplate?.templateRef) {\n    <ng-template\n      [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate?.templateRef)!\"\n      [ngTemplateOutletContext]=\"{ option: option }\"\n    ></ng-template>\n    }\n  </mat-list-option>\n  }\n  <!-- #endregion -->\n</mat-selection-list>\n", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
-                type: ContentChild,
-                args: [VdListOptionDirective]
-            }], selectEl: [{
-                type: ViewChild,
-                args: [MatSelectionList, { static: false }]
-            }], filterInput: [{
-                type: ViewChild,
-                args: ['filterInput', { static: false }]
-            }] } });
-
-/**
- * @class MsaGenericFormVdListFieldComponent
- * @description Renders a VdList case for `MsaGenericFormComponent`.
- */
-class MsaGenericFormVdListFieldComponent extends MsaGenericFormFieldBaseComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormVdListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MsaGenericFormVdListFieldComponent, isStandalone: true, selector: "msa-generic-form-vd-list-field", usesInheritance: true, ngImport: i0, template: `
-        <mat-form-field [class]="field.cssClass"
-                        floatLabel="always"
-                        class="form-field-type-list">
-            <mat-label>{{field.label}}</mat-label>
-            <vd-list [formControlName]="field.name!"
-                     [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
-                     [params]="field.params ??{} | func:formValue:formGroup:context"
-                     [projection]="field.projection"
-                     [mapper]="field.mapper"
-                     [compareWith]="field.compareWith"
-                     [loadData]="field.fetchCondition | func:formValue:formGroup:context"
-                     [optionValueProperty]="field.optionValueProperty"
-                     [optionTextProperty]="field.optionTextProperty"
-                     [multiple]="field.multiple"
-                     [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
-                     (itemSelected)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
-                     (itemChange)="field.itemChange && field.itemChange($event, formValue, formGroup, context);"
-                     [style.max-width]="field.maxWidth"
-                     [style.max-height]="field.maxHeight"
-                     flex>
-                @if (field.optionTemplate; as option) {
-                    <ng-template vd-list-option let-option="option">
-                        <span [outerHTML]="field.optionTemplate(option, formValue, formGroup, context)"></span>
-                    </ng-template>
-                }
-            </vd-list>
-            @if (field.hint) {
-                <mat-hint>{{field.hint}}</mat-hint>
-            } 
-            @for (errorMessage of  $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
-                <mat-error>{{errorMessage}}</mat-error>
-            }
-        </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormVdListFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'msa-generic-form-vd-list-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, FuncPipe, VdListComponent], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
-        <mat-form-field [class]="field.cssClass"
-                        floatLabel="always"
-                        class="form-field-type-list">
-            <mat-label>{{field.label}}</mat-label>
-            <vd-list [formControlName]="field.name!"
-                     [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
-                     [params]="field.params ??{} | func:formValue:formGroup:context"
-                     [projection]="field.projection"
-                     [mapper]="field.mapper"
-                     [compareWith]="field.compareWith"
-                     [loadData]="field.fetchCondition | func:formValue:formGroup:context"
-                     [optionValueProperty]="field.optionValueProperty"
-                     [optionTextProperty]="field.optionTextProperty"
-                     [multiple]="field.multiple"
-                     [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
-                     (itemSelected)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
-                     (itemChange)="field.itemChange && field.itemChange($event, formValue, formGroup, context);"
-                     [style.max-width]="field.maxWidth"
-                     [style.max-height]="field.maxHeight"
-                     flex>
-                @if (field.optionTemplate; as option) {
-                    <ng-template vd-list-option let-option="option">
-                        <span [outerHTML]="field.optionTemplate(option, formValue, formGroup, context)"></span>
-                    </ng-template>
-                }
-            </vd-list>
-            @if (field.hint) {
-                <mat-hint>{{field.hint}}</mat-hint>
-            } 
-            @for (errorMessage of  $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
-                <mat-error>{{errorMessage}}</mat-error>
-            }
-        </mat-form-field>
-    `, styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
-
-/**
- * @class MsaGenericFormVdChipsFieldComponent
- * @description Renders a VdChips case for `MsaGenericFormComponent`.
- */
-class MsaGenericFormVdChipsFieldComponent extends MsaGenericFormFieldBaseComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormVdChipsFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MsaGenericFormVdChipsFieldComponent, isStandalone: true, selector: "msa-generic-form-vdchips-field", usesInheritance: true, ngImport: i0, template: `
-        <mat-form-field [class]="field.cssClass">
-            <mat-label>{{field.label}}</mat-label>
-            <vd-chips #vdChip
-                      [formControlName]="field.name!"
-                      [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
-                      [params]="field.params || {} | func:formValue:formGroup:context"
-                      [searchField]="field.searchField"
-                      [searchFields]="field.searchFields"
-                      [filters]="field.filters"
-                      [selectFirst]="field.selectFirst"
-                      [classType]="field.classType"
-                      [projection]="field.projection"
-                      [key]="field.optionValueProperty"
-                      [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
-                      [removable]="!field.clear"
-                      [context]="context"
-                      [suffixButtons]="field.suffixButtons"
-                      [autocompleteCssClass]="field.autocompleteCssClass"
-                      (initSelect)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
-                      (selected)="!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)"
-                      (cleared)="field.clear && field.clear(formValue, formGroup, context);"
-                      [customValue]="field.customValue"
-                      layout="row"
-                      flex>
-                @if (field.chipTemplate; as chip) {
-                    <ng-template vd-chip let-chip="chip">
-                        <div [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></div>
-                    </ng-template>
-                } 
-                @if (field.autocompleteTemplate; as option) {
-                    <ng-template vd-autocomplete-option let-option="option">
-                        <div [outerHTML]="field.autocompleteTemplate(option, formValue, formGroup, context)"></div>
-                    </ng-template>
-                }
-            </vd-chips>
-            @if (field.hint) {
-                <mat-hint>{{field.hint}}</mat-hint>
-            } 
-            @if (vdChip.emptyResult) {
-                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
-            } 
-            @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
-                <mat-error>{{errorMessage}}</mat-error>
-            }
-        </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "filters", "removable", "selectFirst", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormVdChipsFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'msa-generic-form-vdchips-field', standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        MatFormFieldModule,
-                        FuncPipe,
-                        VdChipsComponent,
-                        VdChipDirective,
-                        VdAutocompleteOptionDirective
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
-        <mat-form-field [class]="field.cssClass">
-            <mat-label>{{field.label}}</mat-label>
-            <vd-chips #vdChip
-                      [formControlName]="field.name!"
-                      [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
-                      [params]="field.params || {} | func:formValue:formGroup:context"
-                      [searchField]="field.searchField"
-                      [searchFields]="field.searchFields"
-                      [filters]="field.filters"
-                      [selectFirst]="field.selectFirst"
-                      [classType]="field.classType"
-                      [projection]="field.projection"
-                      [key]="field.optionValueProperty"
-                      [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
-                      [removable]="!field.clear"
-                      [context]="context"
-                      [suffixButtons]="field.suffixButtons"
-                      [autocompleteCssClass]="field.autocompleteCssClass"
-                      (initSelect)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
-                      (selected)="!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)"
-                      (cleared)="field.clear && field.clear(formValue, formGroup, context);"
-                      [customValue]="field.customValue"
-                      layout="row"
-                      flex>
-                @if (field.chipTemplate; as chip) {
-                    <ng-template vd-chip let-chip="chip">
-                        <div [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></div>
-                    </ng-template>
-                } 
-                @if (field.autocompleteTemplate; as option) {
-                    <ng-template vd-autocomplete-option let-option="option">
-                        <div [outerHTML]="field.autocompleteTemplate(option, formValue, formGroup, context)"></div>
-                    </ng-template>
-                }
-            </vd-chips>
-            @if (field.hint) {
-                <mat-hint>{{field.hint}}</mat-hint>
-            } 
-            @if (vdChip.emptyResult) {
-                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
-            } 
-            @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
-                <mat-error>{{errorMessage}}</mat-error>
-            }
-        </mat-form-field>
-    `, styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
-
 /**
  * @class VdEditorDirective
  * @description The `VdEditorDirective` is a custom directive that attaches a `CdkPortal`
@@ -25915,13 +25909,13 @@ class VdGenericFormComponent {
         console.log(message, optionalParams);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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                                <msa-generic-form-text-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-text-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <msa-generic-form-textarea-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-textarea-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-enum-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <msa-generic-form-msa-select-field [field]=\"field\"\n                                                                   [formGroup]=\"formGroup\"\n                                                                   [readonly]=\"readonly ?? false\"\n                                                                   [context]=\"context\"\n                                                                   [attr.flex]=\"field.flex||0\"\n                                                                   layout-margin>\n                                </msa-generic-form-msa-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <msa-generic-form-vd-list-field [field]=\"field\"\n                                                                [formGroup]=\"formGroup\"\n                                                                [readonly]=\"readonly ?? false\"\n                                                                [context]=\"context\"\n                                                                [attr.flex]=\"field.flex||0\"\n                                                                layout-margin>\n                                </msa-generic-form-vd-list-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <msa-generic-form-chips-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [separatorKeysCodes]=\"separatorKeysCodes\"\n                                                              [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                              [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                              [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\"\n                                                              [addChip]=\"addChip.bind(this)\"\n                                                              [onPasteChips]=\"onPasteChips.bind(this)\"\n                                                              [removeChip]=\"removeChip.bind(this)\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-chips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <msa-generic-form-vdchips-field [field]=\"field\"\n                                                                [formGroup]=\"formGroup\"\n                                                                [readonly]=\"readonly ?? false\"\n                                                                [context]=\"context\"\n                                                                [attr.flex]=\"field.flex||0\"\n                                                                layout-margin>\n                                </msa-generic-form-vdchips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <msa-generic-form-select-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [readonly]=\"readonly ?? false\"\n                                                               [context]=\"context\"\n                                                               [attr.flex]=\"field.flex||0\"\n                                                               layout-margin>\n                                </msa-generic-form-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <msa-generic-form-autocomplete-field [field]=\"field\"\n                                                                     [formGroup]=\"formGroup\"\n                                                                     [readonly]=\"readonly ?? false\"\n                                                                     [context]=\"context\"\n                                                                     [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                                     [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                                     [attr.flex]=\"field.flex||0\"\n                                                                     layout-margin>\n                                </msa-generic-form-autocomplete-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <msa-generic-form-date-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                             [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\"\n                                                             [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-date-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <msa-generic-form-calendar-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                                 [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-calendar-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <msa-generic-form-color-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-color-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <msa-generic-form-checkbox-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\">\n                                </msa-generic-form-checkbox-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <msa-generic-form-radio-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-radio-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                <msa-generic-form-editor-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [editorTemplate]=\"editorTemplate\">\n                                </msa-generic-form-editor-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                <msa-generic-form-code-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [codeTemplate]=\"codeTemplate\">\n                                </msa-generic-form-code-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <msa-generic-form-file-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-file-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                <msa-generic-form-custom-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [customTemplate]=\"customTemplate\">\n                                </msa-generic-form-custom-field>\n                            }\n                            <!-- #endregion -->\n                        }\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]=\"$safeNavigationMigration(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            } @for (customField of customFieldsTemplates; track customField) {\n                @if(customField?.templateRef && customField.row ==  ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n\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\"\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        </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: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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                                <msa-generic-form-text-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-text-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <msa-generic-form-textarea-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-textarea-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-enum-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <msa-generic-form-msa-select-field [field]=\"field\"\n                                                                   [formGroup]=\"formGroup\"\n                                                                   [readonly]=\"readonly ?? false\"\n                                                                   [context]=\"context\"\n                                                                   [attr.flex]=\"field.flex||0\"\n                                                                   layout-margin>\n                                </msa-generic-form-msa-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <msa-generic-form-msa-list-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-msa-list-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <msa-generic-form-chips-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [separatorKeysCodes]=\"separatorKeysCodes\"\n                                                              [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                              [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                              [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\"\n                                                              [addChip]=\"addChip.bind(this)\"\n                                                              [onPasteChips]=\"onPasteChips.bind(this)\"\n                                                              [removeChip]=\"removeChip.bind(this)\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-chips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <msa-generic-form-msa-chips-field [field]=\"field\"\n                                                                  [formGroup]=\"formGroup\"\n                                                                  [readonly]=\"readonly ?? false\"\n                                                                  [context]=\"context\"\n                                                                  [attr.flex]=\"field.flex||0\"\n                                                                  layout-margin>\n                                </msa-generic-form-msa-chips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <msa-generic-form-select-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [readonly]=\"readonly ?? false\"\n                                                               [context]=\"context\"\n                                                               [attr.flex]=\"field.flex||0\"\n                                                               layout-margin>\n                                </msa-generic-form-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <msa-generic-form-autocomplete-field [field]=\"field\"\n                                                                     [formGroup]=\"formGroup\"\n                                                                     [readonly]=\"readonly ?? false\"\n                                                                     [context]=\"context\"\n                                                                     [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                                     [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                                     [attr.flex]=\"field.flex||0\"\n                                                                     layout-margin>\n                                </msa-generic-form-autocomplete-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <msa-generic-form-date-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                             [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\"\n                                                             [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-date-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <msa-generic-form-calendar-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                                 [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-calendar-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <msa-generic-form-color-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-color-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <msa-generic-form-checkbox-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\">\n                                </msa-generic-form-checkbox-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <msa-generic-form-radio-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-radio-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                <msa-generic-form-editor-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [editorTemplate]=\"editorTemplate\">\n                                </msa-generic-form-editor-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                <msa-generic-form-code-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [codeTemplate]=\"codeTemplate\">\n                                </msa-generic-form-code-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <msa-generic-form-file-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-file-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                <msa-generic-form-custom-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [customTemplate]=\"customTemplate\">\n                                </msa-generic-form-custom-field>\n                            }\n                            <!-- #endregion -->\n                        }\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]=\"$safeNavigationMigration(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            } @for (customField of customFieldsTemplates; track customField) {\n                @if(customField?.templateRef && customField.row ==  ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n\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\"\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        </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: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
                 //--------------------
                 MatAutocompleteModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: 
                 //--------------------
                 VdFileModule }, { kind: "component", type: 
                 //--------------------
-                MsaGenericFormAutocompleteFieldComponent, selector: "msa-generic-form-autocomplete-field", inputs: ["autocompleteFilteredOptions", "filterAutocomplete"] }, { kind: "component", type: MsaGenericFormCalendarFieldComponent, selector: "msa-generic-form-calendar-field", inputs: ["datePickerHeaderComponent", "handleCalendarFilterAsync"] }, { kind: "component", type: MsaGenericFormCheckboxFieldComponent, selector: "msa-generic-form-checkbox-field" }, { kind: "component", type: MsaGenericFormChipsFieldComponent, selector: "msa-generic-form-chips-field", inputs: ["separatorKeysCodes", "autocompleteFilteredOptions", "filterAutocomplete", "autocompleteValueSelected", "addChip", "onPasteChips", "removeChip"] }, { kind: "component", type: MsaGenericFormCodeFieldComponent, selector: "msa-generic-form-code-field", inputs: ["field", "formGroup", "codeTemplate"] }, { kind: "component", type: MsaGenericFormColorFieldComponent, selector: "msa-generic-form-color-field" }, { kind: "component", type: MsaGenericFormCustomFieldComponent, selector: "msa-generic-form-custom-field", inputs: ["field", "formGroup", "customTemplate"] }, { kind: "component", type: MsaGenericFormDateFieldComponent, selector: "msa-generic-form-date-field", inputs: ["datePickerHeaderComponent", "handleDatePickerFilterAsync", "handleDatePickerOpened"] }, { kind: "component", type: MsaGenericFormEditorFieldComponent, selector: "msa-generic-form-editor-field", inputs: ["field", "formGroup", "editorTemplate"] }, { kind: "component", type: MsaGenericFormEnumFieldComponent, selector: "msa-generic-form-enum-field" }, { kind: "component", type: MsaGenericFormFileFieldComponent, selector: "msa-generic-form-file-field" }, { kind: "component", type: MsaGenericFormRadioFieldComponent, selector: "msa-generic-form-radio-field" }, { kind: "component", type: MsaGenericFormSelectFieldComponent, selector: "msa-generic-form-select-field" }, { kind: "component", type: MsaGenericFormTextFieldComponent, selector: "msa-generic-form-text-field" }, { kind: "component", type: MsaGenericFormTextareaFieldComponent, selector: "msa-generic-form-textarea-field" }, { kind: "component", type: MsaGenericFormMsaSelectFieldComponent, selector: "msa-generic-form-msa-select-field" }, { kind: "component", type: MsaGenericFormVdChipsFieldComponent, selector: "msa-generic-form-vdchips-field" }, { kind: "component", type: MsaGenericFormVdListFieldComponent, selector: "msa-generic-form-vd-list-field" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: 
+                MsaGenericFormAutocompleteFieldComponent, selector: "msa-generic-form-autocomplete-field", inputs: ["autocompleteFilteredOptions", "filterAutocomplete"] }, { kind: "component", type: MsaGenericFormCalendarFieldComponent, selector: "msa-generic-form-calendar-field", inputs: ["datePickerHeaderComponent", "handleCalendarFilterAsync"] }, { kind: "component", type: MsaGenericFormCheckboxFieldComponent, selector: "msa-generic-form-checkbox-field" }, { kind: "component", type: MsaGenericFormChipsFieldComponent, selector: "msa-generic-form-chips-field", inputs: ["separatorKeysCodes", "autocompleteFilteredOptions", "filterAutocomplete", "autocompleteValueSelected", "addChip", "onPasteChips", "removeChip"] }, { kind: "component", type: MsaGenericFormCodeFieldComponent, selector: "msa-generic-form-code-field", inputs: ["field", "formGroup", "codeTemplate"] }, { kind: "component", type: MsaGenericFormColorFieldComponent, selector: "msa-generic-form-color-field" }, { kind: "component", type: MsaGenericFormCustomFieldComponent, selector: "msa-generic-form-custom-field", inputs: ["field", "formGroup", "customTemplate"] }, { kind: "component", type: MsaGenericFormDateFieldComponent, selector: "msa-generic-form-date-field", inputs: ["datePickerHeaderComponent", "handleDatePickerFilterAsync", "handleDatePickerOpened"] }, { kind: "component", type: MsaGenericFormEditorFieldComponent, selector: "msa-generic-form-editor-field", inputs: ["field", "formGroup", "editorTemplate"] }, { kind: "component", type: MsaGenericFormEnumFieldComponent, selector: "msa-generic-form-enum-field" }, { kind: "component", type: MsaGenericFormFileFieldComponent, selector: "msa-generic-form-file-field" }, { kind: "component", type: MsaGenericFormRadioFieldComponent, selector: "msa-generic-form-radio-field" }, { kind: "component", type: MsaGenericFormSelectFieldComponent, selector: "msa-generic-form-select-field" }, { kind: "component", type: MsaGenericFormTextFieldComponent, selector: "msa-generic-form-text-field" }, { kind: "component", type: MsaGenericFormTextareaFieldComponent, selector: "msa-generic-form-textarea-field" }, { kind: "component", type: MsaGenericFormMsaSelectFieldComponent, selector: "msa-generic-form-msa-select-field" }, { kind: "component", type: MsaGenericFormMsaChipsFieldComponent, selector: "msa-generic-form-msa-chips-field" }, { kind: "component", type: MsaGenericFormMsaListFieldComponent, selector: "msa-generic-form-msa-list-field" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: 
                 //--------------------
                 FuncPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
@@ -25963,9 +25957,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MsaGenericFormTextFieldComponent,
                         MsaGenericFormTextareaFieldComponent,
                         MsaGenericFormMsaSelectFieldComponent,
-                        MsaGenericFormVdChipsFieldComponent,
-                        MsaGenericFormVdListFieldComponent,
-                    ], 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                                <msa-generic-form-text-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-text-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <msa-generic-form-textarea-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-textarea-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-enum-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <msa-generic-form-msa-select-field [field]=\"field\"\n                                                                   [formGroup]=\"formGroup\"\n                                                                   [readonly]=\"readonly ?? false\"\n                                                                   [context]=\"context\"\n                                                                   [attr.flex]=\"field.flex||0\"\n                                                                   layout-margin>\n                                </msa-generic-form-msa-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <msa-generic-form-vd-list-field [field]=\"field\"\n                                                                [formGroup]=\"formGroup\"\n                                                                [readonly]=\"readonly ?? false\"\n                                                                [context]=\"context\"\n                                                                [attr.flex]=\"field.flex||0\"\n                                                                layout-margin>\n                                </msa-generic-form-vd-list-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <msa-generic-form-chips-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [separatorKeysCodes]=\"separatorKeysCodes\"\n                                                              [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                              [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                              [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\"\n                                                              [addChip]=\"addChip.bind(this)\"\n                                                              [onPasteChips]=\"onPasteChips.bind(this)\"\n                                                              [removeChip]=\"removeChip.bind(this)\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-chips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <msa-generic-form-vdchips-field [field]=\"field\"\n                                                                [formGroup]=\"formGroup\"\n                                                                [readonly]=\"readonly ?? false\"\n                                                                [context]=\"context\"\n                                                                [attr.flex]=\"field.flex||0\"\n                                                                layout-margin>\n                                </msa-generic-form-vdchips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <msa-generic-form-select-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [readonly]=\"readonly ?? false\"\n                                                               [context]=\"context\"\n                                                               [attr.flex]=\"field.flex||0\"\n                                                               layout-margin>\n                                </msa-generic-form-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <msa-generic-form-autocomplete-field [field]=\"field\"\n                                                                     [formGroup]=\"formGroup\"\n                                                                     [readonly]=\"readonly ?? false\"\n                                                                     [context]=\"context\"\n                                                                     [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                                     [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                                     [attr.flex]=\"field.flex||0\"\n                                                                     layout-margin>\n                                </msa-generic-form-autocomplete-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <msa-generic-form-date-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                             [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\"\n                                                             [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-date-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <msa-generic-form-calendar-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                                 [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-calendar-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <msa-generic-form-color-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-color-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <msa-generic-form-checkbox-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\">\n                                </msa-generic-form-checkbox-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <msa-generic-form-radio-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-radio-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                <msa-generic-form-editor-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [editorTemplate]=\"editorTemplate\">\n                                </msa-generic-form-editor-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                <msa-generic-form-code-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [codeTemplate]=\"codeTemplate\">\n                                </msa-generic-form-code-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <msa-generic-form-file-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-file-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                <msa-generic-form-custom-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [customTemplate]=\"customTemplate\">\n                                </msa-generic-form-custom-field>\n                            }\n                            <!-- #endregion -->\n                        }\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]=\"$safeNavigationMigration(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            } @for (customField of customFieldsTemplates; track customField) {\n                @if(customField?.templateRef && customField.row ==  ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n\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\"\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        </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"] }]
+                        MsaGenericFormMsaChipsFieldComponent,
+                        MsaGenericFormMsaListFieldComponent
+                    ], 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                                <msa-generic-form-text-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-text-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <msa-generic-form-textarea-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-textarea-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-enum-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <msa-generic-form-msa-select-field [field]=\"field\"\n                                                                   [formGroup]=\"formGroup\"\n                                                                   [readonly]=\"readonly ?? false\"\n                                                                   [context]=\"context\"\n                                                                   [attr.flex]=\"field.flex||0\"\n                                                                   layout-margin>\n                                </msa-generic-form-msa-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <msa-generic-form-msa-list-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-msa-list-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <msa-generic-form-chips-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [separatorKeysCodes]=\"separatorKeysCodes\"\n                                                              [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                              [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                              [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\"\n                                                              [addChip]=\"addChip.bind(this)\"\n                                                              [onPasteChips]=\"onPasteChips.bind(this)\"\n                                                              [removeChip]=\"removeChip.bind(this)\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-chips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <msa-generic-form-msa-chips-field [field]=\"field\"\n                                                                  [formGroup]=\"formGroup\"\n                                                                  [readonly]=\"readonly ?? false\"\n                                                                  [context]=\"context\"\n                                                                  [attr.flex]=\"field.flex||0\"\n                                                                  layout-margin>\n                                </msa-generic-form-msa-chips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <msa-generic-form-select-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [readonly]=\"readonly ?? false\"\n                                                               [context]=\"context\"\n                                                               [attr.flex]=\"field.flex||0\"\n                                                               layout-margin>\n                                </msa-generic-form-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <msa-generic-form-autocomplete-field [field]=\"field\"\n                                                                     [formGroup]=\"formGroup\"\n                                                                     [readonly]=\"readonly ?? false\"\n                                                                     [context]=\"context\"\n                                                                     [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                                     [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                                     [attr.flex]=\"field.flex||0\"\n                                                                     layout-margin>\n                                </msa-generic-form-autocomplete-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <msa-generic-form-date-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                             [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\"\n                                                             [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-date-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <msa-generic-form-calendar-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                                 [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-calendar-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <msa-generic-form-color-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-color-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <msa-generic-form-checkbox-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\">\n                                </msa-generic-form-checkbox-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <msa-generic-form-radio-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-radio-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                <msa-generic-form-editor-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [editorTemplate]=\"editorTemplate\">\n                                </msa-generic-form-editor-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                <msa-generic-form-code-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [codeTemplate]=\"codeTemplate\">\n                                </msa-generic-form-code-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <msa-generic-form-file-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-file-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                <msa-generic-form-custom-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [customTemplate]=\"customTemplate\">\n                                </msa-generic-form-custom-field>\n                            }\n                            <!-- #endregion -->\n                        }\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]=\"$safeNavigationMigration(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            } @for (customField of customFieldsTemplates; track customField) {\n                @if(customField?.templateRef && customField.row ==  ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n\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\"\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        </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: [{