import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { alertService } from '../../common/utils/alerts';
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
import * as i2 from "../../common/utils/alerts";
import * as i3 from "@ionic/angular";
import * as i4 from "@angular/common";
export class DynamicFormFileComponent {
    constructor(sanitizer, _alertService) {
        this.sanitizer = sanitizer;
        this._alertService = _alertService;
        this.change = false;
        this.type = '';
        this.showheader = true;
        this.loading = false;
        this.accept = 'application/pdf, image/jpeg';
        this.onSelectAttached = new EventEmitter();
        this.onClearSelect = new EventEmitter();
        this.acceptFiles = [
            { name: 'PDF', value: 'application/pdf' },
            { name: 'PNG', value: '.png' },
            { name: 'JPG', value: '.jpg' },
            { name: 'JPEG', value: '.jpeg' },
        ];
    }
    ngOnInit() {
        const types = this.accept.split(',');
        let allowedFiles = [];
        types.forEach((file) => {
            allowedFiles.push(this.acceptFiles.find((accept) => (accept.value == file))?.name);
        });
        this.allowedFilesName = allowedFiles.join(', ');
    }
    ngOnChanges(changes) {
        if (changes.mountAttached && this.mountAttached) {
            this.attachedFile = this.mountAttached;
            this.changeAttached();
        }
    }
    changeAttached(file) {
        if (file) {
            if (file.length) {
                // const typeFile = file[0].type.split('/')[1];
                let names = file[0].name.split('.');
                let typeFile = String(names[names.length - 1]).toLowerCase();
                if (this.accept.includes(typeFile)) {
                    this.attachedFile = file[0];
                    this.onSelectAttached.emit(this.attachedFile);
                }
                else {
                    this._alertService.toast('El archivo no cumple con el formato requerido: ' + this.allowedFilesName);
                }
            }
        }
        else {
            setTimeout(() => {
                if (this.isPdf) {
                    this.view = this.sanitizer.bypassSecurityTrustResourceUrl(this.attachedFile);
                    setTimeout(() => {
                        this.type = 'pdf';
                    }, 100);
                }
                else {
                    this.type = 'img';
                    setTimeout(() => {
                        this.view = this.attachedFile.slice(0);
                    }, 100);
                }
            }, 100);
        }
    }
    clearOperationAd() {
        this._alertService.presentAlertConfirm('Eliminar Archivo', 'Está a punto de eliminar este archivo, Desea continuar?').then((res) => {
            if (res) {
                this.view = null;
                this.type = null;
                this.onClearSelect.emit();
            }
        });
    }
    get isPdf() {
        return (this.attachedFile.includes('pdf') === true ||
            this.attachedFile.includes('PDF') === true);
    }
}
DynamicFormFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicFormFileComponent, deps: [{ token: i1.DomSanitizer }, { token: i2.alertService }], target: i0.ɵɵFactoryTarget.Component });
DynamicFormFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DynamicFormFileComponent, selector: "form-file", inputs: { showheader: "showheader", label: "label", viewType: "viewType", loading: "loading", mountAttached: "mountAttached", accept: "accept" }, outputs: { onSelectAttached: "onSelectAttached", onClearSelect: "onClearSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"content-border\" >\r\n  <input type=\"file\" accept=\"{{accept}}\" #operationAdDom [ngClass]=\"{'hidden':showheader, 'none': !showheader}\"class=\"hidden\" (change)=\"changeAttached($event.target['files'])\" required [disabled]=\"viewType === 'resumen'\">\r\n  \r\n  <div class=\"filebox field-choose-size\" *ngIf=\"type\">\r\n    <!-- <div *ngIf=\"!loading\" class=\"flex center box9\" [ngClass]=\"{ 'img-content': type === 'img', 'pdf-content': type === 'pdf'}\" (click)=\"viewerDocuments(view);\"> -->\r\n    <div *ngIf=\"!loading\" class=\"flex center box9\" [ngClass]=\"{ 'img-content': type === 'img', 'pdf-content': type === 'pdf'}\" >\r\n        <!-- <iframe *ngIf=\"type === 'pdf'\" [src]=\"view\" style=\"width: 100%;height: 100%;border: none;\"></iframe> -->\r\n        <object *ngIf=\"!type.localeCompare('pdf')\" style=\"width: 100%; height: 100%; cursor: pointer;\" [data]=\"view\"></object>\r\n        <img *ngIf=\"!type.localeCompare('img')\" style=\"cursor: pointer;max-width: 100%;max-height: 100%;\" [src]=\"view\" alt=\"Vista previa no disponible\">\r\n        <div *ngIf=\"showheader && viewType !== 'resumen'\" class=\"box-content\">                                \r\n            \r\n            <div>\r\n                <a (click)=\"operationAdDom.click()\" class=\"format\" matTooltip=\"Change Document\">\r\n                  <ion-icon style=\"height: 35px;width: 40px;font-size: 35px;\" name=\"document-attach-outline\"></ion-icon>\r\n                </a>\r\n            </div>\r\n            <div>\r\n                <a (click)=\"clearOperationAd()\" class=\"format\" matTooltip=\"Delete File\">\r\n                  <ion-icon style=\"height: 35px;width: 40px;font-size: 35px;\" name=\"trash-outline\"></ion-icon>\r\n                </a>\r\n            </div>\r\n            \r\n        </div>\r\n        <!-- aqui se debe poner el div -->\r\n    </div>\r\n\r\n    <!-- <div *ngIf=\"loading\" style=\"text-align: center;\">\r\n      <ion-spinner name=\"bubbles\"></ion-spinner>\r\n    </div> -->\r\n    <!-- <div *ngIf=\"!loading\" (click)=\"viewerDocuments(view);\" class=\"download-pdf\"><strong>View Attachment</strong></div>         -->\r\n  </div>\r\n\r\n  <div *ngIf=\"showheader\" [style.border-radius]=\"!type ? '5px' : '0px'\" class=\"field-choose field-choose-size\" (click)=\"operationAdDom.click()\">\r\n    <div *ngIf=\"loading\" style=\"text-align: center;\">\r\n      <ion-spinner name=\"bubbles\"></ion-spinner>\r\n    </div>\r\n      <div class=\"flex-align-vertical\">\r\n          <p class=\"title\" style=\"font-weight: bold;\" [innerHTML]=\"label\"></p>\r\n      </div>\r\n      <div *ngIf=\"viewType !== 'resumen'\">\r\n        <ion-button size=\"small\" class=\"btn-adjuntar\" color=\"secondary\">Adjuntar</ion-button>\r\n          <!-- <p class=\"description size20text adj\">Cargar</p> -->\r\n      </div>\r\n\r\n      <div class=\"flex-align-vertical\" style=\"text-align: justify;\" *ngIf=\"viewType !== 'resumen'\">\r\n          <p class=\"title\"><span style=\"font-weight: bold;\">Nota: </span>El documento debe estar en formato {{allowedFilesName}}. Debe tener un peso m\u00E1ximo de 4mb. </p>\r\n      </div>\r\n\r\n      <div class=\"flex-align-vertical\" *ngIf=\"fileName\">\r\n          <p class=\"file-name\">{{fileName}}</p>\r\n      </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!showheader\" [style.border-radius]=\"!type ? '5px' : '0px'\" class=\"field-choose field-choose-size flex-between\">\r\n      <div>\r\n          <p class=\"title\" style=\"font-weight: bold;\">{{label}}</p>\r\n      </div>\r\n  </div>\r\n  <!-- <div class=\"filebox field-choose-size\" *ngIf=\"type\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"25px\"> -->\r\n</div>", styles: [".custom-file-input:lang(en)~.custom-file-label:after{content:\"Buscar\";top:0;bottom:unset;left:unset;right:0;padding:2px .75rem;background-color:unset;z-index:3;display:block;height:2.25rem;line-height:1.5;color:#495057;border-radius:0 .25rem .25rem 0}.attached-content img{height:100%}.img-content{height:180px}.pdf-content{height:300px;margin-right:0!important}.content-border{width:100%}.field-choose{border:2px solid #e5e5e5;border-radius:0 0 5px 5px;padding:10px;cursor:pointer;background-color:#fff;box-shadow:0 3px 7px #0003}.btn-adjuntar{height:35px;width:40%;text-transform:none;font-weight:700}.custom-file-label{padding:unset;padding-top:.5%;padding-left:10px;text-align:initial!important}.source{height:100%;box-shadow:3px 10px 15px #0202021a}.attached-content{text-align:center;height:150px;box-shadow:5px 3px 20px #ccc4c4a6;border:1px solid #d8d6d6;padding:10px}.text-content{color:#c1c1c1}.size20text{font-size:14px!important}.required{color:red;font-size:16px!important}.filebox{border:2px solid #e5e5e5;border-bottom:none;border-radius:5px 5px 0 0;background-color:#f2f3f4;box-shadow:0 3px 7px #0003;min-height:200px}.file-name{text-decoration:underline}.adj{font-weight:700!important}.title{font-size:15px;color:#000;opacity:.9}.download-pdf{text-align:center;border-top:2px solid #19d7db6b;cursor:pointer}.download-pdf:hover{transition:.5s;background:black;color:#fff}.flex{display:flex}.flex-align-vertical{display:flex;align-items:center}.center{justify-content:center;align-items:center}.flex-between{display:flex;justify-content:space-between}.hidden{visibility:hidden}.none{display:none}.box9{text-align:center;position:relative}.box9:hover img{opacity:.5}.box9 .box-content{display:flex;justify-content:center;align-items:center;padding:30px 10px 30px 0;background:rgba(0,0,0,.27);position:absolute;top:0;left:0;bottom:0;right:0;opacity:0}.box9:hover .box-content{animation-name:fadein;animation-duration:1s;animation-fill-mode:forwards}.format{padding:24px;border:1px solid #808080b3;background:white;border-radius:10px;align-items:center;display:flex;margin:10px;cursor:pointer}.fadein{margin-top:5px;animation:fadein 1s}@keyframes fadein{0%{opacity:0}to{opacity:1}}\n"], components: [{ type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicFormFileComponent, decorators: [{
            type: Component,
            args: [{ selector: 'form-file', template: "<div class=\"content-border\" >\r\n  <input type=\"file\" accept=\"{{accept}}\" #operationAdDom [ngClass]=\"{'hidden':showheader, 'none': !showheader}\"class=\"hidden\" (change)=\"changeAttached($event.target['files'])\" required [disabled]=\"viewType === 'resumen'\">\r\n  \r\n  <div class=\"filebox field-choose-size\" *ngIf=\"type\">\r\n    <!-- <div *ngIf=\"!loading\" class=\"flex center box9\" [ngClass]=\"{ 'img-content': type === 'img', 'pdf-content': type === 'pdf'}\" (click)=\"viewerDocuments(view);\"> -->\r\n    <div *ngIf=\"!loading\" class=\"flex center box9\" [ngClass]=\"{ 'img-content': type === 'img', 'pdf-content': type === 'pdf'}\" >\r\n        <!-- <iframe *ngIf=\"type === 'pdf'\" [src]=\"view\" style=\"width: 100%;height: 100%;border: none;\"></iframe> -->\r\n        <object *ngIf=\"!type.localeCompare('pdf')\" style=\"width: 100%; height: 100%; cursor: pointer;\" [data]=\"view\"></object>\r\n        <img *ngIf=\"!type.localeCompare('img')\" style=\"cursor: pointer;max-width: 100%;max-height: 100%;\" [src]=\"view\" alt=\"Vista previa no disponible\">\r\n        <div *ngIf=\"showheader && viewType !== 'resumen'\" class=\"box-content\">                                \r\n            \r\n            <div>\r\n                <a (click)=\"operationAdDom.click()\" class=\"format\" matTooltip=\"Change Document\">\r\n                  <ion-icon style=\"height: 35px;width: 40px;font-size: 35px;\" name=\"document-attach-outline\"></ion-icon>\r\n                </a>\r\n            </div>\r\n            <div>\r\n                <a (click)=\"clearOperationAd()\" class=\"format\" matTooltip=\"Delete File\">\r\n                  <ion-icon style=\"height: 35px;width: 40px;font-size: 35px;\" name=\"trash-outline\"></ion-icon>\r\n                </a>\r\n            </div>\r\n            \r\n        </div>\r\n        <!-- aqui se debe poner el div -->\r\n    </div>\r\n\r\n    <!-- <div *ngIf=\"loading\" style=\"text-align: center;\">\r\n      <ion-spinner name=\"bubbles\"></ion-spinner>\r\n    </div> -->\r\n    <!-- <div *ngIf=\"!loading\" (click)=\"viewerDocuments(view);\" class=\"download-pdf\"><strong>View Attachment</strong></div>         -->\r\n  </div>\r\n\r\n  <div *ngIf=\"showheader\" [style.border-radius]=\"!type ? '5px' : '0px'\" class=\"field-choose field-choose-size\" (click)=\"operationAdDom.click()\">\r\n    <div *ngIf=\"loading\" style=\"text-align: center;\">\r\n      <ion-spinner name=\"bubbles\"></ion-spinner>\r\n    </div>\r\n      <div class=\"flex-align-vertical\">\r\n          <p class=\"title\" style=\"font-weight: bold;\" [innerHTML]=\"label\"></p>\r\n      </div>\r\n      <div *ngIf=\"viewType !== 'resumen'\">\r\n        <ion-button size=\"small\" class=\"btn-adjuntar\" color=\"secondary\">Adjuntar</ion-button>\r\n          <!-- <p class=\"description size20text adj\">Cargar</p> -->\r\n      </div>\r\n\r\n      <div class=\"flex-align-vertical\" style=\"text-align: justify;\" *ngIf=\"viewType !== 'resumen'\">\r\n          <p class=\"title\"><span style=\"font-weight: bold;\">Nota: </span>El documento debe estar en formato {{allowedFilesName}}. Debe tener un peso m\u00E1ximo de 4mb. </p>\r\n      </div>\r\n\r\n      <div class=\"flex-align-vertical\" *ngIf=\"fileName\">\r\n          <p class=\"file-name\">{{fileName}}</p>\r\n      </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!showheader\" [style.border-radius]=\"!type ? '5px' : '0px'\" class=\"field-choose field-choose-size flex-between\">\r\n      <div>\r\n          <p class=\"title\" style=\"font-weight: bold;\">{{label}}</p>\r\n      </div>\r\n  </div>\r\n  <!-- <div class=\"filebox field-choose-size\" *ngIf=\"type\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"25px\"> -->\r\n</div>", styles: [".custom-file-input:lang(en)~.custom-file-label:after{content:\"Buscar\";top:0;bottom:unset;left:unset;right:0;padding:2px .75rem;background-color:unset;z-index:3;display:block;height:2.25rem;line-height:1.5;color:#495057;border-radius:0 .25rem .25rem 0}.attached-content img{height:100%}.img-content{height:180px}.pdf-content{height:300px;margin-right:0!important}.content-border{width:100%}.field-choose{border:2px solid #e5e5e5;border-radius:0 0 5px 5px;padding:10px;cursor:pointer;background-color:#fff;box-shadow:0 3px 7px #0003}.btn-adjuntar{height:35px;width:40%;text-transform:none;font-weight:700}.custom-file-label{padding:unset;padding-top:.5%;padding-left:10px;text-align:initial!important}.source{height:100%;box-shadow:3px 10px 15px #0202021a}.attached-content{text-align:center;height:150px;box-shadow:5px 3px 20px #ccc4c4a6;border:1px solid #d8d6d6;padding:10px}.text-content{color:#c1c1c1}.size20text{font-size:14px!important}.required{color:red;font-size:16px!important}.filebox{border:2px solid #e5e5e5;border-bottom:none;border-radius:5px 5px 0 0;background-color:#f2f3f4;box-shadow:0 3px 7px #0003;min-height:200px}.file-name{text-decoration:underline}.adj{font-weight:700!important}.title{font-size:15px;color:#000;opacity:.9}.download-pdf{text-align:center;border-top:2px solid #19d7db6b;cursor:pointer}.download-pdf:hover{transition:.5s;background:black;color:#fff}.flex{display:flex}.flex-align-vertical{display:flex;align-items:center}.center{justify-content:center;align-items:center}.flex-between{display:flex;justify-content:space-between}.hidden{visibility:hidden}.none{display:none}.box9{text-align:center;position:relative}.box9:hover img{opacity:.5}.box9 .box-content{display:flex;justify-content:center;align-items:center;padding:30px 10px 30px 0;background:rgba(0,0,0,.27);position:absolute;top:0;left:0;bottom:0;right:0;opacity:0}.box9:hover .box-content{animation-name:fadein;animation-duration:1s;animation-fill-mode:forwards}.format{padding:24px;border:1px solid #808080b3;background:white;border-radius:10px;align-items:center;display:flex;margin:10px;cursor:pointer}.fadein{margin-top:5px;animation:fadein 1s}@keyframes fadein{0%{opacity:0}to{opacity:1}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i2.alertService }]; }, propDecorators: { showheader: [{
                type: Input
            }], label: [{
                type: Input
            }], viewType: [{
                type: Input
            }], loading: [{
                type: Input
            }], mountAttached: [{
                type: Input
            }], accept: [{
                type: Input
            }], onSelectAttached: [{
                type: Output
            }], onClearSelect: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 