@jcbautistam/custom-table
Version:
Librería de tabla reutilizable con acciones, filtros, exportación y más.
35 lines • 8.56 kB
JavaScript
//column-visibility-modal.component.ts
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/dialog";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/material/button";
import * as i5 from "@angular/material/checkbox";
export class ColumnVisibilityModal2Component {
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.columns = JSON.parse(JSON.stringify(data.columns)); // Clonamos para evitar modificar la referencia original
this.columnsReqMin = data.columnsReqMin; // Recibimos el mínimo de columnas desde el componente padre
}
// Cuenta cuántas columnas están seleccionadas
getSelectedCount() {
return this.columns.filter(col => col.visible).length;
}
// Devuelve `true` si el checkbox debe estar deshabilitado
isCheckboxDisabled(column) {
return this.getSelectedCount() <= this.columnsReqMin && column.visible;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColumnVisibilityModal2Component, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ColumnVisibilityModal2Component, selector: "app-column-visibility-modal", ngImport: i0, template: "<h2 mat-dialog-title>Configurar columnas</h2>\r\n<mat-dialog-content>\r\n <div *ngFor=\"let column of columns\">\r\n <mat-checkbox \r\n [(ngModel)]=\"column.visible\"\r\n [disabled]=\"isCheckboxDisabled(column)\"\r\n >\r\n {{ column.displayName }}\r\n </mat-checkbox>\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <button mat-button (click)=\"dialogRef.close()\">Cancelar</button>\r\n <button mat-button [disabled]=\"getSelectedCount() < columnsReqMin\" (click)=\"dialogRef.close(columns)\">Aceptar</button>\r\n</mat-dialog-actions>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColumnVisibilityModal2Component, decorators: [{
type: Component,
args: [{ selector: 'app-column-visibility-modal', template: "<h2 mat-dialog-title>Configurar columnas</h2>\r\n<mat-dialog-content>\r\n <div *ngFor=\"let column of columns\">\r\n <mat-checkbox \r\n [(ngModel)]=\"column.visible\"\r\n [disabled]=\"isCheckboxDisabled(column)\"\r\n >\r\n {{ column.displayName }}\r\n </mat-checkbox>\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <button mat-button (click)=\"dialogRef.close()\">Cancelar</button>\r\n <button mat-button [disabled]=\"getSelectedCount() < columnsReqMin\" (click)=\"dialogRef.close(columns)\">Aceptar</button>\r\n</mat-dialog-actions>\r\n" }]
}], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sdW1uLXZpc2liaWxpdHktbW9kYWwyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2N1c3RvbS10YWJsZS9zcmMvbGliL0NvbXBvbmVudHMvQ29sdW1uVmlzaWJpbGl0eS9jb2x1bW4tdmlzaWJpbGl0eS1tb2RhbDIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3VzdG9tLXRhYmxlL3NyYy9saWIvQ29tcG9uZW50cy9Db2x1bW5WaXNpYmlsaXR5L2NvbHVtbi12aXNpYmlsaXR5LW1vZGFsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHNDQUFzQztBQUV0QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNsRCxPQUFPLEVBQUUsZUFBZSxFQUFFLFlBQVksRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7Ozs7O0FBUXpFLE1BQU0sT0FBTywrQkFBK0I7SUFJMUMsWUFDUyxTQUF3RCxFQUMvQixJQUErQztRQUR4RSxjQUFTLEdBQVQsU0FBUyxDQUErQztRQUMvQixTQUFJLEdBQUosSUFBSSxDQUEyQztRQUUvRSxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLHdEQUF3RDtRQUNqSCxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyw0REFBNEQ7SUFDdkcsQ0FBQztJQUVELDhDQUE4QztJQUM5QyxnQkFBZ0I7UUFDZCxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLE1BQU0sQ0FBQztJQUN4RCxDQUFDO0lBRUQsMERBQTBEO0lBQzFELGtCQUFrQixDQUFDLE1BQVc7UUFDNUIsT0FBTyxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsSUFBSSxJQUFJLENBQUMsYUFBYSxJQUFJLE1BQU0sQ0FBQyxPQUFPLENBQUM7SUFDekUsQ0FBQzs4R0FwQlUsK0JBQStCLDhDQU1oQyxlQUFlO2tHQU5kLCtCQUErQixtRUNYNUMsd2tCQWVBOzsyRkRKYSwrQkFBK0I7a0JBTjNDLFNBQVM7K0JBRUUsNkJBQTZCOzswQkFVcEMsTUFBTTsyQkFBQyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiLy9jb2x1bW4tdmlzaWJpbGl0eS1tb2RhbC5jb21wb25lbnQudHNcclxuXHJcbmltcG9ydCB7IENvbXBvbmVudCwgSW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE1BVF9ESUFMT0dfREFUQSwgTWF0RGlhbG9nUmVmIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIFxyXG4gIHNlbGVjdG9yOiAnYXBwLWNvbHVtbi12aXNpYmlsaXR5LW1vZGFsJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY29sdW1uLXZpc2liaWxpdHktbW9kYWwuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NvbHVtbi12aXNpYmlsaXR5LW1vZGFsLmNvbXBvbmVudC5jc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ29sdW1uVmlzaWJpbGl0eU1vZGFsMkNvbXBvbmVudCB7XHJcbiAgIGNvbHVtbnM6IGFueVtdO1xyXG4gICBjb2x1bW5zUmVxTWluOiBudW1iZXI7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHVibGljIGRpYWxvZ1JlZjogTWF0RGlhbG9nUmVmPENvbHVtblZpc2liaWxpdHlNb2RhbDJDb21wb25lbnQ+LFxyXG4gICAgQEluamVjdChNQVRfRElBTE9HX0RBVEEpIHB1YmxpYyBkYXRhOiB7IGNvbHVtbnM6IGFueVtdLCBjb2x1bW5zUmVxTWluOiBudW1iZXIgfVxyXG4gICkge1xyXG4gICAgdGhpcy5jb2x1bW5zID0gSlNPTi5wYXJzZShKU09OLnN0cmluZ2lmeShkYXRhLmNvbHVtbnMpKTsgLy8gQ2xvbmFtb3MgcGFyYSBldml0YXIgbW9kaWZpY2FyIGxhIHJlZmVyZW5jaWEgb3JpZ2luYWxcclxuICAgIHRoaXMuY29sdW1uc1JlcU1pbiA9IGRhdGEuY29sdW1uc1JlcU1pbjsgLy8gUmVjaWJpbW9zIGVsIG3DrW5pbW8gZGUgY29sdW1uYXMgZGVzZGUgZWwgY29tcG9uZW50ZSBwYWRyZVxyXG4gIH1cclxuXHJcbiAgLy8gQ3VlbnRhIGN1w6FudGFzIGNvbHVtbmFzIGVzdMOhbiBzZWxlY2Npb25hZGFzXHJcbiAgZ2V0U2VsZWN0ZWRDb3VudCgpOiBudW1iZXIge1xyXG4gICAgcmV0dXJuIHRoaXMuY29sdW1ucy5maWx0ZXIoY29sID0+IGNvbC52aXNpYmxlKS5sZW5ndGg7XHJcbiAgfVxyXG5cclxuICAvLyBEZXZ1ZWx2ZSBgdHJ1ZWAgc2kgZWwgY2hlY2tib3ggZGViZSBlc3RhciBkZXNoYWJpbGl0YWRvXHJcbiAgaXNDaGVja2JveERpc2FibGVkKGNvbHVtbjogYW55KTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gdGhpcy5nZXRTZWxlY3RlZENvdW50KCkgPD0gdGhpcy5jb2x1bW5zUmVxTWluICYmIGNvbHVtbi52aXNpYmxlO1xyXG4gIH0gIFxyXG59XHJcblxyXG4iLCI8aDIgbWF0LWRpYWxvZy10aXRsZT5Db25maWd1cmFyIGNvbHVtbmFzPC9oMj5cclxuPG1hdC1kaWFsb2ctY29udGVudD5cclxuICA8ZGl2ICpuZ0Zvcj1cImxldCBjb2x1bW4gb2YgY29sdW1uc1wiPlxyXG4gICAgPG1hdC1jaGVja2JveCBcclxuICAgICAgWyhuZ01vZGVsKV09XCJjb2x1bW4udmlzaWJsZVwiXHJcbiAgICAgIFtkaXNhYmxlZF09XCJpc0NoZWNrYm94RGlzYWJsZWQoY29sdW1uKVwiXHJcbiAgICA+XHJcbiAgICAgIHt7IGNvbHVtbi5kaXNwbGF5TmFtZSB9fVxyXG4gICAgPC9tYXQtY2hlY2tib3g+XHJcbiAgPC9kaXY+XHJcbjwvbWF0LWRpYWxvZy1jb250ZW50PlxyXG48bWF0LWRpYWxvZy1hY3Rpb25zPlxyXG4gIDxidXR0b24gbWF0LWJ1dHRvbiAoY2xpY2spPVwiZGlhbG9nUmVmLmNsb3NlKClcIj5DYW5jZWxhcjwvYnV0dG9uPlxyXG4gIDxidXR0b24gbWF0LWJ1dHRvbiBbZGlzYWJsZWRdPVwiZ2V0U2VsZWN0ZWRDb3VudCgpIDwgY29sdW1uc1JlcU1pblwiIChjbGljayk9XCJkaWFsb2dSZWYuY2xvc2UoY29sdW1ucylcIj5BY2VwdGFyPC9idXR0b24+XHJcbjwvbWF0LWRpYWxvZy1hY3Rpb25zPlxyXG4iXX0=