@tots/table 16.0.19 → 20.0.0

package/fesm2022/tots-table.mjs

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Component, Input, ViewContainerRef, Inject, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Input, Component, ViewContainerRef, ViewChild, Inject, EventEmitter, Output, NgModule } from '@angular/core';
 import { TotsQuery } from '@tots/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i1$1 from '@angular/material/checkbox';
+import * as i2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2$1 from '@angular/material/button';
+import * as i2$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/menu';
+import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { Subject, tap } from 'rxjs';
-import * as i3 from '@angular/material/table';
+import * as i3$2 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i4$1 from '@angular/material/paginator';
+import * as i4 from '@angular/material/paginator';
 import { MatPaginatorModule, MAT_PAGINATOR_DEFAULT_OPTIONS } from '@angular/material/paginator';
 import * as i5 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -42,10 +42,10 @@ class TotsTableConfig {
 
 const TOTS_TABLE_DEFAULT_CONFIG = new InjectionToken('tots_table_default_config');
 class TotsTableDefaultConfig {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableDefaultConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableDefaultConfig }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsTableDefaultConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsTableDefaultConfig }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableDefaultConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsTableDefaultConfig, decorators: [{
             type: Injectable
         }] });
 
@@ -124,10 +124,10 @@ class TotsBaseColumnComponent {
     getItemValue() {
         return TotsTableHelper.getItemValueByKey(this.item, this.column.field_key);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsBaseColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: TotsBaseColumnComponent, selector: "tots-base-column", inputs: { column: "column", item: "item", onAction: "onAction", index: "index" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsBaseColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: TotsBaseColumnComponent, isStandalone: true, selector: "tots-base-column", inputs: { column: "column", item: "item", onAction: "onAction", index: "index" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsBaseColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsBaseColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tots-base-column',
@@ -153,12 +153,12 @@ class BalanceCurrencyColumnComponent extends TotsBaseColumnComponent {
     getCredit() {
         return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_key_credit);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BalanceCurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: BalanceCurrencyColumnComponent, selector: "tots-balance-currency-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">{{getBalance()|currency}}</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BalanceCurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: BalanceCurrencyColumnComponent, isStandalone: false, selector: "tots-balance-currency-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{\n\t'tots-balance-column-positive': getBalance() > 0,\n\t'tots-balance-column-negative': getBalance() < 0\n}\">\n\t{{ getBalance() | currency }}\n</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BalanceCurrencyColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BalanceCurrencyColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-balance-currency-column', template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">{{getBalance()|currency}}</span>" }]
+            args: [{ selector: 'tots-balance-currency-column', standalone: false, template: "<span [ngClass]=\"{\n\t'tots-balance-column-positive': getBalance() > 0,\n\t'tots-balance-column-negative': getBalance() < 0\n}\">\n\t{{ getBalance() | currency }}\n</span>" }]
         }] });
 
 class BalanceCurrencyIconColumnComponent extends BalanceCurrencyColumnComponent {
@@ -171,21 +171,21 @@ class BalanceCurrencyIconColumnComponent extends BalanceCurrencyColumnComponent
     getIconNeutral() {
         return this.column.extra.icon_neutral;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BalanceCurrencyIconColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: BalanceCurrencyIconColumnComponent, selector: "tots-balance-currency-icon-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">\n    <mat-icon *ngIf=\"getBalance() > 0\">{{getIconPositive()}}</mat-icon>\n    <mat-icon *ngIf=\"getBalance() < 0\">{{getIconNegative()}}</mat-icon>\n    <mat-icon *ngIf=\"getBalance() == 0\">{{getIconNeutral()}}</mat-icon>\n</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BalanceCurrencyIconColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: BalanceCurrencyIconColumnComponent, isStandalone: false, selector: "tots-balance-currency-icon-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{\n\t'tots-balance-column-positive': getBalance() > 0,\n\t'tots-balance-column-negative': getBalance() < 0\n}\">\n\t@if (getBalance() > 0) {\n\t\t{{ getIconPositive() }}\n\t} @else if (getBalance() < 0) {\n\t\t{{ getIconNegative() }}\n\t} @else {\n\t\t{{ getIconNeutral() }}\n\t}\n</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BalanceCurrencyIconColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BalanceCurrencyIconColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-balance-currency-icon-column', template: "<span [ngClass]=\"{'tots-balance-column-positive': getBalance() > 0, 'tots-balance-column-negative': getBalance() < 0}\">\n    <mat-icon *ngIf=\"getBalance() > 0\">{{getIconPositive()}}</mat-icon>\n    <mat-icon *ngIf=\"getBalance() < 0\">{{getIconNegative()}}</mat-icon>\n    <mat-icon *ngIf=\"getBalance() == 0\">{{getIconNeutral()}}</mat-icon>\n</span>" }]
+            args: [{ selector: 'tots-balance-currency-icon-column', standalone: false, template: "<span [ngClass]=\"{\n\t'tots-balance-column-positive': getBalance() > 0,\n\t'tots-balance-column-negative': getBalance() < 0\n}\">\n\t@if (getBalance() > 0) {\n\t\t{{ getIconPositive() }}\n\t} @else if (getBalance() < 0) {\n\t\t{{ getIconNegative() }}\n\t} @else {\n\t\t{{ getIconNeutral() }}\n\t}\n</span>" }]
         }] });
 
 class BooleanColumnComponent extends TotsBaseColumnComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BooleanColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: BooleanColumnComponent, selector: "tots-boolean-column", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"getItemValue() == true||getItemValue() == 1; else textNo\">YES</ng-container>\n<ng-template #textNo>NO</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BooleanColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: BooleanColumnComponent, isStandalone: false, selector: "tots-boolean-column", usesInheritance: true, ngImport: i0, template: "@if (getItemValue() == true||getItemValue() == 1) {\n\tYES\n} @else {\n\tNO\n}", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BooleanColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BooleanColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-boolean-column', template: "<ng-container *ngIf=\"getItemValue() == true||getItemValue() == 1; else textNo\">YES</ng-container>\n<ng-template #textNo>NO</ng-template>" }]
+            args: [{ selector: 'tots-boolean-column', standalone: false, template: "@if (getItemValue() == true||getItemValue() == 1) {\n\tYES\n} @else {\n\tNO\n}" }]
         }] });
 
 class CheckboxColumnComponent extends TotsBaseColumnComponent {
@@ -196,21 +196,27 @@ class CheckboxColumnComponent extends TotsBaseColumnComponent {
         }
         this.onAction.next({ key: key, item: this.item });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CheckboxColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: CheckboxColumnComponent, selector: "tots-checkbox-column", usesInheritance: true, ngImport: i0, template: "<div class=\"tots-checkbox-column\">\n    <mat-checkbox [class]=\"this.column.extra?.class\" [color]=\"this.column.extra?.color\" (change)=\"onChange($event)\" (click)=\"$event.stopPropagation();\"></mat-checkbox>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] }); }
+    get cssClass() {
+        return this.column.extra?.class || "";
+    }
+    get color() {
+        return this.column.extra?.color || "";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CheckboxColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CheckboxColumnComponent, isStandalone: false, selector: "tots-checkbox-column", usesInheritance: true, ngImport: i0, template: "<div class=\"tots-checkbox-column\">\n\t<mat-checkbox\n\t\t[ngClass]=\"[cssClass, color]\"\n\t\t(change)=\"onChange($event)\"\n\t\t(click)=\"$event.stopPropagation()\"\n\t></mat-checkbox>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CheckboxColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CheckboxColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-checkbox-column', template: "<div class=\"tots-checkbox-column\">\n    <mat-checkbox [class]=\"this.column.extra?.class\" [color]=\"this.column.extra?.color\" (change)=\"onChange($event)\" (click)=\"$event.stopPropagation();\"></mat-checkbox>\n</div>" }]
+            args: [{ selector: 'tots-checkbox-column', standalone: false, template: "<div class=\"tots-checkbox-column\">\n\t<mat-checkbox\n\t\t[ngClass]=\"[cssClass, color]\"\n\t\t(change)=\"onChange($event)\"\n\t\t(click)=\"$event.stopPropagation()\"\n\t></mat-checkbox>\n</div>" }]
         }] });
 
 class CurrencyColumnComponent extends TotsBaseColumnComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: CurrencyColumnComponent, selector: "tots-currency-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'tots-currency-column-positive': getItemValue() > 0, 'tots-currency-column-negative': getItemValue() < 0}\">{{getItemValue()|currency}}</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CurrencyColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CurrencyColumnComponent, isStandalone: false, selector: "tots-currency-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{\n\t'tots-currency-column-positive': getItemValue() > 0,\n\t'tots-currency-column-negative': getItemValue() < 0\n}\">\n\t{{ getItemValue() | currency }}\n</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CurrencyColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CurrencyColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-currency-column', template: "<span [ngClass]=\"{'tots-currency-column-positive': getItemValue() > 0, 'tots-currency-column-negative': getItemValue() < 0}\">{{getItemValue()|currency}}</span>" }]
+            args: [{ selector: 'tots-currency-column', standalone: false, template: "<span [ngClass]=\"{\n\t'tots-currency-column-positive': getItemValue() > 0,\n\t'tots-currency-column-negative': getItemValue() < 0\n}\">\n\t{{ getItemValue() | currency }}\n</span>" }]
         }] });
 
 class IconButtonColumnComponent extends TotsBaseColumnComponent {
@@ -222,18 +228,18 @@ class IconButtonColumnComponent extends TotsBaseColumnComponent {
     getIconName() {
         return this.column.extra.icon;
     }
-    getButtonColor() {
-        return this.column.extra.matColor;
+    get buttonColor() {
+        return this.column.extra.matColor || "";
     }
-    getClasses() {
-        return this.column.extra.class;
+    get cssClass() {
+        return this.column.extra.class || "";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: IconButtonColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: IconButtonColumnComponent, selector: "tots-icon-button-column", usesInheritance: true, ngImport: i0, template: "<button mat-icon-button [color]=\"getButtonColor()\" [class]=\"getClasses()\" (click)=\"clickButton($event)\">\n    <mat-icon>{{getIconName()}}</mat-icon>\n</button>", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconButtonColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconButtonColumnComponent, isStandalone: false, selector: "tots-icon-button-column", usesInheritance: true, ngImport: i0, template: "<button mat-icon-button [ngClass]=\"[buttonColor, cssClass]\" (click)=\"clickButton($event)\">\n\t<mat-icon>{{getIconName()}}</mat-icon>\n</button>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: IconButtonColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconButtonColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-icon-button-column', template: "<button mat-icon-button [color]=\"getButtonColor()\" [class]=\"getClasses()\" (click)=\"clickButton($event)\">\n    <mat-icon>{{getIconName()}}</mat-icon>\n</button>" }]
+            args: [{ selector: 'tots-icon-button-column', standalone: false, template: "<button mat-icon-button [ngClass]=\"[buttonColor, cssClass]\" (click)=\"clickButton($event)\">\n\t<mat-icon>{{getIconName()}}</mat-icon>\n</button>" }]
         }] });
 
 class LinkColumnComponent extends TotsBaseColumnComponent {
@@ -241,12 +247,12 @@ class LinkColumnComponent extends TotsBaseColumnComponent {
         this.linkCaption = this.column.extra?.caption || "Open in new tab";
         this.target = this.column.extra?.target || "_blank";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: LinkColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: LinkColumnComponent, selector: "tots-link-column", usesInheritance: true, ngImport: i0, template: "<div>\n    <a *ngIf=\"getItemValue()\" [href]=\"getItemValue()\" [target]=\"target\">\n        {{ linkCaption }}\n        <mat-icon *ngIf=\"target == '_blank'\">open_in_new</mat-icon>\n    </a>\n</div>", styles: ["a{display:flex;gap:6px;align-items:center;text-decoration:none}a mat-icon{font-size:14px;line-height:14px;width:14px;height:14px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LinkColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: LinkColumnComponent, isStandalone: false, selector: "tots-link-column", usesInheritance: true, ngImport: i0, template: "<div>\n\t@if (getItemValue()) {\n\t\t<a [href]=\"getItemValue()\" [target]=\"target\">\n\t\t\t{{ linkCaption }}\n\t\t\t@if (target == '_blank') {\n\t\t\t\t<mat-icon>open_in_new</mat-icon>\n\t\t\t}\n\t\t</a>\n\t}\n</div>", styles: ["a{display:flex;gap:6px;align-items:center;text-decoration:none}a mat-icon{font-size:14px;line-height:14px;width:14px;height:14px}\n"], dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: LinkColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LinkColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-link-column', template: "<div>\n    <a *ngIf=\"getItemValue()\" [href]=\"getItemValue()\" [target]=\"target\">\n        {{ linkCaption }}\n        <mat-icon *ngIf=\"target == '_blank'\">open_in_new</mat-icon>\n    </a>\n</div>", styles: ["a{display:flex;gap:6px;align-items:center;text-decoration:none}a mat-icon{font-size:14px;line-height:14px;width:14px;height:14px}\n"] }]
+            args: [{ selector: 'tots-link-column', standalone: false, template: "<div>\n\t@if (getItemValue()) {\n\t\t<a [href]=\"getItemValue()\" [target]=\"target\">\n\t\t\t{{ linkCaption }}\n\t\t\t@if (target == '_blank') {\n\t\t\t\t<mat-icon>open_in_new</mat-icon>\n\t\t\t}\n\t\t</a>\n\t}\n</div>", styles: ["a{display:flex;gap:6px;align-items:center;text-decoration:none}a mat-icon{font-size:14px;line-height:14px;width:14px;height:14px}\n"] }]
         }] });
 
 class MoreMenuColumnComponent extends TotsBaseColumnComponent {
@@ -255,21 +261,21 @@ class MoreMenuColumnComponent extends TotsBaseColumnComponent {
         $event.preventDefault();
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MoreMenuColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: MoreMenuColumnComponent, selector: "tots-more-menu-column", usesInheritance: true, ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"actions\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\n<mat-menu #actions=\"matMenu\">\n    <button mat-menu-item *ngFor=\"let button of column.extra?.actions\" (click)=\"clickButton(button, $event)\" class=\"{{button.class}}\">\n        <mat-icon *ngIf=\"button.icon\">{{ button.icon }}</mat-icon> {{ button.title }}\n    </button>\n</mat-menu>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MoreMenuColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MoreMenuColumnComponent, isStandalone: false, selector: "tots-more-menu-column", usesInheritance: true, ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"actions\" (click)=\"$event.stopPropagation()\">\n\t<mat-icon>more_vert</mat-icon>\n</button>\n\n<mat-menu #actions=\"matMenu\">\n\t@for (button of column.extra?.actions; track $index) {\n\t\t<button mat-menu-item (click)=\"clickButton(button, $event)\" class=\"{{button.class}}\">\n\t\t\t@if (button.icon) {\n\t\t\t\t<mat-icon>\n\t\t\t\t\t{{ button.icon }}\n\t\t\t\t</mat-icon>\n\t\t\t}\n\t\t\t{{ button.title }}\n\t\t</button>\n\t}\n</mat-menu>", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MoreMenuColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MoreMenuColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-more-menu-column', template: "<button mat-icon-button [matMenuTriggerFor]=\"actions\" (click)=\"$event.stopPropagation()\"><mat-icon>more_vert</mat-icon></button>\n<mat-menu #actions=\"matMenu\">\n    <button mat-menu-item *ngFor=\"let button of column.extra?.actions\" (click)=\"clickButton(button, $event)\" class=\"{{button.class}}\">\n        <mat-icon *ngIf=\"button.icon\">{{ button.icon }}</mat-icon> {{ button.title }}\n    </button>\n</mat-menu>" }]
+            args: [{ selector: 'tots-more-menu-column', standalone: false, template: "<button mat-icon-button [matMenuTriggerFor]=\"actions\" (click)=\"$event.stopPropagation()\">\n\t<mat-icon>more_vert</mat-icon>\n</button>\n\n<mat-menu #actions=\"matMenu\">\n\t@for (button of column.extra?.actions; track $index) {\n\t\t<button mat-menu-item (click)=\"clickButton(button, $event)\" class=\"{{button.class}}\">\n\t\t\t@if (button.icon) {\n\t\t\t\t<mat-icon>\n\t\t\t\t\t{{ button.icon }}\n\t\t\t\t</mat-icon>\n\t\t\t}\n\t\t\t{{ button.title }}\n\t\t</button>\n\t}\n</mat-menu>" }]
         }] });
 
 class NumberColumnComponent extends TotsBaseColumnComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: NumberColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: NumberColumnComponent, selector: "tots-number-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{\n    'tots-number-column-positive': getItemValue() > 0,\n    'tots-number-column-negative': getItemValue() < 0\n}\">\n\t<span class=\"tots-number-column-prepend\" *ngIf=\"column.extra?.prepend\">{{ column.extra?.prepend }}</span>\n    {{ getItemValue() | number:\"1.0-2\" }}\n\t<span class=\"tots-number-column-append\" *ngIf=\"column.extra?.append\">{{ column.extra?.append }}</span>\n</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NumberColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: NumberColumnComponent, isStandalone: false, selector: "tots-number-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{\n\t'tots-number-column-positive': getItemValue() > 0,\n\t'tots-number-column-negative': getItemValue() < 0\n}\">\n\t@if (column.extra?.prepend) {\n\t\t<span class=\"tots-number-column-prepend\">\n\t\t\t{{ column.extra?.prepend }}\n\t\t</span>\n\t}\n\n\t{{ getItemValue() | number:\"1.0-2\" }}\n\n\t@if (column.extra?.append) {\n\t\t<span class=\"tots-number-column-append\">\n\t\t\t{{ column.extra?.append }}\n\t\t</span>\n\t}\n</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: NumberColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: NumberColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-number-column', template: "<span [ngClass]=\"{\n    'tots-number-column-positive': getItemValue() > 0,\n    'tots-number-column-negative': getItemValue() < 0\n}\">\n\t<span class=\"tots-number-column-prepend\" *ngIf=\"column.extra?.prepend\">{{ column.extra?.prepend }}</span>\n    {{ getItemValue() | number:\"1.0-2\" }}\n\t<span class=\"tots-number-column-append\" *ngIf=\"column.extra?.append\">{{ column.extra?.append }}</span>\n</span>" }]
+            args: [{ selector: 'tots-number-column', standalone: false, template: "<span [ngClass]=\"{\n\t'tots-number-column-positive': getItemValue() > 0,\n\t'tots-number-column-negative': getItemValue() < 0\n}\">\n\t@if (column.extra?.prepend) {\n\t\t<span class=\"tots-number-column-prepend\">\n\t\t\t{{ column.extra?.prepend }}\n\t\t</span>\n\t}\n\n\t{{ getItemValue() | number:\"1.0-2\" }}\n\n\t@if (column.extra?.append) {\n\t\t<span class=\"tots-number-column-append\">\n\t\t\t{{ column.extra?.append }}\n\t\t</span>\n\t}\n</span>" }]
         }] });
 
 class OptionColumnComponent extends TotsBaseColumnComponent {
@@ -282,12 +288,12 @@ class OptionColumnComponent extends TotsBaseColumnComponent {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: OptionColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: OptionColumnComponent, selector: "tots-option-column", usesInheritance: true, ngImport: i0, template: "{{getItemValue()}}", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: OptionColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: OptionColumnComponent, isStandalone: false, selector: "tots-option-column", usesInheritance: true, ngImport: i0, template: "{{getItemValue()}}", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: OptionColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: OptionColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-option-column', template: "{{getItemValue()}}" }]
+            args: [{ selector: 'tots-option-column', standalone: false, template: "{{getItemValue()}}" }]
         }] });
 
 class StatusColumnComponent extends OptionColumnComponent {
@@ -309,12 +315,12 @@ class StatusColumnComponent extends OptionColumnComponent {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: StatusColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: StatusColumnComponent, selector: "tots-status-column", usesInheritance: true, ngImport: i0, template: "<span class=\"tots-status-column\" [ngStyle]=\"{'background-color': getBackgroundColor(), 'color': getFontColor()}\">{{getItemValue()}}</span>", styles: [".tots-status-column{display:inline-block;padding:3px 10px;background-color:#e7e7e7;color:#08081699;font-size:x-small;font-weight:700;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StatusColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: StatusColumnComponent, isStandalone: false, selector: "tots-status-column", usesInheritance: true, ngImport: i0, template: "<span class=\"tots-status-column\" [ngStyle]=\"{\n\t'background-color': getBackgroundColor(),\n\t'color': getFontColor()\n}\">\n\t{{ getItemValue() }}\n</span>", styles: [".tots-status-column{display:inline-block;padding:3px 10px;background-color:#e7e7e7;color:#08081699;font-size:x-small;font-weight:700;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: StatusColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StatusColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-status-column', template: "<span class=\"tots-status-column\" [ngStyle]=\"{'background-color': getBackgroundColor(), 'color': getFontColor()}\">{{getItemValue()}}</span>", styles: [".tots-status-column{display:inline-block;padding:3px 10px;background-color:#e7e7e7;color:#08081699;font-size:x-small;font-weight:700;text-transform:uppercase}\n"] }]
+            args: [{ selector: 'tots-status-column', standalone: false, template: "<span class=\"tots-status-column\" [ngStyle]=\"{\n\t'background-color': getBackgroundColor(),\n\t'color': getFontColor()\n}\">\n\t{{ getItemValue() }}\n</span>", styles: [".tots-status-column{display:inline-block;padding:3px 10px;background-color:#e7e7e7;color:#08081699;font-size:x-small;font-weight:700;text-transform:uppercase}\n"] }]
         }] });
 
 class StatusIconColumnComponent extends OptionColumnComponent {
@@ -327,12 +333,12 @@ class StatusIconColumnComponent extends OptionColumnComponent {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: StatusIconColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: StatusIconColumnComponent, selector: "tots-status-icon-column", usesInheritance: true, ngImport: i0, template: "<span class=\"tots-status-icon-column\" [ngStyle]=\"{'color': getFontColor()}\"><mat-icon>{{getItemValue()}}</mat-icon></span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StatusIconColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: StatusIconColumnComponent, isStandalone: false, selector: "tots-status-icon-column", usesInheritance: true, ngImport: i0, template: "<span class=\"tots-status-icon-column\" [ngStyle]=\"{'color': getFontColor()}\">\n\t<mat-icon>\n\t\t{{ getItemValue() }}\n\t</mat-icon>\n</span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: StatusIconColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StatusIconColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-status-icon-column', template: "<span class=\"tots-status-icon-column\" [ngStyle]=\"{'color': getFontColor()}\"><mat-icon>{{getItemValue()}}</mat-icon></span>" }]
+            args: [{ selector: 'tots-status-icon-column', standalone: false, template: "<span class=\"tots-status-icon-column\" [ngStyle]=\"{'color': getFontColor()}\">\n\t<mat-icon>\n\t\t{{ getItemValue() }}\n\t</mat-icon>\n</span>" }]
         }] });
 
 class StringColumnComponent extends TotsBaseColumnComponent {
@@ -346,32 +352,36 @@ class StringColumnComponent extends TotsBaseColumnComponent {
     get prepend() {
         return this.column.extra?.prepend;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: StringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: StringColumnComponent, selector: "tots-string-column", usesInheritance: true, ngImport: i0, template: "<span class=\"prefix\" *ngIf=\"prepend\"> {{ prepend }} </span>\n{{getItemValue()}}", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    get append() {
+        return this.column.extra?.append;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: StringColumnComponent, isStandalone: false, selector: "tots-string-column", usesInheritance: true, ngImport: i0, template: "@if (prepend) {\n\t<span class=\"prefix\"> {{ prepend }} </span>\n}\n\n{{ getItemValue() }}\n\n@if (append) {\n\t<span class=\"prefix\"> {{ append }} </span>\n}", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: StringColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StringColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-string-column', template: "<span class=\"prefix\" *ngIf=\"prepend\"> {{ prepend }} </span>\n{{getItemValue()}}" }]
+            args: [{ selector: 'tots-string-column', standalone: false, template: "@if (prepend) {\n\t<span class=\"prefix\"> {{ prepend }} </span>\n}\n\n{{ getItemValue() }}\n\n@if (append) {\n\t<span class=\"prefix\"> {{ append }} </span>\n}" }]
         }] });
 
 class TwoStringColumnComponent extends TotsBaseColumnComponent {
     getSubtitleValue() {
         return TotsTableHelper.getItemValueByKey(this.item, this.column.extra.field_subtitle_key);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TwoStringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: TwoStringColumnComponent, selector: "tots-two-string-column", usesInheritance: true, ngImport: i0, template: "<div class=\"first-line\"><strong>{{getItemValue()}}</strong></div>\n<div class=\"second-line\">{{getSubtitleValue()}}</div>", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TwoStringColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: TwoStringColumnComponent, isStandalone: false, selector: "tots-two-string-column", usesInheritance: true, ngImport: i0, template: "<div class=\"first-line\">\n\t<strong>\n\t\t{{ getItemValue() }}\n\t</strong>\n</div>\n\n<div class=\"second-line\">\n\t{{ getSubtitleValue() }}\n</div>", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TwoStringColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TwoStringColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-two-string-column', template: "<div class=\"first-line\"><strong>{{getItemValue()}}</strong></div>\n<div class=\"second-line\">{{getSubtitleValue()}}</div>" }]
+            args: [{ selector: 'tots-two-string-column', standalone: false, template: "<div class=\"first-line\">\n\t<strong>\n\t\t{{ getItemValue() }}\n\t</strong>\n</div>\n\n<div class=\"second-line\">\n\t{{ getSubtitleValue() }}\n</div>" }]
         }] });
 
 class UserColumnComponent extends TotsBaseColumnComponent {
-    onClick() {
+    onClick(event) {
         if (!this.isClickable()) {
             return;
         }
         this.onAction.next({ key: this.getClickEvent(), item: this.item });
+        event.stopPropagation();
     }
     getFirstname() {
         if (this.column.extra?.field_firstname_key) {
@@ -418,12 +428,12 @@ class UserColumnComponent extends TotsBaseColumnComponent {
         }
         return 'click-column';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UserColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: UserColumnComponent, selector: "tots-user-column", usesInheritance: true, ngImport: i0, template: "<div class=\"user-avatar-component\" [ngClass]=\"{'box-clickable': isClickable()}\" (click)=\"onClick(); $event.stopPropagation();\">\n    <div class=\"avatar\" *ngIf=\"getPhoto() != ''\">\n        <img mat-card-avatar [src]=\"getPhoto()\" alt=\"{{ getFullname() }}\" class=\"cover-image\" onerror=\"this.src='/assets/img/user-avatar-empty.svg';\">\n    </div>\n    <div class=\"texts\">\n        <div class=\"user\"> {{ getFullname() }} </div>\n        <div class=\"body-2\" *ngIf=\"getSubtitle() != ''\"> {{ getSubtitle() }} </div>\n    </div>\n    <div class=\"check\" *ngIf=\"column.extra?.field_is_online && isOnline()\"><mat-icon>check</mat-icon></div>\n</div>\n", styles: [".user-avatar-component{display:flex;align-items:center;position:relative}.user-avatar-component .avatar{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:40px;overflow:hidden;margin-right:16px}.user-avatar-component .avatar img{width:40px;min-width:40px;height:40px;min-height:40px}.user-avatar-component .texts .user{font-size:1.1em}.user-avatar-component .texts .body-2{color:#636363;font-size:.9em}.user-avatar-component .check{position:absolute;border:2px solid white;border-radius:200px;top:0;left:0;color:#24b524;background-color:#d7ffa3;width:1em;height:1em;display:flex;align-items:center;justify-content:center}.user-avatar-component .check mat-icon{line-height:1em;font-size:1em;width:1em;height:1em}.box-clickable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: UserColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: UserColumnComponent, isStandalone: false, selector: "tots-user-column", usesInheritance: true, ngImport: i0, template: "<div class=\"user-avatar-component\" [ngClass]=\"{'box-clickable': isClickable()}\" (click)=\"onClick($event);\">\n\t@if (getPhoto()) {\n\t\t<div class=\"avatar\">\n\t\t\t<img mat-card-avatar [src]=\"getPhoto()\" alt=\"{{ getFullname() }}\" class=\"cover-image\" onerror=\"this.src='/assets/img/user-avatar-empty.svg';\">\n\t\t</div>\n\t}\n\n\t<div class=\"texts\">\n\t\t<div class=\"user\"> {{ getFullname() }} </div>\n\n\t\t@if (getSubtitle()) {\n\t\t\t<div class=\"body-2\"> {{ getSubtitle() }} </div>\n\t\t}\n\t</div>\n\n\t@if (column.extra?.field_is_online && isOnline()) {\n\t\t<div class=\"check\">\n\t\t\t<mat-icon>check</mat-icon>\n\t\t</div>\n\t}\n</div>\n", styles: [".user-avatar-component{display:flex;align-items:center;position:relative}.user-avatar-component .avatar{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:40px;overflow:hidden;margin-right:16px}.user-avatar-component .avatar img{width:40px;min-width:40px;height:40px;min-height:40px}.user-avatar-component .texts .user{font-size:1.1em}.user-avatar-component .texts .body-2{color:#636363;font-size:.9em}.user-avatar-component .check{position:absolute;border:2px solid white;border-radius:200px;top:0;left:0;color:#24b524;background-color:#d7ffa3;width:1em;height:1em;display:flex;align-items:center;justify-content:center}.user-avatar-component .check mat-icon{line-height:1em;font-size:1em;width:1em;height:1em}.box-clickable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UserColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: UserColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-user-column', template: "<div class=\"user-avatar-component\" [ngClass]=\"{'box-clickable': isClickable()}\" (click)=\"onClick(); $event.stopPropagation();\">\n    <div class=\"avatar\" *ngIf=\"getPhoto() != ''\">\n        <img mat-card-avatar [src]=\"getPhoto()\" alt=\"{{ getFullname() }}\" class=\"cover-image\" onerror=\"this.src='/assets/img/user-avatar-empty.svg';\">\n    </div>\n    <div class=\"texts\">\n        <div class=\"user\"> {{ getFullname() }} </div>\n        <div class=\"body-2\" *ngIf=\"getSubtitle() != ''\"> {{ getSubtitle() }} </div>\n    </div>\n    <div class=\"check\" *ngIf=\"column.extra?.field_is_online && isOnline()\"><mat-icon>check</mat-icon></div>\n</div>\n", styles: [".user-avatar-component{display:flex;align-items:center;position:relative}.user-avatar-component .avatar{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:40px;overflow:hidden;margin-right:16px}.user-avatar-component .avatar img{width:40px;min-width:40px;height:40px;min-height:40px}.user-avatar-component .texts .user{font-size:1.1em}.user-avatar-component .texts .body-2{color:#636363;font-size:.9em}.user-avatar-component .check{position:absolute;border:2px solid white;border-radius:200px;top:0;left:0;color:#24b524;background-color:#d7ffa3;width:1em;height:1em;display:flex;align-items:center;justify-content:center}.user-avatar-component .check mat-icon{line-height:1em;font-size:1em;width:1em;height:1em}.box-clickable{cursor:pointer}\n"] }]
+            args: [{ selector: 'tots-user-column', standalone: false, template: "<div class=\"user-avatar-component\" [ngClass]=\"{'box-clickable': isClickable()}\" (click)=\"onClick($event);\">\n\t@if (getPhoto()) {\n\t\t<div class=\"avatar\">\n\t\t\t<img mat-card-avatar [src]=\"getPhoto()\" alt=\"{{ getFullname() }}\" class=\"cover-image\" onerror=\"this.src='/assets/img/user-avatar-empty.svg';\">\n\t\t</div>\n\t}\n\n\t<div class=\"texts\">\n\t\t<div class=\"user\"> {{ getFullname() }} </div>\n\n\t\t@if (getSubtitle()) {\n\t\t\t<div class=\"body-2\"> {{ getSubtitle() }} </div>\n\t\t}\n\t</div>\n\n\t@if (column.extra?.field_is_online && isOnline()) {\n\t\t<div class=\"check\">\n\t\t\t<mat-icon>check</mat-icon>\n\t\t</div>\n\t}\n</div>\n", styles: [".user-avatar-component{display:flex;align-items:center;position:relative}.user-avatar-component .avatar{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:40px;overflow:hidden;margin-right:16px}.user-avatar-component .avatar img{width:40px;min-width:40px;height:40px;min-height:40px}.user-avatar-component .texts .user{font-size:1.1em}.user-avatar-component .texts .body-2{color:#636363;font-size:.9em}.user-avatar-component .check{position:absolute;border:2px solid white;border-radius:200px;top:0;left:0;color:#24b524;background-color:#d7ffa3;width:1em;height:1em;display:flex;align-items:center;justify-content:center}.user-avatar-component .check mat-icon{line-height:1em;font-size:1em;width:1em;height:1em}.box-clickable{cursor:pointer}\n"] }]
         }] });
 
 class TotsBalanceColumn extends TotsColumn {
@@ -549,10 +559,11 @@ class TotsStatusIconColumn extends TotsColumn {
 }
 
 class TotsStringColumn extends TotsColumn {
-    constructor(id, fieldKey, title, hasOrder, order, prepend) {
+    constructor(id, fieldKey, title, hasOrder, order, prepend, append) {
         super(id, StringColumnComponent, fieldKey, title, hasOrder, order);
         this.extra = {
-            prepend: prepend
+            prepend: prepend,
+            append: append
         };
     }
 }
@@ -591,13 +602,13 @@ class BasePrintColumnComponent {
         view.instance.onAction = this.onAction;
         view.instance.index = this.index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BasePrintColumnComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: BasePrintColumnComponent, selector: "tots-base-print-column", inputs: { column: "column", item: "item", onAction: "onAction", index: "index" }, ngImport: i0, template: "<div #contentColumn></div>", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BasePrintColumnComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: BasePrintColumnComponent, isStandalone: false, selector: "tots-base-print-column", inputs: { column: "column", item: "item", onAction: "onAction", index: "index" }, ngImport: i0, template: "<div #contentColumn></div>", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BasePrintColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BasePrintColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-base-print-column', template: "<div #contentColumn></div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
+            args: [{ selector: 'tots-base-print-column', standalone: false, template: "<div #contentColumn></div>" }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { column: [{
                 type: Input
             }], item: [{
                 type: Input
@@ -630,16 +641,16 @@ class LoadingAnimationRendererComponent {
             this.loadingComponent.instance.color = this.totsTableDefaultConfig.matColor;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: LoadingAnimationRendererComponent, deps: [{ token: TOTS_TABLE_DEFAULT_CONFIG }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: LoadingAnimationRendererComponent, selector: "tots-loading-animation-renderer", viewQueries: [{ propertyName: "loadingComponentContainer", first: true, predicate: ["loadingComponentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #loadingComponentContainer></ng-container>", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LoadingAnimationRendererComponent, deps: [{ token: TOTS_TABLE_DEFAULT_CONFIG }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: LoadingAnimationRendererComponent, isStandalone: false, selector: "tots-loading-animation-renderer", viewQueries: [{ propertyName: "loadingComponentContainer", first: true, predicate: ["loadingComponentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #loadingComponentContainer></ng-container>", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: LoadingAnimationRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LoadingAnimationRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-loading-animation-renderer', template: "<ng-container #loadingComponentContainer></ng-container>" }]
-        }], ctorParameters: function () { return [{ type: TotsTableDefaultConfig, decorators: [{
+            args: [{ selector: 'tots-loading-animation-renderer', standalone: false, template: "<ng-container #loadingComponentContainer></ng-container>" }]
+        }], ctorParameters: () => [{ type: TotsTableDefaultConfig, decorators: [{
                     type: Inject,
                     args: [TOTS_TABLE_DEFAULT_CONFIG]
-                }] }, { type: i0.ViewContainerRef }]; }, propDecorators: { loadingComponentContainer: [{
+                }] }, { type: i0.ViewContainerRef }], propDecorators: { loadingComponentContainer: [{
                 type: ViewChild,
                 args: ['loadingComponentContainer', { read: ViewContainerRef }]
             }] } });
@@ -659,7 +670,7 @@ class TotsTableComponent {
         this.isLoading = true;
         this.firstLoad = true;
         this.messageNotFound = this.totsTableDefaultConfig.messageNotFound ? this.totsTableDefaultConfig.messageNotFound : "No results found, please try with other search terms";
-        this.matColor = this.totsTableDefaultConfig.matColor != undefined ? this.totsTableDefaultConfig.matColor : "primary";
+        this.matColor = this.totsTableDefaultConfig.matColor || "primary";
         this.upperPaginator = this.totsTableDefaultConfig.upperPaginator != undefined ? this.totsTableDefaultConfig.upperPaginator : false;
         this.lowerPaginator = this.totsTableDefaultConfig.lowerPaginator != undefined ? this.totsTableDefaultConfig.lowerPaginator : true;
         this.upperProgressBar = this.totsTableDefaultConfig.upperProgressBar != undefined ? this.totsTableDefaultConfig.upperProgressBar : false;
@@ -716,16 +727,16 @@ class TotsTableComponent {
     detectChanges() {
         this.changeDectetor.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TOTS_TABLE_DEFAULT_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: TotsTableComponent, selector: "tots-table", inputs: { config: "config", pageIndex: "pageIndex", pageSize: "pageSize", hasPagination: "hasPagination", messageNotFound: "messageNotFound" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"tots-table-container {{config.classes}}\">\n\n    <!-- #region Lower paginator -->\n    <ng-container *ngIf=\"upperPaginator && dataItems && dataItems.data.length > 0 && hasPagination\">\n        <mat-paginator [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" (page)=\"onPageChange($event)\"></mat-paginator>\n    </ng-container>\n    <!-- #endregion -->\n\n    <!-- #region Lower progress bar -->\n    <ng-container *ngIf=\"upperProgressBar && !firstLoad\">\n        <div class=\"tots-table-bar-loading upper\">\n            <mat-progress-bar *ngIf=\"isLoading\" [mode]=\"'indeterminate'\" [color]=\"matColor\"></mat-progress-bar>\n        </div>\n    </ng-container>\n    <!-- #endregion -->\n\n    <!-- #region Table -->\n    <table mat-table [dataSource]=\"dataItems != undefined ? dataItems!.data : []\">\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.key\" [stickyEnd]=\"column.extra?.stickyEnd ?? false\">\n            <!-- TH-->\n            <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'tots-tr-has-order': column.hasOrder}\" (click)=\"onClickOrder(column)\">\n                {{ column.title }}\n                <mat-icon [ngClass]=\"{'sort_active': column.order == 'asc'}\">arrow_drop_up</mat-icon>\n                <mat-icon [ngClass]=\"{'sort_active': column.order == 'desc'}\">arrow_drop_down</mat-icon>\n            </th>\n            <!-- TD -->\n            <td mat-cell *matCellDef=\"let item; let index = index;\" [ngStyle]=\"{'width': column.extra?.width ? column.extra.width : 'auto'}\"><tots-base-print-column [column]=\"column\" [item]=\"item\" [index]=\"index\" [onAction]=\"privateActions\"></tots-base-print-column></td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayColumns;\" (click)=\"onClickRow(row)\" [class]=\"row.classCustom\" [ngClass]=\"{'tots-cell-selected': row.isSelected}\"></tr>\n\n        <!-- Row shown when there is no matching data. -->\n        <ng-container *ngIf=\"!isLoading\">\n            <tr class=\"tots-table-not-data\" *matNoDataRow><td class=\"mat-cell\" [colSpan]=\"config.columns.length\">{{ messageNotFound }}</td></tr>\n        </ng-container>\n    </table>\n    <!-- #endregion -->\n\n    <!-- #region First loading animation -->\n    <div *ngIf=\"isLoading && firstLoad\" class=\"tots-table-loading\">\n        <tots-loading-animation-renderer></tots-loading-animation-renderer>\n    </div>\n    <!-- #endregion -->\n\n    <!-- #region Lower progress bar -->\n    <ng-container *ngIf=\"lowerProgressBar && !firstLoad\">\n        <div class=\"tots-table-bar-loading lower\">\n            <mat-progress-bar *ngIf=\"isLoading\" [mode]=\"'indeterminate'\" [color]=\"matColor\"></mat-progress-bar>\n        </div>\n    </ng-container>\n    <!-- #endregion -->\n\n    <!-- #region Lower paginator -->\n    <ng-container *ngIf=\"lowerPaginator && dataItems && dataItems.data.length > 0 && hasPagination\">\n        <mat-paginator [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" (page)=\"onPageChange($event)\"></mat-paginator>\n    </ng-container>\n    <!-- #endregion -->\n\n</div>", styles: [".tots-table-container .mat-mdc-header-cell{position:relative}.tots-table-container .mat-mdc-header-cell mat-icon{display:none}.tots-table-container .tots-tr-has-order{cursor:pointer}.tots-table-container .tots-tr-has-order:hover mat-icon{opacity:.5}.tots-table-container .tots-tr-has-order mat-icon{display:inline;opacity:.3;position:absolute}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(1){top:12px}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(2){top:20px}.tots-table-container .tots-tr-has-order .sort_active{opacity:1!important}.tots-table-container .tots-table-loading{display:flex;justify-content:center;text-align:center}.tots-table-container .tots-table-bar-loading{height:4px}.tots-table-container .tots-table-not-data{font-size:large;text-align:center}.tots-table-container .tots-table-not-data td{padding:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: BasePrintColumnComponent, selector: "tots-base-print-column", inputs: ["column", "item", "onAction", "index"] }, { kind: "component", type: LoadingAnimationRendererComponent, selector: "tots-loading-animation-renderer" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TOTS_TABLE_DEFAULT_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: TotsTableComponent, isStandalone: false, selector: "tots-table", inputs: { config: "config", pageIndex: "pageIndex", pageSize: "pageSize", hasPagination: "hasPagination", messageNotFound: "messageNotFound" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"tots-table-container {{config.classes}}\">\n\n\t<!-- #region Lower paginator -->\n\t@if (upperPaginator && dataItems && dataItems.data.length > 0 && hasPagination) {\n\t\t<mat-paginator\n\t\t\t[pageIndex]=\"pageIndex-1\"\n\t\t\t[length]=\"dataItems!.total\"\n\t\t\t[pageSize]=\"pageSize\"\n\t\t\t(page)=\"onPageChange($event)\"\n\t\t></mat-paginator>\n\t}\n\t<!-- #endregion -->\n\n\t<!-- #region Lower progress bar -->\n\t@if (upperProgressBar && !firstLoad) {\n\t\t<div class=\"tots-table-bar-loading upper\">\n\t\t\t@if (isLoading) {\n\t\t\t\t<mat-progress-bar [mode]=\"'indeterminate'\" [class]=\"matColor\"></mat-progress-bar>\n\t\t\t}\n\t\t</div>\n\t}\n\t<!-- #endregion -->\n\n\t<!-- #region Table -->\n\t<table mat-table [dataSource]=\"dataItems != undefined ? dataItems!.data : []\">\n\n\t\t@for (column of config.columns; track $index) {\n\t\t\t<ng-container [matColumnDef]=\"column.key\" [stickyEnd]=\"column.extra?.stickyEnd ?? false\">\n\n\t\t\t\t<th mat-header-cell *matHeaderCellDef [ngClass]=\"{'tots-tr-has-order': column.hasOrder}\" (click)=\"onClickOrder(column)\">\n\t\t\t\t\t{{ column.title }}\n\t\t\t\t\t<mat-icon [ngClass]=\"{'sort_active': column.order == 'asc'}\">arrow_drop_up</mat-icon>\n\t\t\t\t\t<mat-icon [ngClass]=\"{'sort_active': column.order == 'desc'}\">arrow_drop_down</mat-icon>\n\t\t\t\t</th>\n\n\t\t\t\t<td mat-cell *matCellDef=\"let item; let index = index;\" [ngStyle]=\"{'width': column.extra?.width ? column.extra.width : 'auto'}\"><tots-base-print-column [column]=\"column\" [item]=\"item\" [index]=\"index\" [onAction]=\"privateActions\"></tots-base-print-column></td>\n\t\t\t</ng-container>\n\t\t}\n\n\t\t<tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\n\t\t<tr mat-row *matRowDef=\"let row; columns: displayColumns;\" (click)=\"onClickRow(row)\" [class]=\"row.classCustom\" [ngClass]=\"{'tots-cell-selected': row.isSelected}\"></tr>\n\n\t\t<!-- Row shown when there is no matching data. -->\n\t\t@if (!isLoading) {\n\t\t\t<tr class=\"tots-table-not-data\" *matNoDataRow>\n\t\t\t\t<td class=\"mat-cell\" [colSpan]=\"config.columns.length\">\n\t\t\t\t\t{{ messageNotFound }}\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t}\n\t</table>\n\t<!-- #endregion -->\n\n\t<!-- #region First loading animation -->\n\t@if (isLoading && firstLoad) {\n\t\t<div class=\"tots-table-loading\">\n\t\t\t<tots-loading-animation-renderer></tots-loading-animation-renderer>\n\t\t</div>\n\t}\n\t<!-- #endregion -->\n\n\t<!-- #region Lower progress bar -->\n\t@if (lowerProgressBar && !firstLoad) {\n\t\t<div class=\"tots-table-bar-loading lower\">\n\t\t\t@if (isLoading) {\n\t\t\t\t<mat-progress-bar [mode]=\"'indeterminate'\" [class]=\"matColor\"></mat-progress-bar>\n\t\t\t}\n\t\t</div>\n\t}\n\t<!-- #endregion -->\n\n\t<!-- #region Lower paginator -->\n\t@if (lowerPaginator && dataItems && dataItems.data.length > 0 && hasPagination) {\n\t\t<mat-paginator [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" (page)=\"onPageChange($event)\"></mat-paginator>\n\t}\n\t<!-- #endregion -->\n</div>", styles: [".tots-table-container .mat-mdc-header-cell{position:relative}.tots-table-container .mat-mdc-header-cell mat-icon{display:none}.tots-table-container .tots-tr-has-order{cursor:pointer}.tots-table-container .tots-tr-has-order:hover mat-icon{opacity:.5}.tots-table-container .tots-tr-has-order mat-icon{display:inline;opacity:.3;position:absolute}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(1){top:12px}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(2){top:20px}.tots-table-container .tots-tr-has-order .sort_active{opacity:1!important}.tots-table-container .tots-table-loading{display:flex;justify-content:center;text-align:center}.tots-table-container .tots-table-bar-loading{height:4px}.tots-table-container .tots-table-not-data{font-size:large;text-align:center}.tots-table-container .tots-table-not-data td{padding:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: BasePrintColumnComponent, selector: "tots-base-print-column", inputs: ["column", "item", "onAction", "index"] }, { kind: "component", type: LoadingAnimationRendererComponent, selector: "tots-loading-animation-renderer" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-table', template: "<div class=\"tots-table-container {{config.classes}}\">\n\n    <!-- #region Lower paginator -->\n    <ng-container *ngIf=\"upperPaginator && dataItems && dataItems.data.length > 0 && hasPagination\">\n        <mat-paginator [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" (page)=\"onPageChange($event)\"></mat-paginator>\n    </ng-container>\n    <!-- #endregion -->\n\n    <!-- #region Lower progress bar -->\n    <ng-container *ngIf=\"upperProgressBar && !firstLoad\">\n        <div class=\"tots-table-bar-loading upper\">\n            <mat-progress-bar *ngIf=\"isLoading\" [mode]=\"'indeterminate'\" [color]=\"matColor\"></mat-progress-bar>\n        </div>\n    </ng-container>\n    <!-- #endregion -->\n\n    <!-- #region Table -->\n    <table mat-table [dataSource]=\"dataItems != undefined ? dataItems!.data : []\">\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.key\" [stickyEnd]=\"column.extra?.stickyEnd ?? false\">\n            <!-- TH-->\n            <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'tots-tr-has-order': column.hasOrder}\" (click)=\"onClickOrder(column)\">\n                {{ column.title }}\n                <mat-icon [ngClass]=\"{'sort_active': column.order == 'asc'}\">arrow_drop_up</mat-icon>\n                <mat-icon [ngClass]=\"{'sort_active': column.order == 'desc'}\">arrow_drop_down</mat-icon>\n            </th>\n            <!-- TD -->\n            <td mat-cell *matCellDef=\"let item; let index = index;\" [ngStyle]=\"{'width': column.extra?.width ? column.extra.width : 'auto'}\"><tots-base-print-column [column]=\"column\" [item]=\"item\" [index]=\"index\" [onAction]=\"privateActions\"></tots-base-print-column></td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayColumns;\" (click)=\"onClickRow(row)\" [class]=\"row.classCustom\" [ngClass]=\"{'tots-cell-selected': row.isSelected}\"></tr>\n\n        <!-- Row shown when there is no matching data. -->\n        <ng-container *ngIf=\"!isLoading\">\n            <tr class=\"tots-table-not-data\" *matNoDataRow><td class=\"mat-cell\" [colSpan]=\"config.columns.length\">{{ messageNotFound }}</td></tr>\n        </ng-container>\n    </table>\n    <!-- #endregion -->\n\n    <!-- #region First loading animation -->\n    <div *ngIf=\"isLoading && firstLoad\" class=\"tots-table-loading\">\n        <tots-loading-animation-renderer></tots-loading-animation-renderer>\n    </div>\n    <!-- #endregion -->\n\n    <!-- #region Lower progress bar -->\n    <ng-container *ngIf=\"lowerProgressBar && !firstLoad\">\n        <div class=\"tots-table-bar-loading lower\">\n            <mat-progress-bar *ngIf=\"isLoading\" [mode]=\"'indeterminate'\" [color]=\"matColor\"></mat-progress-bar>\n        </div>\n    </ng-container>\n    <!-- #endregion -->\n\n    <!-- #region Lower paginator -->\n    <ng-container *ngIf=\"lowerPaginator && dataItems && dataItems.data.length > 0 && hasPagination\">\n        <mat-paginator [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" (page)=\"onPageChange($event)\"></mat-paginator>\n    </ng-container>\n    <!-- #endregion -->\n\n</div>", styles: [".tots-table-container .mat-mdc-header-cell{position:relative}.tots-table-container .mat-mdc-header-cell mat-icon{display:none}.tots-table-container .tots-tr-has-order{cursor:pointer}.tots-table-container .tots-tr-has-order:hover mat-icon{opacity:.5}.tots-table-container .tots-tr-has-order mat-icon{display:inline;opacity:.3;position:absolute}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(1){top:12px}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(2){top:20px}.tots-table-container .tots-tr-has-order .sort_active{opacity:1!important}.tots-table-container .tots-table-loading{display:flex;justify-content:center;text-align:center}.tots-table-container .tots-table-bar-loading{height:4px}.tots-table-container .tots-table-not-data{font-size:large;text-align:center}.tots-table-container .tots-table-not-data td{padding:24px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TotsTableDefaultConfig, decorators: [{
+            args: [{ selector: 'tots-table', standalone: false, template: "<div class=\"tots-table-container {{config.classes}}\">\n\n\t<!-- #region Lower paginator -->\n\t@if (upperPaginator && dataItems && dataItems.data.length > 0 && hasPagination) {\n\t\t<mat-paginator\n\t\t\t[pageIndex]=\"pageIndex-1\"\n\t\t\t[length]=\"dataItems!.total\"\n\t\t\t[pageSize]=\"pageSize\"\n\t\t\t(page)=\"onPageChange($event)\"\n\t\t></mat-paginator>\n\t}\n\t<!-- #endregion -->\n\n\t<!-- #region Lower progress bar -->\n\t@if (upperProgressBar && !firstLoad) {\n\t\t<div class=\"tots-table-bar-loading upper\">\n\t\t\t@if (isLoading) {\n\t\t\t\t<mat-progress-bar [mode]=\"'indeterminate'\" [class]=\"matColor\"></mat-progress-bar>\n\t\t\t}\n\t\t</div>\n\t}\n\t<!-- #endregion -->\n\n\t<!-- #region Table -->\n\t<table mat-table [dataSource]=\"dataItems != undefined ? dataItems!.data : []\">\n\n\t\t@for (column of config.columns; track $index) {\n\t\t\t<ng-container [matColumnDef]=\"column.key\" [stickyEnd]=\"column.extra?.stickyEnd ?? false\">\n\n\t\t\t\t<th mat-header-cell *matHeaderCellDef [ngClass]=\"{'tots-tr-has-order': column.hasOrder}\" (click)=\"onClickOrder(column)\">\n\t\t\t\t\t{{ column.title }}\n\t\t\t\t\t<mat-icon [ngClass]=\"{'sort_active': column.order == 'asc'}\">arrow_drop_up</mat-icon>\n\t\t\t\t\t<mat-icon [ngClass]=\"{'sort_active': column.order == 'desc'}\">arrow_drop_down</mat-icon>\n\t\t\t\t</th>\n\n\t\t\t\t<td mat-cell *matCellDef=\"let item; let index = index;\" [ngStyle]=\"{'width': column.extra?.width ? column.extra.width : 'auto'}\"><tots-base-print-column [column]=\"column\" [item]=\"item\" [index]=\"index\" [onAction]=\"privateActions\"></tots-base-print-column></td>\n\t\t\t</ng-container>\n\t\t}\n\n\t\t<tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\n\t\t<tr mat-row *matRowDef=\"let row; columns: displayColumns;\" (click)=\"onClickRow(row)\" [class]=\"row.classCustom\" [ngClass]=\"{'tots-cell-selected': row.isSelected}\"></tr>\n\n\t\t<!-- Row shown when there is no matching data. -->\n\t\t@if (!isLoading) {\n\t\t\t<tr class=\"tots-table-not-data\" *matNoDataRow>\n\t\t\t\t<td class=\"mat-cell\" [colSpan]=\"config.columns.length\">\n\t\t\t\t\t{{ messageNotFound }}\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t}\n\t</table>\n\t<!-- #endregion -->\n\n\t<!-- #region First loading animation -->\n\t@if (isLoading && firstLoad) {\n\t\t<div class=\"tots-table-loading\">\n\t\t\t<tots-loading-animation-renderer></tots-loading-animation-renderer>\n\t\t</div>\n\t}\n\t<!-- #endregion -->\n\n\t<!-- #region Lower progress bar -->\n\t@if (lowerProgressBar && !firstLoad) {\n\t\t<div class=\"tots-table-bar-loading lower\">\n\t\t\t@if (isLoading) {\n\t\t\t\t<mat-progress-bar [mode]=\"'indeterminate'\" [class]=\"matColor\"></mat-progress-bar>\n\t\t\t}\n\t\t</div>\n\t}\n\t<!-- #endregion -->\n\n\t<!-- #region Lower paginator -->\n\t@if (lowerPaginator && dataItems && dataItems.data.length > 0 && hasPagination) {\n\t\t<mat-paginator [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" (page)=\"onPageChange($event)\"></mat-paginator>\n\t}\n\t<!-- #endregion -->\n</div>", styles: [".tots-table-container .mat-mdc-header-cell{position:relative}.tots-table-container .mat-mdc-header-cell mat-icon{display:none}.tots-table-container .tots-tr-has-order{cursor:pointer}.tots-table-container .tots-tr-has-order:hover mat-icon{opacity:.5}.tots-table-container .tots-tr-has-order mat-icon{display:inline;opacity:.3;position:absolute}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(1){top:12px}.tots-table-container .tots-tr-has-order mat-icon:nth-of-type(2){top:20px}.tots-table-container .tots-tr-has-order .sort_active{opacity:1!important}.tots-table-container .tots-table-loading{display:flex;justify-content:center;text-align:center}.tots-table-container .tots-table-bar-loading{height:4px}.tots-table-container .tots-table-not-data{font-size:large;text-align:center}.tots-table-container .tots-table-not-data td{padding:24px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TotsTableDefaultConfig, decorators: [{
                     type: Inject,
                     args: [TOTS_TABLE_DEFAULT_CONFIG]
-                }] }]; }, propDecorators: { config: [{
+                }] }], propDecorators: { config: [{
                 type: Input
             }], pageIndex: [{
                 type: Input
@@ -782,12 +793,12 @@ class TotsTableApiComponent {
     setObs(obs) {
         this.configTable.obs = obs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: TotsTableApiComponent, selector: "tots-table-api", inputs: { config: "config", hasPagination: "hasPagination", isPaginationStartIndexInZero: "isPaginationStartIndexInZero" }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "tableComp", first: true, predicate: ["tableComp"], descendants: true }], ngImport: i0, template: "<tots-table #tableComp [config]=\"configTable\" [pageIndex]=\"config.query.page\" [pageSize]=\"config.query.per_page\" (onAction)=\"onTableAction($event)\" [hasPagination]=\"hasPagination\"></tots-table>\n", styles: [""], dependencies: [{ kind: "component", type: TotsTableComponent, selector: "tots-table", inputs: ["config", "pageIndex", "pageSize", "hasPagination", "messageNotFound"], outputs: ["onAction"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsTableApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: TotsTableApiComponent, isStandalone: false, selector: "tots-table-api", inputs: { config: "config", hasPagination: "hasPagination", isPaginationStartIndexInZero: "isPaginationStartIndexInZero" }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "tableComp", first: true, predicate: ["tableComp"], descendants: true }], ngImport: i0, template: "<tots-table #tableComp [config]=\"configTable\" [pageIndex]=\"config.query.page\" [pageSize]=\"config.query.per_page\" (onAction)=\"onTableAction($event)\" [hasPagination]=\"hasPagination\"></tots-table>\n", styles: [""], dependencies: [{ kind: "component", type: TotsTableComponent, selector: "tots-table", inputs: ["config", "pageIndex", "pageSize", "hasPagination", "messageNotFound"], outputs: ["onAction"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableApiComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsTableApiComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-table-api', template: "<tots-table #tableComp [config]=\"configTable\" [pageIndex]=\"config.query.page\" [pageSize]=\"config.query.per_page\" (onAction)=\"onTableAction($event)\" [hasPagination]=\"hasPagination\"></tots-table>\n" }]
+            args: [{ selector: 'tots-table-api', standalone: false, template: "<tots-table #tableComp [config]=\"configTable\" [pageIndex]=\"config.query.page\" [pageSize]=\"config.query.per_page\" (onAction)=\"onTableAction($event)\" [hasPagination]=\"hasPagination\"></tots-table>\n" }]
         }], propDecorators: { tableComp: [{
                 type: ViewChild,
                 args: ['tableComp']
@@ -802,8 +813,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
             }] } });
 
 class TotsTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.11", ngImport: i0, type: TotsTableModule, declarations: [TotsTableComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: TotsTableModule, declarations: [TotsTableComponent,
             BasePrintColumnComponent,
             StringColumnComponent,
             TotsTableApiComponent,
@@ -832,7 +843,7 @@ class TotsTableModule {
             MatProgressSpinnerModule,
             MatProgressBarModule], exports: [TotsTableComponent,
             TotsTableApiComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsTableModule, providers: [
             {
                 provide: MAT_PAGINATOR_DEFAULT_OPTIONS,
                 useValue: {
@@ -854,7 +865,7 @@ class TotsTableModule {
             MatProgressSpinnerModule,
             MatProgressBarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TotsTableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [