bitfront-library/shared/component/bit-ng-upload.component.js

Angular CLI project with components and classes used by other Angular projects of the BIT foundation.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BitNGUploadComponent = void 0;
var core_1 = require("@angular/core");
var ng2_file_upload_1 = require("ng2-file-upload");
var general_utils_service_1 = require("../service/general-utils.service");
var i0 = require("@angular/core");
var i1 = require("../service/general-utils.service");
var i2 = require("@angular/common");
var i3 = require("ng2-file-upload");
var i4 = require("../directive/focus-register.directive");
var _c0 = ["fileRef"];
var _c1 = function (a0) { return { "nv-file-over": a0 }; };
function BitNGUploadComponent_div_2_Template(rf, ctx) { if (rf & 1) {
    var _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 4);
    i0.ɵɵlistener("fileOver", function BitNGUploadComponent_div_2_Template_div_fileOver_0_listener($event) { i0.ɵɵrestoreView(_r5); var ctx_r4 = i0.ɵɵnextContext(); return ctx_r4.fileOverBase($event); });
    i0.ɵɵtext(1, " Arrossegui aqu\u00ED els fitxers que desitgi pujar ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c1, ctx_r0.hasBaseDropZoneOver))("uploader", ctx_r0.uploader);
} }
function BitNGUploadComponent_div_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div");
    i0.ɵɵtext(1, " Seleccioni m\u00E9s d'un fitxer ");
    i0.ɵɵelement(2, "input", 5);
    i0.ɵɵelement(3, "br");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("uploader", ctx_r1.uploader);
} }
function BitNGUploadComponent_div_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div");
    i0.ɵɵtext(1, " Seleccioni un fitxer ");
    i0.ɵɵelement(2, "input", 6, 7);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("uploader", ctx_r2.uploader);
} }
function BitNGUploadComponent_div_5_th_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "th");
    i0.ɵɵtext(1, "Tamany");
    i0.ɵɵelementEnd();
} }
function BitNGUploadComponent_div_5_th_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "th");
    i0.ɵɵtext(1, "Progr\u00E9s");
    i0.ɵɵelementEnd();
} }
function BitNGUploadComponent_div_5_th_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "th");
    i0.ɵɵtext(1, "Estat");
    i0.ɵɵelementEnd();
} }
function BitNGUploadComponent_div_5_tr_14_td_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "td", 17);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "number");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var item_r14 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(2, 1, (item_r14 == null ? null : item_r14.file == null ? null : item_r14.file.size) / 1024, ".2"), " KB");
} }
var _c2 = function (a0) { return { "width": a0 }; };
function BitNGUploadComponent_div_5_tr_14_td_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "td");
    i0.ɵɵelementStart(1, "div", 21);
    i0.ɵɵelement(2, "div", 22);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var item_r14 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(1, _c2, item_r14.progress + "%"));
} }
function BitNGUploadComponent_div_5_tr_14_td_6_span_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span");
    i0.ɵɵelement(1, "i", 24);
    i0.ɵɵelementEnd();
} }
function BitNGUploadComponent_div_5_tr_14_td_6_span_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span");
    i0.ɵɵelement(1, "i", 25);
    i0.ɵɵelementEnd();
} }
function BitNGUploadComponent_div_5_tr_14_td_6_span_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span");
    i0.ɵɵelement(1, "i", 26);
    i0.ɵɵelementEnd();
} }
function BitNGUploadComponent_div_5_tr_14_td_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "td", 23);
    i0.ɵɵtemplate(1, BitNGUploadComponent_div_5_tr_14_td_6_span_1_Template, 2, 0, "span", 2);
    i0.ɵɵtemplate(2, BitNGUploadComponent_div_5_tr_14_td_6_span_2_Template, 2, 0, "span", 2);
    i0.ɵɵtemplate(3, BitNGUploadComponent_div_5_tr_14_td_6_span_3_Template, 2, 0, "span", 2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var item_r14 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", item_r14.isSuccess);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", item_r14.isCancel);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", item_r14.isError);
} }
function BitNGUploadComponent_div_5_tr_14_button_8_Template(rf, ctx) { if (rf & 1) {
    var _r28 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 27);
    i0.ɵɵlistener("click", function BitNGUploadComponent_div_5_tr_14_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); var item_r14 = i0.ɵɵnextContext().$implicit; var ctx_r26 = i0.ɵɵnextContext(2); return ctx_r26.uploadFile(item_r14); });
    i0.ɵɵelement(1, "span", 28);
    i0.ɵɵtext(2, " Puja ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var item_r14 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵproperty("disabled", item_r14.isReady || item_r14.isUploading || item_r14.isSuccess);
} }
function BitNGUploadComponent_div_5_tr_14_button_9_Template(rf, ctx) { if (rf & 1) {
    var _r32 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 29);
    i0.ɵɵlistener("click", function BitNGUploadComponent_div_5_tr_14_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r32); var item_r14 = i0.ɵɵnextContext().$implicit; var ctx_r30 = i0.ɵɵnextContext(2); return ctx_r30.cancelFile(item_r14); });
    i0.ɵɵelement(1, "span", 25);
    i0.ɵɵtext(2, " Cancel\u00B7la ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var item_r14 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵproperty("disabled", !item_r14.isUploading);
} }
function BitNGUploadComponent_div_5_tr_14_Template(rf, ctx) { if (rf & 1) {
    var _r35 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "tr");
    i0.ɵɵelementStart(1, "td");
    i0.ɵɵelementStart(2, "strong");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(4, BitNGUploadComponent_div_5_tr_14_td_4_Template, 3, 4, "td", 15);
    i0.ɵɵtemplate(5, BitNGUploadComponent_div_5_tr_14_td_5_Template, 3, 3, "td", 2);
    i0.ɵɵtemplate(6, BitNGUploadComponent_div_5_tr_14_td_6_Template, 4, 3, "td", 16);
    i0.ɵɵelementStart(7, "td", 17);
    i0.ɵɵtemplate(8, BitNGUploadComponent_div_5_tr_14_button_8_Template, 3, 1, "button", 18);
    i0.ɵɵtemplate(9, BitNGUploadComponent_div_5_tr_14_button_9_Template, 3, 1, "button", 19);
    i0.ɵɵelementStart(10, "button", 20);
    i0.ɵɵlistener("click", function BitNGUploadComponent_div_5_tr_14_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r35); var item_r14 = ctx.$implicit; var ctx_r34 = i0.ɵɵnextContext(2); return ctx_r34.removeFile(item_r14); });
    i0.ɵɵelement(11, "span", 14);
    i0.ɵɵtext(12, " Elimina de la cua ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var item_r14 = ctx.$implicit;
    var ctx_r10 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(item_r14 == null ? null : item_r14.file == null ? null : item_r14.file.name);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r10.uploader.options.isHTML5);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r10.uploader.options.isHTML5 && ctx_r10.hasProgressBar);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r10.canUpload);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r10.canUpload);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r10.canUpload);
} }
function BitNGUploadComponent_div_5_div_16_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div");
    i0.ɵɵtext(1, " Cua de progr\u00E9s: ");
    i0.ɵɵelementStart(2, "div", 30);
    i0.ɵɵelement(3, "div", 22);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r11 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(1, _c2, ctx_r11.uploader.progress + "%"));
} }
function BitNGUploadComponent_div_5_button_18_Template(rf, ctx) { if (rf & 1) {
    var _r37 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 31);
    i0.ɵɵlistener("click", function BitNGUploadComponent_div_5_button_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r37); var ctx_r36 = i0.ɵɵnextContext(2); return ctx_r36.uploadAll(); });
    i0.ɵɵelement(1, "span", 28);
    i0.ɵɵtext(2, " Pujat tot ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r12 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("disabled", !ctx_r12.uploader.getNotUploadedItems().length);
} }
function BitNGUploadComponent_div_5_button_19_Template(rf, ctx) { if (rf & 1) {
    var _r39 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 32);
    i0.ɵɵlistener("click", function BitNGUploadComponent_div_5_button_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r39); var ctx_r38 = i0.ɵɵnextContext(2); return ctx_r38.cancelQueue(); });
    i0.ɵɵelement(1, "span", 25);
    i0.ɵɵtext(2, " Cancel\u00B7la tot ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r13 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("disabled", !ctx_r13.uploader.isUploading);
} }
function BitNGUploadComponent_div_5_Template(rf, ctx) { if (rf & 1) {
    var _r41 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div");
    i0.ɵɵelementStart(1, "p");
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "table", 8);
    i0.ɵɵelementStart(4, "thead");
    i0.ɵɵelementStart(5, "tr");
    i0.ɵɵelementStart(6, "th", 9);
    i0.ɵɵtext(7, "Nom fitxer");
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(8, BitNGUploadComponent_div_5_th_8_Template, 2, 0, "th", 2);
    i0.ɵɵtemplate(9, BitNGUploadComponent_div_5_th_9_Template, 2, 0, "th", 2);
    i0.ɵɵtemplate(10, BitNGUploadComponent_div_5_th_10_Template, 2, 0, "th", 2);
    i0.ɵɵelementStart(11, "th");
    i0.ɵɵtext(12, "Accions");
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(13, "tbody");
    i0.ɵɵtemplate(14, BitNGUploadComponent_div_5_tr_14_Template, 13, 6, "tr", 10);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(15, "div");
    i0.ɵɵtemplate(16, BitNGUploadComponent_div_5_div_16_Template, 4, 3, "div", 2);
    i0.ɵɵelementStart(17, "div");
    i0.ɵɵtemplate(18, BitNGUploadComponent_div_5_button_18_Template, 3, 1, "button", 11);
    i0.ɵɵtemplate(19, BitNGUploadComponent_div_5_button_19_Template, 3, 1, "button", 12);
    i0.ɵɵelementStart(20, "button", 13);
    i0.ɵɵlistener("click", function BitNGUploadComponent_div_5_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r41); var ctx_r40 = i0.ɵɵnextContext(); return ctx_r40.removeQueue(); });
    i0.ɵɵelement(21, "span", 14);
    i0.ɵɵtext(22, " Elimina tot ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r3 = i0.ɵɵnextContext();
    i0.ɵɵclassMapInterpolate1("col-md-", ctx_r3.sizeQueue, " col-sd-12 queue");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1("Nombre de fitxers a pujar: ", ctx_r3.uploader == null ? null : ctx_r3.uploader.queue == null ? null : ctx_r3.uploader.queue.length, "");
    i0.ɵɵadvance(6);
    i0.ɵɵproperty("ngIf", ctx_r3.uploader.options.isHTML5);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r3.uploader.options.isHTML5 && ctx_r3.hasProgressBar);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r3.canUpload);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("ngForOf", ctx_r3.uploader.queue);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r3.hasProgressBar);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r3.canUpload);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r3.canUpload);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("disabled", !ctx_r3.uploader.queue.length);
} }
var BitNGUploadComponent = /** @class */ (function () {
    function BitNGUploadComponent(generalUtils, changeDetector) {
        this.generalUtils = generalUtils;
        this.changeDetector = changeDetector;
        this.onSuccess = new core_1.EventEmitter();
        this.onError = new core_1.EventEmitter();
    }
    BitNGUploadComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.uploader.onSuccessItem = function (item, response, status, headers) {
            console.log("success upload file");
            _this.stopLoading();
            _this.onSuccess.emit({ item: item, response: response, status: status, headers: headers });
            if (_this.deleteItemAfterUpload) {
                item.remove();
            }
        };
        this.uploader.onErrorItem = function (item, response, status, headers) {
            console.log("error upload file");
            _this.stopLoading();
            _this.onError.emit({ item: item, response: response, status: status, headers: headers });
        };
        this.uploader.onProgressItem = function (item, progress) {
            console.log(progress);
            _this.changeDetector.detectChanges();
        };
        this.hasBaseDropZoneOver = false;
    };
    /** Arrancará el spinner en el caso de que la barra de progreso esté desactivada*/
    BitNGUploadComponent.prototype.startLoading = function () {
        if (!this.hasProgressBar) {
            this.generalUtils.startLoading();
        }
    };
    /** Parará el spinner en el caso de que la barra de progreso esté desactivada*/
    BitNGUploadComponent.prototype.stopLoading = function () {
        if (!this.hasProgressBar) {
            this.generalUtils.stopLoading();
        }
    };
    /** Sube todos los ficheros en cola al servidor */
    BitNGUploadComponent.prototype.uploadAll = function () {
        this.startLoading();
        this.uploader.uploadAll();
    };
    /** Elimina la cola de ficheros y deselecciona el fichero que pudiera estar seleccionado en el single input file */
    BitNGUploadComponent.prototype.removeQueue = function () {
        this.stopLoading();
        this.uploader.clearQueue();
        this.changeDetector.detectChanges();
        this.removeInputFile();
    };
    /** Cancela la subida de ficheros al servidor */
    BitNGUploadComponent.prototype.cancelQueue = function () {
        this.stopLoading();
        this.uploader.cancelAll();
    };
    /** Sube un fichero al servidor de manera individual */
    BitNGUploadComponent.prototype.uploadFile = function (item) {
        this.startLoading();
        item.upload();
    };
    /** Elimina de la cola un fichero en concreto y en el caso de que coincida con el seleccionado en el single input file, tambien
     * lo deselecciona
     */
    BitNGUploadComponent.prototype.removeFile = function (item) {
        this.stopLoading();
        if (this.fileInput && this.fileInput.nativeElement.value.indexOf(item.file.name) != -1) {
            this.removeInputFile();
        }
        item.remove();
    };
    /** Cancela la subida de un fichero de manera individual */
    BitNGUploadComponent.prototype.cancelFile = function (item) {
        this.stopLoading();
        item.cancel();
    };
    /** Deselecciona el fichero seleccionado en el input file */
    BitNGUploadComponent.prototype.removeInputFile = function () {
        if (this.fileInput)
            this.fileInput.nativeElement.value = "";
    };
    /** Evento que se dispara cuando arrastran un fichero a la zona de drag&drop */
    BitNGUploadComponent.prototype.fileOverBase = function (e) {
        this.hasBaseDropZoneOver = e;
    };
    BitNGUploadComponent.ɵfac = function BitNGUploadComponent_Factory(t) { return new (t || BitNGUploadComponent)(i0.ɵɵdirectiveInject(i1.GeneralUtils), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    BitNGUploadComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BitNGUploadComponent, selectors: [["bit-ng-upload"]], viewQuery: function BitNGUploadComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 1);
        } if (rf & 2) {
            var _t = void 0;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
        } }, inputs: { uploader: "uploader", hasDropZone: "hasDropZone", hasQueue: "hasQueue", hasSingleUpload: "hasSingleUpload", hasMultipleUpload: "hasMultipleUpload", deleteItemAfterUpload: "deleteItemAfterUpload", canUpload: "canUpload", hasProgressBar: "hasProgressBar", sizeDropZone: "sizeDropZone", sizeQueue: "sizeQueue" }, outputs: { onSuccess: "onSuccess", onError: "onError" }, decls: 6, vars: 7, consts: [[1, "row"], ["ng2FileDrop", "", "class", "well my-drop-zone", 3, "ngClass", "uploader", "fileOver", 4, "ngIf"], [4, "ngIf"], [3, "class", 4, "ngIf"], ["ng2FileDrop", "", 1, "well", "my-drop-zone", 3, "ngClass", "uploader", "fileOver"], ["type", "file", "ng2FileSelect", "", "multiple", "", 3, "uploader"], ["type", "file", "ng2FileSelect", "", 3, "uploader"], ["fileRef", ""], [1, "table"], ["width", "50%"], [4, "ngFor", "ngForOf"], ["type", "button", "class", "btn btn-success btn-s", 3, "disabled", "click", 4, "ngIf"], ["type", "button", "class", "btn btn-warning btn-s", 3, "disabled", "click", 4, "ngIf"], ["type", "button", 1, "btn", "btn-danger", "btn-s", 3, "disabled", "click"], [1, "glyphicon", "glyphicon-trash"], ["nowrap", "", 4, "ngIf"], ["class", "text-center", 4, "ngIf"], ["nowrap", ""], ["type", "button", "class", "btn btn-success btn-xs", 3, "disabled", "click", 4, "ngIf"], ["type", "button", "class", "btn btn-warning btn-xs", 3, "disabled", "click", 4, "ngIf"], ["type", "button", 1, "btn", "btn-danger", "btn-xs", 3, "click"], [1, "progress", 2, "margin-bottom", "0"], ["role", "progressbar", 1, "progress-bar", 3, "ngStyle"], [1, "text-center"], [1, "glyphicon", "glyphicon-ok"], [1, "glyphicon", "glyphicon-ban-circle"], [1, "glyphicon", "glyphicon-remove"], ["type", "button", 1, "btn", "btn-success", "btn-xs", 3, "disabled", "click"], [1, "glyphicon", "glyphicon-upload"], ["type", "button", 1, "btn", "btn-warning", "btn-xs", 3, "disabled", "click"], [1, "progress"], ["type", "button", 1, "btn", "btn-success", "btn-s", 3, "disabled", "click"], ["type", "button", 1, "btn", "btn-warning", "btn-s", 3, "disabled", "click"]], template: function BitNGUploadComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵelementStart(1, "div");
            i0.ɵɵtemplate(2, BitNGUploadComponent_div_2_Template, 2, 4, "div", 1);
            i0.ɵɵtemplate(3, BitNGUploadComponent_div_3_Template, 4, 1, "div", 2);
            i0.ɵɵtemplate(4, BitNGUploadComponent_div_4_Template, 4, 1, "div", 2);
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(5, BitNGUploadComponent_div_5_Template, 23, 12, "div", 3);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵadvance(1);
            i0.ɵɵclassMapInterpolate1("col-md-", ctx.sizeDropZone, " col-sd-12");
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("ngIf", ctx.hasDropZone);
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("ngIf", ctx.hasMultipleUpload);
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("ngIf", ctx.hasSingleUpload);
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("ngIf", ctx.hasQueue);
        } }, directives: [i2.NgIf, i3.FileDropDirective, i2.NgClass, i4.FocusRegisterDirective, i3.FileSelectDirective, i2.NgForOf, i2.NgStyle], pipes: [i2.DecimalPipe], styles: [".my-drop-zone[_ngcontent-%COMP%] { \n        border: dotted 3px lightgray; \n        display: flex;\n        justify-content: space-around;\n        flex-direction: row;\n    }\n\n    .nv-file-over[_ngcontent-%COMP%] { \n        border: dotted 3px red; \n    } \n\n    .another-file-over-class[_ngcontent-%COMP%] { \n        border: dotted 3px green; \n    }\n\n    button[_ngcontent-%COMP%] {\n        margin-right: 5px;\n    }\n\n    .queue[_ngcontent-%COMP%]{\n        margin-top: 20px;\n    }\n\n    @media(min-width: 992px){\n        .queue[_ngcontent-%COMP%]{\n            margin-top: 0px;\n        }\n    }"], changeDetection: 0 });
    return BitNGUploadComponent;
}());
exports.BitNGUploadComponent = BitNGUploadComponent;
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BitNGUploadComponent, [{
        type: core_1.Component,
        args: [{
                selector: "bit-ng-upload",
                template: "\n        <div class=\"row\">\n            <div class=\"col-md-{{sizeDropZone}} col-sd-12\">\n                <div *ngIf=\"hasDropZone\" \n                    ng2FileDrop\n                    [ngClass]=\"{'nv-file-over': hasBaseDropZoneOver}\"\n                    (fileOver)=\"fileOverBase($event)\"\n                    [uploader]=\"uploader\"\n                    class=\"well my-drop-zone\">\n                    Arrossegui aquí els fitxers que desitgi pujar\n                </div>\n                <div *ngIf=\"hasMultipleUpload\">\n                    Seleccioni més d'un fitxer\n                    <input type=\"file\" ng2FileSelect [uploader]=\"uploader\" multiple  /><br/>\n                </div>\n                <div *ngIf=\"hasSingleUpload\">\n                    Seleccioni un fitxer\n                    <input #fileRef type=\"file\" ng2FileSelect [uploader]=\"uploader\" />\n                </div>\n            </div>\n            <div *ngIf=\"hasQueue\" class=\"col-md-{{sizeQueue}} col-sd-12 queue\">\n                <p>Nombre de fitxers a pujar: {{ uploader?.queue?.length }}</p>\n                <table class=\"table\">\n                    <thead>\n                    <tr>\n                        <th width=\"50%\">Nom fitxer</th>\n                        <th *ngIf=\"uploader.options.isHTML5\">Tamany</th>\n                        <th *ngIf=\"uploader.options.isHTML5 && hasProgressBar\">Progrés</th>\n                        <th *ngIf=\"canUpload\">Estat</th>\n                        <th>Accions</th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                    <tr *ngFor=\"let item of uploader.queue\">\n                        <td><strong>{{ item?.file?.name }}</strong></td>\n                        <td *ngIf=\"uploader.options.isHTML5\" nowrap>{{ item?.file?.size/1024 | number:'.2' }} KB</td>\n                        <td *ngIf=\"uploader.options.isHTML5 && hasProgressBar\">\n                            <div class=\"progress\" style=\"margin-bottom: 0;\">\n                                <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"{ 'width': item.progress + '%' }\"></div>\n                            </div>\n                        </td>\n                        <td *ngIf=\"canUpload\" class=\"text-center\">\n                            <span *ngIf=\"item.isSuccess\"><i class=\"glyphicon glyphicon-ok\"></i></span>\n                            <span *ngIf=\"item.isCancel\"><i class=\"glyphicon glyphicon-ban-circle\"></i></span>\n                            <span *ngIf=\"item.isError\"><i class=\"glyphicon glyphicon-remove\"></i></span>\n                        </td>\n                        <td nowrap>\n                            <button *ngIf=\"canUpload\" type=\"button\" class=\"btn btn-success btn-xs\"\n                                    (click)=\"uploadFile(item)\" [disabled]=\"item.isReady || item.isUploading || item.isSuccess\">\n                                <span class=\"glyphicon glyphicon-upload\"></span> Puja\n                            </button>\n                            <button *ngIf=\"canUpload\" type=\"button\" class=\"btn btn-warning btn-xs\"\n                                    (click)=\"cancelFile(item)\" [disabled]=\"!item.isUploading\">\n                                <span class=\"glyphicon glyphicon-ban-circle\"></span> Cancel·la\n                            </button>\n                            <button type=\"button\" class=\"btn btn-danger btn-xs\"\n                                    (click)=\"removeFile(item)\">\n                                <span class=\"glyphicon glyphicon-trash\"></span> Elimina de la cua\n                            </button>\n                        </td>\n                    </tr>\n                    </tbody>\n                </table>\n                <div>\n                    <div *ngIf=\"hasProgressBar\">\n                        Cua de progrés:\n                        <div class=\"progress\">\n                            <div class=\"progress-bar\" role=\"progressbar\" [ngStyle]=\"{ 'width': uploader.progress + '%' }\"></div>\n                        </div>\n                    </div>\n                    <div>\n                        <button *ngIf=\"canUpload\" type=\"button\" class=\"btn btn-success btn-s\"\n                                (click)=\"uploadAll()\" [disabled]=\"!uploader.getNotUploadedItems().length\">\n                            <span class=\"glyphicon glyphicon-upload\"></span> Pujat tot\n                        </button>\n                        <button *ngIf=\"canUpload\" type=\"button\" class=\"btn btn-warning btn-s\"\n                                (click)=\"cancelQueue()\" [disabled]=\"!uploader.isUploading\">\n                            <span class=\"glyphicon glyphicon-ban-circle\"></span> Cancel·la tot\n                        </button>\n                        <button type=\"button\" class=\"btn btn-danger btn-s\"\n                                (click)=\"removeQueue()\" [disabled]=\"!uploader.queue.length\">\n                            <span class=\"glyphicon glyphicon-trash\"></span> Elimina tot\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n  ",
                styles: ["\n    .my-drop-zone { \n        border: dotted 3px lightgray; \n        display: flex;\n        justify-content: space-around;\n        flex-direction: row;\n    }\n\n    .nv-file-over { \n        border: dotted 3px red; \n    } /* Default class applied to drop zones on over */\n\n    .another-file-over-class { \n        border: dotted 3px green; \n    }\n\n    button {\n        margin-right: 5px;\n    }\n\n    .queue{\n        margin-top: 20px;\n    }\n\n    @media(min-width: 992px){\n        .queue{\n            margin-top: 0px;\n        }\n    }\n  "],
                changeDetection: core_1.ChangeDetectionStrategy.OnPush
            }]
    }], function () { return [{ type: i1.GeneralUtils }, { type: i0.ChangeDetectorRef }]; }, { uploader: [{
            type: core_1.Input
        }], hasDropZone: [{
            type: core_1.Input
        }], hasQueue: [{
            type: core_1.Input
        }], hasSingleUpload: [{
            type: core_1.Input
        }], hasMultipleUpload: [{
            type: core_1.Input
        }], deleteItemAfterUpload: [{
            type: core_1.Input
        }], canUpload: [{
            type: core_1.Input
        }], hasProgressBar: [{
            type: core_1.Input
        }], sizeDropZone: [{
            type: core_1.Input
        }], sizeQueue: [{
            type: core_1.Input
        }], onSuccess: [{
            type: core_1.Output
        }], onError: [{
            type: core_1.Output
        }], fileInput: [{
            type: core_1.ViewChild,
            args: ["fileRef"]
        }] }); })();
//# sourceMappingURL=bit-ng-upload.component.js.map