@c10t/nice-component-library 0.0.23 → 0.0.25

package/fesm2022/c10t-nice-component-library.mjs

@@ -169,6 +169,8 @@ var AlignEnum;
 class ColumnModel {
     columnDef = '';
     header;
+    title = (e) => `${e}`;
+    cell = (e) => `${e}`;
     // set default theo ly thuyet, phai gan lai
     align = AlignEnum.LEFT;
     alignHeader;
@@ -203,8 +205,10 @@ class ColumnModel {
     displayKey;
     mappingConfig = {};
     searchFn;
-    title = (e) => `${e}`;
-    cell = (e) => `${e}`;
+    rowSpan = 1;
+    colSpan = 1;
+    pattern;
+    patternFilter;
 }
 
 class BaseModel {
@@ -1494,6 +1498,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
 class TableService {
     static DEFAULT_NO_IMAGE_AVAILABLE = 'data:image/png;base64, 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';
+    static getRequired(column) {
+        return typeof (column.isRequired) === 'function' ? column.isRequired() : (column.isRequired ?? false);
+    }
+    static getHeaderColumns(row, index, buttons) {
+        let displayColumn = row.map(c => c.columnDef);
+        if (index === 0 && buttons && buttons.length > 0) {
+            displayColumn = displayColumn.concat(buttons.map(b => b.columnDef));
+        }
+        return displayColumn;
+    }
+    static toggleSelectAll(values, $event) {
+        const checked = $event.$event.checked;
+        values.forEach(v => {
+            v.checked = checked;
+        });
+        if ($event.columnChange.onHeaderCellValueChange) {
+            $event.columnChange.onHeaderCellValueChange(checked);
+        }
+        return checked;
+    }
     static displayHeaderName(column, moduleName) {
         if (typeof (column.header) === 'string') {
             return moduleName + '.table.header.' + column.header;
@@ -1579,6 +1603,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+class CvaTableHeaderCellComponent {
+    TableService = TableService;
+    ColumnTypeEnum = ColumnTypeEnum;
+    moduleName = '';
+    column = new ColumnModel();
+    selectAllChecked = false;
+    changeSelectAll = new EventEmitter();
+    ngOnChanges(changes) {
+        if ('selectAllChecked' in changes) {
+            this.selectAllChecked = changes['selectAllChecked'].currentValue;
+        }
+    }
+    onSelectAllChange($event) {
+        this.changeSelectAll.emit({ $event, columnChange: this.column });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaTableHeaderCellComponent, isStandalone: false, selector: "cva-table-header-cell", inputs: { moduleName: "moduleName", column: "column", selectAllChecked: "selectAllChecked" }, outputs: { changeSelectAll: "changeSelectAll" }, usesOnChanges: true, ngImport: i0, template: `
+        <div [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+             fxLayout="row"
+             [fxLayoutAlign]="column.alignHeader ? column.alignHeader : TableService.alignCellContent(column)">
+            <div class="header-text-area">
+                {{ TableService.displayHeaderName(column, moduleName) | translate }}
+                <span style="color: red">{{ TableService.getRequired(column) ? '*' : '' }}</span>
+            </div>
+            <mat-checkbox
+                    *ngIf="TableService.getColumnType(column, null)===ColumnTypeEnum.CHECKBOX && !column.isNotShowHeaderCheckbox"
+                    color="primary" class="box-select-all margin-right-5"
+                    [(ngModel)]="selectAllChecked"
+                    (change)="onSelectAllChange($event)">
+            </mat-checkbox>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.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: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaTableHeaderCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cva-table-header-cell',
+                    standalone: false,
+                    template: `
+        <div [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+             fxLayout="row"
+             [fxLayoutAlign]="column.alignHeader ? column.alignHeader : TableService.alignCellContent(column)">
+            <div class="header-text-area">
+                {{ TableService.displayHeaderName(column, moduleName) | translate }}
+                <span style="color: red">{{ TableService.getRequired(column) ? '*' : '' }}</span>
+            </div>
+            <mat-checkbox
+                    *ngIf="TableService.getColumnType(column, null)===ColumnTypeEnum.CHECKBOX && !column.isNotShowHeaderCheckbox"
+                    color="primary" class="box-select-all margin-right-5"
+                    [(ngModel)]="selectAllChecked"
+                    (change)="onSelectAllChange($event)">
+            </mat-checkbox>
+        </div>
+    `,
+                }]
+        }], propDecorators: { moduleName: [{
+                type: Input
+            }], column: [{
+                type: Input
+            }], selectAllChecked: [{
+                type: Input
+            }], changeSelectAll: [{
+                type: Output
+            }] } });
+
 class ValidatorService {
     static invalid(control) {
         if (!control || !control.dirty) {
@@ -1797,7 +1886,7 @@ class ValidatorService {
                             required: ValidatorService.getRequired(column),
                             maxLength: column.max ? column.max(row) : undefined,
                             minLength: column.min ? column.min(row) : undefined,
-                            pattern: undefined,
+                            pattern: column.pattern ? column.pattern : undefined,
                         }));
                     }
                     else if (columnType === ColumnTypeEnum.LIVE_SEARCHING) {
@@ -2447,6 +2536,10 @@ class CvaTableComponent {
     config;
     cdRef;
     loaderService;
+    ColumnTypeEnum = ColumnTypeEnum;
+    AlignEnum = AlignEnum;
+    IconTypeEnum = IconTypeEnum;
+    TableService = TableService;
     moduleName = '';
     varPaging;
     results = new MatTableDataSource([]);
@@ -2454,6 +2547,7 @@ class CvaTableComponent {
     buttons = [];
     showTotalPages = 5;
     expandHeaderButton;
+    superHeaders = [];
     pageSizeOptions;
     pagingChange = new EventEmitter(true);
     clickAction = new EventEmitter();
@@ -2486,28 +2580,6 @@ class CvaTableComponent {
             this.varPaging = value;
         }
     }
-    get displayedColumns() {
-        let columnsDef = this.columns.map(c => c.columnDef);
-        if (this.buttons) {
-            columnsDef = columnsDef.concat(this.buttons.map(b => b.columnDef));
-        }
-        // if (!!this.expandHeaderButton) {
-        //     columnsDef = columnsDef.concat(this.expandHeaderButton.columnDef);
-        // }
-        return columnsDef;
-    }
-    get ColumnTypes() {
-        return ColumnTypeEnum;
-    }
-    get IconTypes() {
-        return IconTypeEnum;
-    }
-    get AlignEnum() {
-        return AlignEnum;
-    }
-    get TableService() {
-        return TableService;
-    }
     isExpandColumn(col) {
         return !!col.isExpandOptionColumn ? col.isExpandOptionColumn() : false;
     }
@@ -2546,14 +2618,6 @@ class CvaTableComponent {
     onDisplayCell(column, cell) {
         return TableService.onDisplayCell(column, cell) && !this.isExpandColumn(column);
     }
-    toggleSelectAll(val, col) {
-        this.results.data.forEach(v => {
-            v.checked = val.checked;
-        });
-        if (col.onHeaderCellValueChange) {
-            col.onHeaderCellValueChange(val.checked);
-        }
-    }
     toggleSelect(val, result, column) {
         let count = 0;
         this.results.data.forEach(v => {
@@ -2567,7 +2631,7 @@ class CvaTableComponent {
         }
     }
     ngAfterViewChecked() {
-        this.getHeaderButtonColspan();
+        this.updateHeaderButtonColspan();
         this.cdRef.detectChanges();
     }
     hasData() {
@@ -2586,9 +2650,8 @@ class CvaTableComponent {
             this.getPage({ pageIndex: this.goToPageNumber - 1, pageSize: this.varPaging.pageSize });
         }
     }
-    getHeaderButtonColspan() {
+    updateHeaderButtonColspan() {
         this.buttonColspan = TableService.getHeaderButtonColspan(this.buttons, this.results.data);
-        return this.buttonColspan;
     }
     onChangeGoToPageNumber($event) {
         if ($event === null || Number.isNaN($event) || !Number.isSafeInteger($event)) {
@@ -2607,201 +2670,212 @@ class CvaTableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaTableComponent, deps: [{ token: InjectTokenNextSolutionsConfig }, { token: i0.ChangeDetectorRef }, { token: LoaderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaTableComponent, isStandalone: false, selector: "cva-table", inputs: { moduleName: "moduleName", results: "results", columns: "columns", buttons: "buttons", showTotalPages: "showTotalPages", expandHeaderButton: "expandHeaderButton", paging: "paging" }, outputs: { pagingChange: "pagingChange", clickAction: "clickAction", onRowClickAction: "onRowClickAction", onChangeDisplayColumn: "onChangeDisplayColumn" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaTableComponent, isStandalone: false, selector: "cva-table", inputs: { moduleName: "moduleName", results: "results", columns: "columns", buttons: "buttons", showTotalPages: "showTotalPages", expandHeaderButton: "expandHeaderButton", superHeaders: "superHeaders", paging: "paging" }, outputs: { pagingChange: "pagingChange", clickAction: "clickAction", onRowClickAction: "onRowClickAction", onChangeDisplayColumn: "onChangeDisplayColumn" }, providers: [
             { provide: MatPaginatorIntl, useClass: MultiLanguageTablePaginator },
         ], ngImport: i0, template: `
-    <div class="table-responsive">
-      <ng-container *ngIf="!!expandHeaderButton">
-        <cva-header-expand-button [moduleName]="moduleName" [expandHeaderButton]="expandHeaderButton"
-                                  [columns]="columns" (onChange)="this.onChangeDisplayColumn.emit($event)">
-        </cva-header-expand-button>
-      </ng-container>
-      <table mat-table #table [dataSource]="results" class="mat-elevation-z8 cva-table">
-        <ng-container *ngFor="let column of columns" matColumnDef="{{column.columnDef}}">
-          <ng-container *matHeaderCellDef>
-            <th mat-header-cell [ngClass]="TableService.getColumnHeaderClassName(column)"
-                *ngIf="onDisplayHeaderCell(column)"
-                [ngSwitch]="TableService.getColumnType(column, null)">
-              <div fxLayout="row" *ngSwitchDefault
-                   class="viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   [fxLayoutAlign]="column.alignHeader ? column.alignHeader : TableService.alignCellContent(column)">
-                {{ TableService.displayHeaderName(column, moduleName) | translate }}
-              </div>
-              <mat-checkbox *ngSwitchCase="ColumnTypes.CHECKBOX"
-                            color="primary" class="box-select-all" [(ngModel)]="selectAllChecked"
-                            (change)="toggleSelectAll($event, column)"
-                            [fxLayoutAlign]="column.alignHeader ? column.alignHeader : TableService.alignCellContent(column)">
-              </mat-checkbox>
-            </th>
-          </ng-container>
-          <ng-container *matCellDef="let result;">
-            <td mat-cell [ngClass]="TableService.getColumnClassName(column, result)"
-                *ngIf="onDisplayCell(column, result)"
-                [ngSwitch]="TableService.getColumnType(column, result)">
-              <div title="{{column.title(result)}}" *ngSwitchDefault
-                   class="{{TableService.getColumnClassName(column, result)}} viewData"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)">
-                {{ column.cell(result) }}
-              </div>
-              <ng-container *ngSwitchCase="ColumnTypes.BUTTON">
-                <div *ngIf="!!column.button"
-                     class="{{TableService.getColumnClassName(column, result)}}"
-                     fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                     (click)="$event.stopPropagation()">
-                  <button mat-icon-button color="{{column.button.color}}"
-                          (click)="onClick(column.button.click, result)"
-                          disabled="{{column.button.disabled ? column.button.disabled(result) : false}}"
-                          matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
-                          class="{{column.button.className}}" [ngSwitch]="TableService.getIconType(column.button)">
-                    <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ column.button.icon }}</mat-icon>
-                    <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{column.button.icon}}"></i>
-                  </button>
-                </div>
-              </ng-container>
-              <div class="link viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.LINK"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <a [routerLink]="[column.link(result)]">{{ column.cell(result) }}</a>
-              </div>
+        <div class="table-responsive">
+            <ng-container *ngIf="!!expandHeaderButton">
+                <cva-header-expand-button [moduleName]="moduleName" [expandHeaderButton]="expandHeaderButton"
+                                          [columns]="columns" (onChange)="this.onChangeDisplayColumn.emit($event)">
+                </cva-header-expand-button>
+            </ng-container>
+            <table mat-table #table [dataSource]="results" class="mat-elevation-z8 cva-table">
+                <ng-container *ngFor="let column of columns" matColumnDef="{{column.columnDef}}">
+                    <ng-container *matHeaderCellDef>
+                        <th mat-header-cell [ngClass]="TableService.getColumnHeaderClassName(column)"
+                            [attr.colspan]="column?.colSpan" [attr.rowspan]="column?.rowSpan"
+                            *ngIf="onDisplayHeaderCell(column)">
+                            <cva-table-header-cell [moduleName]="moduleName" [column]="column"
+                                                   [selectAllChecked]="selectAllChecked"
+                                                   (changeSelectAll)="selectAllChecked = TableService.toggleSelectAll(this.results.data, $event)">
+                            </cva-table-header-cell>
+                        </th>
+                    </ng-container>
+                    <ng-container *matCellDef="let result;">
+                        <td mat-cell [ngClass]="TableService.getColumnClassName(column, result)"
+                            *ngIf="onDisplayCell(column, result)"
+                            [ngSwitch]="TableService.getColumnType(column, result)">
+                            <div title="{{column.title(result)}}" *ngSwitchDefault
+                                 class="{{TableService.getColumnClassName(column, result)}} viewData"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)">
+                                {{ column.cell(result) }}
+                            </div>
+                            <ng-container *ngSwitchCase="ColumnTypeEnum.BUTTON">
+                                <div *ngIf="!!column.button"
+                                     class="{{TableService.getColumnClassName(column, result)}}"
+                                     fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                     (click)="$event.stopPropagation()">
+                                    <button mat-icon-button color="{{column.button.color}}"
+                                            (click)="onClick(column.button.click, result)"
+                                            disabled="{{column.button.disabled ? column.button.disabled(result) : false}}"
+                                            matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
+                                            class="{{column.button.className}}"
+                                            [ngSwitch]="TableService.getIconType(column.button)">
+                                        <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ column.button.icon }}
+                                        </mat-icon>
+                                        <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{column.button.icon}}"></i>
+                                    </button>
+                                </div>
+                            </ng-container>
+                            <div class="link viewData"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.LINK"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <a [routerLink]="[column?.link(result)]">{{ column.cell(result) }}</a>
+                            </div>
 
-              <div class="label-status viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.STYLE_CSS"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <span [style]="column.style(result)">{{ column.cell(result) }}</span>
-              </div>
+                            <div class="label-status viewData"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.STYLE_CSS"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <span [style]="column?.style(result)">{{ column.cell(result) }}</span>
+                            </div>
 
-              <div class="img-view viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.IMG"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="column.cell(result) | secure | async" #imgRef
-                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <div class="img-view viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.IMG_NO_SECURE"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="column.cell(result)" #imgRef
-                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <div *ngSwitchCase="ColumnTypes.BASE64"
-                   class="img-view viewData"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="'data:image/png;base64,'+column.cell(result)"
-                     #base64ImgRef
-                     (error)="TableService.onErrorImgEvent(base64ImgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <ng-container *ngSwitchCase="ColumnTypes.CHECKBOX">
-                <mat-checkbox [(ngModel)]="result[column.columnDef]" color="primary"
-                              *ngIf="column.display ? column.display(result) : true"
-                              [disabled]="column.disabled ? column.disabled(result) : false"
-                              (change)="toggleSelect($event, result, column)"
-                              [fxLayoutAlign]="TableService.alignCellContent(column)">
-                </mat-checkbox>
-              </ng-container>
-            </td>
-          </ng-container>
-        </ng-container>
-
-        <ng-container *ngFor="let button of buttons; let i = index" matColumnDef="{{button.columnDef}}">
-          <ng-container *matHeaderCellDef="let header">
-            <!--                    [fxFlex]="(isButtonHeader(button) ? headerButtonWidthDefault : getHeaderButtonWidth(i)) + 'px' "-->
-            <!--                    [fxFlex]="getHeaderButtonWidth(i) + 'px' "-->
-            <th mat-header-cell [ngClass]="button.className"
-                *ngIf="TableService.onDisplayButtonHeaderCell(buttons, button, header, i) && !!buttonColspan"
-                (click)="$event.stopPropagation()"
-                [attr.colspan]="buttonColspan"
-            >
-              <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
-                <button mat-icon-button
-                        class="{{button.className}}"
-                        *ngIf="((btnHeader && btnHeader.display) ? btnHeader.display(header) : false) "
-                        [disabled]="((btnHeader && $any(btnHeader).disabled) ? $any(btnHeader).disabled(header) : false) "
-                        color="{{$any(btnHeader).color}}"
-                        (click)="onClick($any(btnHeader).click, null)"
-                        matTooltip="{{((btnHeader && $any(btnHeader).title) ? $any(btnHeader).title : '') | translate}}"
-                        [ngSwitch]="TableService.getIconType($any(btnHeader))">
-                  <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ $any(btnHeader).icon }}</mat-icon>
-                  <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{$any(btnHeader).icon}}"></i>
-                </button>
-              </ng-container>
-              <ng-container *ngIf="TableService.getButtonHeaderString(button) as btnHeader">
-                <div title="{{$any(btnHeader) | translate}}"
-                     class="viewData"
-                     fxLayout="row"
-                     fxLayoutAlign="{{button.alignHeader ? button.alignHeader : AlignEnum.LEFT}} center">
-                  {{ $any(btnHeader) | translate }}
-                </div>
-              </ng-container>
-            </th>
+                            <div class="img-view viewData"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.IMG"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="column.cell(result) | secure | async" #imgRef
+                                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt=""/>
+                            </div>
+                            <div class="img-view viewData"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.IMG_NO_SECURE"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="column.cell(result)" #imgRef
+                                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt=""/>
+                            </div>
+                            <div *ngSwitchCase="ColumnTypeEnum.BASE64"
+                                 class="img-view viewData"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="'data:image/png;base64,'+column.cell(result)"
+                                     #base64ImgRef
+                                     (error)="TableService.onErrorImgEvent(base64ImgRef, config.NO_IMAGE_AVAILABLE)"
+                                     alt=""/>
+                            </div>
+                            <ng-container *ngSwitchCase="ColumnTypeEnum.CHECKBOX">
+                                <mat-checkbox [(ngModel)]="result[column.columnDef]" color="primary"
+                                              *ngIf="column.display ? column.display(result) : true"
+                                              [disabled]="column.disabled ? column.disabled(result) : false"
+                                              (change)="toggleSelect($event, result, column)"
+                                              [fxLayoutAlign]="TableService.alignCellContent(column)">
+                                </mat-checkbox>
+                            </ng-container>
+                        </td>
+                    </ng-container>
+                </ng-container>
 
-          </ng-container>
-          <ng-container *matCellDef="let cell">
-            <!--                     [fxFlex]="headerButtonWidthDefault + 'px'"-->
-            <td mat-cell [ngClass]="button.className"
-                *ngIf="TableService.onDisplayButtonCell(button, cell)"
-                (click)="$event.stopPropagation()">
-              <button mat-icon-button color="{{button.color}}"
-                      (click)="onClick(button.click, cell)"
-                      disabled="{{button.disabled ? button.disabled(cell) : false}}"
-                      matTooltip="{{(button.title ? button.title : '') | translate}}"
-                      class="{{button.className}}" [ngSwitch]="TableService.getIconType(button)">
-                <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ button.icon }}</mat-icon>
-                <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{button.icon}}"></i>
-              </button>
-            </td>
-          </ng-container>
-        </ng-container>
+                <ng-container *ngFor="let button of buttons; let i = index" matColumnDef="{{button.columnDef}}">
+                    <ng-container *matHeaderCellDef="let header">
+                        <th mat-header-cell [ngClass]="button.className"
+                            *ngIf="TableService.onDisplayButtonHeaderCell(buttons, button, header, i) && !!buttonColspan"
+                            (click)="$event.stopPropagation()"
+                            [attr.colspan]="buttonColspan" [attr.rowspan]="superHeaders.length + 1">
+                            <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
+                                <button mat-icon-button
+                                        class="{{button.className}}"
+                                        *ngIf="((btnHeader && btnHeader.display) ? btnHeader.display(header) : false) "
+                                        [disabled]="((btnHeader && $any(btnHeader).disabled) ? $any(btnHeader).disabled(header) : false) "
+                                        color="{{$any(btnHeader).color}}"
+                                        (click)="onClick($any(btnHeader).click, null)"
+                                        matTooltip="{{((btnHeader && $any(btnHeader).title) ? $any(btnHeader).title : '') | translate}}"
+                                        [ngSwitch]="TableService.getIconType($any(btnHeader))">
+                                    <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ $any(btnHeader).icon }}
+                                    </mat-icon>
+                                    <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{$any(btnHeader).icon}}"></i>
+                                </button>
+                            </ng-container>
+                            <ng-container *ngIf="TableService.getButtonHeaderString(button) as btnHeader">
+                                <div title="{{$any(btnHeader) | translate}}"
+                                     class="viewData"
+                                     fxLayout="row"
+                                     fxLayoutAlign="{{button.alignHeader ? button.alignHeader : AlignEnum.LEFT}} center">
+                                    {{ $any(btnHeader) | translate }}
+                                </div>
+                            </ng-container>
+                        </th>
+                    </ng-container>
+                    <ng-container *matCellDef="let cell">
+                        <td mat-cell [ngClass]="button.className"
+                            *ngIf="TableService.onDisplayButtonCell(button, cell)"
+                            (click)="$event.stopPropagation()">
+                            <button mat-icon-button color="{{button.color}}"
+                                    (click)="onClick(button.click, cell)"
+                                    disabled="{{button.disabled ? button.disabled(cell) : false}}"
+                                    matTooltip="{{(button.title ? button.title : '') | translate}}"
+                                    class="{{button.className}}" [ngSwitch]="TableService.getIconType(button)">
+                                <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ button.icon }}</mat-icon>
+                                <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{button.icon}}"></i>
+                            </button>
+                        </td>
+                    </ng-container>
+                </ng-container>
 
+                <ng-container *ngFor="let row of superHeaders">
+                    <ng-container *ngFor="let column of row" matColumnDef="{{column.columnDef}}">
+                        <ng-container *ngIf="onDisplayHeaderCell(column)">
+                            <th mat-header-cell *matHeaderCellDef
+                                [ngClass]="TableService.getColumnHeaderClassName(column)"
+                                [attr.colspan]="column?.colSpan" [attr.rowspan]="column?.rowSpan">
+                                <cva-table-header-cell [moduleName]="moduleName" [column]="column"
+                                                       [selectAllChecked]="selectAllChecked"
+                                                       (changeSelectAll)="selectAllChecked = TableService.toggleSelectAll(this.results.data, $event)">
+                                </cva-table-header-cell>
+                            </th>
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let result; columns: displayedColumns; let i = index"
-            [ngClass]="result.className"
-            (click)="onRowClick(result, i)"></tr>
-      </table>
-      <div *ngIf="!(loaderService.isLoading | async)">
-        <div class="paging"
-             *ngIf="hasData()"
-             fxLayout fxLayoutAlign="space-between center">
-          <mat-paginator style-paginator
-                         [showTotalPages]="showTotalPages"
-                         [paging]="varPaging"
-                         (pagingChangeEvent)="getPage($event)"
-                         [length]="varPaging.totalElements"
-                         [pageSize]="varPaging.pageSize"
-                         [pageSizeOptions]="pageSizeOptions"
-                         [pageIndex]="varPaging.pageNumber - 1">
-          </mat-paginator>
-          <div class="go-to-page"
-               fxLayout fxLayoutGap="0.3rem" fxLayoutAlign="start baseline">
-            <mat-label>{{ 'common.gotopage' | translate }}</mat-label>
-            <cva-counter-input [(ngModel)]="goToPageNumber"
-                               (ngModelChange)="onChangeGoToPageNumber($event)"
-                               (onEnter)="goToPage()"
-                               [max]="getTotalPage() ? getTotalPage() : 1"
-                               [min]="1"
-                               [isFloatLabel]="false"
-                               [errorMessages]="errorMsg"
-            ></cva-counter-input>
-            <mat-label style="white-space: nowrap">{{ '/' + getTotalPage() }}</mat-label>
-            <button mat-flat-button
-                    [disabled]="goToPageNumber < 1 || goToPageNumber > getTotalPage()"
-                    (click)="goToPage()">{{ 'common.go' | translate }}
-            </button>
-          </div>
-          <h2 *ngIf="!hasData()">{{ 'common.no.records.found' | translate }}</h2>
+                <ng-container *ngFor="let row of superHeaders; let rowIndex = index">
+                    <tr mat-header-row *matHeaderRowDef="TableService.getHeaderColumns(row, rowIndex, buttons)"></tr>
+                </ng-container>
+                <tr mat-header-row
+                    *matHeaderRowDef="TableService.getHeaderColumns(columns, superHeaders.length, buttons)"></tr>
+                <tr mat-row
+                    *matRowDef="let result; columns: TableService.getHeaderColumns(columns, 0, buttons); let i = index"
+                    [ngClass]="result.className"
+                    (click)="onRowClick(result, i)"></tr>
+            </table>
+            <div *ngIf="!(loaderService.isLoading | async)">
+                <div class="paging"
+                     *ngIf="hasData()"
+                     fxLayout fxLayoutAlign="space-between center">
+                    <mat-paginator style-paginator
+                                   [showTotalPages]="showTotalPages"
+                                   [paging]="varPaging"
+                                   (pagingChangeEvent)="getPage($event)"
+                                   [length]="varPaging.totalElements"
+                                   [pageSize]="varPaging.pageSize"
+                                   [pageSizeOptions]="pageSizeOptions"
+                                   [pageIndex]="varPaging.pageNumber - 1">
+                    </mat-paginator>
+                    <div class="go-to-page"
+                         fxLayout fxLayoutGap="0.3rem" fxLayoutAlign="start baseline">
+                        <mat-label>{{ 'common.gotopage' | translate }}</mat-label>
+                        <cva-counter-input [(ngModel)]="goToPageNumber"
+                                           (ngModelChange)="onChangeGoToPageNumber($event)"
+                                           (onEnter)="goToPage()"
+                                           [max]="getTotalPage() ? getTotalPage() : 1"
+                                           [min]="1"
+                                           [isFloatLabel]="false"
+                                           [errorMessages]="errorMsg"
+                        ></cva-counter-input>
+                        <mat-label style="white-space: nowrap">{{ '/' + getTotalPage() }}</mat-label>
+                        <button mat-flat-button
+                                [disabled]="goToPageNumber < 1 || goToPageNumber > getTotalPage()"
+                                (click)="goToPage()">{{ 'common.go' | translate }}
+                        </button>
+                    </div>
+                    <h2 *ngIf="!hasData()">{{ 'common.no.records.found' | translate }}</h2>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.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: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "directive", type: StylePaginatorDirective, selector: "[style-paginator]", inputs: ["showTotalPages", "paging"], outputs: ["pagingChangeEvent"] }, { kind: "component", type: CvaHeaderExpandButtonComponent, selector: "cva-header-expand-button", inputs: ["expandHeaderButton", "columns", "moduleName"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.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: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaTableHeaderCellComponent, selector: "cva-table-header-cell", inputs: ["moduleName", "column", "selectAllChecked"], outputs: ["changeSelectAll"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "directive", type: StylePaginatorDirective, selector: "[style-paginator]", inputs: ["showTotalPages", "paging"], outputs: ["pagingChangeEvent"] }, { kind: "component", type: CvaHeaderExpandButtonComponent, selector: "cva-header-expand-button", inputs: ["expandHeaderButton", "columns", "moduleName"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaTableComponent, decorators: [{
             type: Component,
@@ -2809,198 +2883,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     selector: 'cva-table',
                     standalone: false,
                     template: `
-    <div class="table-responsive">
-      <ng-container *ngIf="!!expandHeaderButton">
-        <cva-header-expand-button [moduleName]="moduleName" [expandHeaderButton]="expandHeaderButton"
-                                  [columns]="columns" (onChange)="this.onChangeDisplayColumn.emit($event)">
-        </cva-header-expand-button>
-      </ng-container>
-      <table mat-table #table [dataSource]="results" class="mat-elevation-z8 cva-table">
-        <ng-container *ngFor="let column of columns" matColumnDef="{{column.columnDef}}">
-          <ng-container *matHeaderCellDef>
-            <th mat-header-cell [ngClass]="TableService.getColumnHeaderClassName(column)"
-                *ngIf="onDisplayHeaderCell(column)"
-                [ngSwitch]="TableService.getColumnType(column, null)">
-              <div fxLayout="row" *ngSwitchDefault
-                   class="viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   [fxLayoutAlign]="column.alignHeader ? column.alignHeader : TableService.alignCellContent(column)">
-                {{ TableService.displayHeaderName(column, moduleName) | translate }}
-              </div>
-              <mat-checkbox *ngSwitchCase="ColumnTypes.CHECKBOX"
-                            color="primary" class="box-select-all" [(ngModel)]="selectAllChecked"
-                            (change)="toggleSelectAll($event, column)"
-                            [fxLayoutAlign]="column.alignHeader ? column.alignHeader : TableService.alignCellContent(column)">
-              </mat-checkbox>
-            </th>
-          </ng-container>
-          <ng-container *matCellDef="let result;">
-            <td mat-cell [ngClass]="TableService.getColumnClassName(column, result)"
-                *ngIf="onDisplayCell(column, result)"
-                [ngSwitch]="TableService.getColumnType(column, result)">
-              <div title="{{column.title(result)}}" *ngSwitchDefault
-                   class="{{TableService.getColumnClassName(column, result)}} viewData"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)">
-                {{ column.cell(result) }}
-              </div>
-              <ng-container *ngSwitchCase="ColumnTypes.BUTTON">
-                <div *ngIf="!!column.button"
-                     class="{{TableService.getColumnClassName(column, result)}}"
-                     fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                     (click)="$event.stopPropagation()">
-                  <button mat-icon-button color="{{column.button.color}}"
-                          (click)="onClick(column.button.click, result)"
-                          disabled="{{column.button.disabled ? column.button.disabled(result) : false}}"
-                          matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
-                          class="{{column.button.className}}" [ngSwitch]="TableService.getIconType(column.button)">
-                    <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ column.button.icon }}</mat-icon>
-                    <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{column.button.icon}}"></i>
-                  </button>
-                </div>
-              </ng-container>
-              <div class="link viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.LINK"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <a [routerLink]="[column.link(result)]">{{ column.cell(result) }}</a>
-              </div>
+        <div class="table-responsive">
+            <ng-container *ngIf="!!expandHeaderButton">
+                <cva-header-expand-button [moduleName]="moduleName" [expandHeaderButton]="expandHeaderButton"
+                                          [columns]="columns" (onChange)="this.onChangeDisplayColumn.emit($event)">
+                </cva-header-expand-button>
+            </ng-container>
+            <table mat-table #table [dataSource]="results" class="mat-elevation-z8 cva-table">
+                <ng-container *ngFor="let column of columns" matColumnDef="{{column.columnDef}}">
+                    <ng-container *matHeaderCellDef>
+                        <th mat-header-cell [ngClass]="TableService.getColumnHeaderClassName(column)"
+                            [attr.colspan]="column?.colSpan" [attr.rowspan]="column?.rowSpan"
+                            *ngIf="onDisplayHeaderCell(column)">
+                            <cva-table-header-cell [moduleName]="moduleName" [column]="column"
+                                                   [selectAllChecked]="selectAllChecked"
+                                                   (changeSelectAll)="selectAllChecked = TableService.toggleSelectAll(this.results.data, $event)">
+                            </cva-table-header-cell>
+                        </th>
+                    </ng-container>
+                    <ng-container *matCellDef="let result;">
+                        <td mat-cell [ngClass]="TableService.getColumnClassName(column, result)"
+                            *ngIf="onDisplayCell(column, result)"
+                            [ngSwitch]="TableService.getColumnType(column, result)">
+                            <div title="{{column.title(result)}}" *ngSwitchDefault
+                                 class="{{TableService.getColumnClassName(column, result)}} viewData"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)">
+                                {{ column.cell(result) }}
+                            </div>
+                            <ng-container *ngSwitchCase="ColumnTypeEnum.BUTTON">
+                                <div *ngIf="!!column.button"
+                                     class="{{TableService.getColumnClassName(column, result)}}"
+                                     fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                     (click)="$event.stopPropagation()">
+                                    <button mat-icon-button color="{{column.button.color}}"
+                                            (click)="onClick(column.button.click, result)"
+                                            disabled="{{column.button.disabled ? column.button.disabled(result) : false}}"
+                                            matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
+                                            class="{{column.button.className}}"
+                                            [ngSwitch]="TableService.getIconType(column.button)">
+                                        <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ column.button.icon }}
+                                        </mat-icon>
+                                        <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{column.button.icon}}"></i>
+                                    </button>
+                                </div>
+                            </ng-container>
+                            <div class="link viewData"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.LINK"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <a [routerLink]="[column?.link(result)]">{{ column.cell(result) }}</a>
+                            </div>
 
-              <div class="label-status viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.STYLE_CSS"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <span [style]="column.style(result)">{{ column.cell(result) }}</span>
-              </div>
+                            <div class="label-status viewData"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.STYLE_CSS"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <span [style]="column?.style(result)">{{ column.cell(result) }}</span>
+                            </div>
 
-              <div class="img-view viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.IMG"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="column.cell(result) | secure | async" #imgRef
-                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <div class="img-view viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.IMG_NO_SECURE"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="column.cell(result)" #imgRef
-                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <div *ngSwitchCase="ColumnTypes.BASE64"
-                   class="img-view viewData"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="'data:image/png;base64,'+column.cell(result)"
-                     #base64ImgRef
-                     (error)="TableService.onErrorImgEvent(base64ImgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <ng-container *ngSwitchCase="ColumnTypes.CHECKBOX">
-                <mat-checkbox [(ngModel)]="result[column.columnDef]" color="primary"
-                              *ngIf="column.display ? column.display(result) : true"
-                              [disabled]="column.disabled ? column.disabled(result) : false"
-                              (change)="toggleSelect($event, result, column)"
-                              [fxLayoutAlign]="TableService.alignCellContent(column)">
-                </mat-checkbox>
-              </ng-container>
-            </td>
-          </ng-container>
-        </ng-container>
+                            <div class="img-view viewData"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.IMG"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="column.cell(result) | secure | async" #imgRef
+                                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt=""/>
+                            </div>
+                            <div class="img-view viewData"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.IMG_NO_SECURE"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="column.cell(result)" #imgRef
+                                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt=""/>
+                            </div>
+                            <div *ngSwitchCase="ColumnTypeEnum.BASE64"
+                                 class="img-view viewData"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="'data:image/png;base64,'+column.cell(result)"
+                                     #base64ImgRef
+                                     (error)="TableService.onErrorImgEvent(base64ImgRef, config.NO_IMAGE_AVAILABLE)"
+                                     alt=""/>
+                            </div>
+                            <ng-container *ngSwitchCase="ColumnTypeEnum.CHECKBOX">
+                                <mat-checkbox [(ngModel)]="result[column.columnDef]" color="primary"
+                                              *ngIf="column.display ? column.display(result) : true"
+                                              [disabled]="column.disabled ? column.disabled(result) : false"
+                                              (change)="toggleSelect($event, result, column)"
+                                              [fxLayoutAlign]="TableService.alignCellContent(column)">
+                                </mat-checkbox>
+                            </ng-container>
+                        </td>
+                    </ng-container>
+                </ng-container>
 
-        <ng-container *ngFor="let button of buttons; let i = index" matColumnDef="{{button.columnDef}}">
-          <ng-container *matHeaderCellDef="let header">
-            <!--                    [fxFlex]="(isButtonHeader(button) ? headerButtonWidthDefault : getHeaderButtonWidth(i)) + 'px' "-->
-            <!--                    [fxFlex]="getHeaderButtonWidth(i) + 'px' "-->
-            <th mat-header-cell [ngClass]="button.className"
-                *ngIf="TableService.onDisplayButtonHeaderCell(buttons, button, header, i) && !!buttonColspan"
-                (click)="$event.stopPropagation()"
-                [attr.colspan]="buttonColspan"
-            >
-              <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
-                <button mat-icon-button
-                        class="{{button.className}}"
-                        *ngIf="((btnHeader && btnHeader.display) ? btnHeader.display(header) : false) "
-                        [disabled]="((btnHeader && $any(btnHeader).disabled) ? $any(btnHeader).disabled(header) : false) "
-                        color="{{$any(btnHeader).color}}"
-                        (click)="onClick($any(btnHeader).click, null)"
-                        matTooltip="{{((btnHeader && $any(btnHeader).title) ? $any(btnHeader).title : '') | translate}}"
-                        [ngSwitch]="TableService.getIconType($any(btnHeader))">
-                  <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ $any(btnHeader).icon }}</mat-icon>
-                  <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{$any(btnHeader).icon}}"></i>
-                </button>
-              </ng-container>
-              <ng-container *ngIf="TableService.getButtonHeaderString(button) as btnHeader">
-                <div title="{{$any(btnHeader) | translate}}"
-                     class="viewData"
-                     fxLayout="row"
-                     fxLayoutAlign="{{button.alignHeader ? button.alignHeader : AlignEnum.LEFT}} center">
-                  {{ $any(btnHeader) | translate }}
-                </div>
-              </ng-container>
-            </th>
-
-          </ng-container>
-          <ng-container *matCellDef="let cell">
-            <!--                     [fxFlex]="headerButtonWidthDefault + 'px'"-->
-            <td mat-cell [ngClass]="button.className"
-                *ngIf="TableService.onDisplayButtonCell(button, cell)"
-                (click)="$event.stopPropagation()">
-              <button mat-icon-button color="{{button.color}}"
-                      (click)="onClick(button.click, cell)"
-                      disabled="{{button.disabled ? button.disabled(cell) : false}}"
-                      matTooltip="{{(button.title ? button.title : '') | translate}}"
-                      class="{{button.className}}" [ngSwitch]="TableService.getIconType(button)">
-                <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ button.icon }}</mat-icon>
-                <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{button.icon}}"></i>
-              </button>
-            </td>
-          </ng-container>
-        </ng-container>
+                <ng-container *ngFor="let button of buttons; let i = index" matColumnDef="{{button.columnDef}}">
+                    <ng-container *matHeaderCellDef="let header">
+                        <th mat-header-cell [ngClass]="button.className"
+                            *ngIf="TableService.onDisplayButtonHeaderCell(buttons, button, header, i) && !!buttonColspan"
+                            (click)="$event.stopPropagation()"
+                            [attr.colspan]="buttonColspan" [attr.rowspan]="superHeaders.length + 1">
+                            <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
+                                <button mat-icon-button
+                                        class="{{button.className}}"
+                                        *ngIf="((btnHeader && btnHeader.display) ? btnHeader.display(header) : false) "
+                                        [disabled]="((btnHeader && $any(btnHeader).disabled) ? $any(btnHeader).disabled(header) : false) "
+                                        color="{{$any(btnHeader).color}}"
+                                        (click)="onClick($any(btnHeader).click, null)"
+                                        matTooltip="{{((btnHeader && $any(btnHeader).title) ? $any(btnHeader).title : '') | translate}}"
+                                        [ngSwitch]="TableService.getIconType($any(btnHeader))">
+                                    <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ $any(btnHeader).icon }}
+                                    </mat-icon>
+                                    <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{$any(btnHeader).icon}}"></i>
+                                </button>
+                            </ng-container>
+                            <ng-container *ngIf="TableService.getButtonHeaderString(button) as btnHeader">
+                                <div title="{{$any(btnHeader) | translate}}"
+                                     class="viewData"
+                                     fxLayout="row"
+                                     fxLayoutAlign="{{button.alignHeader ? button.alignHeader : AlignEnum.LEFT}} center">
+                                    {{ $any(btnHeader) | translate }}
+                                </div>
+                            </ng-container>
+                        </th>
+                    </ng-container>
+                    <ng-container *matCellDef="let cell">
+                        <td mat-cell [ngClass]="button.className"
+                            *ngIf="TableService.onDisplayButtonCell(button, cell)"
+                            (click)="$event.stopPropagation()">
+                            <button mat-icon-button color="{{button.color}}"
+                                    (click)="onClick(button.click, cell)"
+                                    disabled="{{button.disabled ? button.disabled(cell) : false}}"
+                                    matTooltip="{{(button.title ? button.title : '') | translate}}"
+                                    class="{{button.className}}" [ngSwitch]="TableService.getIconType(button)">
+                                <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ button.icon }}</mat-icon>
+                                <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{button.icon}}"></i>
+                            </button>
+                        </td>
+                    </ng-container>
+                </ng-container>
 
+                <ng-container *ngFor="let row of superHeaders">
+                    <ng-container *ngFor="let column of row" matColumnDef="{{column.columnDef}}">
+                        <ng-container *ngIf="onDisplayHeaderCell(column)">
+                            <th mat-header-cell *matHeaderCellDef
+                                [ngClass]="TableService.getColumnHeaderClassName(column)"
+                                [attr.colspan]="column?.colSpan" [attr.rowspan]="column?.rowSpan">
+                                <cva-table-header-cell [moduleName]="moduleName" [column]="column"
+                                                       [selectAllChecked]="selectAllChecked"
+                                                       (changeSelectAll)="selectAllChecked = TableService.toggleSelectAll(this.results.data, $event)">
+                                </cva-table-header-cell>
+                            </th>
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let result; columns: displayedColumns; let i = index"
-            [ngClass]="result.className"
-            (click)="onRowClick(result, i)"></tr>
-      </table>
-      <div *ngIf="!(loaderService.isLoading | async)">
-        <div class="paging"
-             *ngIf="hasData()"
-             fxLayout fxLayoutAlign="space-between center">
-          <mat-paginator style-paginator
-                         [showTotalPages]="showTotalPages"
-                         [paging]="varPaging"
-                         (pagingChangeEvent)="getPage($event)"
-                         [length]="varPaging.totalElements"
-                         [pageSize]="varPaging.pageSize"
-                         [pageSizeOptions]="pageSizeOptions"
-                         [pageIndex]="varPaging.pageNumber - 1">
-          </mat-paginator>
-          <div class="go-to-page"
-               fxLayout fxLayoutGap="0.3rem" fxLayoutAlign="start baseline">
-            <mat-label>{{ 'common.gotopage' | translate }}</mat-label>
-            <cva-counter-input [(ngModel)]="goToPageNumber"
-                               (ngModelChange)="onChangeGoToPageNumber($event)"
-                               (onEnter)="goToPage()"
-                               [max]="getTotalPage() ? getTotalPage() : 1"
-                               [min]="1"
-                               [isFloatLabel]="false"
-                               [errorMessages]="errorMsg"
-            ></cva-counter-input>
-            <mat-label style="white-space: nowrap">{{ '/' + getTotalPage() }}</mat-label>
-            <button mat-flat-button
-                    [disabled]="goToPageNumber < 1 || goToPageNumber > getTotalPage()"
-                    (click)="goToPage()">{{ 'common.go' | translate }}
-            </button>
-          </div>
-          <h2 *ngIf="!hasData()">{{ 'common.no.records.found' | translate }}</h2>
+                <ng-container *ngFor="let row of superHeaders; let rowIndex = index">
+                    <tr mat-header-row *matHeaderRowDef="TableService.getHeaderColumns(row, rowIndex, buttons)"></tr>
+                </ng-container>
+                <tr mat-header-row
+                    *matHeaderRowDef="TableService.getHeaderColumns(columns, superHeaders.length, buttons)"></tr>
+                <tr mat-row
+                    *matRowDef="let result; columns: TableService.getHeaderColumns(columns, 0, buttons); let i = index"
+                    [ngClass]="result.className"
+                    (click)="onRowClick(result, i)"></tr>
+            </table>
+            <div *ngIf="!(loaderService.isLoading | async)">
+                <div class="paging"
+                     *ngIf="hasData()"
+                     fxLayout fxLayoutAlign="space-between center">
+                    <mat-paginator style-paginator
+                                   [showTotalPages]="showTotalPages"
+                                   [paging]="varPaging"
+                                   (pagingChangeEvent)="getPage($event)"
+                                   [length]="varPaging.totalElements"
+                                   [pageSize]="varPaging.pageSize"
+                                   [pageSizeOptions]="pageSizeOptions"
+                                   [pageIndex]="varPaging.pageNumber - 1">
+                    </mat-paginator>
+                    <div class="go-to-page"
+                         fxLayout fxLayoutGap="0.3rem" fxLayoutAlign="start baseline">
+                        <mat-label>{{ 'common.gotopage' | translate }}</mat-label>
+                        <cva-counter-input [(ngModel)]="goToPageNumber"
+                                           (ngModelChange)="onChangeGoToPageNumber($event)"
+                                           (onEnter)="goToPage()"
+                                           [max]="getTotalPage() ? getTotalPage() : 1"
+                                           [min]="1"
+                                           [isFloatLabel]="false"
+                                           [errorMessages]="errorMsg"
+                        ></cva-counter-input>
+                        <mat-label style="white-space: nowrap">{{ '/' + getTotalPage() }}</mat-label>
+                        <button mat-flat-button
+                                [disabled]="goToPageNumber < 1 || goToPageNumber > getTotalPage()"
+                                (click)="goToPage()">{{ 'common.go' | translate }}
+                        </button>
+                    </div>
+                    <h2 *ngIf="!hasData()">{{ 'common.no.records.found' | translate }}</h2>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  `,
+    `,
                     providers: [
                         { provide: MatPaginatorIntl, useClass: MultiLanguageTablePaginator },
                     ],
@@ -3020,6 +3105,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], expandHeaderButton: [{
                 type: Input
+            }], superHeaders: [{
+                type: Input
             }], pagingChange: [{
                 type: Output
             }], clickAction: [{
@@ -4380,6 +4467,13 @@ class CvaMultiSelectAutocomplete {
                 }
             }, 300);
         }
+        else {
+            // Khi đóng mat-select thì clear searchInput
+            if (this.searchInputRef?.nativeElement) {
+                this.searchInputRef.nativeElement.value = '';
+                this.filterItem('');
+            }
+        }
     }
     getItemSize() {
         return this.sizeOfItemsInListByPixels;
@@ -4394,96 +4488,96 @@ class CvaMultiSelectAutocomplete {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiSelectAutocomplete, deps: [{ token: i1.TranslateService }, { token: i0.Injector }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaMultiSelectAutocomplete, isStandalone: false, selector: "cva-multi-select-autocomplete", inputs: { placeholder: "placeholder", label: "label", hint: "hint", value: "value", options: "options", disabled: "disabled", errorMessages: "errorMessages", multiple: "multiple", required: "required", isTree: "isTree", treeSymbol: "treeSymbol", sizeOfItemsInListByPixels: "sizeOfItemsInListByPixels", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", isFormControl: "isFormControl" }, outputs: { selectionChange: "selectionChange", selectedOptionDataChange: "selectedOptionDataChange" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "cdkVirtualScrollViewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <!-- css labelOutside trong base.theme-->
-    <div class="cva-multi-select-autocomplete"
-         [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
-         fxLayout="row" fxLayout.lt-sm="row wrap">
-      <mat-label *ngIf="isLabelOutside" class="label_width"
-                 fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <div class="label">
-          <div>
-            {{ (label ? label : placeholder) | translate }}<span
-            class="required-label-outside">{{ !!getRequired() ? '*' : '' }}</span>
-          </div>
-        </div>
-      </mat-label>
-      <mat-form-field *ngIf="isShowControl()"
-                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
-                      [hideRequiredMarker]="!isFloatLabel"
-                      fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <mat-label
-          *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}
-        </mat-label>
-        <mat-select [disabled]="disabled"
-                    [placeholder]="placeholder | translate"
-                    [multiple]="multiple"
-                    [(ngModel)]="selectedValue"
-                    [required]="getRequired()"
-                    (selectionChange)="matSelectionChange($event)"
-                    (openedChange)="openChange($event)">
-          <div class="box-search">
-            <mat-checkbox *ngIf="multiple" color="primary" class="box-select-all"
-                          [(ngModel)]="selectAllChecked"
-                          (change)="toggleSelectAll($event)"></mat-checkbox>
-            <input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
-                   (keydown.space)="$event.stopPropagation()"
-                   (input)="filterItem(searchInput.value)"
-                   placeholder="{{'btnSearch' | translate}}...">
-            <div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
-              <button mat-icon-button class="search-button">
-                <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
-              </button>
-            </div>
-          </div>
-          <mat-select-trigger title="{{titleString|translate}}">
-            {{ displayString | translate }}
-          </mat-select-trigger>
-          <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
-                                       [style.height.px]="getViewPortHeight()">
-            <mat-option *cdkVirtualFor="let option of filteredOptions; let i = index"
-                        [attr.data-optionIndex]="i"
-                        [disabled]="option.disabled" [value]="option.value"
-                        [ngClass]="{'tree-mat-option': isTree}"
-                        title="{{option.displayValue|translate}}"
-                        (onSelectionChange)="onSelectionChange($event)">
-              <div *ngIf="!isTree">{{ option.displayValue | translate }}</div>
-              <div *ngIf="!!isTree" class="tree-multiline-mat-option">
-                <div mat-line>{{ onDisplayTreeData(option.displayValue, true) }}</div>
-                <p mat-line>{{ onDisplayTreeData(option.displayValue, false) }}</p>
-              </div>
-            </mat-option>
-          </cdk-virtual-scroll-viewport>
-          <ng-container *ngIf="multiple">
-            <ng-container *ngFor="let option of selectedValue; let i = index">
-              <mat-option class="selected-options" [value]="option" *ngIf="i===0">
-                {{ option }}
-              </mat-option>
+        <!-- css labelOutside trong base.theme-->
+        <div class="cva-multi-select-autocomplete"
+             [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
+             fxLayout="row" fxLayout.lt-sm="row wrap">
+            <mat-label *ngIf="isLabelOutside" class="label_width"
+                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+                <div class="label">
+                    <div>
+                        {{ (label ? label : placeholder) | translate }}<span
+                            class="required-label-outside">{{ !!getRequired() ? '*' : '' }}</span>
+                    </div>
+                </div>
+            </mat-label>
+            <mat-form-field *ngIf="isShowControl()"
+                            appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+                            [hideRequiredMarker]="!isFloatLabel"
+                            fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+                <mat-label
+                        *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}
+                </mat-label>
+                <mat-select [disabled]="disabled"
+                            [placeholder]="placeholder | translate"
+                            [multiple]="multiple"
+                            [(ngModel)]="selectedValue"
+                            [required]="getRequired()"
+                            (selectionChange)="matSelectionChange($event)"
+                            (openedChange)="openChange($event)">
+                    <div class="box-search">
+                        <mat-checkbox *ngIf="multiple" color="primary" class="box-select-all"
+                                      [(ngModel)]="selectAllChecked"
+                                      (change)="toggleSelectAll($event)"></mat-checkbox>
+                        <input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
+                               (keydown.space)="$event.stopPropagation()"
+                               (input)="filterItem(searchInput.value)"
+                               placeholder="{{'btnSearch' | translate}}...">
+                        <div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
+                            <button mat-icon-button class="search-button">
+                                <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
+                            </button>
+                        </div>
+                    </div>
+                    <mat-select-trigger title="{{titleString|translate}}">
+                        {{ displayString | translate }}
+                    </mat-select-trigger>
+                    <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
+                                                 [style.height.px]="getViewPortHeight()">
+                        <mat-option *cdkVirtualFor="let option of filteredOptions; let i = index"
+                                    [attr.data-optionIndex]="i"
+                                    [disabled]="option.disabled" [value]="option.value"
+                                    [ngClass]="{'tree-mat-option': isTree}"
+                                    title="{{option.displayValue|translate}}"
+                                    (onSelectionChange)="onSelectionChange($event)">
+                            <div *ngIf="!isTree">{{ option.displayValue | translate }}</div>
+                            <div *ngIf="!!isTree" class="tree-multiline-mat-option">
+                                <div mat-line>{{ onDisplayTreeData(option.displayValue, true) }}</div>
+                                <p mat-line>{{ onDisplayTreeData(option.displayValue, false) }}</p>
+                            </div>
+                        </mat-option>
+                    </cdk-virtual-scroll-viewport>
+                    <ng-container *ngIf="multiple">
+                        <ng-container *ngFor="let option of selectedValue; let i = index">
+                            <mat-option class="selected-options" [value]="option" *ngIf="i===0">
+                                {{ option }}
+                            </mat-option>
+                        </ng-container>
+                    </ng-container>
+                    <ng-container *ngIf="!multiple">
+                        <mat-option class="selected-options" *ngIf="!!selectedValue"
+                                    [value]="selectedValue">{{ selectedValue }}
+                        </mat-option>
+                    </ng-container>
+                </mat-select>
+                <mat-icon matSuffix>expand_more</mat-icon>
+                <mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
+                <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
+                    {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
+                </mat-hint>
+            </mat-form-field>
+            <ng-container *ngIf="!isShowControl()">
+                <div class="cva-style-disable-text">
+                    <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+                        {{ (label ? label : placeholder) | translate }}
+                    </mat-label>
+                    <div [title]="titleString | translate">
+                        {{ displayString | translate }}
+                    </div>
+                </div>
             </ng-container>
-          </ng-container>
-          <ng-container *ngIf="!multiple">
-            <mat-option class="selected-options" *ngIf="!!selectedValue"
-                        [value]="selectedValue">{{ selectedValue }}
-            </mat-option>
-          </ng-container>
-        </mat-select>
-        <mat-icon matSuffix>expand_more</mat-icon>
-        <mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
-        <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
-          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
-        </mat-hint>
-      </mat-form-field>
-      <ng-container *ngIf="!isShowControl()">
-        <div class="cva-style-disable-text">
-          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
-            {{ (label ? label : placeholder) | translate }}
-          </mat-label>
-          <div [title]="titleString | translate">
-            {{ displayString | translate }}
-          </div>
         </div>
-      </ng-container>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiSelectAutocomplete, decorators: [{
             type: Component,
@@ -4491,96 +4585,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     selector: 'cva-multi-select-autocomplete',
                     standalone: false,
                     template: `
-    <!-- css labelOutside trong base.theme-->
-    <div class="cva-multi-select-autocomplete"
-         [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
-         fxLayout="row" fxLayout.lt-sm="row wrap">
-      <mat-label *ngIf="isLabelOutside" class="label_width"
-                 fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <div class="label">
-          <div>
-            {{ (label ? label : placeholder) | translate }}<span
-            class="required-label-outside">{{ !!getRequired() ? '*' : '' }}</span>
-          </div>
-        </div>
-      </mat-label>
-      <mat-form-field *ngIf="isShowControl()"
-                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
-                      [hideRequiredMarker]="!isFloatLabel"
-                      fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <mat-label
-          *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}
-        </mat-label>
-        <mat-select [disabled]="disabled"
-                    [placeholder]="placeholder | translate"
-                    [multiple]="multiple"
-                    [(ngModel)]="selectedValue"
-                    [required]="getRequired()"
-                    (selectionChange)="matSelectionChange($event)"
-                    (openedChange)="openChange($event)">
-          <div class="box-search">
-            <mat-checkbox *ngIf="multiple" color="primary" class="box-select-all"
-                          [(ngModel)]="selectAllChecked"
-                          (change)="toggleSelectAll($event)"></mat-checkbox>
-            <input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
-                   (keydown.space)="$event.stopPropagation()"
-                   (input)="filterItem(searchInput.value)"
-                   placeholder="{{'btnSearch' | translate}}...">
-            <div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
-              <button mat-icon-button class="search-button">
-                <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
-              </button>
-            </div>
-          </div>
-          <mat-select-trigger title="{{titleString|translate}}">
-            {{ displayString | translate }}
-          </mat-select-trigger>
-          <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
-                                       [style.height.px]="getViewPortHeight()">
-            <mat-option *cdkVirtualFor="let option of filteredOptions; let i = index"
-                        [attr.data-optionIndex]="i"
-                        [disabled]="option.disabled" [value]="option.value"
-                        [ngClass]="{'tree-mat-option': isTree}"
-                        title="{{option.displayValue|translate}}"
-                        (onSelectionChange)="onSelectionChange($event)">
-              <div *ngIf="!isTree">{{ option.displayValue | translate }}</div>
-              <div *ngIf="!!isTree" class="tree-multiline-mat-option">
-                <div mat-line>{{ onDisplayTreeData(option.displayValue, true) }}</div>
-                <p mat-line>{{ onDisplayTreeData(option.displayValue, false) }}</p>
-              </div>
-            </mat-option>
-          </cdk-virtual-scroll-viewport>
-          <ng-container *ngIf="multiple">
-            <ng-container *ngFor="let option of selectedValue; let i = index">
-              <mat-option class="selected-options" [value]="option" *ngIf="i===0">
-                {{ option }}
-              </mat-option>
+        <!-- css labelOutside trong base.theme-->
+        <div class="cva-multi-select-autocomplete"
+             [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
+             fxLayout="row" fxLayout.lt-sm="row wrap">
+            <mat-label *ngIf="isLabelOutside" class="label_width"
+                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+                <div class="label">
+                    <div>
+                        {{ (label ? label : placeholder) | translate }}<span
+                            class="required-label-outside">{{ !!getRequired() ? '*' : '' }}</span>
+                    </div>
+                </div>
+            </mat-label>
+            <mat-form-field *ngIf="isShowControl()"
+                            appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+                            [hideRequiredMarker]="!isFloatLabel"
+                            fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+                <mat-label
+                        *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}
+                </mat-label>
+                <mat-select [disabled]="disabled"
+                            [placeholder]="placeholder | translate"
+                            [multiple]="multiple"
+                            [(ngModel)]="selectedValue"
+                            [required]="getRequired()"
+                            (selectionChange)="matSelectionChange($event)"
+                            (openedChange)="openChange($event)">
+                    <div class="box-search">
+                        <mat-checkbox *ngIf="multiple" color="primary" class="box-select-all"
+                                      [(ngModel)]="selectAllChecked"
+                                      (change)="toggleSelectAll($event)"></mat-checkbox>
+                        <input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
+                               (keydown.space)="$event.stopPropagation()"
+                               (input)="filterItem(searchInput.value)"
+                               placeholder="{{'btnSearch' | translate}}...">
+                        <div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
+                            <button mat-icon-button class="search-button">
+                                <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
+                            </button>
+                        </div>
+                    </div>
+                    <mat-select-trigger title="{{titleString|translate}}">
+                        {{ displayString | translate }}
+                    </mat-select-trigger>
+                    <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
+                                                 [style.height.px]="getViewPortHeight()">
+                        <mat-option *cdkVirtualFor="let option of filteredOptions; let i = index"
+                                    [attr.data-optionIndex]="i"
+                                    [disabled]="option.disabled" [value]="option.value"
+                                    [ngClass]="{'tree-mat-option': isTree}"
+                                    title="{{option.displayValue|translate}}"
+                                    (onSelectionChange)="onSelectionChange($event)">
+                            <div *ngIf="!isTree">{{ option.displayValue | translate }}</div>
+                            <div *ngIf="!!isTree" class="tree-multiline-mat-option">
+                                <div mat-line>{{ onDisplayTreeData(option.displayValue, true) }}</div>
+                                <p mat-line>{{ onDisplayTreeData(option.displayValue, false) }}</p>
+                            </div>
+                        </mat-option>
+                    </cdk-virtual-scroll-viewport>
+                    <ng-container *ngIf="multiple">
+                        <ng-container *ngFor="let option of selectedValue; let i = index">
+                            <mat-option class="selected-options" [value]="option" *ngIf="i===0">
+                                {{ option }}
+                            </mat-option>
+                        </ng-container>
+                    </ng-container>
+                    <ng-container *ngIf="!multiple">
+                        <mat-option class="selected-options" *ngIf="!!selectedValue"
+                                    [value]="selectedValue">{{ selectedValue }}
+                        </mat-option>
+                    </ng-container>
+                </mat-select>
+                <mat-icon matSuffix>expand_more</mat-icon>
+                <mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
+                <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
+                    {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
+                </mat-hint>
+            </mat-form-field>
+            <ng-container *ngIf="!isShowControl()">
+                <div class="cva-style-disable-text">
+                    <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+                        {{ (label ? label : placeholder) | translate }}
+                    </mat-label>
+                    <div [title]="titleString | translate">
+                        {{ displayString | translate }}
+                    </div>
+                </div>
             </ng-container>
-          </ng-container>
-          <ng-container *ngIf="!multiple">
-            <mat-option class="selected-options" *ngIf="!!selectedValue"
-                        [value]="selectedValue">{{ selectedValue }}
-            </mat-option>
-          </ng-container>
-        </mat-select>
-        <mat-icon matSuffix>expand_more</mat-icon>
-        <mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
-        <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
-          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
-        </mat-hint>
-      </mat-form-field>
-      <ng-container *ngIf="!isShowControl()">
-        <div class="cva-style-disable-text">
-          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
-            {{ (label ? label : placeholder) | translate }}
-          </mat-label>
-          <div [title]="titleString | translate">
-            {{ displayString | translate }}
-          </div>
         </div>
-      </ng-container>
-    </div>
-  `,
+    `,
                 }]
         }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i0.Injector }, { type: i1$2.NgControl, decorators: [{
                     type: Self
@@ -4973,10 +5067,15 @@ class CvaSmartTableComponent {
     ref;
     config;
     injector;
+    ColumnTypeEnum = ColumnTypeEnum;
+    IconTypeEnum = IconTypeEnum;
+    AlignEnum = AlignEnum;
+    TableService = TableService;
     cellComponents;
     moduleName = '';
     columns = [];
     buttons = [];
+    superHeaders = [];
     value = [];
     minRow = 0;
     maxRow = 9999;
@@ -5005,24 +5104,6 @@ class CvaSmartTableComponent {
             ngControl.valueAccessor = this;
         }
     }
-    get AlignEnum() {
-        return AlignEnum;
-    }
-    get IconTypes() {
-        return IconTypeEnum;
-    }
-    get TableService() {
-        return TableService;
-    }
-    get displayedColumns() {
-        if (!this.$displayedColumns || this.$displayedColumns.length <= 0) {
-            this.$displayedColumns = this.columns.map((c) => c.columnDef);
-            if (this.buttons) {
-                this.$displayedColumns = this.$displayedColumns.concat(this.buttons.map((b) => b.columnDef));
-            }
-        }
-        return this.$displayedColumns;
-    }
     get displayedFooters() {
         if (!this.$displayedFooters || this.$displayedFooters.length <= 0) {
             for (const column of this.columns) {
@@ -5038,9 +5119,6 @@ class CvaSmartTableComponent {
         }
         return this.$displayedFooters;
     }
-    get ColumnTypes() {
-        return ColumnTypeEnum;
-    }
     propagateChange = (_) => {
         /*NON-EMPTY FOR COMPILE*/
     };
@@ -5103,16 +5181,6 @@ class CvaSmartTableComponent {
         this.callValidator();
         this.onChange.emit();
     }
-    toggleSelectAll(val, col) {
-        if (this.value) {
-            this.value.forEach(v => {
-                v.checked = val.checked;
-            });
-        }
-        if (col.onHeaderCellValueChange) {
-            col.onHeaderCellValueChange(val.checked);
-        }
-    }
     toggleSelect(val, result, column) {
         let count = 0;
         if (this.value && this.value.length > 0) {
@@ -5165,9 +5233,6 @@ class CvaSmartTableComponent {
             this.formControl.updateValueAndValidity();
         }
     }
-    getRequired(column) {
-        return typeof (column.isRequired) === 'function' ? column.isRequired() : (column.isRequired ?? false);
-    }
     getIsDecimal(column) {
         return column.isDecimal ? typeof (column.isDecimal) === 'boolean' ? column.isDecimal : column.isDecimal() : false;
     }
@@ -5215,253 +5280,276 @@ class CvaSmartTableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaSmartTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: InjectTokenNextSolutionsConfig }, { token: i0.Injector }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaSmartTableComponent, isStandalone: false, selector: "cva-smart-table", inputs: { moduleName: "moduleName", columns: "columns", buttons: "buttons", value: "value", minRow: "minRow", maxRow: "maxRow", errorMessages: "errorMessages", isFormControl: "isFormControl", isSticky: "isSticky", isStickyHeader: "isStickyHeader", isStickyFooter: "isStickyFooter", isExpandRowTable: "isExpandRowTable", expandRowProperty: "expandRowProperty" }, outputs: { clickAction: "clickAction", onChange: "onChange" }, viewQueries: [{ propertyName: "matTable", first: true, predicate: ["matTable"], descendants: true }, { propertyName: "cellComponents", predicate: ["cellComponentRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="table-responsive"
-         [ngClass]="{'fixed_header': isSticky||isStickyHeader, 'fixed_footer': isSticky||isStickyFooter}">
-      <table mat-table [dataSource]="datasource" #matTable class="mat-elevation-z8 cva-smart-table">
-        <ng-container *ngFor="let column of columns" matColumnDef="{{column.columnDef}}">
-          <ng-container *matHeaderCellDef>
-            <th mat-header-cell class="{{TableService.getColumnHeaderClassName(column)}}"
-                *ngIf="onDisplayHeaderCell(column)">
-              <!--                        *ngIf="getColumnType(column, result)!==ColumnTypes.CHECKBOX"-->
-              <div [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   fxLayout="row"
-                   [fxLayoutAlign]="column.alignHeader ? column.alignHeader : TableService.alignCellContent(column)">
-                <mat-checkbox
-                  *ngIf="TableService.getColumnType(column, null)===ColumnTypes.CHECKBOX && !column.isNotShowHeaderCheckbox"
-                  color="primary" class="box-select-all margin-right-5" [(ngModel)]="selectAllChecked"
-                  (change)="toggleSelectAll($event, column)">
-                </mat-checkbox>
-                {{ TableService.displayHeaderName(column, moduleName) | translate }}<span
-                style="color: red">{{ getRequired(column) ? '*' : '' }}</span>
-              </div>
-            </th>
-          </ng-container>
-          <ng-container *matCellDef="let result;  let i = index">
-            <td mat-cell [ngClass]="TableService.getColumnClassName(column,result)"
-                *ngIf="TableService.onDisplayCell(column, result)"
-                [ngSwitch]="TableService.getColumnType(column, result)">
-              <div title="{{column.title(result)}}"
-                   *ngSwitchCase="ColumnTypes.VIEW"
-                   class="viewData {{TableService.getColumnClassName(column,result)}}"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)">
-                {{ column.cell(result) }}
-              </div>
-              <div class="link viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.LINK"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <a [routerLink]="[column.link ? column.link(result) : '']">{{ column.cell(result) }}</a>
-              </div>
-              <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.IMG"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="column.cell(result) | secure | async"
-                     #imgRef
-                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.IMG_NO_SECURE"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="column.cell(result)"
-                     #imgRef
-                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <div *ngSwitchCase="ColumnTypes.BASE64"
-                   class="viewData img-view base64 {{TableService.getColumnClassName(column,result)}}"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="'data:image/png;base64,'+column.cell(result)"
-                     #base64ImgRef
-                     (error)="TableService.onErrorImgEvent(base64ImgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <ng-container *ngSwitchCase="ColumnTypes.BUTTON">
-                <div *ngIf="!!column.button"
-                     class="{{TableService.getColumnClassName(column, result)}}"
-                     fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                     (click)="$event.stopPropagation()">
-                  <button mat-icon-button type="button"
-                          color="{{column.button.color}}"
-                          [ngClass]="column.button.className"
-                          (click)="onClick(column.button.click, result, i)"
-                          disabled="{{column.button && column.button.disabled ? column.button.disabled(result) : false}}"
-                          matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
-                          [ngSwitch]="TableService.getIconType(column.button)">
-                    <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ column.button.icon }}</mat-icon>
-                    <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{column.button.icon}}"></i>
-                  </button>
-                </div>
-              </ng-container>
-              <cva-counter-input *ngSwitchCase="ColumnTypes.INPUT_COUNTER"
-                                 #cellComponentRef
-                                 class="inputNumber" #nsCounterInput
-                                 [isFormControl]="false"
-                                 [alignNumber]="getAlign(column)"
-                                 [disabled]="column.disabled ? column.disabled(result) : false"
-                                 [value]="result[column.columnDef]"
-                                 [required]="getRequired(column)"
-                                 [errorMessages]="getErrorMessageMap(column)"
-                                 [isDecimal]="getIsDecimal(column)"
-                                 [min]="column.min ? column.min(result) : null"
-                                 [max]="column.max ? column.max(result) : null"
-                                 (onChange)="onCellValueChange(result, column, $event);">
-              </cva-counter-input>
-              <cva-input *ngSwitchCase="ColumnTypes.INPUT"
-                         #cellComponentRef
-                         [isFormControl]="false"
-                         [alignText]="getAlign(column)"
-                         [disabled]="column.disabled ? column.disabled(result) : false"
-                         [text]="result[column.columnDef]"
-                         [minLength]="column.min ? column.min(result) : undefined"
-                         [maxLength]="column.max ? column.max(result) : undefined"
-                         [required]="getRequired(column)"
-                         [errorMessages]="getErrorMessageMap(column)"
-                         (onChange)="onCellValueChange(result, column, $event);">
-              </cva-input>
-              <cva-input *ngSwitchCase="ColumnTypes.INPUT_CURRENCY"
-                         #cellComponentRef
-                         [isFormControl]="false"
-                         [alignText]="getAlign(column)"
-                         [disabled]="column.disabled ? column.disabled(result) : false"
-                         [text]="result[column.columnDef]"
-                         [minLength]="column.min ? column.min(result) : undefined"
-                         [maxLength]="column.max ? column.max(result) : undefined"
-                         [required]="getRequired(column)"
-                         [errorMessages]="getErrorMessageMap(column)"
-                         (onChange)="onCellValueChange(result, column, $event);"
-                         [pattern]="getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$'"
-                         [formatFunc]="formatFunc">
-              </cva-input>
-              <cva-date-picker *ngSwitchCase="ColumnTypes.DATE_PICKER"
-                               #cellComponentRef
-                               [value]="result[column.columnDef]"
-                               [isFormControl]="false"
-                               [minDate]="column.min ? column.min(result) : null"
-                               [maxDate]="column.max ? column.max(result) : null"
-                               [required]="getRequired(column)"
-                               [disabled]="column.disabled ? column.disabled(result) : false"
-                               [errorMessages]="getErrorMessageMap(column)"
-                               (onChange)="onCellValueChange(result, column, $event);">
-              </cva-date-picker>
-              <cva-multi-select-autocomplete [isFormControl]="false"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaSmartTableComponent, isStandalone: false, selector: "cva-smart-table", inputs: { moduleName: "moduleName", columns: "columns", buttons: "buttons", superHeaders: "superHeaders", value: "value", minRow: "minRow", maxRow: "maxRow", errorMessages: "errorMessages", isFormControl: "isFormControl", isSticky: "isSticky", isStickyHeader: "isStickyHeader", isStickyFooter: "isStickyFooter", isExpandRowTable: "isExpandRowTable", expandRowProperty: "expandRowProperty" }, outputs: { clickAction: "clickAction", onChange: "onChange" }, viewQueries: [{ propertyName: "matTable", first: true, predicate: ["matTable"], descendants: true }, { propertyName: "cellComponents", predicate: ["cellComponentRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div class="table-responsive"
+             [ngClass]="{'fixed_header': isSticky||isStickyHeader, 'fixed_footer': isSticky||isStickyFooter}">
+            <table mat-table [dataSource]="datasource" #matTable class="mat-elevation-z8 cva-smart-table">
+                <ng-container *ngFor="let column of columns" matColumnDef="{{column.columnDef}}">
+                    <ng-container *matHeaderCellDef>
+                        <th mat-header-cell [ngClass]="TableService.getColumnHeaderClassName(column)"
+                            [attr.colspan]="column?.colSpan" [attr.rowspan]="column?.rowSpan"
+                            *ngIf="onDisplayHeaderCell(column)">
+                            <cva-table-header-cell [moduleName]="moduleName" [column]="column"
+                                                   [selectAllChecked]="selectAllChecked"
+                                                   (changeSelectAll)="selectAllChecked = TableService.toggleSelectAll(value, $event)">
+                            </cva-table-header-cell>
+                        </th>
+                    </ng-container>
+                    <ng-container *matCellDef="let result;  let i = index">
+                        <td mat-cell [ngClass]="TableService.getColumnClassName(column,result)"
+                            *ngIf="TableService.onDisplayCell(column, result)"
+                            [ngSwitch]="TableService.getColumnType(column, result)">
+                            <div title="{{column.title(result)}}"
+                                 *ngSwitchCase="ColumnTypeEnum.VIEW"
+                                 class="viewData {{TableService.getColumnClassName(column,result)}}"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)">
+                                {{ column.cell(result) }}
+                            </div>
+                            <div class="link viewData"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.LINK"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <a [routerLink]="[column.link ? column.link(result) : '']">{{ column.cell(result) }}</a>
+                            </div>
+                            <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.IMG"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="column.cell(result) | secure | async"
+                                     #imgRef
+                                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt=""/>
+                            </div>
+                            <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.IMG_NO_SECURE"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="column.cell(result)"
+                                     #imgRef
+                                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt=""/>
+                            </div>
+                            <div *ngSwitchCase="ColumnTypeEnum.BASE64"
+                                 class="viewData img-view base64 {{TableService.getColumnClassName(column,result)}}"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="'data:image/png;base64,'+column.cell(result)"
+                                     #base64ImgRef
+                                     (error)="TableService.onErrorImgEvent(base64ImgRef, config.NO_IMAGE_AVAILABLE)"
+                                     alt=""/>
+                            </div>
+                            <ng-container *ngSwitchCase="ColumnTypeEnum.BUTTON">
+                                <div *ngIf="!!column.button"
+                                     class="{{TableService.getColumnClassName(column, result)}}"
+                                     fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                     (click)="$event.stopPropagation()">
+                                    <button mat-icon-button type="button"
+                                            color="{{column.button.color}}"
+                                            [ngClass]="column.button.className"
+                                            (click)="onClick(column.button.click, result, i)"
+                                            disabled="{{column.button && column.button.disabled ? column.button.disabled(result) : false}}"
+                                            matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
+                                            [ngSwitch]="TableService.getIconType(column.button)">
+                                        <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ column.button.icon }}
+                                        </mat-icon>
+                                        <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{column.button.icon}}"></i>
+                                    </button>
+                                </div>
+                            </ng-container>
+                            <cva-counter-input *ngSwitchCase="ColumnTypeEnum.INPUT_COUNTER"
+                                               #cellComponentRef
+                                               class="inputNumber" #nsCounterInput
+                                               [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
+                                               [isFormControl]="false"
+                                               [alignNumber]="getAlign(column)"
+                                               [disabled]="column.disabled ? column.disabled(result) : false"
+                                               [value]="result[column.columnDef]"
+                                               [required]="TableService.getRequired(column)"
+                                               [errorMessages]="getErrorMessageMap(column)"
+                                               [isDecimal]="getIsDecimal(column)"
+                                               [min]="column.min ? column.min(result) : null"
+                                               [max]="column.max ? column.max(result) : null"
+                                               (onChange)="onCellValueChange(result, column, $event);">
+                            </cva-counter-input>
+                            <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT"
+                                       #cellComponentRef
+                                       [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
+                                       [isFormControl]="false"
+                                       [alignText]="getAlign(column)"
+                                       [disabled]="column.disabled ? column.disabled(result) : false"
+                                       [text]="result[column.columnDef]"
+                                       [minLength]="column.min ? column.min(result) : undefined"
+                                       [maxLength]="column.max ? column.max(result) : undefined"
+                                       [required]="TableService.getRequired(column)"
+                                       [errorMessages]="getErrorMessageMap(column)"
+                                       (onChange)="onCellValueChange(result, column, $event);"
+                                       [pattern]="column.pattern ? column.pattern : undefined"
+                                       [patternFilter]="column.patternFilter ? column.patternFilter : ''">
+                            </cva-input>
+                            <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
+                                       #cellComponentRef
+                                       [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
+                                       [isFormControl]="false"
+                                       [alignText]="getAlign(column)"
+                                       [disabled]="column.disabled ? column.disabled(result) : false"
+                                       [text]="result[column.columnDef]"
+                                       [minLength]="column.min ? column.min(result) : undefined"
+                                       [maxLength]="column.max ? column.max(result) : undefined"
+                                       [required]="TableService.getRequired(column)"
+                                       [errorMessages]="getErrorMessageMap(column)"
+                                       (onChange)="onCellValueChange(result, column, $event);"
+                                       [pattern]="getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$'"
+                                       [formatFunc]="formatFunc">
+                            </cva-input>
+                            <cva-date-picker *ngSwitchCase="ColumnTypeEnum.DATE_PICKER"
                                              #cellComponentRef
-                                             *ngSwitchCase="ColumnTypes.MULTI_SELECT_AUTOCOMPLETE"
-                                             class="multiSelectAutocomplete"
-                                             [isTree]="column.isTree??false"
                                              [value]="result[column.columnDef]"
-                                             [errorMessages]="getErrorMessageMap(column)"
-                                             [required]="getRequired(column)"
+                                             [isFormControl]="false"
+                                             [minDate]="column.min ? column.min(result) : null"
+                                             [maxDate]="column.max ? column.max(result) : null"
+                                             [required]="TableService.getRequired(column)"
                                              [disabled]="column.disabled ? column.disabled(result) : false"
-                                             [multiple]="column.isMultipleSelect??false"
-                                             [options]="column.optionValues ? column.optionValues(result) : []"
-                                             (selectionChange)="onCellValueChange(result, column, $event);">
-              </cva-multi-select-autocomplete>
-              <div class="checkbox-cell"
-                   fxLayout="row"
-                   [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   *ngSwitchCase="ColumnTypes.CHECKBOX">
-                <mat-checkbox [(ngModel)]="result[column.columnDef]" color="primary"
-                              *ngIf="column.display ? column.display(result) : true"
-                              [disabled]="column.disabled ? column.disabled(result) : false"
-                              (change)="toggleSelect($event,result, column)">
-                </mat-checkbox>
-              </div>
-              <cva-live-searching *ngSwitchCase="ColumnTypes.LIVE_SEARCHING"
-                                  #cellComponentRef
-                                  [isFormControl]="false" [required]="getRequired(column)"
-                                  [row]="result" [columnDef]="column.columnDef"
-                                  [searchFn]="column.searchFn"
-                                  [mappingConfig]="column.mappingConfig"
-                                  [displayKey]="column.displayKey??''"
-                                  [errorMessages]="getErrorMessageMap(column)"
-                                  (onChange)="onCellValueChange(result, column, $event)">
-              </cva-live-searching>
-            </td>
-          </ng-container>
-        </ng-container>
-        <ng-container *ngFor="let button of buttons; let i = index" matColumnDef="{{button.columnDef}}">
-          <ng-container *matHeaderCellDef="let header">
-            <th mat-header-cell
-                [ngClass]="button.className"
-                *ngIf="TableService.onDisplayButtonHeaderCell(buttons, button, header, i) && !!buttonColspan"
-                (click)="$event.stopPropagation()"
-                [attr.colspan]="buttonColspan">
-              <!--                        [fxFlex]="getHeaderButtonWidth(i) + 'px' "-->
-              <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
-                <button mat-icon-button type="button"
-                        class="{{button.className}}"
-                        color="{{$any(btnHeader).color}}"
-                        (click)="onClick($any(btnHeader).click, null, null)"
-                        [disabled]="(btnHeader && $any(btnHeader).disabled) ? $any(btnHeader).disabled(header) : false"
-                        *ngIf="(btnHeader && btnHeader.display) ? btnHeader.display(header) : false"
-                        matTooltip="{{((btnHeader && $any(btnHeader).title) ? $any(btnHeader).title : '') | translate}}"
-                        [ngSwitch]="TableService.getIconType($any(btnHeader))">
-                  <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ $any(btnHeader).icon }}</mat-icon>
-                  <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{$any(btnHeader).icon}}"></i>
-                </button>
-              </ng-container>
-              <ng-container *ngIf="TableService.getButtonHeaderString(button) as btnHeader">
-                <div title="{{$any(btnHeader) | translate}}"
-                     class="viewData"
-                     fxLayout="row"
-                     fxLayoutAlign="{{button.alignHeader ? button.alignHeader : AlignEnum.LEFT}} center">
-                  {{ $any(btnHeader) | translate }}
-                </div>
-              </ng-container>
-            </th>
-          </ng-container>
-          <ng-container *matCellDef="let cell; let i = index">
-            <td mat-cell [ngClass]="button.className"
-                *ngIf="TableService.onDisplayButtonCell(button, cell)"
-                (click)="$event.stopPropagation()">
-              <button mat-icon-button type="button"
-                      color="{{button.color}}"
-                      [ngClass]="button.className"
-                      (click)="onClick(button.click, cell, i)"
-                      disabled="{{button && button.disabled ? button.disabled(cell) : false}}"
-                      matTooltip="{{(button.title ? button.title : '') | translate}}"
-                      [ngSwitch]="TableService.getIconType(button)">
-                <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ button.icon }}</mat-icon>
-                <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{button.icon}}"></i>
-              </button>
-            </td>
-          </ng-container>
-        </ng-container>
-        <ng-container *ngFor="let column of columns">
-          <ng-container *ngFor="let footer of column.footers; let i = index"
-                        matColumnDef="{{i}}-{{column.columnDef}}">
-            <ng-container *matFooterCellDef>
-              <td mat-footer-cell *ngIf="onDisplayFooter(footer, datasource.data)"
-                  [attr.colspan]="TableService.getColspan(footer, datasource.data)"
-                  class="{{TableService.getColumnClassName(column,datasource.data)}} {{TableService.getColumnClassName(column.footer,datasource.data)}}">
-                <div title="{{footer.title(datasource.data)}}"
-                     class="viewData {{TableService.getColumnClassName(column,datasource.data)}}"
-                     fxLayout="row"
-                     [fxLayoutAlign]="footer.align ? footer.align : AlignEnum.LEFT">
-                  {{ footer.cell(datasource.data) }}
-                </div>
-              </td>
-            </ng-container>
-          </ng-container>
-        </ng-container>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky||isStickyHeader"></tr>
-        <tr mat-row *matRowDef="let result; columns: displayedColumns;" class="{{result.className}}"
-            [ngClass]="{'childRow0': !!result.isChildRow && result.parentRowClassIndex === 0,
+                                             [errorMessages]="getErrorMessageMap(column)"
+                                             (onChange)="onCellValueChange(result, column, $event);">
+                            </cva-date-picker>
+                            <cva-multi-select-autocomplete [isFormControl]="false"
+                                                           #cellComponentRef
+                                                           *ngSwitchCase="ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE"
+                                                           class="multiSelectAutocomplete"
+                                                           [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
+                                                           [isTree]="column.isTree??false"
+                                                           [value]="result[column.columnDef]"
+                                                           [errorMessages]="getErrorMessageMap(column)"
+                                                           [required]="TableService.getRequired(column)"
+                                                           [disabled]="column.disabled ? column.disabled(result) : false"
+                                                           [multiple]="column.isMultipleSelect??false"
+                                                           [options]="column.optionValues ? column.optionValues(result) : []"
+                                                           (selectionChange)="onCellValueChange(result, column, $event);">
+                            </cva-multi-select-autocomplete>
+                            <div class="checkbox-cell"
+                                 fxLayout="row"
+                                 [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 *ngSwitchCase="ColumnTypeEnum.CHECKBOX">
+                                <mat-checkbox [(ngModel)]="result[column.columnDef]" color="primary"
+                                              *ngIf="column.display ? column.display(result) : true"
+                                              [disabled]="column.disabled ? column.disabled(result) : false"
+                                              (change)="toggleSelect($event,result, column)">
+                                </mat-checkbox>
+                            </div>
+                            <cva-live-searching *ngSwitchCase="ColumnTypeEnum.LIVE_SEARCHING"
+                                                #cellComponentRef
+                                                [isFormControl]="false" [required]="TableService.getRequired(column)"
+                                                [row]="result" [columnDef]="column.columnDef"
+                                                [searchFn]="column.searchFn"
+                                                [mappingConfig]="column.mappingConfig"
+                                                [displayKey]="column.displayKey??''"
+                                                [errorMessages]="getErrorMessageMap(column)"
+                                                (onChange)="onCellValueChange(result, column, $event)">
+                            </cva-live-searching>
+                        </td>
+                    </ng-container>
+                </ng-container>
+                <ng-container *ngFor="let button of buttons; let i = index" matColumnDef="{{button.columnDef}}">
+                    <ng-container *matHeaderCellDef="let header">
+                        <th mat-header-cell
+                            [ngClass]="button.className"
+                            *ngIf="TableService.onDisplayButtonHeaderCell(buttons, button, header, i) && !!buttonColspan"
+                            (click)="$event.stopPropagation()"
+                            [attr.colspan]="buttonColspan" [attr.rowspan]="superHeaders.length + 1">
+                            <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
+                                <button mat-icon-button type="button"
+                                        class="{{button.className}}"
+                                        color="{{$any(btnHeader).color}}"
+                                        (click)="onClick($any(btnHeader).click, null, null)"
+                                        [disabled]="(btnHeader && $any(btnHeader).disabled) ? $any(btnHeader).disabled(header) : false"
+                                        *ngIf="(btnHeader && btnHeader.display) ? btnHeader.display(header) : false"
+                                        matTooltip="{{((btnHeader && $any(btnHeader).title) ? $any(btnHeader).title : '') | translate}}"
+                                        [ngSwitch]="TableService.getIconType($any(btnHeader))">
+                                    <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ $any(btnHeader).icon }}
+                                    </mat-icon>
+                                    <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{$any(btnHeader).icon}}"></i>
+                                </button>
+                            </ng-container>
+                            <ng-container *ngIf="TableService.getButtonHeaderString(button) as btnHeader">
+                                <div title="{{$any(btnHeader) | translate}}"
+                                     class="viewData"
+                                     fxLayout="row"
+                                     fxLayoutAlign="{{button.alignHeader ? button.alignHeader : AlignEnum.LEFT}} center">
+                                    {{ $any(btnHeader) | translate }}
+                                </div>
+                            </ng-container>
+                        </th>
+                    </ng-container>
+                    <ng-container *matCellDef="let cell; let i = index">
+                        <td mat-cell [ngClass]="button.className"
+                            *ngIf="TableService.onDisplayButtonCell(button, cell)"
+                            (click)="$event.stopPropagation()">
+                            <button mat-icon-button type="button"
+                                    color="{{button.color}}"
+                                    [ngClass]="button.className"
+                                    (click)="onClick(button.click, cell, i)"
+                                    disabled="{{button && button.disabled ? button.disabled(cell) : false}}"
+                                    matTooltip="{{(button.title ? button.title : '') | translate}}"
+                                    [ngSwitch]="TableService.getIconType(button)">
+                                <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ button.icon }}</mat-icon>
+                                <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{button.icon}}"></i>
+                            </button>
+                        </td>
+                    </ng-container>
+                </ng-container>
+                <ng-container *ngFor="let column of columns">
+                    <ng-container *ngFor="let footer of column.footers; let i = index"
+                                  matColumnDef="{{i}}-{{column.columnDef}}">
+                        <ng-container *matFooterCellDef>
+                            <td mat-footer-cell *ngIf="onDisplayFooter(footer, datasource.data)"
+                                [attr.colspan]="TableService.getColspan(footer, datasource.data)"
+                                class="{{TableService.getColumnClassName(column,datasource.data)}} {{TableService.getColumnClassName(column.footer,datasource.data)}}">
+                                <div title="{{footer.title(datasource.data)}}"
+                                     class="viewData {{TableService.getColumnClassName(column,datasource.data)}}"
+                                     fxLayout="row"
+                                     [fxLayoutAlign]="footer.align ? footer.align : AlignEnum.LEFT">
+                                    {{ footer.cell(datasource.data) }}
+                                </div>
+                            </td>
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngFor="let row of superHeaders">
+                    <ng-container *ngFor="let column of row" matColumnDef="{{column.columnDef}}">
+                        <ng-container *ngIf="onDisplayHeaderCell(column)">
+                            <th mat-header-cell *matHeaderCellDef
+                                [ngClass]="TableService.getColumnHeaderClassName(column)"
+                                [attr.colspan]="column?.colSpan" [attr.rowspan]="column?.rowSpan">
+                                <cva-table-header-cell [moduleName]="moduleName" [column]="column"
+                                                       [selectAllChecked]="selectAllChecked"
+                                                       (changeSelectAll)="selectAllChecked = TableService.toggleSelectAll(value, $event)">
+                                </cva-table-header-cell>
+                            </th>
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngFor="let row of superHeaders; let rowIndex = index">
+                    <tr mat-header-row
+                        *matHeaderRowDef="TableService.getHeaderColumns(row, rowIndex, buttons); sticky: isSticky||isStickyHeader"></tr>
+                </ng-container>
+                <tr mat-header-row
+                    *matHeaderRowDef="TableService.getHeaderColumns(columns, superHeaders.length, buttons); sticky: isSticky||isStickyHeader"></tr>
+                <tr mat-row *matRowDef="let result; columns: TableService.getHeaderColumns(columns, 0, buttons);"
+                    class="{{result.className}}"
+                    [ngClass]="{'childRow0': !!result.isChildRow && result.parentRowClassIndex === 0,
                                    'parentRow0': !result.isChildRow  && result.parentRowClassIndex === 0,
                                    'childRow1': !!result.isChildRow && result.parentRowClassIndex === 1,
                                    'parentRow1': !result.isChildRow  && result.parentRowClassIndex === 1}"
-        ></tr>
-        <ng-container *ngFor="let df of displayedFooters">
-          <tr mat-footer-row *matFooterRowDef="df; sticky: isSticky||isStickyFooter"></tr>
-        </ng-container>
-      </table>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.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: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaInputComponent, selector: "cva-input", inputs: ["label", "name", "placeholder", "hint", "required", "disabled", "text", "type", "pattern", "errorMessages", "multiline", "isLabelOutside", "isFloatLabel", "minLength", "maxLength", "alignText", "maxLengthDisplay", "percentOfLabelOutside", "suffixFontAwesomeClass", "patternFilter", "isFormControl", "formatFunc"], outputs: ["onChange"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "component", type: CvaDatePickerComponent, selector: "cva-date-picker", inputs: ["label", "placeholder", "value", "disabled", "required", "minDate", "maxDate", "errorMessages", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["onChange"] }, { kind: "component", type: CvaMultiSelectAutocomplete, selector: "cva-multi-select-autocomplete", inputs: ["placeholder", "label", "hint", "value", "options", "disabled", "errorMessages", "multiple", "required", "isTree", "treeSymbol", "sizeOfItemsInListByPixels", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["selectionChange", "selectedOptionDataChange"] }, { kind: "component", type: CvaLiveSearchingComponent, selector: "cva-live-searching", inputs: ["label", "placeholder", "hint", "required", "disabled", "errorMessages", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "suffixFontAwesomeClass", "displayKey", "mappingConfig", "searchFn", "isFormControl", "row", "columnDef"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
+                ></tr>
+                <ng-container *ngFor="let df of displayedFooters">
+                    <tr mat-footer-row *matFooterRowDef="df; sticky: isSticky||isStickyFooter"></tr>
+                </ng-container>
+            </table>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.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: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaTableHeaderCellComponent, selector: "cva-table-header-cell", inputs: ["moduleName", "column", "selectAllChecked"], outputs: ["changeSelectAll"] }, { kind: "component", type: CvaInputComponent, selector: "cva-input", inputs: ["label", "name", "placeholder", "hint", "required", "disabled", "text", "type", "pattern", "errorMessages", "multiline", "isLabelOutside", "isFloatLabel", "minLength", "maxLength", "alignText", "maxLengthDisplay", "percentOfLabelOutside", "suffixFontAwesomeClass", "patternFilter", "isFormControl", "formatFunc"], outputs: ["onChange"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "component", type: CvaDatePickerComponent, selector: "cva-date-picker", inputs: ["label", "placeholder", "value", "disabled", "required", "minDate", "maxDate", "errorMessages", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["onChange"] }, { kind: "component", type: CvaMultiSelectAutocomplete, selector: "cva-multi-select-autocomplete", inputs: ["placeholder", "label", "hint", "value", "options", "disabled", "errorMessages", "multiple", "required", "isTree", "treeSymbol", "sizeOfItemsInListByPixels", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["selectionChange", "selectedOptionDataChange"] }, { kind: "component", type: CvaLiveSearchingComponent, selector: "cva-live-searching", inputs: ["label", "placeholder", "hint", "required", "disabled", "errorMessages", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "suffixFontAwesomeClass", "displayKey", "mappingConfig", "searchFn", "isFormControl", "row", "columnDef"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaSmartTableComponent, decorators: [{
             type: Component,
@@ -5469,252 +5557,275 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     selector: 'cva-smart-table',
                     standalone: false,
                     template: `
-    <div class="table-responsive"
-         [ngClass]="{'fixed_header': isSticky||isStickyHeader, 'fixed_footer': isSticky||isStickyFooter}">
-      <table mat-table [dataSource]="datasource" #matTable class="mat-elevation-z8 cva-smart-table">
-        <ng-container *ngFor="let column of columns" matColumnDef="{{column.columnDef}}">
-          <ng-container *matHeaderCellDef>
-            <th mat-header-cell class="{{TableService.getColumnHeaderClassName(column)}}"
-                *ngIf="onDisplayHeaderCell(column)">
-              <!--                        *ngIf="getColumnType(column, result)!==ColumnTypes.CHECKBOX"-->
-              <div [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   fxLayout="row"
-                   [fxLayoutAlign]="column.alignHeader ? column.alignHeader : TableService.alignCellContent(column)">
-                <mat-checkbox
-                  *ngIf="TableService.getColumnType(column, null)===ColumnTypes.CHECKBOX && !column.isNotShowHeaderCheckbox"
-                  color="primary" class="box-select-all margin-right-5" [(ngModel)]="selectAllChecked"
-                  (change)="toggleSelectAll($event, column)">
-                </mat-checkbox>
-                {{ TableService.displayHeaderName(column, moduleName) | translate }}<span
-                style="color: red">{{ getRequired(column) ? '*' : '' }}</span>
-              </div>
-            </th>
-          </ng-container>
-          <ng-container *matCellDef="let result;  let i = index">
-            <td mat-cell [ngClass]="TableService.getColumnClassName(column,result)"
-                *ngIf="TableService.onDisplayCell(column, result)"
-                [ngSwitch]="TableService.getColumnType(column, result)">
-              <div title="{{column.title(result)}}"
-                   *ngSwitchCase="ColumnTypes.VIEW"
-                   class="viewData {{TableService.getColumnClassName(column,result)}}"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)">
-                {{ column.cell(result) }}
-              </div>
-              <div class="link viewData"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.LINK"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <a [routerLink]="[column.link ? column.link(result) : '']">{{ column.cell(result) }}</a>
-              </div>
-              <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.IMG"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="column.cell(result) | secure | async"
-                     #imgRef
-                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
-                   [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
-                   *ngSwitchCase="ColumnTypes.IMG_NO_SECURE"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="column.cell(result)"
-                     #imgRef
-                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <div *ngSwitchCase="ColumnTypes.BASE64"
-                   class="viewData img-view base64 {{TableService.getColumnClassName(column,result)}}"
-                   fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   title="{{column.title(result)}}">
-                <img [src]="'data:image/png;base64,'+column.cell(result)"
-                     #base64ImgRef
-                     (error)="TableService.onErrorImgEvent(base64ImgRef, config.NO_IMAGE_AVAILABLE)" alt="" />
-              </div>
-              <ng-container *ngSwitchCase="ColumnTypes.BUTTON">
-                <div *ngIf="!!column.button"
-                     class="{{TableService.getColumnClassName(column, result)}}"
-                     fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
-                     (click)="$event.stopPropagation()">
-                  <button mat-icon-button type="button"
-                          color="{{column.button.color}}"
-                          [ngClass]="column.button.className"
-                          (click)="onClick(column.button.click, result, i)"
-                          disabled="{{column.button && column.button.disabled ? column.button.disabled(result) : false}}"
-                          matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
-                          [ngSwitch]="TableService.getIconType(column.button)">
-                    <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ column.button.icon }}</mat-icon>
-                    <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{column.button.icon}}"></i>
-                  </button>
-                </div>
-              </ng-container>
-              <cva-counter-input *ngSwitchCase="ColumnTypes.INPUT_COUNTER"
-                                 #cellComponentRef
-                                 class="inputNumber" #nsCounterInput
-                                 [isFormControl]="false"
-                                 [alignNumber]="getAlign(column)"
-                                 [disabled]="column.disabled ? column.disabled(result) : false"
-                                 [value]="result[column.columnDef]"
-                                 [required]="getRequired(column)"
-                                 [errorMessages]="getErrorMessageMap(column)"
-                                 [isDecimal]="getIsDecimal(column)"
-                                 [min]="column.min ? column.min(result) : null"
-                                 [max]="column.max ? column.max(result) : null"
-                                 (onChange)="onCellValueChange(result, column, $event);">
-              </cva-counter-input>
-              <cva-input *ngSwitchCase="ColumnTypes.INPUT"
-                         #cellComponentRef
-                         [isFormControl]="false"
-                         [alignText]="getAlign(column)"
-                         [disabled]="column.disabled ? column.disabled(result) : false"
-                         [text]="result[column.columnDef]"
-                         [minLength]="column.min ? column.min(result) : undefined"
-                         [maxLength]="column.max ? column.max(result) : undefined"
-                         [required]="getRequired(column)"
-                         [errorMessages]="getErrorMessageMap(column)"
-                         (onChange)="onCellValueChange(result, column, $event);">
-              </cva-input>
-              <cva-input *ngSwitchCase="ColumnTypes.INPUT_CURRENCY"
-                         #cellComponentRef
-                         [isFormControl]="false"
-                         [alignText]="getAlign(column)"
-                         [disabled]="column.disabled ? column.disabled(result) : false"
-                         [text]="result[column.columnDef]"
-                         [minLength]="column.min ? column.min(result) : undefined"
-                         [maxLength]="column.max ? column.max(result) : undefined"
-                         [required]="getRequired(column)"
-                         [errorMessages]="getErrorMessageMap(column)"
-                         (onChange)="onCellValueChange(result, column, $event);"
-                         [pattern]="getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$'"
-                         [formatFunc]="formatFunc">
-              </cva-input>
-              <cva-date-picker *ngSwitchCase="ColumnTypes.DATE_PICKER"
-                               #cellComponentRef
-                               [value]="result[column.columnDef]"
-                               [isFormControl]="false"
-                               [minDate]="column.min ? column.min(result) : null"
-                               [maxDate]="column.max ? column.max(result) : null"
-                               [required]="getRequired(column)"
-                               [disabled]="column.disabled ? column.disabled(result) : false"
-                               [errorMessages]="getErrorMessageMap(column)"
-                               (onChange)="onCellValueChange(result, column, $event);">
-              </cva-date-picker>
-              <cva-multi-select-autocomplete [isFormControl]="false"
+        <div class="table-responsive"
+             [ngClass]="{'fixed_header': isSticky||isStickyHeader, 'fixed_footer': isSticky||isStickyFooter}">
+            <table mat-table [dataSource]="datasource" #matTable class="mat-elevation-z8 cva-smart-table">
+                <ng-container *ngFor="let column of columns" matColumnDef="{{column.columnDef}}">
+                    <ng-container *matHeaderCellDef>
+                        <th mat-header-cell [ngClass]="TableService.getColumnHeaderClassName(column)"
+                            [attr.colspan]="column?.colSpan" [attr.rowspan]="column?.rowSpan"
+                            *ngIf="onDisplayHeaderCell(column)">
+                            <cva-table-header-cell [moduleName]="moduleName" [column]="column"
+                                                   [selectAllChecked]="selectAllChecked"
+                                                   (changeSelectAll)="selectAllChecked = TableService.toggleSelectAll(value, $event)">
+                            </cva-table-header-cell>
+                        </th>
+                    </ng-container>
+                    <ng-container *matCellDef="let result;  let i = index">
+                        <td mat-cell [ngClass]="TableService.getColumnClassName(column,result)"
+                            *ngIf="TableService.onDisplayCell(column, result)"
+                            [ngSwitch]="TableService.getColumnType(column, result)">
+                            <div title="{{column.title(result)}}"
+                                 *ngSwitchCase="ColumnTypeEnum.VIEW"
+                                 class="viewData {{TableService.getColumnClassName(column,result)}}"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)">
+                                {{ column.cell(result) }}
+                            </div>
+                            <div class="link viewData"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.LINK"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <a [routerLink]="[column.link ? column.link(result) : '']">{{ column.cell(result) }}</a>
+                            </div>
+                            <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.IMG"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="column.cell(result) | secure | async"
+                                     #imgRef
+                                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt=""/>
+                            </div>
+                            <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
+                                 [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
+                                 *ngSwitchCase="ColumnTypeEnum.IMG_NO_SECURE"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="column.cell(result)"
+                                     #imgRef
+                                     (error)="TableService.onErrorImgEvent(imgRef, config.NO_IMAGE_AVAILABLE)" alt=""/>
+                            </div>
+                            <div *ngSwitchCase="ColumnTypeEnum.BASE64"
+                                 class="viewData img-view base64 {{TableService.getColumnClassName(column,result)}}"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 title="{{column.title(result)}}">
+                                <img [src]="'data:image/png;base64,'+column.cell(result)"
+                                     #base64ImgRef
+                                     (error)="TableService.onErrorImgEvent(base64ImgRef, config.NO_IMAGE_AVAILABLE)"
+                                     alt=""/>
+                            </div>
+                            <ng-container *ngSwitchCase="ColumnTypeEnum.BUTTON">
+                                <div *ngIf="!!column.button"
+                                     class="{{TableService.getColumnClassName(column, result)}}"
+                                     fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                     (click)="$event.stopPropagation()">
+                                    <button mat-icon-button type="button"
+                                            color="{{column.button.color}}"
+                                            [ngClass]="column.button.className"
+                                            (click)="onClick(column.button.click, result, i)"
+                                            disabled="{{column.button && column.button.disabled ? column.button.disabled(result) : false}}"
+                                            matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
+                                            [ngSwitch]="TableService.getIconType(column.button)">
+                                        <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ column.button.icon }}
+                                        </mat-icon>
+                                        <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{column.button.icon}}"></i>
+                                    </button>
+                                </div>
+                            </ng-container>
+                            <cva-counter-input *ngSwitchCase="ColumnTypeEnum.INPUT_COUNTER"
+                                               #cellComponentRef
+                                               class="inputNumber" #nsCounterInput
+                                               [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
+                                               [isFormControl]="false"
+                                               [alignNumber]="getAlign(column)"
+                                               [disabled]="column.disabled ? column.disabled(result) : false"
+                                               [value]="result[column.columnDef]"
+                                               [required]="TableService.getRequired(column)"
+                                               [errorMessages]="getErrorMessageMap(column)"
+                                               [isDecimal]="getIsDecimal(column)"
+                                               [min]="column.min ? column.min(result) : null"
+                                               [max]="column.max ? column.max(result) : null"
+                                               (onChange)="onCellValueChange(result, column, $event);">
+                            </cva-counter-input>
+                            <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT"
+                                       #cellComponentRef
+                                       [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
+                                       [isFormControl]="false"
+                                       [alignText]="getAlign(column)"
+                                       [disabled]="column.disabled ? column.disabled(result) : false"
+                                       [text]="result[column.columnDef]"
+                                       [minLength]="column.min ? column.min(result) : undefined"
+                                       [maxLength]="column.max ? column.max(result) : undefined"
+                                       [required]="TableService.getRequired(column)"
+                                       [errorMessages]="getErrorMessageMap(column)"
+                                       (onChange)="onCellValueChange(result, column, $event);"
+                                       [pattern]="column.pattern ? column.pattern : undefined"
+                                       [patternFilter]="column.patternFilter ? column.patternFilter : ''">
+                            </cva-input>
+                            <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
+                                       #cellComponentRef
+                                       [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
+                                       [isFormControl]="false"
+                                       [alignText]="getAlign(column)"
+                                       [disabled]="column.disabled ? column.disabled(result) : false"
+                                       [text]="result[column.columnDef]"
+                                       [minLength]="column.min ? column.min(result) : undefined"
+                                       [maxLength]="column.max ? column.max(result) : undefined"
+                                       [required]="TableService.getRequired(column)"
+                                       [errorMessages]="getErrorMessageMap(column)"
+                                       (onChange)="onCellValueChange(result, column, $event);"
+                                       [pattern]="getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$'"
+                                       [formatFunc]="formatFunc">
+                            </cva-input>
+                            <cva-date-picker *ngSwitchCase="ColumnTypeEnum.DATE_PICKER"
                                              #cellComponentRef
-                                             *ngSwitchCase="ColumnTypes.MULTI_SELECT_AUTOCOMPLETE"
-                                             class="multiSelectAutocomplete"
-                                             [isTree]="column.isTree??false"
                                              [value]="result[column.columnDef]"
-                                             [errorMessages]="getErrorMessageMap(column)"
-                                             [required]="getRequired(column)"
+                                             [isFormControl]="false"
+                                             [minDate]="column.min ? column.min(result) : null"
+                                             [maxDate]="column.max ? column.max(result) : null"
+                                             [required]="TableService.getRequired(column)"
                                              [disabled]="column.disabled ? column.disabled(result) : false"
-                                             [multiple]="column.isMultipleSelect??false"
-                                             [options]="column.optionValues ? column.optionValues(result) : []"
-                                             (selectionChange)="onCellValueChange(result, column, $event);">
-              </cva-multi-select-autocomplete>
-              <div class="checkbox-cell"
-                   fxLayout="row"
-                   [fxLayoutAlign]="TableService.alignCellContent(column)"
-                   *ngSwitchCase="ColumnTypes.CHECKBOX">
-                <mat-checkbox [(ngModel)]="result[column.columnDef]" color="primary"
-                              *ngIf="column.display ? column.display(result) : true"
-                              [disabled]="column.disabled ? column.disabled(result) : false"
-                              (change)="toggleSelect($event,result, column)">
-                </mat-checkbox>
-              </div>
-              <cva-live-searching *ngSwitchCase="ColumnTypes.LIVE_SEARCHING"
-                                  #cellComponentRef
-                                  [isFormControl]="false" [required]="getRequired(column)"
-                                  [row]="result" [columnDef]="column.columnDef"
-                                  [searchFn]="column.searchFn"
-                                  [mappingConfig]="column.mappingConfig"
-                                  [displayKey]="column.displayKey??''"
-                                  [errorMessages]="getErrorMessageMap(column)"
-                                  (onChange)="onCellValueChange(result, column, $event)">
-              </cva-live-searching>
-            </td>
-          </ng-container>
-        </ng-container>
-        <ng-container *ngFor="let button of buttons; let i = index" matColumnDef="{{button.columnDef}}">
-          <ng-container *matHeaderCellDef="let header">
-            <th mat-header-cell
-                [ngClass]="button.className"
-                *ngIf="TableService.onDisplayButtonHeaderCell(buttons, button, header, i) && !!buttonColspan"
-                (click)="$event.stopPropagation()"
-                [attr.colspan]="buttonColspan">
-              <!--                        [fxFlex]="getHeaderButtonWidth(i) + 'px' "-->
-              <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
-                <button mat-icon-button type="button"
-                        class="{{button.className}}"
-                        color="{{$any(btnHeader).color}}"
-                        (click)="onClick($any(btnHeader).click, null, null)"
-                        [disabled]="(btnHeader && $any(btnHeader).disabled) ? $any(btnHeader).disabled(header) : false"
-                        *ngIf="(btnHeader && btnHeader.display) ? btnHeader.display(header) : false"
-                        matTooltip="{{((btnHeader && $any(btnHeader).title) ? $any(btnHeader).title : '') | translate}}"
-                        [ngSwitch]="TableService.getIconType($any(btnHeader))">
-                  <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ $any(btnHeader).icon }}</mat-icon>
-                  <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{$any(btnHeader).icon}}"></i>
-                </button>
-              </ng-container>
-              <ng-container *ngIf="TableService.getButtonHeaderString(button) as btnHeader">
-                <div title="{{$any(btnHeader) | translate}}"
-                     class="viewData"
-                     fxLayout="row"
-                     fxLayoutAlign="{{button.alignHeader ? button.alignHeader : AlignEnum.LEFT}} center">
-                  {{ $any(btnHeader) | translate }}
-                </div>
-              </ng-container>
-            </th>
-          </ng-container>
-          <ng-container *matCellDef="let cell; let i = index">
-            <td mat-cell [ngClass]="button.className"
-                *ngIf="TableService.onDisplayButtonCell(button, cell)"
-                (click)="$event.stopPropagation()">
-              <button mat-icon-button type="button"
-                      color="{{button.color}}"
-                      [ngClass]="button.className"
-                      (click)="onClick(button.click, cell, i)"
-                      disabled="{{button && button.disabled ? button.disabled(cell) : false}}"
-                      matTooltip="{{(button.title ? button.title : '') | translate}}"
-                      [ngSwitch]="TableService.getIconType(button)">
-                <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ button.icon }}</mat-icon>
-                <i *ngSwitchCase="IconTypes.FONT_AWESOME" class="{{button.icon}}"></i>
-              </button>
-            </td>
-          </ng-container>
-        </ng-container>
-        <ng-container *ngFor="let column of columns">
-          <ng-container *ngFor="let footer of column.footers; let i = index"
-                        matColumnDef="{{i}}-{{column.columnDef}}">
-            <ng-container *matFooterCellDef>
-              <td mat-footer-cell *ngIf="onDisplayFooter(footer, datasource.data)"
-                  [attr.colspan]="TableService.getColspan(footer, datasource.data)"
-                  class="{{TableService.getColumnClassName(column,datasource.data)}} {{TableService.getColumnClassName(column.footer,datasource.data)}}">
-                <div title="{{footer.title(datasource.data)}}"
-                     class="viewData {{TableService.getColumnClassName(column,datasource.data)}}"
-                     fxLayout="row"
-                     [fxLayoutAlign]="footer.align ? footer.align : AlignEnum.LEFT">
-                  {{ footer.cell(datasource.data) }}
-                </div>
-              </td>
-            </ng-container>
-          </ng-container>
-        </ng-container>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky||isStickyHeader"></tr>
-        <tr mat-row *matRowDef="let result; columns: displayedColumns;" class="{{result.className}}"
-            [ngClass]="{'childRow0': !!result.isChildRow && result.parentRowClassIndex === 0,
+                                             [errorMessages]="getErrorMessageMap(column)"
+                                             (onChange)="onCellValueChange(result, column, $event);">
+                            </cva-date-picker>
+                            <cva-multi-select-autocomplete [isFormControl]="false"
+                                                           #cellComponentRef
+                                                           *ngSwitchCase="ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE"
+                                                           class="multiSelectAutocomplete"
+                                                           [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
+                                                           [isTree]="column.isTree??false"
+                                                           [value]="result[column.columnDef]"
+                                                           [errorMessages]="getErrorMessageMap(column)"
+                                                           [required]="TableService.getRequired(column)"
+                                                           [disabled]="column.disabled ? column.disabled(result) : false"
+                                                           [multiple]="column.isMultipleSelect??false"
+                                                           [options]="column.optionValues ? column.optionValues(result) : []"
+                                                           (selectionChange)="onCellValueChange(result, column, $event);">
+                            </cva-multi-select-autocomplete>
+                            <div class="checkbox-cell"
+                                 fxLayout="row"
+                                 [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 *ngSwitchCase="ColumnTypeEnum.CHECKBOX">
+                                <mat-checkbox [(ngModel)]="result[column.columnDef]" color="primary"
+                                              *ngIf="column.display ? column.display(result) : true"
+                                              [disabled]="column.disabled ? column.disabled(result) : false"
+                                              (change)="toggleSelect($event,result, column)">
+                                </mat-checkbox>
+                            </div>
+                            <cva-live-searching *ngSwitchCase="ColumnTypeEnum.LIVE_SEARCHING"
+                                                #cellComponentRef
+                                                [isFormControl]="false" [required]="TableService.getRequired(column)"
+                                                [row]="result" [columnDef]="column.columnDef"
+                                                [searchFn]="column.searchFn"
+                                                [mappingConfig]="column.mappingConfig"
+                                                [displayKey]="column.displayKey??''"
+                                                [errorMessages]="getErrorMessageMap(column)"
+                                                (onChange)="onCellValueChange(result, column, $event)">
+                            </cva-live-searching>
+                        </td>
+                    </ng-container>
+                </ng-container>
+                <ng-container *ngFor="let button of buttons; let i = index" matColumnDef="{{button.columnDef}}">
+                    <ng-container *matHeaderCellDef="let header">
+                        <th mat-header-cell
+                            [ngClass]="button.className"
+                            *ngIf="TableService.onDisplayButtonHeaderCell(buttons, button, header, i) && !!buttonColspan"
+                            (click)="$event.stopPropagation()"
+                            [attr.colspan]="buttonColspan" [attr.rowspan]="superHeaders.length + 1">
+                            <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
+                                <button mat-icon-button type="button"
+                                        class="{{button.className}}"
+                                        color="{{$any(btnHeader).color}}"
+                                        (click)="onClick($any(btnHeader).click, null, null)"
+                                        [disabled]="(btnHeader && $any(btnHeader).disabled) ? $any(btnHeader).disabled(header) : false"
+                                        *ngIf="(btnHeader && btnHeader.display) ? btnHeader.display(header) : false"
+                                        matTooltip="{{((btnHeader && $any(btnHeader).title) ? $any(btnHeader).title : '') | translate}}"
+                                        [ngSwitch]="TableService.getIconType($any(btnHeader))">
+                                    <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ $any(btnHeader).icon }}
+                                    </mat-icon>
+                                    <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{$any(btnHeader).icon}}"></i>
+                                </button>
+                            </ng-container>
+                            <ng-container *ngIf="TableService.getButtonHeaderString(button) as btnHeader">
+                                <div title="{{$any(btnHeader) | translate}}"
+                                     class="viewData"
+                                     fxLayout="row"
+                                     fxLayoutAlign="{{button.alignHeader ? button.alignHeader : AlignEnum.LEFT}} center">
+                                    {{ $any(btnHeader) | translate }}
+                                </div>
+                            </ng-container>
+                        </th>
+                    </ng-container>
+                    <ng-container *matCellDef="let cell; let i = index">
+                        <td mat-cell [ngClass]="button.className"
+                            *ngIf="TableService.onDisplayButtonCell(button, cell)"
+                            (click)="$event.stopPropagation()">
+                            <button mat-icon-button type="button"
+                                    color="{{button.color}}"
+                                    [ngClass]="button.className"
+                                    (click)="onClick(button.click, cell, i)"
+                                    disabled="{{button && button.disabled ? button.disabled(cell) : false}}"
+                                    matTooltip="{{(button.title ? button.title : '') | translate}}"
+                                    [ngSwitch]="TableService.getIconType(button)">
+                                <mat-icon *ngSwitchCase="IconTypeEnum.MATERIAL_ICON">{{ button.icon }}</mat-icon>
+                                <i *ngSwitchCase="IconTypeEnum.FONT_AWESOME" class="{{button.icon}}"></i>
+                            </button>
+                        </td>
+                    </ng-container>
+                </ng-container>
+                <ng-container *ngFor="let column of columns">
+                    <ng-container *ngFor="let footer of column.footers; let i = index"
+                                  matColumnDef="{{i}}-{{column.columnDef}}">
+                        <ng-container *matFooterCellDef>
+                            <td mat-footer-cell *ngIf="onDisplayFooter(footer, datasource.data)"
+                                [attr.colspan]="TableService.getColspan(footer, datasource.data)"
+                                class="{{TableService.getColumnClassName(column,datasource.data)}} {{TableService.getColumnClassName(column.footer,datasource.data)}}">
+                                <div title="{{footer.title(datasource.data)}}"
+                                     class="viewData {{TableService.getColumnClassName(column,datasource.data)}}"
+                                     fxLayout="row"
+                                     [fxLayoutAlign]="footer.align ? footer.align : AlignEnum.LEFT">
+                                    {{ footer.cell(datasource.data) }}
+                                </div>
+                            </td>
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngFor="let row of superHeaders">
+                    <ng-container *ngFor="let column of row" matColumnDef="{{column.columnDef}}">
+                        <ng-container *ngIf="onDisplayHeaderCell(column)">
+                            <th mat-header-cell *matHeaderCellDef
+                                [ngClass]="TableService.getColumnHeaderClassName(column)"
+                                [attr.colspan]="column?.colSpan" [attr.rowspan]="column?.rowSpan">
+                                <cva-table-header-cell [moduleName]="moduleName" [column]="column"
+                                                       [selectAllChecked]="selectAllChecked"
+                                                       (changeSelectAll)="selectAllChecked = TableService.toggleSelectAll(value, $event)">
+                                </cva-table-header-cell>
+                            </th>
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngFor="let row of superHeaders; let rowIndex = index">
+                    <tr mat-header-row
+                        *matHeaderRowDef="TableService.getHeaderColumns(row, rowIndex, buttons); sticky: isSticky||isStickyHeader"></tr>
+                </ng-container>
+                <tr mat-header-row
+                    *matHeaderRowDef="TableService.getHeaderColumns(columns, superHeaders.length, buttons); sticky: isSticky||isStickyHeader"></tr>
+                <tr mat-row *matRowDef="let result; columns: TableService.getHeaderColumns(columns, 0, buttons);"
+                    class="{{result.className}}"
+                    [ngClass]="{'childRow0': !!result.isChildRow && result.parentRowClassIndex === 0,
                                    'parentRow0': !result.isChildRow  && result.parentRowClassIndex === 0,
                                    'childRow1': !!result.isChildRow && result.parentRowClassIndex === 1,
                                    'parentRow1': !result.isChildRow  && result.parentRowClassIndex === 1}"
-        ></tr>
-        <ng-container *ngFor="let df of displayedFooters">
-          <tr mat-footer-row *matFooterRowDef="df; sticky: isSticky||isStickyFooter"></tr>
-        </ng-container>
-      </table>
-    </div>
-  `,
+                ></tr>
+                <ng-container *ngFor="let df of displayedFooters">
+                    <tr mat-footer-row *matFooterRowDef="df; sticky: isSticky||isStickyFooter"></tr>
+                </ng-container>
+            </table>
+        </div>
+    `,
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
@@ -5732,6 +5843,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], buttons: [{
                 type: Input
+            }], superHeaders: [{
+                type: Input
             }], value: [{
                 type: Input
             }], minRow: [{
@@ -8382,7 +8495,7 @@ class CvaFlatTreeComponent {
                 children: [],
             };
             if (!node.children || !FlatTreeService.hasChild(node)) {
-                node.display = node.displayValue.toLowerCase().includes(this.searchText.toLowerCase())
+                node.display = node.displayValue.toLowerCase().includes(this.searchText.toLowerCase().trim())
                     && this.getDisplayInputFunc(node);
                 if (node.display) {
                     copiedData.push(node);
@@ -8391,7 +8504,7 @@ class CvaFlatTreeComponent {
             else {
                 this.getDisplayTreeDataSource(node.children, copiedNode.children ? copiedNode.children : []);
                 // parent display
-                node.display = (node.displayValue.toLowerCase().includes(this.searchText.toLowerCase())
+                node.display = (node.displayValue.toLowerCase().includes(this.searchText.toLowerCase().trim())
                     || node.children?.some(childNode => childNode.display)) && this.getDisplayInputFunc(node);
                 node.checked = node.children.filter(child => child.display).length > 0 &&
                     node.children.filter(child => child.display).every(childNode => childNode.checked);
@@ -9543,7 +9656,8 @@ class NiceComponentLibraryModule {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NiceComponentLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NiceComponentLibraryModule, declarations: [CvaTableComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NiceComponentLibraryModule, declarations: [CvaTableHeaderCellComponent,
+            CvaTableComponent,
             CvaSmartTableComponent,
             CvaInputComponent,
             CvaCounterInputComponent,
@@ -9625,6 +9739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         FlexLayoutModule,
                     ],
                     declarations: [
+                        CvaTableHeaderCellComponent,
                         CvaTableComponent,
                         CvaSmartTableComponent,
                         CvaInputComponent,