import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { Color } from '@mintplayer/ng-bootstrap';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@mintplayer/ng-bootstrap/for";
import * as i3 from "@mintplayer/ng-bootstrap/progress-bar";
import * as i4 from "@mintplayer/ng-bootstrap/list-group";
import * as i5 from "../pipes/format-bytes/format-bytes.pipe";
export class BsFileUploadComponent {
    constructor() {
        this.dropFilesCaption = 'Drop your files here';
        this.browseFilesCaption = 'Browse for files';
        this.placeholder = 'Drop files to upload';
        this.colors = Color;
        this.isDraggingFile = false;
        this.files = [];
        this.filesDropped = new EventEmitter();
    }
    onChange(event) {
        if (!event.target)
            return;
        if (!('files' in event.target))
            return;
        if (!event.target['files'])
            return;
        const files = event.target.files;
        if (!files)
            return;
        this.processDroppedFiles(files);
    }
    onDragOver(event) {
        event.preventDefault();
        event.stopPropagation();
        if (event.dataTransfer) {
            this.isDraggingFile = true;
            event.dataTransfer.effectAllowed = "copy";
        }
    }
    onDragLeave(event) {
        event.preventDefault();
        event.stopPropagation();
        this.isDraggingFile = false;
    }
    onDrop(event) {
        event.preventDefault();
        event.stopPropagation();
        this.isDraggingFile = false;
        if (event.dataTransfer && event.dataTransfer.files) {
            this.processDroppedFiles(event.dataTransfer.files);
        }
    }
    processDroppedFiles(fileList) {
        const newFiles = [...Array(fileList.length).keys()]
            .map(i => fileList.item(i))
            .filter(f => !!f)
            .map(f => ({ file: f, progress: 0 }));
        this.files.push(...newFiles);
        this.filesDropped.emit(newFiles);
    }
}
BsFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BsFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BsFileUploadComponent, selector: "bs-file-upload", inputs: { dropFilesCaption: "dropFilesCaption", browseFilesCaption: "browseFilesCaption", placeholder: "placeholder", files: "files" }, outputs: { filesDropped: "filesDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0, template: "<div class=\"dropzone border position-relative p-5\" [class.dragging]=\"isDraggingFile\">\n    <input type=\"file\" multiple #fileUpload (change)=\"onChange($event)\" [title]=\"placeholder\" [placeholder]=\"placeholder\" class=\"position-absolute w-100 h-100\">\n    <!-- <img src=\"/assets/ic-file-upload.svg\" [alt]=\"placeholder\"> -->\n    <span class=\"h3 d-block\">{{ dropFilesCaption }}</span>\n    <label class=\"btn btn-primary position-relative\" [bsFor]=\"fileUpload\">{{ browseFilesCaption }}</label>\n</div>\n<bs-list-group class=\"files-list\">\n    <bs-list-group-item *ngFor=\"let upload of files\">\n        <ng-container *ngTemplateOutlet=\"fileTemplate ?? defaultFileTemplate; context: { $implicit: upload }\"></ng-container>\n    </bs-list-group-item>\n</bs-list-group>\n\n<ng-template #defaultFileTemplate let-upload>\n    <div class=\"d-flex flex-row mx-auto\">\n        <div class=\"file-img\"></div>\n        <div class=\"flex-grow-1 text-start px-2\">\n            <span class=\"d-block text-truncate text-secondary\">{{ upload.file.name }}</span>\n            <span class=\"d-block text-grey mb-0\">{{ upload.file.size | bsFormatBytes }}</span>\n            <bs-progress [height]=\"4\">\n                <bs-progress-bar [minimum]=\"0\" [maximum]=\"upload.file.size\" [value]=\"upload.progress\"></bs-progress-bar>\n            </bs-progress>\n        </div>\n    </div>\n</ng-template>", styles: [".dropzone{z-index:1}.dropzone.dragging{border:4px solid #CB1535!important;background:#DC88A8;margin:-3px -3px -4px}.dropzone input{opacity:0;z-index:2;top:0;left:0}.dropzone .btn{z-index:5}.files-list{margin-top:-1px}.files-list .d-flex{max-width:400px}.text-grey{color:#999}.list-group span{margin:-5px auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.BsForDirective, selector: "[bsFor]", inputs: ["bsFor"] }, { kind: "component", type: i3.BsProgressBarComponent, selector: "bs-progress-bar", inputs: ["minimum", "maximum", "value", "color", "striped", "animated"] }, { kind: "component", type: i3.BsProgressComponent, selector: "bs-progress", inputs: ["height", "isIndeterminate"] }, { kind: "component", type: i4.BsListGroupComponent, selector: "bs-list-group" }, { kind: "component", type: i4.BsListGroupItemComponent, selector: "bs-list-group-item" }, { kind: "pipe", type: i5.BsFormatBytesPipe, name: "bsFormatBytes" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsFileUploadComponent, decorators: [{
            type: Component,
            args: [{ selector: 'bs-file-upload', template: "<div class=\"dropzone border position-relative p-5\" [class.dragging]=\"isDraggingFile\">\n    <input type=\"file\" multiple #fileUpload (change)=\"onChange($event)\" [title]=\"placeholder\" [placeholder]=\"placeholder\" class=\"position-absolute w-100 h-100\">\n    <!-- <img src=\"/assets/ic-file-upload.svg\" [alt]=\"placeholder\"> -->\n    <span class=\"h3 d-block\">{{ dropFilesCaption }}</span>\n    <label class=\"btn btn-primary position-relative\" [bsFor]=\"fileUpload\">{{ browseFilesCaption }}</label>\n</div>\n<bs-list-group class=\"files-list\">\n    <bs-list-group-item *ngFor=\"let upload of files\">\n        <ng-container *ngTemplateOutlet=\"fileTemplate ?? defaultFileTemplate; context: { $implicit: upload }\"></ng-container>\n    </bs-list-group-item>\n</bs-list-group>\n\n<ng-template #defaultFileTemplate let-upload>\n    <div class=\"d-flex flex-row mx-auto\">\n        <div class=\"file-img\"></div>\n        <div class=\"flex-grow-1 text-start px-2\">\n            <span class=\"d-block text-truncate text-secondary\">{{ upload.file.name }}</span>\n            <span class=\"d-block text-grey mb-0\">{{ upload.file.size | bsFormatBytes }}</span>\n            <bs-progress [height]=\"4\">\n                <bs-progress-bar [minimum]=\"0\" [maximum]=\"upload.file.size\" [value]=\"upload.progress\"></bs-progress-bar>\n            </bs-progress>\n        </div>\n    </div>\n</ng-template>", styles: [".dropzone{z-index:1}.dropzone.dragging{border:4px solid #CB1535!important;background:#DC88A8;margin:-3px -3px -4px}.dropzone input{opacity:0;z-index:2;top:0;left:0}.dropzone .btn{z-index:5}.files-list{margin-top:-1px}.files-list .d-flex{max-width:400px}.text-grey{color:#999}.list-group span{margin:-5px auto}\n"] }]
        }], propDecorators: { dropFilesCaption: [{
                type: Input
            }], browseFilesCaption: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], files: [{
                type: Input
            }], filesDropped: [{
                type: Output
            }], onDragOver: [{
                type: HostListener,
                args: ['dragover', ['$event']]
            }], onDragLeave: [{
                type: HostListener,
                args: ['dragleave', ['$event']]
            }], onDrop: [{
                type: HostListener,
                args: ['drop', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 