brainloper-ui 14.0.23 → 14.0.25

package/fesm2020/brainloper-ui.mjs

@@ -298,95 +298,50 @@ class HttpService {
         this.http = http;
         this.message = message;
     }
-    getData(url, params) {
+    createParams(params) {
         let data = new HttpParams();
         if (params) {
             params.forEach(element => {
                 data = data.append(`${element.id}`, `${element.value}`);
             });
         }
-        return this.http.get(url, { params: data });
+        return data;
     }
-    postData(url, body, params) {
-        let data = new HttpParams();
-        if (params) {
-            params.forEach(element => {
-                data = data.append(`${element.id}`, `${element.value}`);
-            });
-        }
-        return this.http.post(url, body, { params: data });
+    getData(url, params, withCredentials = false) {
+        return this.http.get(url, { params: this.createParams(params), withCredentials });
     }
-    putData(url, body, params) {
-        let data = new HttpParams();
-        if (params) {
-            params.forEach(element => {
-                data = data.append(`${element.id}`, `${element.value}`);
-            });
-        }
-        return this.http.put(url, body, { params: data });
+    postData(url, body, params, withCredentials = false) {
+        return this.http.post(url, body, { params: this.createParams(params), withCredentials });
     }
-    deleteData(url, params) {
-        let data = new HttpParams();
-        if (params) {
-            params.forEach(element => {
-                data = data.append(`${element.id}`, `${element.value}`);
-            });
-        }
-        return this.http.delete(url, { params: data });
+    putData(url, body, params, withCredentials = false) {
+        return this.http.put(url, body, { params: this.createParams(params), withCredentials });
     }
-    getDataPromise(url, params) {
-        let data = new HttpParams();
-        if (params) {
-            params.forEach(element => {
-                data = data.append(`${element.id}`, `${element.value}`);
-            });
-        }
+    deleteData(url, params, withCredentials = false) {
+        return this.http.delete(url, { params: this.createParams(params), withCredentials });
+    }
+    getDataPromise(url, params, withCredentials = false) {
         return new Promise((resolve, reject) => {
-            this.http.get(url, { params: data }).subscribe(res => resolve(res), err => reject(err));
+            this.http.get(url, { params: this.createParams(params), withCredentials }).subscribe(res => resolve(res), err => reject(err));
         });
     }
-    postDataPromise(url, body, params) {
-        let data = new HttpParams();
-        if (params) {
-            params.forEach(element => {
-                data = data.append(`${element.id}`, `${element.value}`);
-            });
-        }
+    postDataPromise(url, body, params, withCredentials = false) {
         return new Promise((resolve, reject) => {
-            this.http.post(url, body, { params: data }).subscribe(res => resolve(res), err => reject(err));
+            this.http.post(url, body, { params: this.createParams(params), withCredentials }).subscribe(res => resolve(res), err => reject(err));
         });
     }
-    putDataPromise(url, body, params) {
-        let data = new HttpParams();
-        if (params) {
-            params.forEach(element => {
-                data = data.append(`${element.id}`, `${element.value}`);
-            });
-        }
+    putDataPromise(url, body, params, withCredentials = false) {
         return new Promise((resolve, reject) => {
-            this.http.put(url, body, { params: data }).subscribe(res => resolve(res), err => reject(err));
+            this.http.put(url, body, { params: this.createParams(params), withCredentials }).subscribe(res => resolve(res), err => reject(err));
         });
     }
-    deleteDataPromise(url, params) {
-        let data = new HttpParams();
-        if (params) {
-            params.forEach(element => {
-                data = data.append(`${element.id}`, `${element.value}`);
-            });
-        }
+    deleteDataPromise(url, params, withCredentials = false) {
         return new Promise((resolve, reject) => {
-            this.http.delete(url, { params: data }).subscribe(res => resolve(res), err => reject(err));
+            this.http.delete(url, { params: this.createParams(params), withCredentials }).subscribe(res => resolve(res), err => reject(err));
         });
     }
-    getDataBody(url, params) {
-        let data = new HttpParams();
-        if (params) {
-            params.forEach(element => {
-                data = data.append(`${element.id}`, `${element.value}`);
-            });
-        }
+    getDataBody(url, params, withCredentials = false) {
         return new Promise((resolve, reject) => {
-            this.http.get(url, { params: data }).subscribe(res => {
+            this.http.get(url, { params: this.createParams(params), withCredentials }).subscribe(res => {
                 if (res['code'] === 0 && res['body']) {
                     resolve(res['body']);
                 }
@@ -397,15 +352,9 @@ class HttpService {
             }, err => reject(err));
         });
     }
-    postDataBody(url, body, params) {
-        let data = new HttpParams();
-        if (params) {
-            params.forEach(element => {
-                data = data.append(`${element.id}`, `${element.value}`);
-            });
-        }
+    postDataBody(url, body, params, withCredentials = false) {
         return new Promise((resolve, reject) => {
-            this.http.post(url, body, { params: data }).subscribe(res => {
+            this.http.post(url, body, { params: this.createParams(params), withCredentials }).subscribe(res => {
                 if (res['code'] === 0 && res['body']) {
                     resolve(res['body']);
                 }
@@ -416,15 +365,9 @@ class HttpService {
             }, err => reject(err));
         });
     }
-    putDataBody(url, body, params) {
-        let data = new HttpParams();
-        if (params) {
-            params.forEach(element => {
-                data = data.append(`${element.id}`, `${element.value}`);
-            });
-        }
+    putDataBody(url, body, params, withCredentials = false) {
         return new Promise((resolve, reject) => {
-            this.http.put(url, body, { params: data }).subscribe(res => {
+            this.http.put(url, body, { params: this.createParams(params), withCredentials }).subscribe(res => {
                 if (res['code'] === 0 && res['body']) {
                     resolve(res['body']);
                 }
@@ -1527,6 +1470,7 @@ class DataTableComponent {
         this.exit = new EventEmitter();
         this.internalData = new EventEmitter();
         this.sendEmail = new EventEmitter();
+        this.fileIconClick = new EventEmitter();
         this.movil = ScreenSizeUtil.isMobile();
         this.filtersPost = [];
         this.selectedRows = []; /** almacena las filas seleccionadas */
@@ -1808,6 +1752,10 @@ class DataTableComponent {
             return button;
         });
     }
+    onFileIconClick(event, value) {
+        event.stopPropagation();
+        this.fileIconClick.emit(value);
+    }
     clickOnRoW(rowData) {
         let state = this.checkboxs[rowData[this.configuration.primaryKey]];
         if (!this.configuration.selectable) {
@@ -2037,10 +1985,10 @@ class DataTableComponent {
     }
 }
 DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, deps: [{ token: i1.MatDialog }, { token: HttpService }, { token: MessageService }, { token: FunctionsService }, { token: i5.MatPaginatorIntl }, { token: ExportDataService }], target: i0.ɵɵFactoryTarget.Component });
-DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableComponent, selector: "data-table", inputs: { title: "title", columns: "columns", data: "data", combo: "combo", configuration: "configuration", reloadTable: "reloadTable", url: "url", params: "params", titleLoading: "titleLoading", messageLoading: "messageLoading", headerFileXlsm: "headerFileXlsm", headerFilters: "headerFilters", xslxTitleFields: "xslxTitleFields", xslxSheetNameFields: "xslxSheetNameFields", xslxBodyFields: "xslxBodyFields", xslxParams: "xslxParams", roleId: "roleId", moduleId: "moduleId", subModuleId: "subModuleId" }, outputs: { clickRow: "clickRow", add: "add", edit: "edit", delete: "delete", print: "print", exportXslxByRow: "exportXslxByRow", active: "active", selected: "selected", view: "view", closeOrder: "closeOrder", packOff: "packOff", advance: "advance", income: "income", exit: "exit", internalData: "internalData", sendEmail: "sendEmail" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"contenedor-tabla\">\n  <app-filters [headerFilters]=\"headerFilters\" (applyFilters)=\"applyFilters($event)\">\n  </app-filters>\n\n  <div style='display: flex; flex-direction: row; justify-content: space-between;  align-items: center;'>\n    <div style='flex:1; font-size: 1rem;'>\n      <strong><p style='margin:0' *ngIf='selectedRows.length>0 && selectedRows.length<2 && configuration.selectable'> {{selectedRows.length}} Seleccionado </p></strong>\n      <strong><p style='margin:0' *ngIf='selectedRows.length>1'> {{selectedRows.length}} Seleccionados </p></strong>\n      <strong><p style='margin:0' *ngIf='selectedRows.length<1 && !configuration.hideTitle'> {{title}} </p></strong>\n    </div>\n\n    <div *ngIf=\"!configuration.hideFilter\" style='flex:3; padding-right: 10px; margin-bottom: 5px;'>\n       <mat-form-field class='filter'>\n        <input type=\"text\" [(ngModel)]='filters' (keyup)='changeFilters()'  matInput placeholder=\"Filtrar\">\n      </mat-form-field>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"buttonsTable\"></ng-container>\n\n  </div>\n\n <table class=\"table_Eter table-hover\">\n     <thead class=\"dark\">\n       <tr >\n        <th *ngIf='configuration.selectable' style='justify-content: center;'>\n          <mat-checkbox color='primary' (change)='seletecAllEvent($event)' [(ngModel)]='selectAll' [indeterminate]='indeterminateState'> </mat-checkbox>  </th>\n       <th\n       [class]=\"column.style?.movil\"\n       *ngFor='let column of columns' scope=\"col\"\n       [ngStyle]=\"column.style\"\n       >{{column.label}}</th>\n       <th *ngIf=\"shouldShowMenu()\"></th>\n       </tr>\n     </thead>\n     <tbody class='mat-elevation-z3'>\n\n       <tr style=\"cursor: pointer;\" *ngFor='let row of data' (click)='clickOnRoW(row)' [class]=\"checkboxs[row[configuration.primaryKey]]?'selected-row':''\">\n        <th *ngIf='configuration.selectable' style='justify-content: center;'> <mat-checkbox color='primary' [(ngModel)]='checkboxs[row[configuration.primaryKey]]' (click)='clicked($event)' (change)='selection(row, $event)'> </mat-checkbox>  </th>\n        <th [class]='column.style?.movil' [ngStyle]='column.style' scope=\"row\" *ngFor='let column of columns'>{{ row[column.ID] }}</th>\n\n        <th *ngIf=\"shouldShowMenu()\" style=\"display: flex; justify-content: center; align-items: center; overflow: visible;\">\n          <mat-icon\n          (click)=\"showMenu($event)\"\n          [matMenuTriggerFor]=\"menu\"\n          matRipple\n          class=\"menu_more_vert\"\n          aria-hidden=\"false\"\n          aria-label=\"Example delete icon\"\n          >more_vert</mat-icon>\n\n          <mat-menu #menu=\"matMenu\">\n            <div *ngFor=\"let btn of buttonsConfig\" >\n              <button *ngIf=\"btn.condition()\" (click)=\"action(btn.action, row)\" mat-menu-item class=\"d-flex align-items-center w-100\" >\n                <i class=\"fa {{btn.icon}} btn-accion\" style=\"font-size:120%; margin-right: 10px\"></i>\n                {{btn.tooltip}}\n              </button>\n            </div>\n\n          </mat-menu>\n        </th>\n\n       </tr>\n\n\n     </tbody>\n\n   </table>\n\n   <div *ngIf='length == 0 && data.length == 0' style=\"margin-left: 10px;\"> <strong>No se encontr\u00F3 informaci\u00F3n</strong></div>\n\n   <mat-paginator *ngIf=\"paginatorActive\"\n   [length]=\"length\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons\n   (page)=\"changePage($event)\"></mat-paginator>\n\n  </div>\n\n<ng-template #buttonsTable let-fontSize=\"fontSize\" let-marginRight=\"marginRight\" style='flex:0.5; display:flex; flex-direction: row; justify-content: flex-end;'>\n  <ng-container *ngFor=\"let btn of buttonsConfig\">\n    <div *ngIf=\"btn.conditionShowHeader()\" (click)=\"action(btn.action)\" matTooltip=\"{{btn.tooltip}}\" matTooltipPosition=\"above\">\n      <i class=\"fa {{btn.icon}} btn-accion\" [ngStyle]=\"{'font-size': fontSize ? fontSize : '170%', 'margin-right': marginRight ? marginRight : '15px'}\"></i>\n    </div>\n  </ng-container>\n</ng-template>\n\n", styles: [".contenedor-tabla{width:100%;overflow-x:auto}.table_Eter{width:100%;margin-bottom:4px;color:primary;border-collapse:collapse}.table_Eter .dark th{color:#fff;background-color:#343a40;border-color:#454d55;text-align:center;vertical-align:middle}.table_Eter thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table_Eter th,.table_Eter td{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}th{text-align:inherit}*,*:before,*:after{box-sizing:border-box}.btn-accion{cursor:pointer}mat-form-field{padding:0!important;width:100%}.filter{padding:0;margin-bottom:10px;width:100%}.filter ::ng-deep .mat-form-field-underline{bottom:3px!important}.filter ::ng-deep .mat-form-field-infix{border:0!important}.filter ::ng-deep .mat-form-field-wrapper{padding:0}.filter ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper{padding:0}.selected-row{color:#212529;background-color:#00000013}button:focus{outline:none!important}@media only screen and (max-width: 600px){.no-movil{display:none}}::ng-deep .mat-paginator{background:transparent!important}@media screen and (max-width: 400px){.filter{padding:0;margin-bottom:40px;width:70%}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FiltersComponent, selector: "app-filters", inputs: ["headerFilters"], outputs: ["applyFilters"] }] });
+DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableComponent, selector: "data-table", inputs: { title: "title", columns: "columns", data: "data", combo: "combo", configuration: "configuration", reloadTable: "reloadTable", url: "url", params: "params", titleLoading: "titleLoading", messageLoading: "messageLoading", headerFileXlsm: "headerFileXlsm", headerFilters: "headerFilters", xslxTitleFields: "xslxTitleFields", xslxSheetNameFields: "xslxSheetNameFields", xslxBodyFields: "xslxBodyFields", xslxParams: "xslxParams", roleId: "roleId", moduleId: "moduleId", subModuleId: "subModuleId" }, outputs: { clickRow: "clickRow", add: "add", edit: "edit", delete: "delete", print: "print", exportXslxByRow: "exportXslxByRow", active: "active", selected: "selected", view: "view", closeOrder: "closeOrder", packOff: "packOff", advance: "advance", income: "income", exit: "exit", internalData: "internalData", sendEmail: "sendEmail", fileIconClick: "fileIconClick" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"contenedor-tabla\">\n  <app-filters [headerFilters]=\"headerFilters\" (applyFilters)=\"applyFilters($event)\">\n  </app-filters>\n\n  <div style='display: flex; flex-direction: row; justify-content: space-between;  align-items: center;'>\n    <div style='flex:1; font-size: 1rem;'>\n      <strong><p style='margin:0' *ngIf='selectedRows.length>0 && selectedRows.length<2 && configuration.selectable'> {{selectedRows.length}} Seleccionado </p></strong>\n      <strong><p style='margin:0' *ngIf='selectedRows.length>1'> {{selectedRows.length}} Seleccionados </p></strong>\n      <strong><p style='margin:0' *ngIf='selectedRows.length<1 && !configuration.hideTitle'> {{title}} </p></strong>\n    </div>\n\n    <div *ngIf=\"!configuration.hideFilter\" style='flex:3; padding-right: 10px; margin-bottom: 5px;'>\n       <mat-form-field class='filter'>\n        <input type=\"text\" [(ngModel)]='filters' (keyup)='changeFilters()'  matInput placeholder=\"Filtrar\">\n      </mat-form-field>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"buttonsTable\"></ng-container>\n\n  </div>\n\n <table class=\"table_Eter table-hover\">\n     <thead class=\"dark\">\n       <tr >\n        <th *ngIf='configuration.selectable' style='justify-content: center;'>\n          <mat-checkbox color='primary' (change)='seletecAllEvent($event)' [(ngModel)]='selectAll' [indeterminate]='indeterminateState'> </mat-checkbox>  </th>\n       <th\n       [class]=\"column.style?.movil\"\n       *ngFor='let column of columns' scope=\"col\"\n       [ngStyle]=\"column.style\"\n       >{{column.label}}</th>\n       <th *ngIf=\"shouldShowMenu()\"></th>\n       </tr>\n     </thead>\n     <tbody class='mat-elevation-z3'>\n\n       <tr style=\"cursor: pointer;\" *ngFor='let row of data' (click)='clickOnRoW(row)' [class]=\"checkboxs[row[configuration.primaryKey]]?'selected-row':''\">\n        <th *ngIf='configuration.selectable' style='justify-content: center;'> <mat-checkbox color='primary' [(ngModel)]='checkboxs[row[configuration.primaryKey]]' (click)='clicked($event)' (change)='selection(row, $event)'> </mat-checkbox>  </th>\n        <th [class]=\"column.style?.movil\" [ngStyle]=\"column.style\" scope=\"row\" *ngFor=\"let column of columns\">\n          <ng-container *ngIf=\"column.type === 'file'; else displayValue\">\n            <div (click)=\"onFileIconClick($event, row[column.ID])\">\n              <i class=\"fa fa-file\" style=\"cursor:pointer;\" ></i>\n            </div>\n          </ng-container>\n          <ng-template #displayValue>\n            {{ row[column.ID] }}\n          </ng-template>\n        </th>\n\n        <th *ngIf=\"shouldShowMenu()\" style=\"display: flex; justify-content: center; align-items: center; overflow: visible;\">\n          <mat-icon\n          (click)=\"showMenu($event)\"\n          [matMenuTriggerFor]=\"menu\"\n          matRipple\n          class=\"menu_more_vert\"\n          aria-hidden=\"false\"\n          aria-label=\"Example delete icon\"\n          >more_vert</mat-icon>\n\n          <mat-menu #menu=\"matMenu\">\n            <div *ngFor=\"let btn of buttonsConfig\" >\n              <button *ngIf=\"btn.condition()\" (click)=\"action(btn.action, row)\" mat-menu-item class=\"d-flex align-items-center w-100\" >\n                <i class=\"fa {{btn.icon}} btn-accion\" style=\"font-size:120%; margin-right: 10px\"></i>\n                {{btn.tooltip}}\n              </button>\n            </div>\n\n          </mat-menu>\n        </th>\n\n       </tr>\n\n\n     </tbody>\n\n   </table>\n\n   <div *ngIf='length == 0 && data.length == 0' style=\"margin-left: 10px;\"> <strong>No se encontr\u00F3 informaci\u00F3n</strong></div>\n\n   <mat-paginator *ngIf=\"paginatorActive\"\n   [length]=\"length\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons\n   (page)=\"changePage($event)\"></mat-paginator>\n\n  </div>\n\n<ng-template #buttonsTable let-fontSize=\"fontSize\" let-marginRight=\"marginRight\" style='flex:0.5; display:flex; flex-direction: row; justify-content: flex-end;'>\n  <ng-container *ngFor=\"let btn of buttonsConfig\">\n    <div *ngIf=\"btn.conditionShowHeader()\" (click)=\"action(btn.action)\" matTooltip=\"{{btn.tooltip}}\" matTooltipPosition=\"above\">\n      <i class=\"fa {{btn.icon}} btn-accion\" [ngStyle]=\"{'font-size': fontSize ? fontSize : '170%', 'margin-right': marginRight ? marginRight : '15px'}\"></i>\n    </div>\n  </ng-container>\n</ng-template>\n\n", styles: [".contenedor-tabla{width:100%;overflow-x:auto}.table_Eter{width:100%;margin-bottom:4px;color:primary;border-collapse:collapse}.table_Eter .dark th{color:#fff;background-color:#343a40;border-color:#454d55;text-align:center;vertical-align:middle}.table_Eter thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table_Eter th,.table_Eter td{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}th{text-align:inherit}*,*:before,*:after{box-sizing:border-box}.btn-accion{cursor:pointer}mat-form-field{padding:0!important;width:100%}.filter{padding:0;margin-bottom:10px;width:100%}.filter ::ng-deep .mat-form-field-underline{bottom:3px!important}.filter ::ng-deep .mat-form-field-infix{border:0!important}.filter ::ng-deep .mat-form-field-wrapper{padding:0}.filter ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper{padding:0}.selected-row{color:#212529;background-color:#00000013}button:focus{outline:none!important}@media only screen and (max-width: 600px){.no-movil{display:none}}::ng-deep .mat-paginator{background:transparent!important}@media screen and (max-width: 400px){.filter{padding:0;margin-bottom:40px;width:70%}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FiltersComponent, selector: "app-filters", inputs: ["headerFilters"], outputs: ["applyFilters"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-table', template: "<div class=\"contenedor-tabla\">\n  <app-filters [headerFilters]=\"headerFilters\" (applyFilters)=\"applyFilters($event)\">\n  </app-filters>\n\n  <div style='display: flex; flex-direction: row; justify-content: space-between;  align-items: center;'>\n    <div style='flex:1; font-size: 1rem;'>\n      <strong><p style='margin:0' *ngIf='selectedRows.length>0 && selectedRows.length<2 && configuration.selectable'> {{selectedRows.length}} Seleccionado </p></strong>\n      <strong><p style='margin:0' *ngIf='selectedRows.length>1'> {{selectedRows.length}} Seleccionados </p></strong>\n      <strong><p style='margin:0' *ngIf='selectedRows.length<1 && !configuration.hideTitle'> {{title}} </p></strong>\n    </div>\n\n    <div *ngIf=\"!configuration.hideFilter\" style='flex:3; padding-right: 10px; margin-bottom: 5px;'>\n       <mat-form-field class='filter'>\n        <input type=\"text\" [(ngModel)]='filters' (keyup)='changeFilters()'  matInput placeholder=\"Filtrar\">\n      </mat-form-field>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"buttonsTable\"></ng-container>\n\n  </div>\n\n <table class=\"table_Eter table-hover\">\n     <thead class=\"dark\">\n       <tr >\n        <th *ngIf='configuration.selectable' style='justify-content: center;'>\n          <mat-checkbox color='primary' (change)='seletecAllEvent($event)' [(ngModel)]='selectAll' [indeterminate]='indeterminateState'> </mat-checkbox>  </th>\n       <th\n       [class]=\"column.style?.movil\"\n       *ngFor='let column of columns' scope=\"col\"\n       [ngStyle]=\"column.style\"\n       >{{column.label}}</th>\n       <th *ngIf=\"shouldShowMenu()\"></th>\n       </tr>\n     </thead>\n     <tbody class='mat-elevation-z3'>\n\n       <tr style=\"cursor: pointer;\" *ngFor='let row of data' (click)='clickOnRoW(row)' [class]=\"checkboxs[row[configuration.primaryKey]]?'selected-row':''\">\n        <th *ngIf='configuration.selectable' style='justify-content: center;'> <mat-checkbox color='primary' [(ngModel)]='checkboxs[row[configuration.primaryKey]]' (click)='clicked($event)' (change)='selection(row, $event)'> </mat-checkbox>  </th>\n        <th [class]='column.style?.movil' [ngStyle]='column.style' scope=\"row\" *ngFor='let column of columns'>{{ row[column.ID] }}</th>\n\n        <th *ngIf=\"shouldShowMenu()\" style=\"display: flex; justify-content: center; align-items: center; overflow: visible;\">\n          <mat-icon\n          (click)=\"showMenu($event)\"\n          [matMenuTriggerFor]=\"menu\"\n          matRipple\n          class=\"menu_more_vert\"\n          aria-hidden=\"false\"\n          aria-label=\"Example delete icon\"\n          >more_vert</mat-icon>\n\n          <mat-menu #menu=\"matMenu\">\n            <div *ngFor=\"let btn of buttonsConfig\" >\n              <button *ngIf=\"btn.condition()\" (click)=\"action(btn.action, row)\" mat-menu-item class=\"d-flex align-items-center w-100\" >\n                <i class=\"fa {{btn.icon}} btn-accion\" style=\"font-size:120%; margin-right: 10px\"></i>\n                {{btn.tooltip}}\n              </button>\n            </div>\n\n          </mat-menu>\n        </th>\n\n       </tr>\n\n\n     </tbody>\n\n   </table>\n\n   <div *ngIf='length == 0 && data.length == 0' style=\"margin-left: 10px;\"> <strong>No se encontr\u00F3 informaci\u00F3n</strong></div>\n\n   <mat-paginator *ngIf=\"paginatorActive\"\n   [length]=\"length\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons\n   (page)=\"changePage($event)\"></mat-paginator>\n\n  </div>\n\n<ng-template #buttonsTable let-fontSize=\"fontSize\" let-marginRight=\"marginRight\" style='flex:0.5; display:flex; flex-direction: row; justify-content: flex-end;'>\n  <ng-container *ngFor=\"let btn of buttonsConfig\">\n    <div *ngIf=\"btn.conditionShowHeader()\" (click)=\"action(btn.action)\" matTooltip=\"{{btn.tooltip}}\" matTooltipPosition=\"above\">\n      <i class=\"fa {{btn.icon}} btn-accion\" [ngStyle]=\"{'font-size': fontSize ? fontSize : '170%', 'margin-right': marginRight ? marginRight : '15px'}\"></i>\n    </div>\n  </ng-container>\n</ng-template>\n\n", styles: [".contenedor-tabla{width:100%;overflow-x:auto}.table_Eter{width:100%;margin-bottom:4px;color:primary;border-collapse:collapse}.table_Eter .dark th{color:#fff;background-color:#343a40;border-color:#454d55;text-align:center;vertical-align:middle}.table_Eter thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table_Eter th,.table_Eter td{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}th{text-align:inherit}*,*:before,*:after{box-sizing:border-box}.btn-accion{cursor:pointer}mat-form-field{padding:0!important;width:100%}.filter{padding:0;margin-bottom:10px;width:100%}.filter ::ng-deep .mat-form-field-underline{bottom:3px!important}.filter ::ng-deep .mat-form-field-infix{border:0!important}.filter ::ng-deep .mat-form-field-wrapper{padding:0}.filter ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper{padding:0}.selected-row{color:#212529;background-color:#00000013}button:focus{outline:none!important}@media only screen and (max-width: 600px){.no-movil{display:none}}::ng-deep .mat-paginator{background:transparent!important}@media screen and (max-width: 400px){.filter{padding:0;margin-bottom:40px;width:70%}}\n"] }]
+            args: [{ selector: 'data-table', template: "<div class=\"contenedor-tabla\">\n  <app-filters [headerFilters]=\"headerFilters\" (applyFilters)=\"applyFilters($event)\">\n  </app-filters>\n\n  <div style='display: flex; flex-direction: row; justify-content: space-between;  align-items: center;'>\n    <div style='flex:1; font-size: 1rem;'>\n      <strong><p style='margin:0' *ngIf='selectedRows.length>0 && selectedRows.length<2 && configuration.selectable'> {{selectedRows.length}} Seleccionado </p></strong>\n      <strong><p style='margin:0' *ngIf='selectedRows.length>1'> {{selectedRows.length}} Seleccionados </p></strong>\n      <strong><p style='margin:0' *ngIf='selectedRows.length<1 && !configuration.hideTitle'> {{title}} </p></strong>\n    </div>\n\n    <div *ngIf=\"!configuration.hideFilter\" style='flex:3; padding-right: 10px; margin-bottom: 5px;'>\n       <mat-form-field class='filter'>\n        <input type=\"text\" [(ngModel)]='filters' (keyup)='changeFilters()'  matInput placeholder=\"Filtrar\">\n      </mat-form-field>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"buttonsTable\"></ng-container>\n\n  </div>\n\n <table class=\"table_Eter table-hover\">\n     <thead class=\"dark\">\n       <tr >\n        <th *ngIf='configuration.selectable' style='justify-content: center;'>\n          <mat-checkbox color='primary' (change)='seletecAllEvent($event)' [(ngModel)]='selectAll' [indeterminate]='indeterminateState'> </mat-checkbox>  </th>\n       <th\n       [class]=\"column.style?.movil\"\n       *ngFor='let column of columns' scope=\"col\"\n       [ngStyle]=\"column.style\"\n       >{{column.label}}</th>\n       <th *ngIf=\"shouldShowMenu()\"></th>\n       </tr>\n     </thead>\n     <tbody class='mat-elevation-z3'>\n\n       <tr style=\"cursor: pointer;\" *ngFor='let row of data' (click)='clickOnRoW(row)' [class]=\"checkboxs[row[configuration.primaryKey]]?'selected-row':''\">\n        <th *ngIf='configuration.selectable' style='justify-content: center;'> <mat-checkbox color='primary' [(ngModel)]='checkboxs[row[configuration.primaryKey]]' (click)='clicked($event)' (change)='selection(row, $event)'> </mat-checkbox>  </th>\n        <th [class]=\"column.style?.movil\" [ngStyle]=\"column.style\" scope=\"row\" *ngFor=\"let column of columns\">\n          <ng-container *ngIf=\"column.type === 'file'; else displayValue\">\n            <div (click)=\"onFileIconClick($event, row[column.ID])\">\n              <i class=\"fa fa-file\" style=\"cursor:pointer;\" ></i>\n            </div>\n          </ng-container>\n          <ng-template #displayValue>\n            {{ row[column.ID] }}\n          </ng-template>\n        </th>\n\n        <th *ngIf=\"shouldShowMenu()\" style=\"display: flex; justify-content: center; align-items: center; overflow: visible;\">\n          <mat-icon\n          (click)=\"showMenu($event)\"\n          [matMenuTriggerFor]=\"menu\"\n          matRipple\n          class=\"menu_more_vert\"\n          aria-hidden=\"false\"\n          aria-label=\"Example delete icon\"\n          >more_vert</mat-icon>\n\n          <mat-menu #menu=\"matMenu\">\n            <div *ngFor=\"let btn of buttonsConfig\" >\n              <button *ngIf=\"btn.condition()\" (click)=\"action(btn.action, row)\" mat-menu-item class=\"d-flex align-items-center w-100\" >\n                <i class=\"fa {{btn.icon}} btn-accion\" style=\"font-size:120%; margin-right: 10px\"></i>\n                {{btn.tooltip}}\n              </button>\n            </div>\n\n          </mat-menu>\n        </th>\n\n       </tr>\n\n\n     </tbody>\n\n   </table>\n\n   <div *ngIf='length == 0 && data.length == 0' style=\"margin-left: 10px;\"> <strong>No se encontr\u00F3 informaci\u00F3n</strong></div>\n\n   <mat-paginator *ngIf=\"paginatorActive\"\n   [length]=\"length\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons\n   (page)=\"changePage($event)\"></mat-paginator>\n\n  </div>\n\n<ng-template #buttonsTable let-fontSize=\"fontSize\" let-marginRight=\"marginRight\" style='flex:0.5; display:flex; flex-direction: row; justify-content: flex-end;'>\n  <ng-container *ngFor=\"let btn of buttonsConfig\">\n    <div *ngIf=\"btn.conditionShowHeader()\" (click)=\"action(btn.action)\" matTooltip=\"{{btn.tooltip}}\" matTooltipPosition=\"above\">\n      <i class=\"fa {{btn.icon}} btn-accion\" [ngStyle]=\"{'font-size': fontSize ? fontSize : '170%', 'margin-right': marginRight ? marginRight : '15px'}\"></i>\n    </div>\n  </ng-container>\n</ng-template>\n\n", styles: [".contenedor-tabla{width:100%;overflow-x:auto}.table_Eter{width:100%;margin-bottom:4px;color:primary;border-collapse:collapse}.table_Eter .dark th{color:#fff;background-color:#343a40;border-color:#454d55;text-align:center;vertical-align:middle}.table_Eter thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table_Eter th,.table_Eter td{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}th{text-align:inherit}*,*:before,*:after{box-sizing:border-box}.btn-accion{cursor:pointer}mat-form-field{padding:0!important;width:100%}.filter{padding:0;margin-bottom:10px;width:100%}.filter ::ng-deep .mat-form-field-underline{bottom:3px!important}.filter ::ng-deep .mat-form-field-infix{border:0!important}.filter ::ng-deep .mat-form-field-wrapper{padding:0}.filter ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper{padding:0}.selected-row{color:#212529;background-color:#00000013}button:focus{outline:none!important}@media only screen and (max-width: 600px){.no-movil{display:none}}::ng-deep .mat-paginator{background:transparent!important}@media screen and (max-width: 400px){.filter{padding:0;margin-bottom:40px;width:70%}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: HttpService }, { type: MessageService }, { type: FunctionsService }, { type: i5.MatPaginatorIntl }, { type: ExportDataService }]; }, propDecorators: { title: [{
                 type: Input
             }], columns: [{
@@ -2111,6 +2059,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }], sendEmail: [{
                 type: Output
+            }], fileIconClick: [{
+                type: Output
             }], paginator: [{
                 type: ViewChild,
                 args: [MatPaginator, { static: true }]