import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../icon/icon.component";
import * as i2 from "./drag-and-drop-files.directive";
import * as i3 from "@angular/common";
import * as i4 from "@ngx-translate/core";
export class DragDropFileComponent {
    constructor(render) {
        this.render = render;
        this.multipleFiles = false;
        this.disabled = false;
        this.disabledDownload = false;
        this.filesDropped = new EventEmitter();
        this.deleteFile = new EventEmitter();
        this.downloadFile = new EventEmitter();
        this.fileUploadIsToBig = false;
    }
    onClickUpload() {
        if (!this.disabled) {
            this.fileInput.nativeElement.click();
        }
    }
    fileToUploadChange(evt) {
        this.fileUploadIsToBig = false;
        Array.from(evt.target.files).forEach((file) => {
            if (this.maxFileSize && file.size >= this.maxFileSize) {
                this.fileUploadIsToBig = true;
                return;
            }
        });
        if (this.multipleFiles) {
            this.filesDropped.emit(evt.target.files);
        }
        else {
            this.filesDropped.emit(evt.target.files[0]);
            this.file = evt.target.files[0];
        }
        this.render.setProperty(this.fileInput.nativeElement, 'value', '');
    }
    onFileDropped(file) {
        if (this.multipleFiles) {
            this.filesDropped.emit(file);
        }
        else {
            this.filesDropped.emit(file);
            this.file = file;
        }
    }
    onDeleteFile(evt) {
        evt.stopPropagation();
        this.deleteFile.emit(this.file);
    }
    onDownloadFile(evt) {
        evt.stopPropagation();
        this.downloadFile.emit(this.file);
    }
}
DragDropFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragDropFileComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
DragDropFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DragDropFileComponent, selector: "uno-drag-drop-file", inputs: { maxFileSize: "maxFileSize", multipleFiles: "multipleFiles", file: "file", disabled: "disabled", disabledDownload: "disabledDownload" }, outputs: { filesDropped: "filesDropped", deleteFile: "deleteFile", downloadFile: "downloadFile" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\r\n    class=\"slds-grid slds-grid--align-center slds-grid--vertical-align-center border\"\r\n    [class.border--cursor]=\"disabled ? false : true\"\r\n    unoDragDropFile\r\n    [multiple]=\"multipleFiles\"\r\n    [disabled]=\"disabled\"\r\n    (fileDropped)=\"onFileDropped($event)\"\r\n    (click)=\"onClickUpload()\">\r\n    <ng-container *ngIf=\"!file; else showFile\">\r\n        <uno-icon icon=\"upload\" size=\"x-small\" class=\"slds-button__icon--left\"></uno-icon>\r\n        <span class=\"slds-m-right--small\" style=\"font-size: 17px; color: var(--light-grey-blue);\" translate>chooseFileLabel</span>\r\n    </ng-container>\r\n    <ng-template #showFile>\r\n        <span class=\"slds-m-right--small\" class=\"open-sans-semibold-14\">{{ file?.name }}</span>\r\n        <uno-icon *ngIf=\"!disabled\" icon=\"trash\" size=\"xx-small\" class=\"slds-button__icon--right\" (click)=\"onDeleteFile($event)\"></uno-icon>\r\n        <uno-icon *ngIf=\"!disabledDownload\" icon=\"download_l\" size=\"xx-small\" class=\"slds-button__icon--right\" (click)=\"onDownloadFile($event)\"></uno-icon>\r\n    </ng-template>\r\n    <input #fileInput id=\"file-input\" type=\"file\" [multiple]=\"multipleFiles\" (change)=\"fileToUploadChange($event)\">\r\n</div>\r\n<div *ngIf=\"fileUploadIsToBig\" class=\"slds-col\" style=\"color: var(--vermillion)\">\r\n    <span translate>fileSizeExceed</span> {{ file?.size / 1000000 }}mb\r\n</div>", styles: [".fileover{background-color:var(--light-periwinkle-two)}.border,.border--cursor{position:relative;border-radius:2px;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='%23AABAC3FF' stroke-width='2' stroke-dasharray='5%2c 6' stroke-dashoffset='10' stroke-linecap='square'/%3e%3c/svg%3e\");height:36px}.border--cursor{cursor:pointer}#file-input{display:none}\n"], components: [{ type: i1.IconComponent, selector: "uno-icon", inputs: ["svgType", "icon", "withOpacity", "color", "size", "customColor"] }], directives: [{ type: i2.DragAndDropFileDirective, selector: "[unoDragDropFile]", inputs: ["multiple", "disabled"], outputs: ["fileDropped"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragDropFileComponent, decorators: [{
            type: Component,
            args: [{ selector: 'uno-drag-drop-file', template: "<div\r\n    class=\"slds-grid slds-grid--align-center slds-grid--vertical-align-center border\"\r\n    [class.border--cursor]=\"disabled ? false : true\"\r\n    unoDragDropFile\r\n    [multiple]=\"multipleFiles\"\r\n    [disabled]=\"disabled\"\r\n    (fileDropped)=\"onFileDropped($event)\"\r\n    (click)=\"onClickUpload()\">\r\n    <ng-container *ngIf=\"!file; else showFile\">\r\n        <uno-icon icon=\"upload\" size=\"x-small\" class=\"slds-button__icon--left\"></uno-icon>\r\n        <span class=\"slds-m-right--small\" style=\"font-size: 17px; color: var(--light-grey-blue);\" translate>chooseFileLabel</span>\r\n    </ng-container>\r\n    <ng-template #showFile>\r\n        <span class=\"slds-m-right--small\" class=\"open-sans-semibold-14\">{{ file?.name }}</span>\r\n        <uno-icon *ngIf=\"!disabled\" icon=\"trash\" size=\"xx-small\" class=\"slds-button__icon--right\" (click)=\"onDeleteFile($event)\"></uno-icon>\r\n        <uno-icon *ngIf=\"!disabledDownload\" icon=\"download_l\" size=\"xx-small\" class=\"slds-button__icon--right\" (click)=\"onDownloadFile($event)\"></uno-icon>\r\n    </ng-template>\r\n    <input #fileInput id=\"file-input\" type=\"file\" [multiple]=\"multipleFiles\" (change)=\"fileToUploadChange($event)\">\r\n</div>\r\n<div *ngIf=\"fileUploadIsToBig\" class=\"slds-col\" style=\"color: var(--vermillion)\">\r\n    <span translate>fileSizeExceed</span> {{ file?.size / 1000000 }}mb\r\n</div>", styles: [".fileover{background-color:var(--light-periwinkle-two)}.border,.border--cursor{position:relative;border-radius:2px;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='%23AABAC3FF' stroke-width='2' stroke-dasharray='5%2c 6' stroke-dashoffset='10' stroke-linecap='square'/%3e%3c/svg%3e\");height:36px}.border--cursor{cursor:pointer}#file-input{display:none}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { maxFileSize: [{
                type: Input
            }], multipleFiles: [{
                type: Input
            }], file: [{
                type: Input
            }], disabled: [{
                type: Input
            }], disabledDownload: [{
                type: Input
            }], filesDropped: [{
                type: Output
            }], deleteFile: [{
                type: Output
            }], downloadFile: [{
                type: Output
            }], fileInput: [{
                type: ViewChild,
                args: ['fileInput']
            }] } });
//# sourceMappingURL=data:application/json;base64, 