ngx-redi-core 0.0.0-watch

package/fesm2022/ngx-redi-core-RediTable.mjs

@@ -0,0 +1,496 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, ViewChild, Output } from '@angular/core';
+import * as i6 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i7 from '@angular/material/sort';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import * as i4 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i2$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i10 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i8 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i9 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FormsModule } from '@angular/forms';
+import * as i1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i1$1 from 'ngx-redi-core/Helper';
+
+class FilterDataComponent {
+    set filtrosColumnas(value) {
+        if (value) {
+            this._refFiltro = value;
+            this.filtros = [...value.map(f => { return { ...f }; })];
+        }
+    }
+    constructor() {
+        this.filterEnd = new EventEmitter();
+        this._refFiltro = [];
+        this.filtros = [];
+    }
+    ngAfterViewInit() {
+        if (this.allItemControl) {
+            setTimeout(() => {
+                this.allItemControl.selected = this.isAllChecked(this.filtros);
+            });
+        }
+    }
+    selectedChange() {
+        if (this.allItemControl) {
+            this.allItemControl.selected = this.isAllChecked(this.filtros);
+        }
+    }
+    setAllCheck(value) {
+        this.filtros.map(f => f.isSelected = value);
+    }
+    isAllChecked(filters) {
+        return filters.every(f => f.isSelected);
+    }
+    changeFilter() {
+        if (this.control) {
+            let value = this.control.nativeElement.value ?? '';
+            this.filtros.map(f => f.isVisible = value === '' ||
+                f.name.trim().toLowerCase().indexOf(value.trim().toLowerCase()) !== -1);
+        }
+    }
+    aplicarFiltros() {
+        this._refFiltro.map((d, i) => { this._refFiltro[i].isSelected = this.filtros[i].isSelected; });
+        this.filterEnd.emit(true);
+    }
+    cancelarFiltro() {
+        this.filterEnd.emit();
+    }
+    loadData() {
+        this.control.nativeElement.value = '';
+        this._refFiltro.map((d, i) => {
+            this.filtros[i].isSelected = this._refFiltro[i].isSelected;
+            d.isVisible = true;
+            this.filtros[i].isVisible = true;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FilterDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: FilterDataComponent, isStandalone: true, selector: "filter-data", inputs: { filtrosColumnas: "filtrosColumnas" }, outputs: { filterEnd: "filterEnd" }, viewQueries: [{ propertyName: "allItemControl", first: true, predicate: ["mainControl"], descendants: true }, { propertyName: "control", first: true, predicate: ["textFilter"], descendants: true }], ngImport: i0, template: "<mat-label>Filtro</mat-label>\r\n<div>\r\n    <input #textFilter class=\"inputFilter\" (keyup)=\"changeFilter()\" type=\"text\" placeholder=\"Buscar\" aria-label=\"Filtro\"\r\n        matInput>\r\n</div>\r\n<mat-selection-list #elementos>\r\n    <mat-list-option #mainControl (click)=\"setAllCheck(mainControl.selected)\"\r\n        [disabled]=\"textFilter.value !== ''\">(Seleccionar todo)</mat-list-option>\r\n    @for (filtro of filtros; track filtro) {\r\n    @if(filtro.isVisible){\r\n    <mat-list-option [(selected)]=\"filtro.isSelected\"\r\n        (selectedChange)=\"selectedChange()\">{{filtro.name}}</mat-list-option>\r\n    }\r\n    }\r\n</mat-selection-list>\r\n<button mat-flat-button color=\"primary\" (click)=\"aplicarFiltros()\">Aceptar</button>\r\n<button mat-flat-button color=\"accent\" (click)=\"cancelarFiltro()\">Cancelar</button>", styles: ["mat-selection-list{max-height:40vh;height:20vh;overflow-y:scroll;border:solid 1px gray;margin-top:10px;margin-bottom:10px;background-color:#fff}input,mat-label{width:90%;margin-left:5px}:host{padding:5px}button{float:right;margin-right:5px}mat-list-option{max-height:35px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FilterDataComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-data', standalone: true, imports: [
+                        MatFormFieldModule,
+                        FormsModule,
+                        MatInputModule,
+                        MatListModule
+                    ], template: "<mat-label>Filtro</mat-label>\r\n<div>\r\n    <input #textFilter class=\"inputFilter\" (keyup)=\"changeFilter()\" type=\"text\" placeholder=\"Buscar\" aria-label=\"Filtro\"\r\n        matInput>\r\n</div>\r\n<mat-selection-list #elementos>\r\n    <mat-list-option #mainControl (click)=\"setAllCheck(mainControl.selected)\"\r\n        [disabled]=\"textFilter.value !== ''\">(Seleccionar todo)</mat-list-option>\r\n    @for (filtro of filtros; track filtro) {\r\n    @if(filtro.isVisible){\r\n    <mat-list-option [(selected)]=\"filtro.isSelected\"\r\n        (selectedChange)=\"selectedChange()\">{{filtro.name}}</mat-list-option>\r\n    }\r\n    }\r\n</mat-selection-list>\r\n<button mat-flat-button color=\"primary\" (click)=\"aplicarFiltros()\">Aceptar</button>\r\n<button mat-flat-button color=\"accent\" (click)=\"cancelarFiltro()\">Cancelar</button>", styles: ["mat-selection-list{max-height:40vh;height:20vh;overflow-y:scroll;border:solid 1px gray;margin-top:10px;margin-bottom:10px;background-color:#fff}input,mat-label{width:90%;margin-left:5px}:host{padding:5px}button{float:right;margin-right:5px}mat-list-option{max-height:35px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { filtrosColumnas: [{
+                type: Input
+            }], allItemControl: [{
+                type: ViewChild,
+                args: ['mainControl']
+            }], filterEnd: [{
+                type: Output
+            }], control: [{
+                type: ViewChild,
+                args: ['textFilter']
+            }] } });
+
+/** Librerías angular */
+/**
+ * Componente que muestra los datos en una tabla
+ * @decorators ´@Component´
+ */
+class RediTableComponent {
+    /**
+     * Datos y configuración de la tabla
+     */
+    set dataTable(data) {
+        if (this.internalTable !== data) {
+            this.internalTable = data;
+            this.actualizarTabla();
+        }
+    }
+    ;
+    get dataTable() {
+        return this.internalTable;
+    }
+    /**
+     * Crea un nuevo componente Tabla
+     */
+    constructor(csv) {
+        this.csv = csv;
+        /**
+         * Propiedad que indica si se pueden seleccionar las filas
+         */
+        this.seleccionarFilas = true;
+        /**
+         * Propiedad que indica si se habilitan los filtros para la tabla
+         */
+        this.filtrarDatos = true;
+        /**
+         * Propiedad que indica si se paginan los datos
+         */
+        this.paginar = true;
+        /**
+         * Propiedad que indica si se habilita el ordenamiento de datos
+         */
+        this.ordenarDatos = true;
+        /**
+        * Contiene las columnas que se mostraran en la tabla
+        */
+        this.columnas = [];
+        /**
+         * Contiene los datos de las columnas
+         */
+        this.datosColumna = [];
+        this.onRowClick = new EventEmitter();
+        this.internalTable = {
+            dataSource: [],
+            acciones: [],
+        };
+        this.dataSource = new MatTableDataSource();
+        this.dataSource.data = [];
+    }
+    closeMenu(header) {
+        if (this.componenteFiltro) {
+            this.componenteFiltro.loadData();
+        }
+        if (header) {
+            header.classList.remove('headerHover');
+        }
+    }
+    openMenu(header) {
+        if (header) {
+            header.classList.add('headerHover');
+            this.componenteFiltro.changeFilter();
+        }
+    }
+    /**
+    * Eventos que se ejecutan al iniciar
+    */
+    actualizarTabla() {
+        this.limpiarColumnas();
+        if (this.dataTable) {
+            this.dataSource = new MatTableDataSource(this.dataTable.dataSource);
+            this.construirDatosColumna();
+            this.mostrarColumnas();
+            this.dataSource.filterPredicate = (f, u) => { return this.customParameter(f, u); };
+        }
+        this.inicializarPaginador();
+        this.reasignarPaginacion();
+        this.changeSelection(this.seleccionarFilas);
+        this.dataTable.acciones = this.dataTable.acciones ?? [];
+    }
+    /**
+     * Construye los datos de las columnas para la tabla
+     */
+    construirDatosColumna() {
+        if (this.dataTable.columnas &&
+            this.dataTable.columnas.length > 0) {
+            this.datosColumna.push(...this.dataTable.columnas);
+            this.generateFilterData(this.datosColumna);
+        }
+        else {
+            if (this.dataTable?.dataSource && this.dataTable.dataSource.length) {
+                this.datosColumna.push(...Object.keys(this.dataTable.dataSource[0])
+                    .map(x => {
+                    return {
+                        identificador: x,
+                        etiqueta: x,
+                        filters: [],
+                        isSort: false,
+                        haveFilters: false,
+                        sortDirection: ''
+                    };
+                }));
+                this.generateFilterData(this.datosColumna);
+            }
+        }
+    }
+    generateFilterData(columnas) {
+        let result = {};
+        let keys = Object.keys(this.dataSource.data[0]);
+        this.dataSource.filteredData.map((d) => {
+            keys.map((k) => {
+                let prop = Object.getOwnPropertyDescriptor(result, k)?.value ?? [];
+                let value = Object.getOwnPropertyDescriptor(d, k)?.value;
+                if (value && !prop.find(i => i.name == value)) {
+                    prop.push({ name: value, isSelected: true, isVisible: true });
+                }
+                Object.defineProperty(result, k, { value: prop });
+            });
+        });
+        columnas.map(c => {
+            c.filters = Object.getOwnPropertyDescriptor(result, c.identificador)?.value;
+        });
+    }
+    /**
+     * Activa las columnas que se van a mostrar
+     */
+    mostrarColumnas() {
+        this.columnas.push(...this.datosColumna
+            .map(item => { return item.identificador; }));
+        if (this.dataTable?.acciones && this.verAcciones()) {
+            this.columnas.push('actions');
+        }
+        this.dataSource.sort = this.sort;
+    }
+    /**
+     * Método que ejecuta los cambios en la selección de filas
+     * @param currentValue - Valor actual
+     */
+    changeSelection(currentValue) {
+        if (currentValue) {
+            this.columnas.unshift('select');
+            this.dataTable.seleccion = this.dataTable.seleccion ?? new SelectionModel(true, []);
+        }
+        else {
+            const index = this.columnas.indexOf('select');
+            if (index > -1) {
+                this.columnas.splice(index, 1);
+            }
+        }
+    }
+    /**
+     * Método que valida los cambios en los datos de entrada
+     * @param changer - Cambios realizados en la vista
+     */
+    ngOnChanges(changes) {
+        this.actualizarSeleccion(changes);
+        this.actualizarFiltro(changes);
+        this.actualizarPaginacion(changes);
+    }
+    actualizarSeleccion(cambios) {
+        const changeSelectedRow = cambios['seleccionarFilas'];
+        if (changeSelectedRow && this.dataTable) {
+            this.changeSelection(changeSelectedRow.currentValue);
+        }
+    }
+    actualizarFiltro(cambios) {
+        const changeFilter = cambios['filtrarDatos'];
+        if (changeFilter && !changeFilter.currentValue) {
+            this.dataSource.filter = '';
+            this.reasignarPaginacion();
+        }
+    }
+    reasignarPaginacion() {
+        if (this.paginar) {
+            this.dataSource.paginator = this.paginator;
+        }
+        else {
+            this.dataSource.paginator = null;
+        }
+    }
+    actualizarPaginacion(cambios) {
+        const changePagination = cambios['paginar'];
+        if (changePagination) {
+            if (changePagination.currentValue) {
+                this.dataSource.paginator = this.paginator;
+            }
+            else {
+                this.dataSource.paginator = null;
+            }
+        }
+    }
+    /**
+     * Método que aplica el filtro a los datos de la tabla
+     * @param filtro - Evento de filtrado
+     */
+    applyFilter(filtro) {
+        this.dataSource.filter = filtro === '' ? `$omit_${Date.now().toString()}` : filtro.trim().toLowerCase();
+        if (this.dataSource.paginator) {
+            this.dataSource.paginator.firstPage();
+        }
+    }
+    limpiarColumnas() {
+        this.datosColumna.splice(0);
+        this.columnas.splice(0);
+    }
+    /**
+     * Método que indica si se debe mostrar la columna de acciones
+     * @returns True si se debe mostrar las acciones
+     */
+    verAcciones() {
+        return this.dataTable && this.dataTable.acciones && this.dataTable.acciones.length > 0;
+    }
+    /**
+     * Método que inicializa el Paginador
+     */
+    inicializarPaginador() {
+        if (this.paginator) {
+            this.paginator._intl.itemsPerPageLabel = 'Elementos por pagina';
+            this.paginator._intl.firstPageLabel = 'Primera pagina';
+            this.paginator._intl.itemsPerPageLabel = 'Elementos por pagina';
+            this.paginator._intl.lastPageLabel = 'Ultima pagina';
+            this.paginator._intl.nextPageLabel = 'Siguiente pagina';
+            this.paginator._intl.previousPageLabel = 'Pagina anterior';
+            this.paginator._intl.getRangeLabel = (page, pageSize, length) => {
+                return `Pagina:${page + 1} de ${pageSize <= length ? Math.ceil(length / pageSize) : 1}`;
+            };
+        }
+    }
+    /**
+     * Indica si el ordenamiento esta activo
+     */
+    ordenamientoActivo() {
+        if (!this.ordenarDatos && this.sort) {
+            this.sort.direction = '';
+        }
+        return this.ordenarDatos;
+    }
+    asignarOrden(column, orden) {
+        if (this.sort) {
+            this.datosColumna.map(d => d.isSort = false);
+            column.isSort = true;
+            column.sortDirection = orden;
+            this.sort.active = column.identificador;
+            this.sort.direction = orden;
+            this.dataSource.sort = this.sort;
+        }
+    }
+    /** Alterna la selección de registros de la tabla */
+    alternarSeleccion() {
+        if (this.todoSeleccionado()) {
+            this.dataTable.seleccion.clear();
+            return;
+        }
+        this.dataTable.seleccion.select(...this.dataSource.data);
+    }
+    /**
+     * Indica si todo el contenido esta seleccionado
+     * @returns True si todo el contenido esta seleccionado
+     */
+    todoSeleccionado() {
+        const numSelected = this.dataTable.seleccion.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+    /**
+     * Obtiene el estado de la etiqueta de seleccionado
+     * @param fila - Fila que se validara
+     * @returns Estado de selección en modo texto
+     */
+    validarEtiqueta(fila) {
+        if (!fila) {
+            return `${this.todoSeleccionado() ? 'deselect' : 'select'} all`;
+        }
+        return `${this.dataTable.seleccion.isSelected(fila) ? 'deselect' : 'select'} row ${Number(fila.position) + 1}`;
+    }
+    descargarCsv(archivo, soloSeleccionados) {
+        if (!soloSeleccionados) {
+            this.csv.descargarCsv(archivo, this.dataTable.dataSource);
+        }
+        else {
+            this.csv.descargarCsv(archivo, this.dataTable.seleccion.selected);
+        }
+    }
+    onRowSelect(event) {
+        this.onRowClick.emit(event);
+    }
+    deshabilitarAccion(action, element) {
+        if (action.deshabilitar) {
+            return action.deshabilitar;
+        }
+        else if (action.desabilitarActionPorValores) {
+            const valor = element[action.desabilitarActionPorValores.columnaRef];
+            const valores = action.desabilitarActionPorValores.valoresADeshabilitar;
+            if (valores.length === 0) {
+                return false;
+            }
+            else {
+                return valores.some(value => value === valor);
+            }
+        }
+        return false;
+    }
+    stopPropagation(clickEvent) {
+        clickEvent.stopPropagation();
+        clickEvent.preventDefault();
+    }
+    cambioFiltro(menu, isChange, columna) {
+        menu.closeMenu();
+        if (isChange) {
+            this.dataSource.filter = `$omit_${Date.now().toString()}`;
+            columna.haveFilters = columna.filters.some(f => !f.isSelected);
+            if (this.inputFiltro) {
+                this.inputFiltro.nativeElement.value = '';
+            }
+        }
+    }
+    customParameter(data, filter) {
+        return this.datosColumna.every(dc => {
+            let value = (Object.getOwnPropertyDescriptor(data, dc.identificador)?.value?.toString() ?? '').trim().toLowerCase();
+            let isAllSelected = dc.filters.every(f => f.isSelected);
+            if (!isAllSelected) {
+                return dc.filters.filter(f => f.isSelected).some(f => value.indexOf(f.name.toLowerCase()) !== -1);
+            }
+            return true;
+        }) && this.datosColumna.some(dc => {
+            let value = (Object.getOwnPropertyDescriptor(data, dc.identificador)?.value?.toString() ?? '').trim().toLowerCase();
+            return value.indexOf(filter) != -1 || filter.startsWith('$omit_');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RediTableComponent, deps: [{ token: i1$1.CsvService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.4", type: RediTableComponent, isStandalone: true, selector: "redi-table", inputs: { seleccionarFilas: "seleccionarFilas", filtrarDatos: "filtrarDatos", paginar: "paginar", ordenarDatos: "ordenarDatos", dataTable: "dataTable" }, outputs: { onRowClick: "onRowClick" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "componenteFiltro", first: true, predicate: ["filtro"], descendants: true }, { propertyName: "inputFiltro", first: true, predicate: ["filtroInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Contenedor principal del componente -->\r\n<div class=\"container\">\r\n    <!-- Filtro de datos para la tabla -->\r\n    <div *ngIf=\"filtrarDatos\">\r\n        <mat-icon class=\"icon\"> search </mat-icon>\r\n        <input #filtroInput placeholder=\"Buscar\" (keyup)=\"applyFilter(filtroInput.value)\" />\r\n    </div>\r\n    <!-- Tabla de datos -->\r\n    <div class=\"section\">\r\n        <table mat-table [dataSource]=\"dataSource\" matSort>\r\n            <caption> RediTableComponent </caption>\r\n            <!-- Contenedor de selecci\u00F3n -->\r\n            <ng-container *ngIf=\"seleccionarFilas\" matColumnDef=\"select\">\r\n                <!-- Encabezado de tabla con selecci\u00F3n de registros -->\r\n                <th scope=\"col\" mat-header-cell *matHeaderCellDef>\r\n                    <!-- controles de selecci\u00F3n -->\r\n                    <mat-checkbox (change)=\"$event ? alternarSeleccion() : null\"\r\n                        [checked]=\"dataTable.seleccion.hasValue() && todoSeleccionado()\"\r\n                        [indeterminate]=\"dataTable.seleccion.hasValue() && !todoSeleccionado()\">\r\n                    </mat-checkbox>\r\n                </th>\r\n                <!-- Selector de fila -->\r\n                <td mat-cell class=\"checkCol\" *matCellDef=\"let row\">\r\n                    <mat-checkbox (change)=\"$event ? dataTable.seleccion.toggle(row) : null\"\r\n                        [checked]=\"dataTable.seleccion.isSelected(row)\" [aria-label]=\"validarEtiqueta(row)\">\r\n                    </mat-checkbox>\r\n                </td>\r\n            </ng-container>\r\n            <!-- Ordenamiento de encabezados -->\r\n            <ng-container>\r\n                <ng-container [matColumnDef]=\"column.identificador\" *ngFor=\"let column of datosColumna\">\r\n                    <!-- Definici\u00F3n de encabezado por columna -->\r\n                    <th #header scope=\"col\" mat-header-cell *matHeaderCellDef>\r\n                        <div>\r\n                            <div *ngIf=\"column.isSort\">\r\n                                <mat-icon *ngIf=\"column.sortDirection ==='desc'\">text_rotate_up</mat-icon>\r\n                                <mat-icon *ngIf=\"column.sortDirection ==='asc'\">text_rotation_down</mat-icon>\r\n                            </div>\r\n                            <div>\r\n                                {{column.etiqueta ||\r\n                                column.identificador}}\r\n                            </div>\r\n\r\n                            <mat-icon *ngIf=\"column.haveFilters\">filter_list</mat-icon>\r\n\r\n                            <div>\r\n                                @if (this.ordenamientoActivo() || this.filtrarDatos) {\r\n                                <button #btnMenu #menuTrigger=\"matMenuTrigger\" (onMenuClose)=\"closeMenu(header)\"\r\n                                    (onMenuOpen)=\"openMenu(header)\" mat-icon-button [matMenuTriggerFor]=\"menu\"\r\n                                    aria-label=\"Opciones\">\r\n                                    <mat-icon>more_vert</mat-icon>\r\n                                </button>\r\n                                <mat-menu #menu=\"matMenu\">\r\n                                    @if (this.ordenamientoActivo()) {\r\n                                    <button mat-menu-item (click)=\"asignarOrden(column,'')\">\r\n                                        <mat-icon>sort</mat-icon>\r\n                                        <span>Quitar ordenamiento</span>\r\n                                    </button>\r\n                                    <button mat-menu-item (click)=\"asignarOrden(column,'asc')\">\r\n                                        <mat-icon>text_rotate_up</mat-icon>\r\n                                        <span>Orden ascendente</span>\r\n                                    </button>\r\n                                    <button mat-menu-item (click)=\"asignarOrden(column,'desc')\">\r\n                                        <mat-icon>text_rotation_down</mat-icon>\r\n                                        <span>Orden descendente</span>\r\n                                    </button>\r\n                                    <mat-divider></mat-divider>\r\n                                    }\r\n                                    @if(this.filtrarDatos){\r\n                                    <filter-data #filtro [filtrosColumnas]=\"column.filters\"\r\n                                        (click)=\"stopPropagation($event)\"\r\n                                        (filterEnd)=\"cambioFiltro(menuTrigger,$event, column)\"></filter-data>\r\n                                    }\r\n                                </mat-menu>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                    <!-- Creaci\u00F3n de identificadores de tabla -->\r\n                    <td mat-cell *matCellDef=\"let element\"> {{element[column.identificador]}} </td>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- Definici\u00F3n de acciones  -->\r\n            <ng-container *ngIf=\"verAcciones()\" matColumnDef=\"actions\" stickyEnd>\r\n                <th scope=\"col\" mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\r\n                <!-- Definici\u00F3n de acciones por fila -->\r\n                <td mat-cell *matCellDef=\"let element\">\r\n                    <!-- Configuraci\u00F3n de botones de acci\u00F3n -->\r\n                    <button mat-icon-button color=\"primary\" *ngFor=\"let action of dataTable.acciones\"\r\n                        (click)=\"action?.emiter?.emit({target:element,source:dataSource})\"\r\n                        [disabled]=\"deshabilitarAccion(action,element)\">\r\n                        <!-- Icono din\u00E1mico de la acci\u00F3n -->\r\n                        <mat-icon [ngClass]=\"deshabilitarAccion(action,element) ? 'disabled-button' : ''\">\r\n                            {{action.icono || 'apps'}}\r\n                        </mat-icon>\r\n                    </button>\r\n                </td>\r\n            </ng-container>\r\n            <!-- Definici\u00F3n de columnas -->\r\n            <tr mat-header-row *matHeaderRowDef=\"columnas; sticky:true\"></tr>\r\n            <!-- Estilizados alternado de filas -->\r\n            <tr mat-row *matRowDef=\"let row; columns: columnas;let rowNum = index\" [class.odd]=\"rowNum%2\"\r\n                [class.even]=\"!(rowNum%2)\" (click)=\"onRowSelect(row)\"></tr>\r\n        </table>\r\n    </div>\r\n    <!-- Paginador de datos -->\r\n    <div [ngClass]=\"paginar ? 'visible' : 'hidden'\">\r\n        <!-- Configuraci\u00F3n de Paginador -->\r\n        <mat-paginator [pageSizeOptions]=\"[5,10,20,50,100]\" showFirstLastButtons aria-label=\"Seleccione una pagina\">\r\n        </mat-paginator>\r\n    </div>\r\n</div>", styles: [".container{display:grid}tbody{box-shadow:#0000003d 0 3px 8px}.section{overflow:auto;background-color:#fff;max-height:90vh;border:1px solid #c5c7d1}table{width:100%;color:#676a6f;overflow:auto;padding:0;background-color:#f7f7f7}.odd{background-color:#f4f4f4;font-size:1.05em}.even{background-color:#fff}.odd,.even{height:2.5em;cursor:pointer}td.mat-cell{border:0px;color:#676a6f;font-size:1.05em}.odd:hover,.even:hover{background-color:#cddce9}th{font-size:1.2em}th button{display:none}th div{display:flex;align-items:center}th div div{display:inline-block}th div div:last-child{min-width:48px;min-height:48px}.headerHover button{display:inline-block;cursor:pointer;background:#00000014}th:hover button{display:inline-block;cursor:pointer}tr.mat-header-row{height:35px}input{min-width:250px;border:solid 2px #dadada;float:right;margin-bottom:8px;outline:0;padding-right:2em}mat-icon{color:#676a6f}.icon{float:right;margin-left:-3em;position:relative;margin-top:1px}.visible{display:contents}.hidden{display:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#ccc;width:6px}caption{display:none}.disabled-button{color:#cecece}::ng-deep .mat-sort-header-stem{height:8px}::ng-deep .mat-sort-header-arrow{color:#797979;margin:0 0 20px}.checkCol{max-width:72px;width:50px}.inputFilter{min-width:50px;width:100px}.icons{position:absolute;top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.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: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: FilterDataComponent, selector: "filter-data", inputs: ["filtrosColumnas"], outputs: ["filterEnd"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RediTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'redi-table', standalone: true, imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatTableModule,
+                        MatCheckboxModule,
+                        MatPaginatorModule,
+                        MatSortModule,
+                        MatMenuModule,
+                        MatDividerModule,
+                        MatTooltipModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        FilterDataComponent
+                    ], template: "<!-- Contenedor principal del componente -->\r\n<div class=\"container\">\r\n    <!-- Filtro de datos para la tabla -->\r\n    <div *ngIf=\"filtrarDatos\">\r\n        <mat-icon class=\"icon\"> search </mat-icon>\r\n        <input #filtroInput placeholder=\"Buscar\" (keyup)=\"applyFilter(filtroInput.value)\" />\r\n    </div>\r\n    <!-- Tabla de datos -->\r\n    <div class=\"section\">\r\n        <table mat-table [dataSource]=\"dataSource\" matSort>\r\n            <caption> RediTableComponent </caption>\r\n            <!-- Contenedor de selecci\u00F3n -->\r\n            <ng-container *ngIf=\"seleccionarFilas\" matColumnDef=\"select\">\r\n                <!-- Encabezado de tabla con selecci\u00F3n de registros -->\r\n                <th scope=\"col\" mat-header-cell *matHeaderCellDef>\r\n                    <!-- controles de selecci\u00F3n -->\r\n                    <mat-checkbox (change)=\"$event ? alternarSeleccion() : null\"\r\n                        [checked]=\"dataTable.seleccion.hasValue() && todoSeleccionado()\"\r\n                        [indeterminate]=\"dataTable.seleccion.hasValue() && !todoSeleccionado()\">\r\n                    </mat-checkbox>\r\n                </th>\r\n                <!-- Selector de fila -->\r\n                <td mat-cell class=\"checkCol\" *matCellDef=\"let row\">\r\n                    <mat-checkbox (change)=\"$event ? dataTable.seleccion.toggle(row) : null\"\r\n                        [checked]=\"dataTable.seleccion.isSelected(row)\" [aria-label]=\"validarEtiqueta(row)\">\r\n                    </mat-checkbox>\r\n                </td>\r\n            </ng-container>\r\n            <!-- Ordenamiento de encabezados -->\r\n            <ng-container>\r\n                <ng-container [matColumnDef]=\"column.identificador\" *ngFor=\"let column of datosColumna\">\r\n                    <!-- Definici\u00F3n de encabezado por columna -->\r\n                    <th #header scope=\"col\" mat-header-cell *matHeaderCellDef>\r\n                        <div>\r\n                            <div *ngIf=\"column.isSort\">\r\n                                <mat-icon *ngIf=\"column.sortDirection ==='desc'\">text_rotate_up</mat-icon>\r\n                                <mat-icon *ngIf=\"column.sortDirection ==='asc'\">text_rotation_down</mat-icon>\r\n                            </div>\r\n                            <div>\r\n                                {{column.etiqueta ||\r\n                                column.identificador}}\r\n                            </div>\r\n\r\n                            <mat-icon *ngIf=\"column.haveFilters\">filter_list</mat-icon>\r\n\r\n                            <div>\r\n                                @if (this.ordenamientoActivo() || this.filtrarDatos) {\r\n                                <button #btnMenu #menuTrigger=\"matMenuTrigger\" (onMenuClose)=\"closeMenu(header)\"\r\n                                    (onMenuOpen)=\"openMenu(header)\" mat-icon-button [matMenuTriggerFor]=\"menu\"\r\n                                    aria-label=\"Opciones\">\r\n                                    <mat-icon>more_vert</mat-icon>\r\n                                </button>\r\n                                <mat-menu #menu=\"matMenu\">\r\n                                    @if (this.ordenamientoActivo()) {\r\n                                    <button mat-menu-item (click)=\"asignarOrden(column,'')\">\r\n                                        <mat-icon>sort</mat-icon>\r\n                                        <span>Quitar ordenamiento</span>\r\n                                    </button>\r\n                                    <button mat-menu-item (click)=\"asignarOrden(column,'asc')\">\r\n                                        <mat-icon>text_rotate_up</mat-icon>\r\n                                        <span>Orden ascendente</span>\r\n                                    </button>\r\n                                    <button mat-menu-item (click)=\"asignarOrden(column,'desc')\">\r\n                                        <mat-icon>text_rotation_down</mat-icon>\r\n                                        <span>Orden descendente</span>\r\n                                    </button>\r\n                                    <mat-divider></mat-divider>\r\n                                    }\r\n                                    @if(this.filtrarDatos){\r\n                                    <filter-data #filtro [filtrosColumnas]=\"column.filters\"\r\n                                        (click)=\"stopPropagation($event)\"\r\n                                        (filterEnd)=\"cambioFiltro(menuTrigger,$event, column)\"></filter-data>\r\n                                    }\r\n                                </mat-menu>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                    <!-- Creaci\u00F3n de identificadores de tabla -->\r\n                    <td mat-cell *matCellDef=\"let element\"> {{element[column.identificador]}} </td>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- Definici\u00F3n de acciones  -->\r\n            <ng-container *ngIf=\"verAcciones()\" matColumnDef=\"actions\" stickyEnd>\r\n                <th scope=\"col\" mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\r\n                <!-- Definici\u00F3n de acciones por fila -->\r\n                <td mat-cell *matCellDef=\"let element\">\r\n                    <!-- Configuraci\u00F3n de botones de acci\u00F3n -->\r\n                    <button mat-icon-button color=\"primary\" *ngFor=\"let action of dataTable.acciones\"\r\n                        (click)=\"action?.emiter?.emit({target:element,source:dataSource})\"\r\n                        [disabled]=\"deshabilitarAccion(action,element)\">\r\n                        <!-- Icono din\u00E1mico de la acci\u00F3n -->\r\n                        <mat-icon [ngClass]=\"deshabilitarAccion(action,element) ? 'disabled-button' : ''\">\r\n                            {{action.icono || 'apps'}}\r\n                        </mat-icon>\r\n                    </button>\r\n                </td>\r\n            </ng-container>\r\n            <!-- Definici\u00F3n de columnas -->\r\n            <tr mat-header-row *matHeaderRowDef=\"columnas; sticky:true\"></tr>\r\n            <!-- Estilizados alternado de filas -->\r\n            <tr mat-row *matRowDef=\"let row; columns: columnas;let rowNum = index\" [class.odd]=\"rowNum%2\"\r\n                [class.even]=\"!(rowNum%2)\" (click)=\"onRowSelect(row)\"></tr>\r\n        </table>\r\n    </div>\r\n    <!-- Paginador de datos -->\r\n    <div [ngClass]=\"paginar ? 'visible' : 'hidden'\">\r\n        <!-- Configuraci\u00F3n de Paginador -->\r\n        <mat-paginator [pageSizeOptions]=\"[5,10,20,50,100]\" showFirstLastButtons aria-label=\"Seleccione una pagina\">\r\n        </mat-paginator>\r\n    </div>\r\n</div>", styles: [".container{display:grid}tbody{box-shadow:#0000003d 0 3px 8px}.section{overflow:auto;background-color:#fff;max-height:90vh;border:1px solid #c5c7d1}table{width:100%;color:#676a6f;overflow:auto;padding:0;background-color:#f7f7f7}.odd{background-color:#f4f4f4;font-size:1.05em}.even{background-color:#fff}.odd,.even{height:2.5em;cursor:pointer}td.mat-cell{border:0px;color:#676a6f;font-size:1.05em}.odd:hover,.even:hover{background-color:#cddce9}th{font-size:1.2em}th button{display:none}th div{display:flex;align-items:center}th div div{display:inline-block}th div div:last-child{min-width:48px;min-height:48px}.headerHover button{display:inline-block;cursor:pointer;background:#00000014}th:hover button{display:inline-block;cursor:pointer}tr.mat-header-row{height:35px}input{min-width:250px;border:solid 2px #dadada;float:right;margin-bottom:8px;outline:0;padding-right:2em}mat-icon{color:#676a6f}.icon{float:right;margin-left:-3em;position:relative;margin-top:1px}.visible{display:contents}.hidden{display:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#ccc;width:6px}caption{display:none}.disabled-button{color:#cecece}::ng-deep .mat-sort-header-stem{height:8px}::ng-deep .mat-sort-header-arrow{color:#797979;margin:0 0 20px}.checkCol{max-width:72px;width:50px}.inputFilter{min-width:50px;width:100px}.icons{position:absolute;top:0}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.CsvService }], propDecorators: { seleccionarFilas: [{
+                type: Input
+            }], filtrarDatos: [{
+                type: Input
+            }], paginar: [{
+                type: Input
+            }], ordenarDatos: [{
+                type: Input
+            }], dataTable: [{
+                type: Input
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort]
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
+            }], componenteFiltro: [{
+                type: ViewChild,
+                args: ['filtro']
+            }], inputFiltro: [{
+                type: ViewChild,
+                args: ['filtroInput']
+            }], onRowClick: [{
+                type: Output
+            }] } });
+
+/** Componentes */
+// /** Tipos */
+// export * from './src/models/types/event-table.type';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RediTableComponent };
+//# sourceMappingURL=ngx-redi-core-RediTable.mjs.map