@tots/table 16.0.0 → 16.0.2

package/esm2022/public-api.mjs

@@ -8,6 +8,10 @@ export * from './lib/entities/tots-column';
 export * from './lib/entities/tots-table-config';
 export * from './lib/entities/tots-action-table';
 export * from './lib/entities/tots-table-api-config';
+export * from './lib/entities/tots-column-option';
+export * from './lib/entities/tots-more-menu-item';
+export * from './lib/entities/tots-status-column-option';
+export * from './lib/entities/tots-status-icon-column-option';
 /**
  * Helpers
  */
@@ -29,6 +33,22 @@ export * from './lib/columns/status-column/status-column.component';
 export * from './lib/columns/balance-currency-column/balance-currency-column.component';
 export * from './lib/columns/status-icon-column/status-icon-column.component';
 export * from './lib/columns/balance-currency-icon-column/balance-currency-icon-column.component';
+/**
+ * Factories
+ */
+export * from './lib/column-factories/tots-balance-column';
+export * from './lib/column-factories/tots-balance-icon-column';
+export * from './lib/column-factories/tots-boolean-column';
+export * from './lib/column-factories/tots-checkbox-column';
+export * from './lib/column-factories/tots-currency-column';
+export * from './lib/column-factories/tots-icon-button-column';
+export * from './lib/column-factories/tots-more-menu-column';
+export * from './lib/column-factories/tots-option-column';
+export * from './lib/column-factories/tots-status-column';
+export * from './lib/column-factories/tots-status-icon-column';
+export * from './lib/column-factories/tots-string-column';
+export * from './lib/column-factories/tots-two-string-column';
+export * from './lib/column-factories/tots-user-column';
 /**
  * Components
  */
@@ -38,4 +58,4 @@ export * from './lib/components/tots-table-api/tots-table-api.component';
  * Modules
  */
 export * from './lib/table.module';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3RvdHMvdGFibGUvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSDs7R0FFRztBQUNILGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMsc0NBQXNDLENBQUM7QUFFckQ7O0dBRUc7QUFDSCxjQUFjLGlDQUFpQyxDQUFDO0FBRWhEOztHQUVHO0FBQ0gsY0FBYywwQ0FBMEMsQ0FBQztBQUN6RCxjQUFjLHFEQUFxRCxDQUFDO0FBQ3BFLGNBQWMsMkRBQTJELENBQUM7QUFDMUUsY0FBYyx1REFBdUQsQ0FBQztBQUN0RSxjQUFjLDZEQUE2RCxDQUFDO0FBQzVFLGNBQWMsK0RBQStELENBQUM7QUFDOUUsY0FBYyx5REFBeUQsQ0FBQztBQUN4RSxjQUFjLHFEQUFxRCxDQUFDO0FBQ3BFLGNBQWMsaURBQWlELENBQUM7QUFDaEUsY0FBYyx5REFBeUQsQ0FBQztBQUN4RSxjQUFjLHFEQUFxRCxDQUFDO0FBQ3BFLGNBQWMseUVBQXlFLENBQUM7QUFDeEYsY0FBYywrREFBK0QsQ0FBQztBQUM5RSxjQUFjLG1GQUFtRixDQUFDO0FBRWxHOztHQUVHO0FBQ0gsY0FBYyxrREFBa0QsQ0FBQztBQUNqRSxjQUFjLDBEQUEwRCxDQUFDO0FBRXpFOztHQUVHO0FBQ0gsY0FBYyxvQkFBb0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgdGFibGVcbiAqL1xuXG4vKipcbiAqIEVudGl0aWVzXG4gKi9cbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudGl0aWVzL3RvdHMtY29sdW1uJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudGl0aWVzL3RvdHMtdGFibGUtY29uZmlnJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudGl0aWVzL3RvdHMtYWN0aW9uLXRhYmxlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudGl0aWVzL3RvdHMtdGFibGUtYXBpLWNvbmZpZyc7XG5cbi8qKlxuICogSGVscGVyc1xuICovXG5leHBvcnQgKiBmcm9tICcuL2xpYi9oZWxwZXJzL3RvdHMtdGFibGUtaGVscGVyJztcblxuLyoqXG4gKiBDb2x1bW5zXG4gKi9cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvdG90cy1iYXNlLWNvbHVtbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sdW1ucy9zdHJpbmctY29sdW1uL3N0cmluZy1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvbW9yZS1tZW51LWNvbHVtbi9tb3JlLW1lbnUtY29sdW1uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW5zL2Jvb2xlYW4tY29sdW1uL2Jvb2xlYW4tY29sdW1uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW5zL3R3by1zdHJpbmctY29sdW1uL3R3by1zdHJpbmctY29sdW1uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW5zL2ljb24tYnV0dG9uLWNvbHVtbi9pY29uLWJ1dHRvbi1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvY2hlY2tib3gtY29sdW1uL2NoZWNrYm94LWNvbHVtbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sdW1ucy9vcHRpb24tY29sdW1uL29wdGlvbi1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvdXNlci1jb2x1bW4vdXNlci1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvY3VycmVuY3ktY29sdW1uL2N1cnJlbmN5LWNvbHVtbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sdW1ucy9zdGF0dXMtY29sdW1uL3N0YXR1cy1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvYmFsYW5jZS1jdXJyZW5jeS1jb2x1bW4vYmFsYW5jZS1jdXJyZW5jeS1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvc3RhdHVzLWljb24tY29sdW1uL3N0YXR1cy1pY29uLWNvbHVtbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sdW1ucy9iYWxhbmNlLWN1cnJlbmN5LWljb24tY29sdW1uL2JhbGFuY2UtY3VycmVuY3ktaWNvbi1jb2x1bW4uY29tcG9uZW50JztcblxuLyoqXG4gKiBDb21wb25lbnRzXG4gKi9cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvdG90cy10YWJsZS90b3RzLXRhYmxlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL3RvdHMtdGFibGUtYXBpL3RvdHMtdGFibGUtYXBpLmNvbXBvbmVudCc7XG5cbi8qKlxuICogTW9kdWxlc1xuICovXG5leHBvcnQgKiBmcm9tICcuL2xpYi90YWJsZS5tb2R1bGUnO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3RvdHMvdGFibGUvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSDs7R0FFRztBQUNILGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLG9DQUFvQyxDQUFDO0FBQ25ELGNBQWMsMENBQTBDLENBQUM7QUFDekQsY0FBYywrQ0FBK0MsQ0FBQztBQUU5RDs7R0FFRztBQUNILGNBQWMsaUNBQWlDLENBQUM7QUFFaEQ7O0dBRUc7QUFDSCxjQUFjLDBDQUEwQyxDQUFDO0FBQ3pELGNBQWMscURBQXFELENBQUM7QUFDcEUsY0FBYywyREFBMkQsQ0FBQztBQUMxRSxjQUFjLHVEQUF1RCxDQUFDO0FBQ3RFLGNBQWMsNkRBQTZELENBQUM7QUFDNUUsY0FBYywrREFBK0QsQ0FBQztBQUM5RSxjQUFjLHlEQUF5RCxDQUFDO0FBQ3hFLGNBQWMscURBQXFELENBQUM7QUFDcEUsY0FBYyxpREFBaUQsQ0FBQztBQUNoRSxjQUFjLHlEQUF5RCxDQUFDO0FBQ3hFLGNBQWMscURBQXFELENBQUM7QUFDcEUsY0FBYyx5RUFBeUUsQ0FBQztBQUN4RixjQUFjLCtEQUErRCxDQUFDO0FBQzlFLGNBQWMsbUZBQW1GLENBQUM7QUFFbEc7O0dBRUc7QUFDSCxjQUFjLDRDQUE0QyxDQUFDO0FBQzNELGNBQWMsaURBQWlELENBQUM7QUFDaEUsY0FBYyw0Q0FBNEMsQ0FBQztBQUMzRCxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsNkNBQTZDLENBQUM7QUFDNUQsY0FBYyxnREFBZ0QsQ0FBQztBQUMvRCxjQUFjLDhDQUE4QyxDQUFDO0FBQzdELGNBQWMsMkNBQTJDLENBQUM7QUFDMUQsY0FBYywyQ0FBMkMsQ0FBQztBQUMxRCxjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsMkNBQTJDLENBQUM7QUFDMUQsY0FBYywrQ0FBK0MsQ0FBQztBQUM5RCxjQUFjLHlDQUF5QyxDQUFDO0FBRXhEOztHQUVHO0FBQ0gsY0FBYyxrREFBa0QsQ0FBQztBQUNqRSxjQUFjLDBEQUEwRCxDQUFDO0FBRXpFOztHQUVHO0FBQ0gsY0FBYyxvQkFBb0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgdGFibGVcbiAqL1xuXG4vKipcbiAqIEVudGl0aWVzXG4gKi9cbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudGl0aWVzL3RvdHMtY29sdW1uJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudGl0aWVzL3RvdHMtdGFibGUtY29uZmlnJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudGl0aWVzL3RvdHMtYWN0aW9uLXRhYmxlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudGl0aWVzL3RvdHMtdGFibGUtYXBpLWNvbmZpZyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9lbnRpdGllcy90b3RzLWNvbHVtbi1vcHRpb24nO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZW50aXRpZXMvdG90cy1tb3JlLW1lbnUtaXRlbSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9lbnRpdGllcy90b3RzLXN0YXR1cy1jb2x1bW4tb3B0aW9uJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudGl0aWVzL3RvdHMtc3RhdHVzLWljb24tY29sdW1uLW9wdGlvbic7XG5cbi8qKlxuICogSGVscGVyc1xuICovXG5leHBvcnQgKiBmcm9tICcuL2xpYi9oZWxwZXJzL3RvdHMtdGFibGUtaGVscGVyJztcblxuLyoqXG4gKiBDb2x1bW5zXG4gKi9cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvdG90cy1iYXNlLWNvbHVtbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sdW1ucy9zdHJpbmctY29sdW1uL3N0cmluZy1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvbW9yZS1tZW51LWNvbHVtbi9tb3JlLW1lbnUtY29sdW1uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW5zL2Jvb2xlYW4tY29sdW1uL2Jvb2xlYW4tY29sdW1uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW5zL3R3by1zdHJpbmctY29sdW1uL3R3by1zdHJpbmctY29sdW1uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW5zL2ljb24tYnV0dG9uLWNvbHVtbi9pY29uLWJ1dHRvbi1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvY2hlY2tib3gtY29sdW1uL2NoZWNrYm94LWNvbHVtbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sdW1ucy9vcHRpb24tY29sdW1uL29wdGlvbi1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvdXNlci1jb2x1bW4vdXNlci1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvY3VycmVuY3ktY29sdW1uL2N1cnJlbmN5LWNvbHVtbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sdW1ucy9zdGF0dXMtY29sdW1uL3N0YXR1cy1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvYmFsYW5jZS1jdXJyZW5jeS1jb2x1bW4vYmFsYW5jZS1jdXJyZW5jeS1jb2x1bW4uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbnMvc3RhdHVzLWljb24tY29sdW1uL3N0YXR1cy1pY29uLWNvbHVtbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sdW1ucy9iYWxhbmNlLWN1cnJlbmN5LWljb24tY29sdW1uL2JhbGFuY2UtY3VycmVuY3ktaWNvbi1jb2x1bW4uY29tcG9uZW50JztcblxuLyoqXG4gKiBGYWN0b3JpZXNcbiAqL1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sdW1uLWZhY3Rvcmllcy90b3RzLWJhbGFuY2UtY29sdW1uJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbi1mYWN0b3JpZXMvdG90cy1iYWxhbmNlLWljb24tY29sdW1uJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbi1mYWN0b3JpZXMvdG90cy1ib29sZWFuLWNvbHVtbic7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW4tZmFjdG9yaWVzL3RvdHMtY2hlY2tib3gtY29sdW1uJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbi1mYWN0b3JpZXMvdG90cy1jdXJyZW5jeS1jb2x1bW4nO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sdW1uLWZhY3Rvcmllcy90b3RzLWljb24tYnV0dG9uLWNvbHVtbic7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW4tZmFjdG9yaWVzL3RvdHMtbW9yZS1tZW51LWNvbHVtbic7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW4tZmFjdG9yaWVzL3RvdHMtb3B0aW9uLWNvbHVtbic7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW4tZmFjdG9yaWVzL3RvdHMtc3RhdHVzLWNvbHVtbic7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW4tZmFjdG9yaWVzL3RvdHMtc3RhdHVzLWljb24tY29sdW1uJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbi1mYWN0b3JpZXMvdG90cy1zdHJpbmctY29sdW1uJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbHVtbi1mYWN0b3JpZXMvdG90cy10d28tc3RyaW5nLWNvbHVtbic7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2x1bW4tZmFjdG9yaWVzL3RvdHMtdXNlci1jb2x1bW4nO1xuXG4vKipcbiAqIENvbXBvbmVudHNcbiAqL1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy90b3RzLXRhYmxlL3RvdHMtdGFibGUuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvdG90cy10YWJsZS1hcGkvdG90cy10YWJsZS1hcGkuY29tcG9uZW50JztcblxuLyoqXG4gKiBNb2R1bGVzXG4gKi9cbmV4cG9ydCAqIGZyb20gJy4vbGliL3RhYmxlLm1vZHVsZSc7XG4iXX0=

package/fesm2022/tots-table.mjs

@@ -20,11 +20,12 @@ import * as i5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 class TotsColumn {
-    constructor() {
-        this.key = '';
-        this.title = '';
+    constructor(key, component, field_key, title, hasOrder = false, order) {
         this.is_show = true;
-        this.hasOrder = false;
+        this.key = key;
+        this.field_key = field_key;
+        this.title = title;
+        this.component = component;
     }
 }
 
@@ -51,6 +52,37 @@ class TotsTableApiConfig {
     }
 }
 
+class TotsColumnOption {
+    constructor(value, caption) {
+        this.value = value;
+        this.caption = caption;
+    }
+}
+
+class TotsMoreMenuItem {
+    constructor(icon, caption, action, cssClass) {
+        this.icon = icon;
+        this.title = caption;
+        this.key = action;
+        this.class = cssClass;
+    }
+}
+
+class TotsStatusColumnOption extends TotsColumnOption {
+    constructor(value, caption, backgroundColor, fontColor) {
+        super(value, caption);
+        this.background_color = backgroundColor;
+        this.font_color = fontColor;
+    }
+}
+
+class TotsStatusIconColumnOption extends TotsColumnOption {
+    constructor(value, icon, fontColor) {
+        super(value, icon);
+        this.font_color = fontColor;
+    }
+}
+
 class TotsTableHelper {
     /**
      * Obtiene el valor de un objeto a traves de la KEY
@@ -81,7 +113,7 @@ class TotsBaseColumnComponent {
         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" }, ngImport: i0, template: '', isInline: true }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsBaseColumnComponent, decorators: [{
             type: Component,
@@ -95,6 +127,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
                 type: Input
             }], onAction: [{
                 type: Input
+            }], index: [{
+                type: Input
             }] } });
 
 class StringColumnComponent extends TotsBaseColumnComponent {
@@ -161,7 +195,7 @@ class IconButtonColumnComponent extends TotsBaseColumnComponent {
         return this.column.extra.matColor;
     }
     getClasses() {
-        return this.column.extra.classes;
+        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: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
@@ -180,11 +214,11 @@ 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 (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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CheckboxColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-checkbox-column', template: "<div class=\"tots-checkbox-column\">\n    <mat-checkbox (change)=\"onChange($event)\" (click)=\"$event.stopPropagation();\"></mat-checkbox>\n</div>" }]
+            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>" }]
         }] });
 
 class OptionColumnComponent extends TotsBaseColumnComponent {
@@ -337,6 +371,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
             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>" }]
         }] });
 
+class TotsBalanceColumn extends TotsColumn {
+    constructor(id, activeAssetFieldKey, passiveAssetFieldKey, title, hasOrder, order) {
+        super(id, BalanceCurrencyColumnComponent, undefined, title, hasOrder, order);
+        this.extra = {
+            field_key_credit: activeAssetFieldKey,
+            field_key_debit: passiveAssetFieldKey
+        };
+    }
+}
+
+class TotsBalanceIconColumn extends TotsColumn {
+    constructor(id, activeAssetFieldKey, passiveAssetFieldKey, neutralIcon, positiveIcon, negativeIcon, title, hasOrder, order) {
+        super(id, BalanceCurrencyIconColumnComponent, undefined, title, hasOrder, order);
+        this.extra = {
+            field_key_credit: activeAssetFieldKey,
+            field_key_debit: passiveAssetFieldKey,
+            icon_neutral: neutralIcon,
+            icon_positive: positiveIcon,
+            icon_negative: negativeIcon
+        };
+    }
+}
+
+class TotsBooleanColumn extends TotsColumn {
+    constructor(id, fieldKey, title, hasOrder, order) {
+        super(id, BooleanColumnComponent, fieldKey, title, hasOrder, order);
+    }
+}
+
+class TotsCheckboxColumn extends TotsColumn {
+    constructor(id, fieldKey, title, color, cssClass, hasOrder, order, stickyEnd) {
+        super(id, CheckboxColumnComponent, fieldKey, title, hasOrder, order);
+        this.extra = {
+            stickyEnd: stickyEnd,
+            color: color,
+            class: cssClass
+        };
+    }
+}
+
+class TotsCurrencyColumn extends TotsColumn {
+    constructor(id, fieldKey, title, hasOrder, order) {
+        super(id, CurrencyColumnComponent, fieldKey, title, hasOrder, order);
+    }
+}
+
+class TotsIconButtonColumn extends TotsColumn {
+    constructor(id, icon, action, color, title, cssClass, stickyEnd) {
+        super(id, IconButtonColumnComponent, undefined, title);
+        this.extra = {
+            icon: icon,
+            matColor: color,
+            action: action,
+            class: cssClass,
+            stickyEnd: stickyEnd
+        };
+    }
+}
+
+class TotsMoreMenuColumn extends TotsColumn {
+    constructor(id, items, title, stickyEnd) {
+        super(id, MoreMenuColumnComponent, undefined, title);
+        this.extra = {
+            stickyEnd: stickyEnd,
+            actions: items
+        };
+    }
+}
+
+class TotsOptionColumn extends TotsColumn {
+    constructor(id, fieldKey, options, title, hasOrder, order) {
+        super(id, OptionColumnComponent, fieldKey, title, hasOrder, order);
+        this.extra = {
+            options: options,
+            field_rel_key: "value",
+            field_print_key: "caption"
+        };
+    }
+}
+
+class TotsStatusColumn extends TotsColumn {
+    constructor(id, fieldKey, options, title, hasOrder, order) {
+        super(id, StatusColumnComponent, fieldKey, title, hasOrder, order);
+        this.extra = {
+            options: options,
+            field_rel_key: "value",
+            field_print_key: "caption"
+        };
+    }
+}
+
+class TotsStatusIconColumn extends TotsColumn {
+    constructor(id, fieldKey, options, title, hasOrder, order) {
+        super(id, StatusIconColumnComponent, fieldKey, title, hasOrder, order);
+        this.extra = {
+            options: options,
+            field_rel_key: "value",
+            field_print_key: "caption"
+        };
+    }
+}
+
+class TotsStringColumn extends TotsColumn {
+    constructor(id, fieldKey, title, hasOrder, order) {
+        super(id, StringColumnComponent, fieldKey, title, hasOrder, order);
+    }
+}
+
+class TotsTwoStringColumn extends TotsColumn {
+    constructor(id, fieldKey, secondFieldKey, title, hasOrder, order) {
+        super(id, TwoStringColumnComponent, fieldKey, title, hasOrder, order);
+        this.extra = {
+            field_subtitle_key: secondFieldKey
+        };
+    }
+}
+
+class TotsUserColumn extends TotsColumn {
+    // first name, last name y photo obligatorios. Si no hay variable de foto, que usen two string column
+    constructor(id, firstNameFieldKey, lastNameFieldKey, photoFieldKey, secondLineFieldKey, title, onlineFieldKey, hasOrder, order) {
+        super(id, UserColumnComponent, undefined, title, hasOrder, order);
+        this.extra = {
+            field_firstname_key: firstNameFieldKey,
+            field_lastname_key: lastNameFieldKey,
+            field_photo_key: photoFieldKey,
+            field_subtitle_key: secondLineFieldKey,
+            field_online_key: onlineFieldKey
+        };
+    }
+}
+
 class BasePrintColumnComponent {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
@@ -346,9 +511,10 @@ class BasePrintColumnComponent {
         view.instance.column = this.column;
         view.instance.item = this.item;
         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" }, ngImport: i0, template: "<div #contentColumn></div>", styles: [""] }); }
+    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: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BasePrintColumnComponent, decorators: [{
             type: Component,
@@ -359,10 +525,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
                 type: Input
             }], onAction: [{
                 type: Input
+            }], index: [{
+                type: Input
             }] } });
 
 class TotsTableComponent {
-    constructor() {
+    constructor(changeDectetor) {
+        this.changeDectetor = changeDectetor;
         this.config = new TotsTableConfig();
         this.pageIndex = 0;
         this.pageSize = 50;
@@ -391,7 +560,6 @@ class TotsTableComponent {
     }
     onPageChange(event) {
         this.onAction.emit({ key: 'page-change', item: event });
-        this.loadItems();
     }
     loadItems() {
         this.dataItems = undefined;
@@ -415,13 +583,16 @@ class TotsTableComponent {
     refreshDataItems(newData) {
         this.dataItems = newData;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableComponent, deps: [], 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    <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\" [ngStyle]=\"{'width': column.extra?.width ? column.extra.width : 'auto'}\"><tots-base-print-column [column]=\"column\" [item]=\"item\" [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\n    <div *ngIf=\"isLoading\" class=\"tots-table-loading\"><mat-spinner [diameter]=\"50\"></mat-spinner></div>\n\n    <!-- Paginator -->\n    <mat-paginator *ngIf=\"dataItems && dataItems.data.length > 0 && hasPagination\" [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"[5, 10, 25, 50, 100]\" (page)=\"onPageChange($event)\"></mat-paginator>\n</div>\n", 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-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$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: BasePrintColumnComponent, selector: "tots-base-print-column", inputs: ["column", "item", "onAction"] }] }); }
+    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 }], 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    <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\n    <div *ngIf=\"isLoading\" class=\"tots-table-loading\"><mat-spinner [diameter]=\"50\"></mat-spinner></div>\n\n    <!-- Paginator -->\n    <mat-paginator *ngIf=\"dataItems && dataItems.data.length > 0 && hasPagination\" [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"[5, 10, 25, 50, 100]\" (page)=\"onPageChange($event)\"></mat-paginator>\n</div>\n", 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-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$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: BasePrintColumnComponent, selector: "tots-base-print-column", inputs: ["column", "item", "onAction", "index"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TotsTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tots-table', template: "<div class=\"tots-table-container {{config.classes}}\">\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\" [ngStyle]=\"{'width': column.extra?.width ? column.extra.width : 'auto'}\"><tots-base-print-column [column]=\"column\" [item]=\"item\" [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\n    <div *ngIf=\"isLoading\" class=\"tots-table-loading\"><mat-spinner [diameter]=\"50\"></mat-spinner></div>\n\n    <!-- Paginator -->\n    <mat-paginator *ngIf=\"dataItems && dataItems.data.length > 0 && hasPagination\" [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"[5, 10, 25, 50, 100]\" (page)=\"onPageChange($event)\"></mat-paginator>\n</div>\n", 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-not-data{font-size:large;text-align:center}.tots-table-container .tots-table-not-data td{padding:24px}\n"] }]
-        }], propDecorators: { config: [{
+            args: [{ selector: 'tots-table', template: "<div class=\"tots-table-container {{config.classes}}\">\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\n    <div *ngIf=\"isLoading\" class=\"tots-table-loading\"><mat-spinner [diameter]=\"50\"></mat-spinner></div>\n\n    <!-- Paginator -->\n    <mat-paginator *ngIf=\"dataItems && dataItems.data.length > 0 && hasPagination\" [pageIndex]=\"pageIndex-1\" [length]=\"dataItems!.total\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"[5, 10, 25, 50, 100]\" (page)=\"onPageChange($event)\"></mat-paginator>\n</div>\n", 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-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 }]; }, propDecorators: { config: [{
                 type: Input
             }], pageIndex: [{
                 type: Input
@@ -584,5 +755,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BalanceCurrencyColumnComponent, BalanceCurrencyIconColumnComponent, BooleanColumnComponent, CheckboxColumnComponent, CurrencyColumnComponent, IconButtonColumnComponent, MoreMenuColumnComponent, OptionColumnComponent, StatusColumnComponent, StatusIconColumnComponent, StringColumnComponent, TotsActionTable, TotsBaseColumnComponent, TotsColumn, TotsTableApiComponent, TotsTableApiConfig, TotsTableComponent, TotsTableConfig, TotsTableHelper, TotsTableModule, TwoStringColumnComponent, UserColumnComponent };
+export { BalanceCurrencyColumnComponent, BalanceCurrencyIconColumnComponent, BooleanColumnComponent, CheckboxColumnComponent, CurrencyColumnComponent, IconButtonColumnComponent, MoreMenuColumnComponent, OptionColumnComponent, StatusColumnComponent, StatusIconColumnComponent, StringColumnComponent, TotsActionTable, TotsBalanceColumn, TotsBalanceIconColumn, TotsBaseColumnComponent, TotsBooleanColumn, TotsCheckboxColumn, TotsColumn, TotsColumnOption, TotsCurrencyColumn, TotsIconButtonColumn, TotsMoreMenuColumn, TotsMoreMenuItem, TotsOptionColumn, TotsStatusColumn, TotsStatusColumnOption, TotsStatusIconColumn, TotsStatusIconColumnOption, TotsStringColumn, TotsTableApiComponent, TotsTableApiConfig, TotsTableComponent, TotsTableConfig, TotsTableHelper, TotsTableModule, TotsTwoStringColumn, TotsUserColumn, TwoStringColumnComponent, UserColumnComponent };
 //# sourceMappingURL=tots-table.mjs.map