ngx-redi-core 0.0.0-watch

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

@@ -0,0 +1,628 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Directive, Output, HostBinding, HostListener, Component, Input, ViewChild, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
+
+/**
+ * Clase para procesar archivo csv según las necesidades.
+ * Produce datos con la estructura necesaria para el grid de datos o un arreglo de objetos.
+ */
+class ProcesoArchivoCsv {
+    /**
+     *
+     * @param archivo El archivo csv a procesar
+     * @param datosParaDataGrid Especifica si los datos a generar son para el grid de datos
+     * @returns Una promesa con los datos en el formato especificado por el parámetro `datosParaGrid`
+     * @example
+     * Si la propiedad ´datosParaDataGrid = true´  devuelve ´{cols:[],rows:[]}´
+     * Si la propiedad ´datosParaDataGrid = false´  devuelve ´[{propiedad1:'valor',propiedad2:'valor2'}]´
+     */
+    procesar(archivo, datosParaDataGrid) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            const item = archivo.item(0);
+            if (item) {
+                reader.readAsText(item, 'UTF-8');
+            }
+            reader.onload = () => {
+                const resultado = reader.result;
+                if ((resultado ?? '').toString().length === 0) {
+                    reject({
+                        mensaje: 'El archivo se encuentra vacío.'
+                    });
+                }
+                if (!reader.result?.toString().includes('�')) {
+                    const [informacion, columnas] = (this.generarInformacionColumnas(resultado, datosParaDataGrid));
+                    if (datosParaDataGrid) {
+                        resolve({ cols: columnas, rows: informacion });
+                    }
+                    else {
+                        resolve(informacion);
+                    }
+                }
+                else {
+                    reject({
+                        mensaje: 'El contenido del archivo no es válido.'
+                    });
+                }
+            };
+        });
+    }
+    /**
+     * Método que genera la información y columnas contenidas en el archivo ´csv´ seleccionado.
+     * @param datos El texto contenido en el archivo ´csv´.
+     * @param datosParaDataGrid Especifica si los datos a generar son para el grid de datos
+     * @returns Retorna una lista con la información y las columnas contenidas en el archivo ´csv´.
+     */
+    generarInformacionColumnas(datos, datosParaDataGrid) {
+        let informacion = [];
+        let columnas = [];
+        const lineasTextTotales = datos.split(/\n/);
+        columnas = lineasTextTotales[0].toString().split(',')
+            .map((str) => { return str.replace(/ /g, '-').trim(); }).filter((stringArchivos) => stringArchivos.length > 0);
+        const datosSeparados = lineasTextTotales.filter((valor, indice) => indice > 0 && valor.length > 0)
+            .map((dato) => {
+            if (dato.includes('"')) {
+                return this.generaColumnas(dato.trim());
+            }
+            else {
+                return dato.split(',');
+            }
+        });
+        if (datosParaDataGrid) {
+            columnas = columnas.map(columna => {
+                return { value: columna };
+            });
+            informacion = datosSeparados.map(dato => {
+                return dato.map(o => {
+                    return { value: o.replace(/\r/, '') };
+                });
+            });
+        }
+        else if (lineasTextTotales.length === 1) {
+            const objeto = {};
+            columnas.forEach(columna => objeto[`${columna}`] = '');
+            informacion.push(objeto);
+        }
+        else {
+            datosSeparados.forEach(dato => {
+                const objeto = {};
+                columnas.forEach((col, i) => {
+                    objeto[col] = dato[i].replace(/\r/, '');
+                });
+                informacion.push(objeto);
+            });
+        }
+        return [informacion, columnas];
+    }
+    /**
+     * Método para separa las filar del csv en columnas.
+     * @param fila La cadena a separar para generar las columnas
+     * @returns Arreglo con las columnas
+     */
+    generaColumnas(fila) {
+        const values = [];
+        const separadorTemporal = 'ꜛ';
+        let estaEnComillas = false;
+        let val = '';
+        fila = fila.replaceAll('""', separadorTemporal);
+        [...fila].forEach((letra, indice) => {
+            switch (letra) {
+                case ',':
+                    if (estaEnComillas) {
+                        val += letra;
+                    }
+                    else {
+                        values.push(val);
+                        val = '';
+                    }
+                    break;
+                case '"':
+                    if (estaEnComillas && indice + 1 < fila.length && fila[indice + 1] === '"') {
+                        val += '"';
+                    }
+                    else {
+                        estaEnComillas = !estaEnComillas;
+                    }
+                    break;
+                default:
+                    val += fila[indice];
+                    break;
+            }
+        });
+        values.push(val);
+        return values.map(columnas => columnas.replaceAll(separadorTemporal, '"'));
+    }
+}
+
+class DragDropDirective {
+    constructor() {
+        this.formato = 'dashed 2px #838383';
+        /**
+         * Evento que se emite una vez que se ha soltado el o los archivos en el componente.
+         */
+        this.fileDropped = new EventEmitter();
+        /**
+         * Evento que se emite una vez que se hace click al componente.
+         */
+        this.clicked = new EventEmitter();
+        /**
+         * Obtiene o establece el estilo del borde del componente.
+         */
+        this.border = this.formato;
+        /**
+         * Obtiene o establece el estilo del fondo del componente.
+         */
+        this.background = '';
+    }
+    /**
+     * El evento que cambia el borde y fondo del componente al arrastrar el archivo sobre el.
+     * @param event Evento
+     */
+    dragOver(event) {
+        this.border = 'dashed 2px #be1704';
+        this.background = '#be170421';
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * El evento que restablece el borde y fondo del componente una vez que el archivo sale del área.
+     * @param event Evento
+     */
+    dragLeave(event) {
+        this.border = this.formato;
+        this.background = '';
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * Evento que se ejecuta una vez que el archivo se suelta en el componente.
+     * @param event Evento
+     */
+    drop(event) {
+        this.border = this.formato;
+        this.background = '';
+        const files = event.dataTransfer?.files;
+        this.fileDropped.emit(files);
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * Se emite el evento click en una vez se suelta el click (izquierdo)
+     * @param $event Evento
+     */
+    onClick(event) {
+        if (event.button === 0) {
+            this.clicked.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.4", type: DragDropDirective, selector: "[dragDrop]", outputs: { fileDropped: "fileDropped", clicked: "clicked" }, host: { listeners: { "dragover": "dragOver($event)", "dragleave": "dragLeave($event)", "drop": "drop($event)", "mouseup": "onClick($event)" }, properties: { "style.border": "this.border", "style.background": "this.background" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: DragDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dragDrop]'
+                }]
+        }], propDecorators: { fileDropped: [{
+                type: Output
+            }], clicked: [{
+                type: Output
+            }], border: [{
+                type: HostBinding,
+                args: ['style.border']
+            }], background: [{
+                type: HostBinding,
+                args: ['style.background']
+            }], dragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], dragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], drop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['mouseup', ['$event']]
+            }] } });
+
+class RediDragDropComponent {
+    /**
+     * Verifica si existe archivo cargado en el componente.
+     */
+    get existeArchivo() {
+        if (this.archivo) {
+            return this.archivo.length > 0;
+        }
+        return false;
+    }
+    /**
+     * Obtiene una lista con los archivos cargados.
+     */
+    get archivos() {
+        if (this.archivo) {
+            return this.generarListaNombreArchivos(this.archivo);
+        }
+        else {
+            return [];
+        }
+    }
+    /**
+     * Obtiene el nombre del primer archivo de la lista.
+     */
+    get nombreArchivo() { return this.archivo?.item(0)?.name; }
+    /**
+     * Establece si la carga de archivos es múltiple.
+     */
+    set archivosMultiples(value) {
+        if (this.procesoCsv) {
+            this.multiple = false;
+        }
+        else {
+            this.multiple = value;
+        }
+    }
+    /**
+     * Obtiene si la carga de los archivos es múltiple.
+     */
+    get archivosMultiples() { return this.multiple; }
+    /**
+     * Establece si la selección de archivos se realizará desde distintos directorios.
+     */
+    set cargaDiferida(value) {
+        this.multiple = true;
+        this.seleccionDiferida = value;
+    }
+    /**
+     * Obtiene si la selección de archivos se realizará desde distintos directorios.
+     */
+    get cargaDiferida() { return this.seleccionDiferida; }
+    /**
+     * Especifica que el archivo a cargar en el componente es un `csv`. Y establece en `true` la propiedad `procesoCsv`.
+     */
+    set procesarCsvTabla(value) {
+        this.procesoCsv = value;
+        if (value) {
+            this.archivosMultiples = false;
+            this.extensionesAceptadas = '.csv';
+        }
+    }
+    constructor(procesoArchivoCsv) {
+        this.procesoArchivoCsv = procesoArchivoCsv;
+        /**
+        * Obtiene o establece si el titulo se muestra.
+        * @default 'true'
+        */
+        this.muestraTitulo = true;
+        /**
+         * Obtiene o establece si los datos procesados en la carga de un archivo `csv` son para el grid.
+         * @default true
+         */
+        this.datosParaDataGrid = true;
+        /**
+         * Obtiene o establece si la carga de archivos es múltiple.
+         */
+        this.multiple = false;
+        /**
+         * Obtiene o establece si la selección de archivos,se realizará desde distintos directorios.
+         */
+        this.seleccionDiferida = false;
+        /**
+         * Obtiene o establece aquellos archivos que ya se encuentran cargados en el componente.
+         */
+        this.repetidos = [];
+        /**
+         * Obtiene o establece que se realizará un proceso de lectura al archivo csv cargado en el componente.
+         */
+        this.procesoCsv = false;
+        /**
+         * Evento que se emite una vez que el archivo `csv` es procesado.
+         * @example
+         * Si la propiedad ´datosParaDataGrid = true´  devuelve ´{cols:[],rows:[]}´
+         * Si la propiedad ´datosParaDataGrid = false´  devuelve ´[{propiedad1:'valor',propiedad2:'valor2'}]´
+         *
+         */
+        this.csvDatosProcesados = new EventEmitter();
+        /**
+         * Obtiene o establece si existe un error.
+         */
+        this.error = false;
+        this.cambioArchivo = new EventEmitter();
+    }
+    /**
+     * Método que establece el proceso a realizar con el o los archivos seleccionados.
+     * @param fileList Los archivos seleccionados
+     */
+    establecerProceso(fileList) {
+        if (this.cargaDiferida) {
+            this.procesarArchivosPorSeparado(fileList);
+        }
+        else {
+            this.procesarArchivo(fileList);
+        }
+    }
+    /**
+     * Método encargado para el proceso de archivo individual.
+     * @param archivo El archivo csv seleccionado.
+     */
+    async procesarArchivo(archivo) {
+        if (!this.validoTamanioArchivos(archivo)) {
+            return;
+        }
+        this.archivo = (archivo.length === 0) ? null : archivo;
+        if (this.manejoErrorExtensionesValidas(this.archivos.map(stringArchivos => stringArchivos?.split(/[.]/).pop() ?? ''))) {
+            if (this.procesoCsv) {
+                await this.procesoArchivoCsv.procesar(archivo, this.datosParaDataGrid)
+                    .then(datos => {
+                    this.csvDatosProcesados.emit(datos);
+                }).catch((error) => {
+                    this.estableceMensajeError(error.mensaje);
+                    this.archivo = null;
+                    this.csvDatosProcesados.emit(null);
+                });
+            }
+            else {
+                this.cambioArchivo.emit(this.archivo);
+            }
+        }
+    }
+    /**
+     * Método encargado para el proceso de múltiples archivos.
+     * @param archivo Los archivos seleccionados.
+     * @returns Void
+     */
+    procesarArchivosPorSeparado(archivo) {
+        this.repetidos = [];
+        if (!this.validoTamanioArchivos(archivo)) {
+            return;
+        }
+        const archivosNuevos = this.generarListaNombreArchivos(archivo);
+        if (this.manejoErrorExtensionesValidas(archivosNuevos.map(stringArchivos => stringArchivos?.split(/[.]/).pop() ?? ''))) {
+            if (this.archivo) {
+                this.cargarArchivos(archivo, archivosNuevos);
+            }
+            else {
+                this.archivo = archivo;
+                (this.inputArchivo?.nativeElement || {}).files = this.archivo;
+                this.cambioArchivo.emit(this.archivo);
+            }
+        }
+    }
+    /**
+     * Método que carga los archivos nuevos a la lista de archivos seleccionados anteriormente.
+     * @param archivo Los archivos seleccionados
+     * @param archivosNuevos Arreglo con la lista de los archivos seleccionados.
+     */
+    cargarArchivos(archivo, archivosNuevos) {
+        const dataTransfer = new DataTransfer();
+        const repetidos = this.generarListaNombreArchivos(this.archivo ?? new FileList()).map(nombreArchivo => {
+            return archivosNuevos.find(elm => elm === nombreArchivo);
+        }).filter(o => !!o);
+        if (repetidos.length === 0) {
+            for (let index = 0; index < (this.archivo ?? new FileList()).length; index++) {
+                dataTransfer.items.add((this.archivo ?? new FileList())[index]);
+            }
+            for (let index = 0; index < archivo.length; index++) {
+                dataTransfer.items.add(archivo[index]);
+            }
+            this.archivo = dataTransfer.files;
+            (this.inputArchivo?.nativeElement || {}).files = this.archivo;
+            this.cambioArchivo.emit(this.archivo);
+        }
+        else {
+            this.repetidos.push(...repetidos);
+            (this.inputArchivo?.nativeElement || {}).files = this.archivo;
+        }
+    }
+    /**
+     * Método que elimina los archivos seleccionados de lista.
+     * @param selectionModel La lista de opciones seleccionadas
+     */
+    eliminarArchivo(selectionModel) {
+        const dataTransfer = new DataTransfer();
+        const archivosCargados = this.archivo;
+        const archivosToEliminar = selectionModel.selected.map((matListOption) => matListOption.value.toString());
+        for (let index = 0; index < archivosCargados.length; index++) {
+            if (!archivosToEliminar.some(stringArchivos => stringArchivos === archivosCargados.item(index)?.name)) {
+                dataTransfer.items.add(archivosCargados[index]);
+            }
+        }
+        if (dataTransfer.files.length > 0) {
+            this.archivo = dataTransfer.files;
+            (this.inputArchivo?.nativeElement || {}).files = dataTransfer.files;
+            this.cambioArchivo.emit(this.archivo);
+        }
+        else {
+            this.eliminarTodosArchivos();
+        }
+    }
+    eliminarTodosArchivos() {
+        this.archivo = null;
+        (this.inputArchivo?.nativeElement || {}).files = null;
+        (this.inputArchivo?.nativeElement || {}).value = '';
+        this.cambioArchivo.emit(this.archivo);
+    }
+    /**
+     * Método que genera y retorna un arreglo con los nombres de los archivos cargados.
+     * @param fileList Objeto que contiene los archivos seleccionados
+     * @returns Retorna arreglo de cadenas.
+     * `['archivo.pdf','archivo2.avi']`
+     */
+    generarListaNombreArchivos(fileList) {
+        const archivos = [];
+        for (let index = 0; index < fileList.length; index++) {
+            archivos.push(fileList.item(index)?.name ?? '');
+        }
+        return archivos.sort();
+    }
+    /**
+     * Método que genera y retorna un arreglo numérico con los tamaños de cada uno de los archivos seleccionados.
+     * @param fileList Objeto que contiene los archivos seleccionados
+     * @returns Retorna arreglo numérico con el tamaño de cada archivo en bytes.
+     * `[124661,123132]`
+     */
+    generarListaTamanioArchivos(fileList) {
+        const archivos = [];
+        for (let index = 0; index < fileList.length; index++) {
+            archivos.push(fileList.item(index)?.size ?? 0);
+        }
+        return archivos;
+    }
+    /**
+     * Método que verifica si las extensiones son válidas.
+     * @param extensionesArchivosSeleccionados Arreglo con las extensiones de cada uno de los archivos seleccionados.
+     * @returns Boolean
+     */
+    manejoErrorExtensionesValidas(extensionesArchivosSeleccionados) {
+        if (this.extensionesAceptadas) {
+            return this.verificaExtensiones(extensionesArchivosSeleccionados);
+        }
+        else {
+            if (!this.cargaDiferida) {
+                (this.inputArchivo?.nativeElement || {}).files = this.archivo;
+            }
+            return true;
+        }
+    }
+    /**
+     * Método que verifica si las extensiones de los archivos seleccionados son válidas, y asigna los archivos
+     *  a la propiedad `inputArchivo` en caso de que sean válidos.
+     * @param extensionesArchivosSeleccionados Arreglo con las extensiones de cada uno de los archivos seleccionados.
+     * @returns Boolean
+     */
+    verificaExtensiones(extensionesArchivosSeleccionados) {
+        const extensiones = this.extensionesAceptadas?.split(/,/).map(extension => extension.replace(/./, ''));
+        if (!this.extensionesValidas(extensiones ?? [], extensionesArchivosSeleccionados)) {
+            this.estableceMensajeError(this.archivosMultiples ? 'Existe archivo no válido en su selección. Intente nuevamente.' : 'El archivo no es válido');
+            if (!this.cargaDiferida) {
+                (this.inputArchivo?.nativeElement || {}).files = null;
+                this.archivo = null;
+            }
+            return false;
+        }
+        else {
+            if (!this.cargaDiferida) {
+                (this.inputArchivo?.nativeElement || {}).files = this.archivo;
+            }
+            return true;
+        }
+    }
+    /**
+     * Método para establecer el mensaje de error en el componente, el mensaje dura 3 segundos después de eso desaparece.
+     * @param mensaje El mensaje  de error a mostrar en el componente
+     */
+    estableceMensajeError(mensaje) {
+        const tiempo = 3000;
+        this.mensajeError = mensaje;
+        this.error = true;
+        setTimeout(() => {
+            this.error = false;
+        }, tiempo);
+    }
+    /**
+     * Método que valida si las extensiones de los archivos son válidos con respectos a los especificados en la propiedad `extensionesAceptadas`.
+     * @param extensiones Arreglo que contiene las extensiones aceptadas por el componente.
+     * @param extensionesArchivosSeleccionados Arreglo que contiene la extensiones de los archivos seleccionados.
+     * @returns Boolean
+     */
+    extensionesValidas(extensiones, extensionesArchivosSeleccionados) {
+        return extensionesArchivosSeleccionados.every(valor => extensiones.includes(valor));
+    }
+    /**
+     * Método para validar que el tamaño de los archivos seleccionados sea menor o igual al especificado en la propiedad `tamanoMaximoArchivo`. Si este no es especificado
+     * se permite cualquier tamaño de archivo.
+     * @param archivo El o los archivos seleccionados.
+     * @returns Boolean
+     */
+    validoTamanioArchivos(archivo) {
+        if (this.tamanoMaximoArchivo) {
+            if (this.tamanoMaximoArchivo <= 0) {
+                return false;
+            }
+            const no = 1024;
+            const size = this.tamanoMaximoArchivo * no * no;
+            if (this.generarListaTamanioArchivos(archivo).some(tamanoAarchivo => tamanoAarchivo > size)) {
+                this.estableceMensajeError(`El tamaño máximo por archivo es de: ${this.tamanoMaximoArchivo} MB`);
+                (this.inputArchivo?.nativeElement || {}).files = this.existeArchivo ? this.archivo : null;
+                return false;
+            }
+            else {
+                return true;
+            }
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RediDragDropComponent, deps: [{ token: ProcesoArchivoCsv }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.4", type: RediDragDropComponent, selector: "redi-drag-drop", inputs: { titulo: "titulo", muestraTitulo: "muestraTitulo", extensionesAceptadas: "extensionesAceptadas", tamanoMaximoArchivo: "tamanoMaximoArchivo", datosParaDataGrid: "datosParaDataGrid", archivosMultiples: "archivosMultiples", cargaDiferida: "cargaDiferida", procesarCsvTabla: "procesarCsvTabla" }, outputs: { csvDatosProcesados: "csvDatosProcesados", cambioArchivo: "cambioArchivo" }, providers: [ProcesoArchivoCsv], viewQueries: [{ propertyName: "inputArchivo", first: true, predicate: ["inputArchivo"], descendants: true }, { propertyName: "listArchivos", first: true, predicate: ["listArchivos"], descendants: true }], ngImport: i0, template: "<p *ngIf=\"muestraTitulo\" class=\"titulo\">{{titulo? titulo : 'Sube tu archivo'}}</p>\r\n<div class=\"contenedor\" matRipple dragDrop (clicked)=\"inputArchivo.click()\" tabindex=\"0\"\r\n    (fileDropped)=\"establecerProceso($event)\">\r\n    <div class=\"contenedor-input\">\r\n        <label for=\"file\"> File</label>\r\n        <input id=\"file\" name=\"file\" type=\"file\" #inputArchivo hidden\r\n            (change)=\"establecerProceso($any($event).target.files)\" [multiple]=\"archivosMultiples\"\r\n            [accept]=\"extensionesAceptadas\">\r\n    </div>\r\n    <div *ngIf=\"!existeArchivo\">\r\n        <div class=\"imagen\"></div>\r\n        <p class=\"dragdrop\"> DRAG & DROP </p>\r\n        <p> Arrastre y suelte aqu\u00ED \u00F3 click para buscar </p>\r\n    </div>\r\n    <div *ngIf=\"existeArchivo && !archivosMultiples\">\r\n        <div class=\"imagen archivo\"></div>\r\n        <p>{{nombreArchivo}}</p>\r\n    </div>\r\n    <div *ngIf=\"existeArchivo && archivosMultiples\">\r\n        <div class=\"imagen archivo-lista\"></div>\r\n    </div>\r\n</div>\r\n<div class=\"error\" *ngIf=\"error\">\r\n    <p>{{mensajeError}}</p>\r\n</div>\r\n<div class=\"error\" *ngIf=\"repetidos.length > 0\">\r\n    <p> Los siguientes archivos ya se encuentran cargados: </p>\r\n    <ul class=\"repetidos\">\r\n        <li *ngFor=\"let r of repetidos\">{{r}}</li>\r\n    </ul>\r\n    <button class=\"cerrar\" (click)=\"repetidos=[]\"> X </button>\r\n</div>\r\n\r\n<div *ngIf=\"existeArchivo && archivosMultiples\" class=\"contenedor-lista\">\r\n    <p class=\"titulo-lista\"> Archivos selecionados {{archivos.length}}</p>\r\n    <div class=\"lista-archivos\">\r\n        <mat-selection-list dense #listArchivos color=\"primary\">\r\n            <mat-list-option *ngFor=\"let elm of archivos;index as i\" [value]=\"elm\">\r\n                <div matListItemTitle>{{elm}}</div>\r\n            </mat-list-option>\r\n        </mat-selection-list>\r\n    </div>\r\n    <div class=\"botones\">\r\n        <button mat-button color=\"primary\" [disabled]=\"listArchivos.selectedOptions.selected.length === 0\"\r\n            (click)=\"eliminarArchivo(listArchivos.selectedOptions)\">\r\n            Eliminar archivos seleccionados ({{listArchivos.selectedOptions.selected.length}})\r\n        </button>\r\n        <button mat-button color=\"warn\" [disabled]=\"archivos.length === 0\" (click)=\"eliminarTodosArchivos()\">\r\n            Eliminar archivos\r\n        </button>\r\n    </div>\r\n</div>", styles: [":host{display:block;height:100%}:host p{text-align:center;font-size:12px;font-weight:lighter;margin:0}.contenedor{display:flex;align-items:center;justify-content:center;margin-top:10px;padding:10px;cursor:pointer;border-radius:10px;background-color:#f1f2f7;height:90%}.contenedor-input{display:none}.imagen{width:75px;height:75px;margin:0 auto;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48\" viewBox=\"0 96 960 960\" width=\"48\"><path d=\"M250 896q-86 0-148-62T40 686q0-78 49.5-137.5T217 477q20-97 94-158.5T482 257q113 0 189.5 81.5T748 534v24q72-2 122 46.5T920 727q0 69-50 119t-119 50H510q-24 0-42-18t-18-42V578l-83 83-43-43 156-156 156 156-43 43-83-83v258h241q45 0 77-32t32-77q0-45-32-77t-77-32h-63v-84q0-89-60.5-153T478 317q-89 0-150 64t-61 153h-19q-62 0-105 43.5T100 685q0 62 43.929 106.5Q187.857 836 250 836h140v60H250Zm230-290Z\" style=\"fill:rgb(131, 131, 131);\"/></svg>');background-repeat:no-repeat;background-position:center;background-size:contain}.archivo{background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48\" viewBox=\"0 96 960 960\" width=\"48\"><path d=\"M319 806h322v-60H319v60Zm0-170h322v-60H319v60Zm-99 340q-24 0-42-18t-18-42V236q0-24 18-42t42-18h361l219 219v521q0 24-18 42t-42 18H220Zm331-554V236H220v680h520V422H551ZM220 236v186-186 680-680Z\" style=\"fill:rgb(131, 131, 131);\"/></svg>')!important}.archivo-lista{background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48\" viewBox=\"0 96 960 960\" width=\"48\"><path d=\"m612 506 141-142-28-28-113 113-57-57-28 29 85 85ZM120 896v-60h480v60H120Zm519.894-290Q561 606 505.5 550.394t-55.5-134.5Q450 337 505.606 281.5t134.5-55.5Q719 226 774.5 281.606t55.5 134.5Q830 495 774.394 550.5t-134.5 55.5ZM120 556v-60h262q5.32 16.323 12.16 31.161Q401 542 409 556H120Zm0 170v-60h419q13.8 6.364 29.4 10.682Q584 681 600 683v43H120Z\" style=\"fill:rgb(131, 131, 131);\"/></svg>')!important}.titulo{font-size:medium!important;text-align:left!important;border-bottom:solid #40529d;margin-bottom:5px}.dragdrop{font-size:larger!important;margin-bottom:5px!important}.botones{display:flex;justify-content:space-between;background:#fff;padding:5px;border-radius:0 0 5px 5px}.contenedor-lista{border:solid 1px rgb(131,131,131);margin:5px;border-radius:5px;background-color:#f5f5f5;height:100%}.titulo-lista{text-align:left!important;background:#fff;padding:5px;font-weight:500!important;border-radius:5px 5px 0 0}.lista-archivos{max-height:250px;overflow:auto}.error{position:relative;font-size:small;color:#f5f5f5;padding:5px;font-weight:lighter;background-color:#be1704ab;border-radius:5px;margin:5px;text-align:center}.repetidos{list-style-type:auto}.repetidos li{text-align:left}.cerrar{position:absolute;top:5px;right:5px;border-radius:10px;background-color:#f5f5f5;border:none;height:20px;width:20px;color:#d36357;cursor:pointer}.avatar{opacity:.3;display:block}\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: "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"] }, { kind: "directive", type: i3.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: DragDropDirective, selector: "[dragDrop]", outputs: ["fileDropped", "clicked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RediDragDropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'redi-drag-drop', providers: [ProcesoArchivoCsv], template: "<p *ngIf=\"muestraTitulo\" class=\"titulo\">{{titulo? titulo : 'Sube tu archivo'}}</p>\r\n<div class=\"contenedor\" matRipple dragDrop (clicked)=\"inputArchivo.click()\" tabindex=\"0\"\r\n    (fileDropped)=\"establecerProceso($event)\">\r\n    <div class=\"contenedor-input\">\r\n        <label for=\"file\"> File</label>\r\n        <input id=\"file\" name=\"file\" type=\"file\" #inputArchivo hidden\r\n            (change)=\"establecerProceso($any($event).target.files)\" [multiple]=\"archivosMultiples\"\r\n            [accept]=\"extensionesAceptadas\">\r\n    </div>\r\n    <div *ngIf=\"!existeArchivo\">\r\n        <div class=\"imagen\"></div>\r\n        <p class=\"dragdrop\"> DRAG & DROP </p>\r\n        <p> Arrastre y suelte aqu\u00ED \u00F3 click para buscar </p>\r\n    </div>\r\n    <div *ngIf=\"existeArchivo && !archivosMultiples\">\r\n        <div class=\"imagen archivo\"></div>\r\n        <p>{{nombreArchivo}}</p>\r\n    </div>\r\n    <div *ngIf=\"existeArchivo && archivosMultiples\">\r\n        <div class=\"imagen archivo-lista\"></div>\r\n    </div>\r\n</div>\r\n<div class=\"error\" *ngIf=\"error\">\r\n    <p>{{mensajeError}}</p>\r\n</div>\r\n<div class=\"error\" *ngIf=\"repetidos.length > 0\">\r\n    <p> Los siguientes archivos ya se encuentran cargados: </p>\r\n    <ul class=\"repetidos\">\r\n        <li *ngFor=\"let r of repetidos\">{{r}}</li>\r\n    </ul>\r\n    <button class=\"cerrar\" (click)=\"repetidos=[]\"> X </button>\r\n</div>\r\n\r\n<div *ngIf=\"existeArchivo && archivosMultiples\" class=\"contenedor-lista\">\r\n    <p class=\"titulo-lista\"> Archivos selecionados {{archivos.length}}</p>\r\n    <div class=\"lista-archivos\">\r\n        <mat-selection-list dense #listArchivos color=\"primary\">\r\n            <mat-list-option *ngFor=\"let elm of archivos;index as i\" [value]=\"elm\">\r\n                <div matListItemTitle>{{elm}}</div>\r\n            </mat-list-option>\r\n        </mat-selection-list>\r\n    </div>\r\n    <div class=\"botones\">\r\n        <button mat-button color=\"primary\" [disabled]=\"listArchivos.selectedOptions.selected.length === 0\"\r\n            (click)=\"eliminarArchivo(listArchivos.selectedOptions)\">\r\n            Eliminar archivos seleccionados ({{listArchivos.selectedOptions.selected.length}})\r\n        </button>\r\n        <button mat-button color=\"warn\" [disabled]=\"archivos.length === 0\" (click)=\"eliminarTodosArchivos()\">\r\n            Eliminar archivos\r\n        </button>\r\n    </div>\r\n</div>", styles: [":host{display:block;height:100%}:host p{text-align:center;font-size:12px;font-weight:lighter;margin:0}.contenedor{display:flex;align-items:center;justify-content:center;margin-top:10px;padding:10px;cursor:pointer;border-radius:10px;background-color:#f1f2f7;height:90%}.contenedor-input{display:none}.imagen{width:75px;height:75px;margin:0 auto;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48\" viewBox=\"0 96 960 960\" width=\"48\"><path d=\"M250 896q-86 0-148-62T40 686q0-78 49.5-137.5T217 477q20-97 94-158.5T482 257q113 0 189.5 81.5T748 534v24q72-2 122 46.5T920 727q0 69-50 119t-119 50H510q-24 0-42-18t-18-42V578l-83 83-43-43 156-156 156 156-43 43-83-83v258h241q45 0 77-32t32-77q0-45-32-77t-77-32h-63v-84q0-89-60.5-153T478 317q-89 0-150 64t-61 153h-19q-62 0-105 43.5T100 685q0 62 43.929 106.5Q187.857 836 250 836h140v60H250Zm230-290Z\" style=\"fill:rgb(131, 131, 131);\"/></svg>');background-repeat:no-repeat;background-position:center;background-size:contain}.archivo{background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48\" viewBox=\"0 96 960 960\" width=\"48\"><path d=\"M319 806h322v-60H319v60Zm0-170h322v-60H319v60Zm-99 340q-24 0-42-18t-18-42V236q0-24 18-42t42-18h361l219 219v521q0 24-18 42t-42 18H220Zm331-554V236H220v680h520V422H551ZM220 236v186-186 680-680Z\" style=\"fill:rgb(131, 131, 131);\"/></svg>')!important}.archivo-lista{background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48\" viewBox=\"0 96 960 960\" width=\"48\"><path d=\"m612 506 141-142-28-28-113 113-57-57-28 29 85 85ZM120 896v-60h480v60H120Zm519.894-290Q561 606 505.5 550.394t-55.5-134.5Q450 337 505.606 281.5t134.5-55.5Q719 226 774.5 281.606t55.5 134.5Q830 495 774.394 550.5t-134.5 55.5ZM120 556v-60h262q5.32 16.323 12.16 31.161Q401 542 409 556H120Zm0 170v-60h419q13.8 6.364 29.4 10.682Q584 681 600 683v43H120Z\" style=\"fill:rgb(131, 131, 131);\"/></svg>')!important}.titulo{font-size:medium!important;text-align:left!important;border-bottom:solid #40529d;margin-bottom:5px}.dragdrop{font-size:larger!important;margin-bottom:5px!important}.botones{display:flex;justify-content:space-between;background:#fff;padding:5px;border-radius:0 0 5px 5px}.contenedor-lista{border:solid 1px rgb(131,131,131);margin:5px;border-radius:5px;background-color:#f5f5f5;height:100%}.titulo-lista{text-align:left!important;background:#fff;padding:5px;font-weight:500!important;border-radius:5px 5px 0 0}.lista-archivos{max-height:250px;overflow:auto}.error{position:relative;font-size:small;color:#f5f5f5;padding:5px;font-weight:lighter;background-color:#be1704ab;border-radius:5px;margin:5px;text-align:center}.repetidos{list-style-type:auto}.repetidos li{text-align:left}.cerrar{position:absolute;top:5px;right:5px;border-radius:10px;background-color:#f5f5f5;border:none;height:20px;width:20px;color:#d36357;cursor:pointer}.avatar{opacity:.3;display:block}\n"] }]
+        }], ctorParameters: () => [{ type: ProcesoArchivoCsv }], propDecorators: { titulo: [{
+                type: Input
+            }], muestraTitulo: [{
+                type: Input
+            }], extensionesAceptadas: [{
+                type: Input
+            }], tamanoMaximoArchivo: [{
+                type: Input
+            }], datosParaDataGrid: [{
+                type: Input
+            }], inputArchivo: [{
+                type: ViewChild,
+                args: ['inputArchivo']
+            }], listArchivos: [{
+                type: ViewChild,
+                args: ['listArchivos']
+            }], archivosMultiples: [{
+                type: Input
+            }], cargaDiferida: [{
+                type: Input
+            }], procesarCsvTabla: [{
+                type: Input
+            }], csvDatosProcesados: [{
+                type: Output
+            }], cambioArchivo: [{
+                type: Output
+            }] } });
+
+class RediDragDropModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RediDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.4", ngImport: i0, type: RediDragDropModule, declarations: [RediDragDropComponent,
+            DragDropDirective], imports: [CommonModule,
+            MatListModule, MatButtonModule, MatIconModule, MatRippleModule], exports: [RediDragDropComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RediDragDropModule, imports: [CommonModule,
+            MatListModule, MatButtonModule, MatIconModule, MatRippleModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RediDragDropModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        RediDragDropComponent,
+                        DragDropDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatListModule, MatButtonModule, MatIconModule, MatRippleModule
+                    ],
+                    exports: [
+                        RediDragDropComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DragDropDirective, ProcesoArchivoCsv, RediDragDropComponent, RediDragDropModule };
+//# sourceMappingURL=ngx-redi-core-RediDragDrop.mjs.map