import { DOCUMENT } from '@angular/common';
import { Component, EventEmitter, forwardRef, Inject, Input, Output, TemplateRef, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { I18nService } from 'ng-devui/i18n';
import { ToastService } from 'ng-devui/toast';
import { from } from 'rxjs';
import { debounceTime, last, map, mergeMap } from 'rxjs/operators';
import { IFileOptions, IUploadOptions, UploadStatus } from './file-uploader.types';
import { MultipleUploadViewComponent } from './multiple-upload-view.component';
import { SelectFiles } from './select-files.utils';
import * as i0 from "@angular/core";
import * as i1 from "./select-files.utils";
import * as i2 from "ng-devui/i18n";
import * as i3 from "ng-devui/toast";
import * as i4 from "@angular/common";
import * as i5 from "ng-devui/button";
import * as i6 from "ng-devui/progress";
import * as i7 from "./multiple-upload-view.component";
import * as i8 from "./file-drop.directive";
export class MultipleUploadComponent {
    constructor(selectFiles, i18n, doc, toastService) {
        this.selectFiles = selectFiles;
        this.i18n = i18n;
        this.doc = doc;
        this.toastService = toastService;
        this.autoUpload = false;
        this.withoutBtn = false;
        this.showTip = false;
        this.uploadedFiles = [];
        this.oneTimeUpload = false;
        this.disabled = false;
        this.enableDrop = false;
        this.successEvent = new EventEmitter();
        this.errorEvent = new EventEmitter();
        this.deleteUploadedFileEvent = new EventEmitter();
        this.fileDrop = new EventEmitter();
        this.fileOver = new EventEmitter();
        this.fileSelect = new EventEmitter();
        this.isDropOVer = false;
        this.errorMsg = [];
        this.UploadStatus = UploadStatus;
        this.onChange = (_) => null;
        this.onTouched = () => null;
        this.document = this.doc;
    }
    ngOnInit() {
        this.i18nText = this.i18n.getI18nText().upload;
        this.i18nCommonText = this.i18n.getI18nText().common;
        this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
            this.i18nText = data.upload;
            this.i18nCommonText = data.common;
        });
    }
    writeValue(files) {
        if (files) {
            const simulateFiles = from(this.simulateSelectFiles(files)).pipe(mergeMap(file => file));
            this._dealFiles(simulateFiles);
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    simulateSelectFiles(files) {
        return new Promise((resolve) => {
            resolve(Array.prototype.slice.call(files));
        });
    }
    _dealFiles(observale) {
        this.multipleUploadViewComponent.resetSameNameFiles();
        observale.pipe(map(file => this.multipleUploadViewComponent.addFile(file)), debounceTime(100))
            .subscribe(() => {
            this.checkValid();
            const sameNameFiles = this.multipleUploadViewComponent.getSameNameFiles();
            if (this.uploadOptions.checkSameName && sameNameFiles.length) {
                this.alertMsg(this.i18nText.getExistSameNameFilesMsg(sameNameFiles));
            }
            this.onChange(this.multipleUploadViewComponent.fileUploaders.map(fileUploader => fileUploader.file));
            const selectedFiles = this.multipleUploadViewComponent.fileUploaders
                .filter(fileUploader => fileUploader.status === UploadStatus.preLoad)
                .map(fileUploader => fileUploader.file);
            this.onFileSelect(selectedFiles);
            if (this.autoUpload) {
                this.upload();
            }
        }, (error) => {
            this.alertMsg(error.message);
        });
    }
    checkValid() {
        let totalFileSize = 0;
        this.multipleUploadViewComponent.fileUploaders.forEach(fileUploader => {
            totalFileSize += fileUploader.file.size;
            const checkResult = this.selectFiles._validateFiles(fileUploader.file, this.fileOptions.accept, fileUploader.uploadOptions);
            if (checkResult && checkResult.checkError) {
                this.multipleUploadViewComponent.deletePreUploadFile(fileUploader.file);
                this.alertMsg(checkResult.errorMsg);
                return;
            }
        });
        if (this.oneTimeUpload) {
            const checkResult = this.selectFiles.checkAllFilesSize(totalFileSize, this.uploadOptions.maximumSize);
            if (checkResult && checkResult.checkError) {
                this.multipleUploadViewComponent.removeFiles();
                this.alertMsg(checkResult.errorMsg);
            }
        }
    }
    onClick(event) {
        if (this.disabled) {
            return;
        }
        this._dealFiles(this.selectFiles.triggerSelectFiles(this.fileOptions, this.uploadOptions));
    }
    onFileDrop(files) {
        this.isDropOVer = false;
        this._dealFiles(this.selectFiles.triggerDropFiles(this.fileOptions, this.uploadOptions, files));
        this.fileDrop.emit(files);
    }
    onFileOver(event) {
        this.isDropOVer = event;
        this.fileOver.emit(event);
    }
    onFileSelect(files) {
        this.fileSelect.emit(files);
    }
    handleOneTimeUpload(uploadObservable) {
        uploadObservable
            .pipe(last())
            .subscribe((results) => {
            this.successEvent.emit(results);
            results.forEach((result) => {
                this.multipleUploadViewComponent.uploadedFilesComponent.addFile(result.file);
            });
        }, (error) => {
            this.errorEvent.emit(error);
        });
    }
    handleUpload(uploadObservable) {
        uploadObservable
            .pipe(last())
            .subscribe((results) => {
            const successResult = results.filter(item => item.status === UploadStatus.uploaded).map(item => {
                return { file: item.file, response: item.response };
            });
            const failResult = results.filter(item => item.status === UploadStatus.failed).map(item => {
                return { file: item.file, response: item.response };
            });
            if (failResult.length) {
                this.errorEvent.emit(failResult);
            }
            if (successResult.length) {
                this.successEvent.emit(successResult);
                successResult.forEach((result) => {
                    this.multipleUploadViewComponent.uploadedFilesComponent.addFile(result.file);
                });
            }
        });
    }
    upload(event, fileUploader) {
        if (event) {
            event.stopPropagation();
        }
        this.canUpload().then((canUpload) => {
            if (!canUpload) {
                this.multipleUploadViewComponent.removeFiles();
                return;
            }
            const tempNode = this.document.getElementById('d-upload-temp');
            if (tempNode) {
                this.document.body.removeChild(tempNode);
            }
            const uploadObservable = this.oneTimeUpload ?
                this.multipleUploadViewComponent.oneTimeUpload() :
                this.multipleUploadViewComponent.upload(fileUploader, true);
            if (this.oneTimeUpload) {
                this.handleOneTimeUpload(uploadObservable);
            }
            else {
                this.handleUpload(uploadObservable);
            }
        });
    }
    canUpload() {
        let uploadResult = Promise.resolve(true);
        if (this.beforeUpload) {
            const result = this.beforeUpload(this.multipleUploadViewComponent.getFullFiles());
            if (typeof result !== 'undefined') {
                if (result.then) {
                    uploadResult = result;
                }
                else if (result.subscribe) {
                    uploadResult = result.toPromise();
                }
                else {
                    uploadResult = Promise.resolve(result);
                }
            }
        }
        return uploadResult;
    }
    _onDeleteUploadedFile(filePath) {
        this.deleteUploadedFileEvent.emit(filePath);
        this.onChange(this.multipleUploadViewComponent.fileUploaders.map(fileUploader => fileUploader.file));
    }
    deleteFile($event, file) {
        $event.stopPropagation();
        this.multipleUploadViewComponent.deleteFile(file);
    }
    alertMsg(errorMsg) {
        this.toastService.open({
            value: [{ severity: 'warn', content: errorMsg }],
        });
    }
    getStatus() {
        let uploadingCount = 0;
        let uploadedCount = 0;
        let failedCount = 0;
        const filesCount = this.multipleUploadViewComponent.fileUploaders.length;
        this.multipleUploadViewComponent.fileUploaders.forEach((fileUploader) => {
            if (fileUploader.status === UploadStatus.uploading) {
                uploadingCount++;
            }
            else if (fileUploader.status === UploadStatus.uploaded) {
                uploadedCount++;
            }
            else if (fileUploader.status === UploadStatus.failed) {
                failedCount++;
            }
        });
        if (failedCount > 0) {
            this.uploadTips = this.i18nText.getFailedFilesCount(failedCount);
            return 'failed';
        }
        if (uploadingCount > 0) {
            this.uploadTips = this.i18nText.getUploadingFilesCount(uploadingCount, filesCount);
            return 'uploading';
        }
        if (uploadedCount === filesCount && uploadedCount !== 0) {
            return 'uploaded';
        }
        if (filesCount !== 0) {
            this.uploadTips = this.i18nText.getSelectedFilesCount(filesCount);
            return 'selected';
        }
    }
    cancelUpload() {
        this.multipleUploadViewComponent.fileUploaders.filter((fileUploader) => fileUploader.status === UploadStatus.uploading)
            .forEach((fileUploader) => {
            fileUploader.status = UploadStatus.failed;
        });
    }
    ngOnDestroy() {
        if (this.i18nSubscription) {
            this.i18nSubscription.unsubscribe();
        }
    }
}
MultipleUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MultipleUploadComponent, deps: [{ token: i1.SelectFiles }, { token: i2.I18nService }, { token: DOCUMENT }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
MultipleUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MultipleUploadComponent, selector: "d-multiple-upload", inputs: { uploadOptions: "uploadOptions", fileOptions: "fileOptions", autoUpload: "autoUpload", withoutBtn: "withoutBtn", showTip: "showTip", uploadedFiles: "uploadedFiles", uploadedFilesRef: "uploadedFilesRef", preloadFilesRef: "preloadFilesRef", filePath: "filePath", placeholderText: "placeholderText", uploadText: "uploadText", confirmText: "confirmText", oneTimeUpload: "oneTimeUpload", disabled: "disabled", beforeUpload: "beforeUpload", setCustomUploadOptions: "setCustomUploadOptions", enableDrop: "enableDrop" }, outputs: { successEvent: "successEvent", errorEvent: "errorEvent", deleteUploadedFileEvent: "deleteUploadedFileEvent", fileDrop: "fileDrop", fileOver: "fileOver", fileSelect: "fileSelect" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => MultipleUploadComponent),
            multi: true
        }
    ], viewQueries: [{ propertyName: "multipleUploadViewComponent", first: true, predicate: ["dMultipleUploadView"], descendants: true, static: true }], exportAs: ["dMultipleUpload"], ngImport: i0, template: "<div\n  d-file-drop\n  [enableDrop]=\"enableDrop\"\n  (fileDrop)=\"onFileDrop($event)\"\n  (fileOver)=\"onFileOver($event)\"\n  (fileSelect)=\"onFileSelect($event)\"\n  [ngStyle]=\"{ border: isDropOVer ? '1px solid #15bf15' : '0' }\"\n  style=\"display: flex\"\n>\n  <div class=\"devui-input-group\" [class.disabled]=\"disabled\" (click)=\"onClick($event)\">\n    <div *ngIf=\"dMultipleUploadView.fileUploaders.length === 0\" class=\"devui-form-control devui-upload-placeholder\">\n      {{ placeholderText ? placeholderText : i18nText?.chooseFile }}\n    </div>\n    <ul *ngIf=\"dMultipleUploadView.fileUploaders.length > 0\" class=\"devui-form-control devui-files-list\">\n      <li\n        *ngFor=\"let fileUploader of dMultipleUploadView.fileUploaders; let index = index\"\n        class=\"devui-file-item devui-file-tag\"\n        style=\"display: inline-block; margin: 0 2px 2px 0\"\n        title=\"{{ fileUploader.file.name }}\"\n      >\n        <span class=\"devui-filename {{ fileUploader.status === UploadStatus.failed ? 'devui-failed-color' : '' }}\">\n          {{ fileUploader.file.name }}\n        </span>\n        <span\n          class=\"icon icon-close {{ fileUploader.status === UploadStatus.failed ? 'devui-upload-delete-file-button' : '' }}\n          {{\n            fileUploader.status === UploadStatus.uploading || fileUploader.status === UploadStatus.uploaded ? 'devui-uploading-delete' : ''\n          }}\"\n          (click)=\"deleteFile($event, fileUploader.file)\"\n        >\n        </span>\n        <div *ngIf=\"fileUploader.status === UploadStatus.uploading\" class=\"icon devui-upload-progress\">\n          <d-progress\n            [type]=\"'circle'\"\n            [percentage]=\"fileUploader.percentage\"\n            [strokeColor]=\"'#50D4AB'\"\n            [strokeWidth]=\"8\"\n            [showContent]=\"false\"\n          >\n          </d-progress>\n        </div>\n        <span *ngIf=\"fileUploader.status === UploadStatus.failed\" class=\"icon icon-running\" (click)=\"upload($event, fileUploader)\"> </span>\n        <span *ngIf=\"fileUploader.status === UploadStatus.uploaded\" class=\"icon icon-right\"></span>\n      </li>\n    </ul>\n    <span class=\"devui-input-group-addon\">\n      <svg class=\"svg-icon-dot\" height=\"1em\" width=\"1em\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"m400.31892 176.970574c0-61.574381 50.113351-111.680569 111.679545-111.680569 61.576427 0 111.680569 50.106188 111.680569 111.680569 0 61.568241-50.104141 111.679545-111.680569 111.679545-61.566194 0-111.679545-50.111304-111.679545-111.679545zm0 335.028403c0-61.568241 50.113351-111.678522 111.679545-111.678522 61.576427 0 111.680569 50.110281 111.680569 111.678522 0 61.574381-50.105165 111.682615-111.680569 111.682615-61.566194 0-111.679545-50.108235-111.679545-111.682615zm0 335.037612c0-61.572334 50.113351-111.679545 111.679545-111.679545 61.575404 0 111.680569 50.107211 111.680569 111.679545 0 61.567217-50.105165 111.672382-111.680569 111.672382-61.566194 0-111.679545-50.105164-111.679545-111.672382zm0 0\"\n        />\n      </svg>\n    </span>\n  </div>\n  <d-button\n    *ngIf=\"!autoUpload && !withoutBtn\"\n    [disabled]=\"disabled\"\n    (btnClick)=\"upload($event)\"\n    [style.margin-left.px]=\"8\"\n    bsStyle=\"common\"\n  >\n    {{ uploadText || i18nText?.upload }}\n  </d-button>\n</div>\n<ng-container *ngIf=\"showTip\">\n  <div class=\"devui-upload-tip\">\n    <span *ngIf=\"getStatus() === 'selected'\" class=\"devui-loading\">{{ uploadTips }}</span>\n    <span *ngIf=\"getStatus() === 'uploading'\" class=\"devui-loading\">\n      <span style=\"margin-right: 8px\">{{ uploadTips }}</span>\n      <a (click)=\"cancelUpload()\">{{ i18nText?.cancelUpload }}</a>\n    </span>\n    <div *ngIf=\"getStatus() === 'uploaded'\" class=\"devui-loaded\">\n      <i class=\"icon icon-right-o\"></i>\n      <span style=\"vertical-align: middle\">{{ i18nText?.uploadSuccess }}</span>\n    </div>\n    <div *ngIf=\"getStatus() === 'failed'\" class=\"devui-upload-failed\">\n      <i class=\"icon icon-info-o\"></i>\n      <span style=\"vertical-align: middle\">\n        <span style=\"margin-right: 8px\">{{ uploadTips }}</span>\n        <a (click)=\"upload($event)\">{{ i18nText?.reUpload }}</a>\n      </span>\n    </div>\n  </div>\n</ng-container>\n<d-multiple-upload-view\n  #dMultipleUploadView\n  [uploadedFiles]=\"uploadedFiles\"\n  [uploadedFilesRef]=\"uploadedFilesRef\"\n  [preloadFilesRef]=\"preloadFilesRef\"\n  [uploadOptions]=\"uploadOptions\"\n  [filePath]=\"filePath\"\n  [setCustomUploadOptions]=\"setCustomUploadOptions\"\n  (deleteUploadedFileEvent)=\"_onDeleteUploadedFile($event)\"\n>\n</d-multiple-upload-view>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-input-group{position:relative;display:flex;align-items:center;border-collapse:separate;width:100%}.devui-input-group:not(.disabled):hover .devui-input-group-addon{border-color:#5e7ce0;border-color:var(--devui-form-control-line-active, #5e7ce0);background-color:#f2f2f3;background-color:var(--devui-dividing-line, #f2f2f3);font-weight:700}.devui-input-group:not(.disabled):hover .devui-form-control{border-color:#5e7ce0;border-color:var(--devui-form-control-line-active, #5e7ce0);border-right-color:#d7d8da;border-right-color:var(--devui-form-control-line, #d7d8da)}.devui-input-group:not(.disabled) .devui-input-group-addon:active{border-color:#5e7ce0;border-color:var(--devui-form-control-line-active, #5e7ce0);border-right-color:#d7d8da;border-right-color:var(--devui-form-control-line, #d7d8da);background-color:#f2f2f3;background-color:var(--devui-dividing-line, #f2f2f3)}.devui-input-group .devui-input-group-addon{width:36px;white-space:nowrap;font-size:16px;font-size:var(--devui-font-size-icon, 16px);font-weight:400;line-height:1;color:#252b3a;color:var(--devui-text, #252b3a);background-color:#f5f5f5;background-color:var(--devui-area, #f5f5f5);border-top:1px solid #d7d8da;border-top:1px solid var(--devui-form-control-line, #d7d8da);border-bottom:1px solid #d7d8da;border-bottom:1px solid var(--devui-form-control-line, #d7d8da);border-right:1px solid #d7d8da;border-right:1px solid var(--devui-form-control-line, #d7d8da);border-radius:0 2px 2px 0;border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0;transition:border-color .3s cubic-bezier(.645,.045,.355,1),background-color .3s cubic-bezier(.645,.045,.355,1);transition:border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));cursor:pointer;height:100%;position:relative;display:inline-block}.devui-input-group .devui-input-group-addon svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.devui-input-group .devui-form-control{cursor:pointer;display:block;width:100%;min-height:28px;height:auto;height:initial;padding:4px 8px;font-size:12px;font-size:var(--devui-font-size, 12px);line-height:1.5;background-image:none;border:1px solid #d7d8da;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:2px 0 0 2px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px);transition:border-color .3s cubic-bezier(.645,.045,.355,1),box-shadow .3s cubic-bezier(.645,.045,.355,1);transition:border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-input-group .devui-form-control.devui-files-list{max-height:52px;padding:2px 2px 0;overflow-x:hidden;overflow-y:auto;max-width:100%}.devui-input-group .devui-form-control.devui-files-list .devui-file-item{height:22px;line-height:22px;padding:0 48px 0 12px}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag{position:relative;background-color:#e9edfa;background-color:var(--devui-label-bg, #e9edfa);border-radius:2px;border-radius:var(--devui-border-radius, 2px);max-width:100%}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .devui-filename{height:100%;display:inline-block;vertical-align:middle;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .icon{position:absolute;cursor:pointer;right:8px;top:50%;transform:translateY(-50%)}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .icon.icon-right{color:#50d4ab;color:var(--devui-success, #50d4ab)}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .icon.icon-running{font-size:16px}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .icon.devui-upload-delete-file-button{margin-right:20px}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .icon.devui-uploading-delete,.devui-input-group .devui-form-control.devui-files-list .devui-file-tag:hover .devui-upload-progress,.devui-input-group .devui-form-control.devui-files-list .devui-file-tag:hover .icon-right{display:none}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag:hover .icon-close{display:inline-block}.devui-input-group.disabled .devui-upload-placeholder{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.devui-input-group .devui-upload-placeholder{max-height:28px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#babbc0;color:var(--devui-placeholder, #babbc0)}:host ::ng-deep .devui-upload-progress{width:16px;height:16px}.devui-input-group.disabled .devui-form-control,.devui-input-group.disabled .devui-input-group-addon{cursor:not-allowed;background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5);border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6);color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}svg.svg-icon-dot>path{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.devui-form-control{outline:none}.devui-input-group.disabled .devui-upload-delete-file-button{cursor:not-allowed;pointer-events:none}.devui-loading{color:#71757f;color:var(--devui-aide-text, #71757f)}.devui-failed-color{color:#f66f6a;color:var(--devui-danger, #f66f6a)}.devui-upload-tip{height:18px;margin-top:8px;font-size:12px}.devui-upload-tip .icon{margin-right:8px;font-size:16px;vertical-align:middle}.devui-upload-tip .icon-right-o{color:#50d4ab;color:var(--devui-success, #50d4ab)}.devui-upload-tip .devui-upload-failed{color:#f66f6a;color:var(--devui-danger, #f66f6a)}.devui-upload-tip a{color:#526ecc;color:var(--devui-link, #526ecc);cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.ButtonComponent, selector: "d-button", inputs: ["id", "type", "bsStyle", "shape", "bsSize", "bsPosition", "bordered", "icon", "disabled", "showLoading", "width", "autofocus", "loadingTemplateRef"], outputs: ["btnClick"] }, { kind: "component", type: i6.ProgressComponent, selector: "d-progress", inputs: ["percentage", "percentageText", "barbgcolor", "strokeColor", "height", "strokeWidth", "isCircle", "type", "showContent"] }, { kind: "component", type: i7.MultipleUploadViewComponent, selector: "d-multiple-upload-view", inputs: ["uploadOptions", "preloadFilesRef", "uploadedFiles", "uploadedFilesRef", "filePath", "setCustomUploadOptions"], outputs: ["deleteUploadedFileEvent"] }, { kind: "directive", type: i8.FileDropDirective, selector: "[d-file-drop]", inputs: ["enableDrop", "isSingle"], outputs: ["fileOver", "fileDrop"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MultipleUploadComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-multiple-upload', exportAs: 'dMultipleUpload', preserveWhitespaces: false, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => MultipleUploadComponent),
                            multi: true
                        }
                    ], template: "<div\n  d-file-drop\n  [enableDrop]=\"enableDrop\"\n  (fileDrop)=\"onFileDrop($event)\"\n  (fileOver)=\"onFileOver($event)\"\n  (fileSelect)=\"onFileSelect($event)\"\n  [ngStyle]=\"{ border: isDropOVer ? '1px solid #15bf15' : '0' }\"\n  style=\"display: flex\"\n>\n  <div class=\"devui-input-group\" [class.disabled]=\"disabled\" (click)=\"onClick($event)\">\n    <div *ngIf=\"dMultipleUploadView.fileUploaders.length === 0\" class=\"devui-form-control devui-upload-placeholder\">\n      {{ placeholderText ? placeholderText : i18nText?.chooseFile }}\n    </div>\n    <ul *ngIf=\"dMultipleUploadView.fileUploaders.length > 0\" class=\"devui-form-control devui-files-list\">\n      <li\n        *ngFor=\"let fileUploader of dMultipleUploadView.fileUploaders; let index = index\"\n        class=\"devui-file-item devui-file-tag\"\n        style=\"display: inline-block; margin: 0 2px 2px 0\"\n        title=\"{{ fileUploader.file.name }}\"\n      >\n        <span class=\"devui-filename {{ fileUploader.status === UploadStatus.failed ? 'devui-failed-color' : '' }}\">\n          {{ fileUploader.file.name }}\n        </span>\n        <span\n          class=\"icon icon-close {{ fileUploader.status === UploadStatus.failed ? 'devui-upload-delete-file-button' : '' }}\n          {{\n            fileUploader.status === UploadStatus.uploading || fileUploader.status === UploadStatus.uploaded ? 'devui-uploading-delete' : ''\n          }}\"\n          (click)=\"deleteFile($event, fileUploader.file)\"\n        >\n        </span>\n        <div *ngIf=\"fileUploader.status === UploadStatus.uploading\" class=\"icon devui-upload-progress\">\n          <d-progress\n            [type]=\"'circle'\"\n            [percentage]=\"fileUploader.percentage\"\n            [strokeColor]=\"'#50D4AB'\"\n            [strokeWidth]=\"8\"\n            [showContent]=\"false\"\n          >\n          </d-progress>\n        </div>\n        <span *ngIf=\"fileUploader.status === UploadStatus.failed\" class=\"icon icon-running\" (click)=\"upload($event, fileUploader)\"> </span>\n        <span *ngIf=\"fileUploader.status === UploadStatus.uploaded\" class=\"icon icon-right\"></span>\n      </li>\n    </ul>\n    <span class=\"devui-input-group-addon\">\n      <svg class=\"svg-icon-dot\" height=\"1em\" width=\"1em\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"m400.31892 176.970574c0-61.574381 50.113351-111.680569 111.679545-111.680569 61.576427 0 111.680569 50.106188 111.680569 111.680569 0 61.568241-50.104141 111.679545-111.680569 111.679545-61.566194 0-111.679545-50.111304-111.679545-111.679545zm0 335.028403c0-61.568241 50.113351-111.678522 111.679545-111.678522 61.576427 0 111.680569 50.110281 111.680569 111.678522 0 61.574381-50.105165 111.682615-111.680569 111.682615-61.566194 0-111.679545-50.108235-111.679545-111.682615zm0 335.037612c0-61.572334 50.113351-111.679545 111.679545-111.679545 61.575404 0 111.680569 50.107211 111.680569 111.679545 0 61.567217-50.105165 111.672382-111.680569 111.672382-61.566194 0-111.679545-50.105164-111.679545-111.672382zm0 0\"\n        />\n      </svg>\n    </span>\n  </div>\n  <d-button\n    *ngIf=\"!autoUpload && !withoutBtn\"\n    [disabled]=\"disabled\"\n    (btnClick)=\"upload($event)\"\n    [style.margin-left.px]=\"8\"\n    bsStyle=\"common\"\n  >\n    {{ uploadText || i18nText?.upload }}\n  </d-button>\n</div>\n<ng-container *ngIf=\"showTip\">\n  <div class=\"devui-upload-tip\">\n    <span *ngIf=\"getStatus() === 'selected'\" class=\"devui-loading\">{{ uploadTips }}</span>\n    <span *ngIf=\"getStatus() === 'uploading'\" class=\"devui-loading\">\n      <span style=\"margin-right: 8px\">{{ uploadTips }}</span>\n      <a (click)=\"cancelUpload()\">{{ i18nText?.cancelUpload }}</a>\n    </span>\n    <div *ngIf=\"getStatus() === 'uploaded'\" class=\"devui-loaded\">\n      <i class=\"icon icon-right-o\"></i>\n      <span style=\"vertical-align: middle\">{{ i18nText?.uploadSuccess }}</span>\n    </div>\n    <div *ngIf=\"getStatus() === 'failed'\" class=\"devui-upload-failed\">\n      <i class=\"icon icon-info-o\"></i>\n      <span style=\"vertical-align: middle\">\n        <span style=\"margin-right: 8px\">{{ uploadTips }}</span>\n        <a (click)=\"upload($event)\">{{ i18nText?.reUpload }}</a>\n      </span>\n    </div>\n  </div>\n</ng-container>\n<d-multiple-upload-view\n  #dMultipleUploadView\n  [uploadedFiles]=\"uploadedFiles\"\n  [uploadedFilesRef]=\"uploadedFilesRef\"\n  [preloadFilesRef]=\"preloadFilesRef\"\n  [uploadOptions]=\"uploadOptions\"\n  [filePath]=\"filePath\"\n  [setCustomUploadOptions]=\"setCustomUploadOptions\"\n  (deleteUploadedFileEvent)=\"_onDeleteUploadedFile($event)\"\n>\n</d-multiple-upload-view>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-input-group{position:relative;display:flex;align-items:center;border-collapse:separate;width:100%}.devui-input-group:not(.disabled):hover .devui-input-group-addon{border-color:#5e7ce0;border-color:var(--devui-form-control-line-active, #5e7ce0);background-color:#f2f2f3;background-color:var(--devui-dividing-line, #f2f2f3);font-weight:700}.devui-input-group:not(.disabled):hover .devui-form-control{border-color:#5e7ce0;border-color:var(--devui-form-control-line-active, #5e7ce0);border-right-color:#d7d8da;border-right-color:var(--devui-form-control-line, #d7d8da)}.devui-input-group:not(.disabled) .devui-input-group-addon:active{border-color:#5e7ce0;border-color:var(--devui-form-control-line-active, #5e7ce0);border-right-color:#d7d8da;border-right-color:var(--devui-form-control-line, #d7d8da);background-color:#f2f2f3;background-color:var(--devui-dividing-line, #f2f2f3)}.devui-input-group .devui-input-group-addon{width:36px;white-space:nowrap;font-size:16px;font-size:var(--devui-font-size-icon, 16px);font-weight:400;line-height:1;color:#252b3a;color:var(--devui-text, #252b3a);background-color:#f5f5f5;background-color:var(--devui-area, #f5f5f5);border-top:1px solid #d7d8da;border-top:1px solid var(--devui-form-control-line, #d7d8da);border-bottom:1px solid #d7d8da;border-bottom:1px solid var(--devui-form-control-line, #d7d8da);border-right:1px solid #d7d8da;border-right:1px solid var(--devui-form-control-line, #d7d8da);border-radius:0 2px 2px 0;border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0;transition:border-color .3s cubic-bezier(.645,.045,.355,1),background-color .3s cubic-bezier(.645,.045,.355,1);transition:border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));cursor:pointer;height:100%;position:relative;display:inline-block}.devui-input-group .devui-input-group-addon svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.devui-input-group .devui-form-control{cursor:pointer;display:block;width:100%;min-height:28px;height:auto;height:initial;padding:4px 8px;font-size:12px;font-size:var(--devui-font-size, 12px);line-height:1.5;background-image:none;border:1px solid #d7d8da;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:2px 0 0 2px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px);transition:border-color .3s cubic-bezier(.645,.045,.355,1),box-shadow .3s cubic-bezier(.645,.045,.355,1);transition:border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-input-group .devui-form-control.devui-files-list{max-height:52px;padding:2px 2px 0;overflow-x:hidden;overflow-y:auto;max-width:100%}.devui-input-group .devui-form-control.devui-files-list .devui-file-item{height:22px;line-height:22px;padding:0 48px 0 12px}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag{position:relative;background-color:#e9edfa;background-color:var(--devui-label-bg, #e9edfa);border-radius:2px;border-radius:var(--devui-border-radius, 2px);max-width:100%}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .devui-filename{height:100%;display:inline-block;vertical-align:middle;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .icon{position:absolute;cursor:pointer;right:8px;top:50%;transform:translateY(-50%)}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .icon.icon-right{color:#50d4ab;color:var(--devui-success, #50d4ab)}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .icon.icon-running{font-size:16px}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .icon.devui-upload-delete-file-button{margin-right:20px}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag .icon.devui-uploading-delete,.devui-input-group .devui-form-control.devui-files-list .devui-file-tag:hover .devui-upload-progress,.devui-input-group .devui-form-control.devui-files-list .devui-file-tag:hover .icon-right{display:none}.devui-input-group .devui-form-control.devui-files-list .devui-file-tag:hover .icon-close{display:inline-block}.devui-input-group.disabled .devui-upload-placeholder{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.devui-input-group .devui-upload-placeholder{max-height:28px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#babbc0;color:var(--devui-placeholder, #babbc0)}:host ::ng-deep .devui-upload-progress{width:16px;height:16px}.devui-input-group.disabled .devui-form-control,.devui-input-group.disabled .devui-input-group-addon{cursor:not-allowed;background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5);border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6);color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}svg.svg-icon-dot>path{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.devui-form-control{outline:none}.devui-input-group.disabled .devui-upload-delete-file-button{cursor:not-allowed;pointer-events:none}.devui-loading{color:#71757f;color:var(--devui-aide-text, #71757f)}.devui-failed-color{color:#f66f6a;color:var(--devui-danger, #f66f6a)}.devui-upload-tip{height:18px;margin-top:8px;font-size:12px}.devui-upload-tip .icon{margin-right:8px;font-size:16px;vertical-align:middle}.devui-upload-tip .icon-right-o{color:#50d4ab;color:var(--devui-success, #50d4ab)}.devui-upload-tip .devui-upload-failed{color:#f66f6a;color:var(--devui-danger, #f66f6a)}.devui-upload-tip a{color:#526ecc;color:var(--devui-link, #526ecc);cursor:pointer}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.SelectFiles }, { type: i2.I18nService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i3.ToastService }]; }, propDecorators: { uploadOptions: [{
                type: Input
            }], fileOptions: [{
                type: Input
            }], autoUpload: [{
                type: Input
            }], withoutBtn: [{
                type: Input
            }], showTip: [{
                type: Input
            }], uploadedFiles: [{
                type: Input
            }], uploadedFilesRef: [{
                type: Input
            }], preloadFilesRef: [{
                type: Input
            }], filePath: [{
                type: Input
            }], placeholderText: [{
                type: Input
            }], uploadText: [{
                type: Input
            }], confirmText: [{
                type: Input
            }], oneTimeUpload: [{
                type: Input
            }], disabled: [{
                type: Input
            }], beforeUpload: [{
                type: Input
            }], setCustomUploadOptions: [{
                type: Input
            }], enableDrop: [{
                type: Input
            }], successEvent: [{
                type: Output
            }], errorEvent: [{
                type: Output
            }], deleteUploadedFileEvent: [{
                type: Output
            }], fileDrop: [{
                type: Output
            }], fileOver: [{
                type: Output
            }], fileSelect: [{
                type: Output
            }], multipleUploadViewComponent: [{
                type: ViewChild,
                args: ['dMultipleUploadView', { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 