brainloper-ui 20.0.7 → 20.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1882,7 +1882,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1882
1882
|
|
|
1883
1883
|
class ScreenSizeUtil {
|
|
1884
1884
|
static isMobile() {
|
|
1885
|
-
|
|
1885
|
+
const widthCheck = screen.width <= 600;
|
|
1886
|
+
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
|
1887
|
+
const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;
|
|
1888
|
+
const userAgentCheck = mobileRegex.test(userAgent);
|
|
1889
|
+
return widthCheck || userAgentCheck;
|
|
1886
1890
|
}
|
|
1887
1891
|
}
|
|
1888
1892
|
|
|
@@ -2442,6 +2446,7 @@ class DataTableComponent {
|
|
|
2442
2446
|
this.functionEter = functionEter;
|
|
2443
2447
|
this.paginatorTranslate = paginatorTranslate;
|
|
2444
2448
|
this.exportService = exportService;
|
|
2449
|
+
this.movil = ScreenSizeUtil.isMobile();
|
|
2445
2450
|
this.paginatorTranslate.itemsPerPageLabel = 'Elementos por página';
|
|
2446
2451
|
this.paginatorTranslate.nextPageLabel = 'Siguiente página';
|
|
2447
2452
|
this.paginatorTranslate.lastPageLabel = 'Última página';
|
|
@@ -2968,11 +2973,11 @@ class DataTableComponent {
|
|
|
2968
2973
|
this.applyFilters();
|
|
2969
2974
|
}
|
|
2970
2975
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataTableComponent, deps: [{ token: i1.MatDialog }, { token: HttpService }, { token: MessageService }, { token: FunctionsService }, { token: i5$2.MatPaginatorIntl }, { token: ExportDataService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2971
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DataTableComponent, isStandalone: false, selector: "data-table", inputs: { title: "title", titleExcelFile: "titleExcelFile", 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", addComment: "addComment", fileIconClick: "fileIconClick" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"contenedor-tabla\">\n @if (!configuration.hideTitle) {\n <div class=\"table-title-mobile\">\n <strong>{{ title }}</strong>\n </div>\n }\n\n <app-filters [headerFilters]=\"headerFilters\" (applyFilters)=\"applyFilters($event)\">\n </app-filters>\n\n <div class=\"row mb-2\" style=\"width: 99%\">\n @if (!configuration.hideFilter) {\n <div class=\"col-12 d-flex justify-content-center\">\n <mat-form-field class=\"filter\">\n <mat-label>Filtrar</mat-label>\n <input type=\"text\" [(ngModel)]=\"filters\" (keyup)=\"changeFilters()\" matInput placeholder=\"Filtrar\" />\n </mat-form-field>\n </div>\n }\n </div>\n\n <div class=\"col-12 d-flex flex-row justify-content-between align-items-center p-2\">\n <div class=\"d-none d-md-block me-md-3 w-100\" style=\"font-size: 1rem\">\n @if (selectedRows.length > 0 && configuration.selectable) {\n <span class=\"fw-bold\">\n {{ selectedRows.length }}\n {{ selectedRows.length === 1 ? 'Seleccionado' : 'Seleccionados' }}\n </span>\n }\n </div>\n <div class=\"d-flex justify-content-end w-100\">\n <ng-container *ngTemplateOutlet=\"buttonsTable\"></ng-container>\n </div>\n </div>\n\n <table class=\"table_Eter table-hover\">\n <thead class=\"dark\">\n <tr>\n @if (configuration.selectable) {\n <th style=\"justify-content: center\">\n <mat-checkbox color=\"primary\" (change)=\"seletecAllEvent($event)\" [(ngModel)]=\"selectAll\"\n [indeterminate]=\"indeterminateState\">\n </mat-checkbox>\n </th>\n }\n @for (column of columns; track column) {\n <th [class]=\"column.style?.movil\" scope=\"col\" [ngStyle]=\"column.style\">\n {{ column.label }}\n </th>\n }\n @if (shouldShowMenu()) {\n <th></th>\n }\n </tr>\n </thead>\n <tbody class=\"mat-elevation-z3\">\n @for (row of data; track row) {\n <tr style=\"cursor: pointer\" (click)=\"clickOnRoW(row)\"\n [class]=\"checkboxs[row[configuration.primaryKey]] ? 'selected-row' : ''\">\n @if (configuration.selectable) {\n <th style=\"justify-content: center\">\n <mat-checkbox color=\"primary\" [(ngModel)]=\"checkboxs[row[configuration.primaryKey]]\" (click)=\"clicked($event)\"\n (change)=\"selection(row, $event)\">\n </mat-checkbox>\n </th>\n }\n @for (column of columns; track column) {\n <th [class]=\"column.style?.movil\" [ngStyle]=\"column.style\" scope=\"row\">\n @if (\n column.type === 'file' ||\n (column.rules && evaluateRules(row[column.ID], column.rules))) {\n <div (click)=\"onFileIconClick($event, row[column.ID])\">\n <i class=\"fa fa-file\" style=\"cursor: pointer\"></i>\n </div>\n } @else {\n {{ row[column.ID] }}\n }\n </th>\n }\n @if (shouldShowMenu()) {\n <th class=\"d-flex justify-content-center align-items-center\"\n style=\"overflow: visible;\">\n <mat-icon (click)=\"showMenu($event)\" [matMenuTriggerFor]=\"menu\" matRipple class=\"menu_more_vert\"\n aria-hidden=\"false\" aria-label=\"Example delete icon\">more_vert</mat-icon>\n <mat-menu #menu=\"matMenu\">\n @for (btn of buttonsConfig; track btn) {\n <div>\n @if (btn.condition()) {\n <button (click)=\"action(btn.action, row)\" mat-menu-item\n 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 }\n </div>\n }\n </mat-menu>\n </th>\n }\n </tr>\n }\n </tbody>\n </table>\n\n @if (length == 0 && data.length == 0) {\n <div style=\"margin-left: 10px\">\n <strong>No se encontr\u00F3 informaci\u00F3n</strong>\n </div>\n }\n\n @if (paginatorActive) {\n <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons (page)=\"changePage($event)\"></mat-paginator>\n }\n</div>\n\n<ng-template #buttonsTable let-fontSize=\"fontSize\" let-marginRight=\"marginRight\" class=\"button-table\">\n @for (btn of buttonsConfig; track btn) {\n @if (btn.conditionShowHeader()) {\n <div (click)=\"action(btn.action)\" matTooltip=\"{{ btn.tooltip }}\"\n matTooltipPosition=\"above\">\n <i class=\"fa {{ btn.icon }} btn-accion\" [ngStyle]=\"{\n 'font-size': fontSize ? fontSize : '170%',\n 'margin-right': marginRight ? marginRight : '15px'\n }\"></i>\n </div>\n }\n }\n</ng-template>", 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:90%}.table-title-mobile{display:block;margin-bottom:10px;font-size:1.2rem;text-align:center}.filter{padding:0;margin-bottom:10px}.selected-row{color:#212529;background-color:#00000013}.button-table{flex:.5;display:flex;flex-direction:row;justify-content:flex-end}button:focus{outline:none!important}@media only screen and (max-width: 600px){.no-movil{display:none}::ng-deep .mat-mdc-paginator-range-label{margin:0!important}}::ng-deep .mat-mdc-paginator{background:transparent!important}\n"], dependencies: [{ kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], 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"] }] });
|
|
2976
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DataTableComponent, isStandalone: false, selector: "data-table", inputs: { title: "title", titleExcelFile: "titleExcelFile", 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", addComment: "addComment", fileIconClick: "fileIconClick" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"contenedor-tabla\">\n @if (!configuration.hideTitle) {\n <div class=\"table-title-mobile\">\n <strong>{{ title }}</strong>\n </div>\n }\n\n <app-filters [headerFilters]=\"headerFilters\" (applyFilters)=\"applyFilters($event)\">\n </app-filters>\n\n <div class=\"row mb-2\" style=\"width: 99%\">\n @if (!configuration.hideFilter) {\n <div class=\"col-12 d-flex justify-content-center\">\n <mat-form-field class=\"filter\">\n <mat-label>Filtrar</mat-label>\n <input type=\"text\" [(ngModel)]=\"filters\" (keyup)=\"changeFilters()\" matInput placeholder=\"Filtrar\" />\n </mat-form-field>\n </div>\n }\n </div>\n\n <div class=\"col-12 d-flex flex-row justify-content-between align-items-center p-2\">\n <div class=\"d-none d-md-block me-md-3 w-100\" style=\"font-size: 1rem\">\n @if (selectedRows.length > 0 && configuration.selectable && !movil) {\n <span class=\"fw-bold\">\n {{ selectedRows.length }}\n {{ selectedRows.length === 1 ? 'Seleccionado' : 'Seleccionados' }}\n </span>\n }\n </div>\n <div class=\"d-flex justify-content-end w-100\">\n <ng-container *ngTemplateOutlet=\"buttonsTable\"></ng-container>\n </div>\n </div>\n\n <table class=\"table_Eter table-hover\">\n <thead class=\"dark\">\n <tr>\n @if (configuration.selectable && !movil) {\n <th style=\"justify-content: center\">\n <mat-checkbox color=\"primary\" (change)=\"seletecAllEvent($event)\" [(ngModel)]=\"selectAll\"\n [indeterminate]=\"indeterminateState\">\n </mat-checkbox>\n </th>\n }\n @for (column of columns; track column) {\n <th [class]=\"column.style?.movil\" scope=\"col\" [ngStyle]=\"column.style\">\n {{ column.label }}\n </th>\n }\n @if (shouldShowMenu()) {\n <th></th>\n }\n </tr>\n </thead>\n <tbody class=\"mat-elevation-z3\">\n @for (row of data; track row) {\n <tr style=\"cursor: pointer\" (click)=\"clickOnRoW(row)\"\n [class]=\"checkboxs[row[configuration.primaryKey]] ? 'selected-row' : ''\">\n @if (configuration.selectable && !movil) {\n <th style=\"justify-content: center\">\n <mat-checkbox color=\"primary\" [(ngModel)]=\"checkboxs[row[configuration.primaryKey]]\" (click)=\"clicked($event)\"\n (change)=\"selection(row, $event)\">\n </mat-checkbox>\n </th>\n }\n @for (column of columns; track column) {\n <th [class]=\"column.style?.movil\" [ngStyle]=\"column.style\" scope=\"row\">\n @if (\n column.type === 'file' ||\n (column.rules && evaluateRules(row[column.ID], column.rules))) {\n <div (click)=\"onFileIconClick($event, row[column.ID])\">\n <i class=\"fa fa-file\" style=\"cursor: pointer\"></i>\n </div>\n } @else {\n {{ row[column.ID] }}\n }\n </th>\n }\n @if (shouldShowMenu()) {\n <th class=\"d-flex justify-content-center align-items-center\"\n style=\"overflow: visible;\">\n <mat-icon (click)=\"showMenu($event)\" [matMenuTriggerFor]=\"menu\" matRipple class=\"menu_more_vert\"\n aria-hidden=\"false\" aria-label=\"Example delete icon\">more_vert</mat-icon>\n <mat-menu #menu=\"matMenu\">\n @for (btn of buttonsConfig; track btn) {\n <div>\n @if (btn.condition()) {\n <button (click)=\"action(btn.action, row)\" mat-menu-item\n 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 }\n </div>\n }\n </mat-menu>\n </th>\n }\n </tr>\n }\n </tbody>\n </table>\n\n @if (length == 0 && data.length == 0) {\n <div style=\"margin-left: 10px\">\n <strong>No se encontr\u00F3 informaci\u00F3n</strong>\n </div>\n }\n\n @if (paginatorActive) {\n <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons (page)=\"changePage($event)\"></mat-paginator>\n }\n</div>\n\n<ng-template #buttonsTable let-fontSize=\"fontSize\" let-marginRight=\"marginRight\" class=\"button-table\">\n @for (btn of buttonsConfig; track btn) {\n @if (btn.conditionShowHeader()) {\n <div (click)=\"action(btn.action)\" matTooltip=\"{{ btn.tooltip }}\"\n matTooltipPosition=\"above\">\n <i class=\"fa {{ btn.icon }} btn-accion\" [ngStyle]=\"{\n 'font-size': fontSize ? fontSize : '170%',\n 'margin-right': marginRight ? marginRight : '15px'\n }\"></i>\n </div>\n }\n }\n</ng-template>", 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:90%}.table-title-mobile{display:block;margin-bottom:10px;font-size:1.2rem;text-align:center}.filter{padding:0;margin-bottom:10px}.selected-row{color:#212529;background-color:#00000013}.button-table{flex:.5;display:flex;flex-direction:row;justify-content:flex-end}button:focus{outline:none!important}@media only screen and (max-width: 600px){.no-movil{display:none}::ng-deep .mat-mdc-paginator-range-label{margin:0!important}}::ng-deep .mat-mdc-paginator{background:transparent!important}\n"], dependencies: [{ kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], 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"] }] });
|
|
2972
2977
|
}
|
|
2973
2978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
2974
2979
|
type: Component,
|
|
2975
|
-
args: [{ selector: 'data-table', standalone: false, template: "<div class=\"contenedor-tabla\">\n @if (!configuration.hideTitle) {\n <div class=\"table-title-mobile\">\n <strong>{{ title }}</strong>\n </div>\n }\n\n <app-filters [headerFilters]=\"headerFilters\" (applyFilters)=\"applyFilters($event)\">\n </app-filters>\n\n <div class=\"row mb-2\" style=\"width: 99%\">\n @if (!configuration.hideFilter) {\n <div class=\"col-12 d-flex justify-content-center\">\n <mat-form-field class=\"filter\">\n <mat-label>Filtrar</mat-label>\n <input type=\"text\" [(ngModel)]=\"filters\" (keyup)=\"changeFilters()\" matInput placeholder=\"Filtrar\" />\n </mat-form-field>\n </div>\n }\n </div>\n\n <div class=\"col-12 d-flex flex-row justify-content-between align-items-center p-2\">\n <div class=\"d-none d-md-block me-md-3 w-100\" style=\"font-size: 1rem\">\n @if (selectedRows.length > 0 && configuration.selectable) {\n <span class=\"fw-bold\">\n {{ selectedRows.length }}\n {{ selectedRows.length === 1 ? 'Seleccionado' : 'Seleccionados' }}\n </span>\n }\n </div>\n <div class=\"d-flex justify-content-end w-100\">\n <ng-container *ngTemplateOutlet=\"buttonsTable\"></ng-container>\n </div>\n </div>\n\n <table class=\"table_Eter table-hover\">\n <thead class=\"dark\">\n <tr>\n @if (configuration.selectable) {\n <th style=\"justify-content: center\">\n <mat-checkbox color=\"primary\" (change)=\"seletecAllEvent($event)\" [(ngModel)]=\"selectAll\"\n [indeterminate]=\"indeterminateState\">\n </mat-checkbox>\n </th>\n }\n @for (column of columns; track column) {\n <th [class]=\"column.style?.movil\" scope=\"col\" [ngStyle]=\"column.style\">\n {{ column.label }}\n </th>\n }\n @if (shouldShowMenu()) {\n <th></th>\n }\n </tr>\n </thead>\n <tbody class=\"mat-elevation-z3\">\n @for (row of data; track row) {\n <tr style=\"cursor: pointer\" (click)=\"clickOnRoW(row)\"\n [class]=\"checkboxs[row[configuration.primaryKey]] ? 'selected-row' : ''\">\n @if (configuration.selectable) {\n <th style=\"justify-content: center\">\n <mat-checkbox color=\"primary\" [(ngModel)]=\"checkboxs[row[configuration.primaryKey]]\" (click)=\"clicked($event)\"\n (change)=\"selection(row, $event)\">\n </mat-checkbox>\n </th>\n }\n @for (column of columns; track column) {\n <th [class]=\"column.style?.movil\" [ngStyle]=\"column.style\" scope=\"row\">\n @if (\n column.type === 'file' ||\n (column.rules && evaluateRules(row[column.ID], column.rules))) {\n <div (click)=\"onFileIconClick($event, row[column.ID])\">\n <i class=\"fa fa-file\" style=\"cursor: pointer\"></i>\n </div>\n } @else {\n {{ row[column.ID] }}\n }\n </th>\n }\n @if (shouldShowMenu()) {\n <th class=\"d-flex justify-content-center align-items-center\"\n style=\"overflow: visible;\">\n <mat-icon (click)=\"showMenu($event)\" [matMenuTriggerFor]=\"menu\" matRipple class=\"menu_more_vert\"\n aria-hidden=\"false\" aria-label=\"Example delete icon\">more_vert</mat-icon>\n <mat-menu #menu=\"matMenu\">\n @for (btn of buttonsConfig; track btn) {\n <div>\n @if (btn.condition()) {\n <button (click)=\"action(btn.action, row)\" mat-menu-item\n 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 }\n </div>\n }\n </mat-menu>\n </th>\n }\n </tr>\n }\n </tbody>\n </table>\n\n @if (length == 0 && data.length == 0) {\n <div style=\"margin-left: 10px\">\n <strong>No se encontr\u00F3 informaci\u00F3n</strong>\n </div>\n }\n\n @if (paginatorActive) {\n <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons (page)=\"changePage($event)\"></mat-paginator>\n }\n</div>\n\n<ng-template #buttonsTable let-fontSize=\"fontSize\" let-marginRight=\"marginRight\" class=\"button-table\">\n @for (btn of buttonsConfig; track btn) {\n @if (btn.conditionShowHeader()) {\n <div (click)=\"action(btn.action)\" matTooltip=\"{{ btn.tooltip }}\"\n matTooltipPosition=\"above\">\n <i class=\"fa {{ btn.icon }} btn-accion\" [ngStyle]=\"{\n 'font-size': fontSize ? fontSize : '170%',\n 'margin-right': marginRight ? marginRight : '15px'\n }\"></i>\n </div>\n }\n }\n</ng-template>", 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:90%}.table-title-mobile{display:block;margin-bottom:10px;font-size:1.2rem;text-align:center}.filter{padding:0;margin-bottom:10px}.selected-row{color:#212529;background-color:#00000013}.button-table{flex:.5;display:flex;flex-direction:row;justify-content:flex-end}button:focus{outline:none!important}@media only screen and (max-width: 600px){.no-movil{display:none}::ng-deep .mat-mdc-paginator-range-label{margin:0!important}}::ng-deep .mat-mdc-paginator{background:transparent!important}\n"] }]
|
|
2980
|
+
args: [{ selector: 'data-table', standalone: false, template: "<div class=\"contenedor-tabla\">\n @if (!configuration.hideTitle) {\n <div class=\"table-title-mobile\">\n <strong>{{ title }}</strong>\n </div>\n }\n\n <app-filters [headerFilters]=\"headerFilters\" (applyFilters)=\"applyFilters($event)\">\n </app-filters>\n\n <div class=\"row mb-2\" style=\"width: 99%\">\n @if (!configuration.hideFilter) {\n <div class=\"col-12 d-flex justify-content-center\">\n <mat-form-field class=\"filter\">\n <mat-label>Filtrar</mat-label>\n <input type=\"text\" [(ngModel)]=\"filters\" (keyup)=\"changeFilters()\" matInput placeholder=\"Filtrar\" />\n </mat-form-field>\n </div>\n }\n </div>\n\n <div class=\"col-12 d-flex flex-row justify-content-between align-items-center p-2\">\n <div class=\"d-none d-md-block me-md-3 w-100\" style=\"font-size: 1rem\">\n @if (selectedRows.length > 0 && configuration.selectable && !movil) {\n <span class=\"fw-bold\">\n {{ selectedRows.length }}\n {{ selectedRows.length === 1 ? 'Seleccionado' : 'Seleccionados' }}\n </span>\n }\n </div>\n <div class=\"d-flex justify-content-end w-100\">\n <ng-container *ngTemplateOutlet=\"buttonsTable\"></ng-container>\n </div>\n </div>\n\n <table class=\"table_Eter table-hover\">\n <thead class=\"dark\">\n <tr>\n @if (configuration.selectable && !movil) {\n <th style=\"justify-content: center\">\n <mat-checkbox color=\"primary\" (change)=\"seletecAllEvent($event)\" [(ngModel)]=\"selectAll\"\n [indeterminate]=\"indeterminateState\">\n </mat-checkbox>\n </th>\n }\n @for (column of columns; track column) {\n <th [class]=\"column.style?.movil\" scope=\"col\" [ngStyle]=\"column.style\">\n {{ column.label }}\n </th>\n }\n @if (shouldShowMenu()) {\n <th></th>\n }\n </tr>\n </thead>\n <tbody class=\"mat-elevation-z3\">\n @for (row of data; track row) {\n <tr style=\"cursor: pointer\" (click)=\"clickOnRoW(row)\"\n [class]=\"checkboxs[row[configuration.primaryKey]] ? 'selected-row' : ''\">\n @if (configuration.selectable && !movil) {\n <th style=\"justify-content: center\">\n <mat-checkbox color=\"primary\" [(ngModel)]=\"checkboxs[row[configuration.primaryKey]]\" (click)=\"clicked($event)\"\n (change)=\"selection(row, $event)\">\n </mat-checkbox>\n </th>\n }\n @for (column of columns; track column) {\n <th [class]=\"column.style?.movil\" [ngStyle]=\"column.style\" scope=\"row\">\n @if (\n column.type === 'file' ||\n (column.rules && evaluateRules(row[column.ID], column.rules))) {\n <div (click)=\"onFileIconClick($event, row[column.ID])\">\n <i class=\"fa fa-file\" style=\"cursor: pointer\"></i>\n </div>\n } @else {\n {{ row[column.ID] }}\n }\n </th>\n }\n @if (shouldShowMenu()) {\n <th class=\"d-flex justify-content-center align-items-center\"\n style=\"overflow: visible;\">\n <mat-icon (click)=\"showMenu($event)\" [matMenuTriggerFor]=\"menu\" matRipple class=\"menu_more_vert\"\n aria-hidden=\"false\" aria-label=\"Example delete icon\">more_vert</mat-icon>\n <mat-menu #menu=\"matMenu\">\n @for (btn of buttonsConfig; track btn) {\n <div>\n @if (btn.condition()) {\n <button (click)=\"action(btn.action, row)\" mat-menu-item\n 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 }\n </div>\n }\n </mat-menu>\n </th>\n }\n </tr>\n }\n </tbody>\n </table>\n\n @if (length == 0 && data.length == 0) {\n <div style=\"margin-left: 10px\">\n <strong>No se encontr\u00F3 informaci\u00F3n</strong>\n </div>\n }\n\n @if (paginatorActive) {\n <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons (page)=\"changePage($event)\"></mat-paginator>\n }\n</div>\n\n<ng-template #buttonsTable let-fontSize=\"fontSize\" let-marginRight=\"marginRight\" class=\"button-table\">\n @for (btn of buttonsConfig; track btn) {\n @if (btn.conditionShowHeader()) {\n <div (click)=\"action(btn.action)\" matTooltip=\"{{ btn.tooltip }}\"\n matTooltipPosition=\"above\">\n <i class=\"fa {{ btn.icon }} btn-accion\" [ngStyle]=\"{\n 'font-size': fontSize ? fontSize : '170%',\n 'margin-right': marginRight ? marginRight : '15px'\n }\"></i>\n </div>\n }\n }\n</ng-template>", 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:90%}.table-title-mobile{display:block;margin-bottom:10px;font-size:1.2rem;text-align:center}.filter{padding:0;margin-bottom:10px}.selected-row{color:#212529;background-color:#00000013}.button-table{flex:.5;display:flex;flex-direction:row;justify-content:flex-end}button:focus{outline:none!important}@media only screen and (max-width: 600px){.no-movil{display:none}::ng-deep .mat-mdc-paginator-range-label{margin:0!important}}::ng-deep .mat-mdc-paginator{background:transparent!important}\n"] }]
|
|
2976
2981
|
}], ctorParameters: () => [{ type: i1.MatDialog }, { type: HttpService }, { type: MessageService }, { type: FunctionsService }, { type: i5$2.MatPaginatorIntl }, { type: ExportDataService }], propDecorators: { title: [{
|
|
2977
2982
|
type: Input
|
|
2978
2983
|
}], titleExcelFile: [{
|