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, merge } from 'rxjs';
import { last, map, mergeMap, toArray } from 'rxjs/operators';
import { FileUploader } from './file-uploader.class';
import { IFileOptions, IUploadOptions, UploadStatus } from './file-uploader.types';
import { SelectFiles } from './select-files.utils';
import { SingleUploadViewComponent } from './single-upload-view.component';
import * as i0 from "@angular/core";
import * as i1 from "ng-devui/i18n";
import * as i2 from "./select-files.utils";
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 "./single-upload-view.component";
import * as i8 from "./file-drop.directive";
export class SingleUploadComponent {
    constructor(i18n, selectFiles, doc, toastService) {
        this.i18n = i18n;
        this.selectFiles = selectFiles;
        this.doc = doc;
        this.toastService = toastService;
        this.autoUpload = false;
        this.withoutBtn = false;
        this.showTip = false;
        this.uploadedFiles = [];
        this.enableDrop = false;
        this.disabled = false;
        this.successEvent = new EventEmitter();
        this.errorEvent = new EventEmitter();
        this.errorChunkEvent = new EventEmitter();
        this.deleteUploadedFileEvent = new EventEmitter();
        this.fileDrop = new EventEmitter();
        this.fileOver = new EventEmitter();
        this.fileSelect = new EventEmitter();
        this.UploadStatus = UploadStatus;
        this.isDropOVer = false;
        this.defaultChunkSize = 1024 * 1024 * 20; // 单位是byte 默认分片大小 20兆。
        this.errorMsg = [];
        this.onChange = (_) => null;
        this.onTouched = () => null;
        this.document = this.doc;
    }
    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));
        });
    }
    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;
        });
    }
    _dealFiles(observale) {
        observale
            .pipe(map((file) => {
            this.singleUploadViewComponent.addFile(file);
            return file;
        }))
            .subscribe(() => {
            this.singleUploadViewComponent.uploadedFilesComponent.cleanUploadedFiles();
            this.checkValid();
            const file = this.singleUploadViewComponent.fileUploaders[0]?.file;
            this.onChange(file);
            if (file) {
                this.onFileSelect(file);
            }
            if (this.autoUpload) {
                this.upload();
            }
        }, (error) => {
            this.alertMsg(error.message);
        });
    }
    checkValid() {
        this.singleUploadViewComponent.fileUploaders.forEach((fileUploader) => {
            const checkResult = this.selectFiles._validateFiles(fileUploader.file, this.fileOptions.accept, fileUploader.uploadOptions);
            if (checkResult.checkError) {
                this.singleUploadViewComponent.deletePreUploadFile(fileUploader.file);
                this.alertMsg(checkResult.errorMsg);
            }
        });
    }
    onClick($event) {
        if (this.disabled ||
            (this.singleUploadViewComponent.fileUploaders[0] && this.singleUploadViewComponent.fileUploaders[0].status === UploadStatus.uploading)) {
            return;
        }
        this._dealFiles(this.selectFiles.triggerSelectFiles(this.fileOptions, this.uploadOptions));
    }
    get filename() {
        return (this.singleUploadViewComponent.getFiles()[0] || {}).name || '';
    }
    onFileDrop(files) {
        this.isDropOVer = false;
        this._dealFiles(this.selectFiles.triggerDropFiles(this.fileOptions, this.uploadOptions, files));
        this.fileDrop.emit(files[0]);
    }
    onFileOver(event) {
        this.isDropOVer = event;
        this.fileOver.emit(event);
    }
    onFileSelect(file) {
        this.fileSelect.emit(file);
    }
    upload() {
        this.canUpload().then((canUpload) => {
            if (!canUpload) {
                return;
            }
            const tempNode = this.document.getElementById('d-upload-temp');
            if (tempNode) {
                this.document.body.removeChild(tempNode);
            }
            if (this.uploadOptions.isChunked && this.isNeedChunk()) {
                this.sliceUpload();
            }
            else {
                this.singleUploadViewComponent
                    .upload()
                    .pipe(last())
                    .subscribe((results) => {
                    this.successEvent.emit(results);
                    results.forEach((result) => {
                        this.singleUploadViewComponent.uploadedFilesComponent.addAndOverwriteFile(result.file);
                    });
                }, (error) => {
                    if (this.singleUploadViewComponent.fileUploaders[0]) {
                        this.singleUploadViewComponent.fileUploaders[0].percentage = 0;
                    }
                    this.singleUploadViewComponent.uploadedFilesComponent.cleanUploadedFiles();
                    this.errorEvent.emit(error);
                });
            }
        });
    }
    isNeedChunk() {
        if (this.singleUploadViewComponent.fileUploaders[0]?.file) {
            return this.singleUploadViewComponent.fileUploaders[0].file.size > this.uploadOptions.chunkSize || this.defaultChunkSize;
        }
    }
    async sliceUpload() {
        const fileUploaders = this.singleUploadViewComponent.fileUploaders;
        for (let i = 0; i < fileUploaders.length; i++) {
            const fileChunkList = this.createFileChunk(fileUploaders[i].file);
            const currentFile = fileUploaders[i];
            // 并发上传
            const uploadObservable = this.uploadChunkList(fileChunkList, currentFile);
            (await uploadObservable).subscribe((results) => {
                currentFile.percentage = 100;
                currentFile.status = UploadStatus.uploaded;
                const successRes = [{
                        file: currentFile.file,
                        response: results[0].response,
                        chunkList: results
                    }];
                this.successEvent.emit(successRes);
                results.forEach((result) => {
                    this.singleUploadViewComponent.uploadedFilesComponent.addAndOverwriteFile(result.file);
                });
            }, (error) => {
                error.file = currentFile.file;
                currentFile.status = UploadStatus.failed;
                this.singleUploadViewComponent.uploadedFilesComponent.cleanUploadedFiles();
                this.errorEvent.emit(error);
            });
        }
    }
    async uploadChunkList(fileChunkList, currentFile) {
        currentFile.status = UploadStatus.uploading;
        currentFile.percentage = 0;
        let uploads = [];
        const chunkPercentage = (1 / fileChunkList.length) * 100;
        uploads = fileChunkList.map((fileUploader) => {
            fileUploader.percentage = 0;
            return from(fileUploader.send());
        });
        if (uploads.length > 0) {
            const uploadObservable = merge(...uploads);
            (await uploadObservable).subscribe((results) => {
                currentFile.percentage = currentFile.percentage + chunkPercentage;
            }, (error) => {
                currentFile.status = UploadStatus.failed;
                this.singleUploadViewComponent.uploadedFilesComponent.cleanUploadedFiles();
                this.errorChunkEvent.emit(error);
            });
            return merge(...uploads).pipe(toArray());
        }
        return from(Promise.reject(new Error('no files')));
    }
    // 生成分片上传的数组
    createFileChunk(file) {
        const chunkSize = this.uploadOptions.chunkSize || this.defaultChunkSize;
        const { name, type, lastModified, size } = file;
        const fileId = new Date().getTime();
        const fileChunkList = [];
        let fileSliceStart = 0;
        let chunkedFileIndex = 0;
        const chunks = Math.ceil(size / chunkSize);
        while (fileSliceStart < file.size) {
            chunkedFileIndex = chunkedFileIndex + 1;
            const slicedFile = file.slice(fileSliceStart, fileSliceStart + chunkSize);
            const newChunkFile = new File([slicedFile], `${fileId}-${chunkedFileIndex}-${chunks}-${size}-${lastModified}-${name}`, { type });
            fileChunkList.push(new FileUploader(newChunkFile, this.uploadOptions));
            fileSliceStart += chunkSize;
        }
        return fileChunkList;
    }
    canUpload() {
        let uploadResult = Promise.resolve(true);
        if (this.beforeUpload) {
            const result = this.beforeUpload(this.singleUploadViewComponent.getFullFiles()[0] || {});
            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(null);
    }
    deleteFile($event) {
        $event.stopPropagation();
        const files = this.singleUploadViewComponent.getFiles();
        this.singleUploadViewComponent.deleteFile(files[0]);
    }
    alertMsg(errorMsg) {
        this.toastService.open({
            value: [{ severity: 'warn', content: errorMsg }],
        });
    }
    ngOnDestroy() {
        if (this.i18nSubscription) {
            this.i18nSubscription.unsubscribe();
        }
    }
}
SingleUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SingleUploadComponent, deps: [{ token: i1.I18nService }, { token: i2.SelectFiles }, { token: DOCUMENT }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
SingleUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SingleUploadComponent, selector: "d-single-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", beforeUpload: "beforeUpload", dynamicUploadOptionsFn: "dynamicUploadOptionsFn", enableDrop: "enableDrop", disabled: "disabled" }, outputs: { successEvent: "successEvent", errorEvent: "errorEvent", errorChunkEvent: "errorChunkEvent", deleteUploadedFileEvent: "deleteUploadedFileEvent", fileDrop: "fileDrop", fileOver: "fileOver", fileSelect: "fileSelect" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => SingleUploadComponent),
            multi: true
        }
    ], viewQueries: [{ propertyName: "singleUploadViewComponent", first: true, predicate: ["dSingleUploadView"], descendants: true, static: true }], exportAs: ["dSingleUpload"], ngImport: i0, template: "<div\n  d-file-drop\n  [enableDrop]=\"enableDrop\"\n  [isSingle]=\"true\"\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\n    [class.disabled]=\"this.disabled || dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading\"\n    (click)=\"onClick($event)\"\n    class=\"devui-input-group\"\n  >\n    <div class=\"devui-form-control devui-files-list\">\n      <div *ngIf=\"!filename\" class=\"devui-file-item devui-upload-placeholder\">\n        {{ placeholderText ? placeholderText : i18nText?.chooseFile }}\n      </div>\n      <div *ngIf=\"!!filename\" class=\"devui-file-tag devui-file-item\" title=\"{{ filename }}\">\n        <span class=\"devui-filename {{ dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed ? 'devui-failed-color' : '' }}\">\n          {{ filename }}\n        </span>\n        <span\n          class=\"icon icon-close\n            {{ dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed ? 'devui-upload-delete-file-button' : '' }}\n            {{\n            dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading ||\n            dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploaded\n              ? 'devui-uploading-delete'\n              : ''\n          }}\"\n          (click)=\"deleteFile($event)\"\n        >\n        </span>\n        <div *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading\" class=\"icon devui-upload-progress\">\n          <d-progress\n            [type]=\"'circle'\"\n            [percentage]=\"dSingleUploadView.fileUploaders[0].percentage\"\n            [strokeColor]=\"'#50D4AB'\"\n            [strokeWidth]=\"8\"\n            [showContent]=\"false\"\n          >\n          </d-progress>\n        </div>\n        <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed\" class=\"icon icon-running\" (click)=\"upload()\">\n        </span>\n        <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploaded\" class=\"icon icon-right\"></span>\n      </div>\n    </div>\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    (btnClick)=\"upload()\"\n    bsStyle=\"common\"\n    [style.margin-left.px]=\"8\"\n    [disabled]=\"\n      disabled ||\n      dSingleUploadView.uploadedFilesComponent.uploadedFiles.length > 0 ||\n      dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading\n    \"\n  >\n    <span *ngIf=\"!dSingleUploadView.fileUploaders[0] || dSingleUploadView.fileUploaders[0]?.status === UploadStatus.preLoad\">{{\n      uploadText || i18nText?.upload\n    }}</span>\n    <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading\">{{ i18nText?.uploading }}</span>\n    <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploaded\">{{ i18nText?.uploaded }}</span>\n    <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed\">{{ i18nText?.uploadFailed }}</span>\n  </d-button>\n</div>\n<ng-container *ngIf=\"showTip\">\n  <div class=\"devui-upload-tip\">\n    <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading\" class=\"devui-loading\">\n      {{ i18nText?.uploading }}\n    </span>\n    <div *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.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=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.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\">{{ i18nText?.uploadFailed }}</span>\n        <a (click)=\"upload()\">{{ i18nText?.reUpload }}</a>\n      </span>\n    </div>\n  </div>\n</ng-container>\n<d-single-upload-view\n  #dSingleUploadView=\"dSingleUploadView\"\n  [uploadOptions]=\"uploadOptions\"\n  [filePath]=\"filePath\"\n  [uploadedFiles]=\"uploadedFiles\"\n  [uploadedFilesRef]=\"uploadedFilesRef\"\n  [preloadFilesRef]=\"preloadFilesRef\"\n  [dynamicUploadOptionsFn]=\"dynamicUploadOptionsFn\"\n  (deleteUploadedFileEvent)=\"_onDeleteUploadedFile($event)\"\n>\n</d-single-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.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.SingleUploadViewComponent, selector: "d-single-upload-view", inputs: ["uploadOptions", "preloadFilesRef", "uploadedFiles", "uploadedFilesRef", "filePath", "dynamicUploadOptionsFn"], outputs: ["deleteUploadedFileEvent"], exportAs: ["dSingleUploadView"] }, { 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: SingleUploadComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-single-upload', exportAs: 'dSingleUpload', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => SingleUploadComponent),
                            multi: true
                        }
                    ], preserveWhitespaces: false, template: "<div\n  d-file-drop\n  [enableDrop]=\"enableDrop\"\n  [isSingle]=\"true\"\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\n    [class.disabled]=\"this.disabled || dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading\"\n    (click)=\"onClick($event)\"\n    class=\"devui-input-group\"\n  >\n    <div class=\"devui-form-control devui-files-list\">\n      <div *ngIf=\"!filename\" class=\"devui-file-item devui-upload-placeholder\">\n        {{ placeholderText ? placeholderText : i18nText?.chooseFile }}\n      </div>\n      <div *ngIf=\"!!filename\" class=\"devui-file-tag devui-file-item\" title=\"{{ filename }}\">\n        <span class=\"devui-filename {{ dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed ? 'devui-failed-color' : '' }}\">\n          {{ filename }}\n        </span>\n        <span\n          class=\"icon icon-close\n            {{ dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed ? 'devui-upload-delete-file-button' : '' }}\n            {{\n            dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading ||\n            dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploaded\n              ? 'devui-uploading-delete'\n              : ''\n          }}\"\n          (click)=\"deleteFile($event)\"\n        >\n        </span>\n        <div *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading\" class=\"icon devui-upload-progress\">\n          <d-progress\n            [type]=\"'circle'\"\n            [percentage]=\"dSingleUploadView.fileUploaders[0].percentage\"\n            [strokeColor]=\"'#50D4AB'\"\n            [strokeWidth]=\"8\"\n            [showContent]=\"false\"\n          >\n          </d-progress>\n        </div>\n        <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed\" class=\"icon icon-running\" (click)=\"upload()\">\n        </span>\n        <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploaded\" class=\"icon icon-right\"></span>\n      </div>\n    </div>\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    (btnClick)=\"upload()\"\n    bsStyle=\"common\"\n    [style.margin-left.px]=\"8\"\n    [disabled]=\"\n      disabled ||\n      dSingleUploadView.uploadedFilesComponent.uploadedFiles.length > 0 ||\n      dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading\n    \"\n  >\n    <span *ngIf=\"!dSingleUploadView.fileUploaders[0] || dSingleUploadView.fileUploaders[0]?.status === UploadStatus.preLoad\">{{\n      uploadText || i18nText?.upload\n    }}</span>\n    <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading\">{{ i18nText?.uploading }}</span>\n    <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploaded\">{{ i18nText?.uploaded }}</span>\n    <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed\">{{ i18nText?.uploadFailed }}</span>\n  </d-button>\n</div>\n<ng-container *ngIf=\"showTip\">\n  <div class=\"devui-upload-tip\">\n    <span *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading\" class=\"devui-loading\">\n      {{ i18nText?.uploading }}\n    </span>\n    <div *ngIf=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.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=\"dSingleUploadView.fileUploaders[0]?.status === UploadStatus.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\">{{ i18nText?.uploadFailed }}</span>\n        <a (click)=\"upload()\">{{ i18nText?.reUpload }}</a>\n      </span>\n    </div>\n  </div>\n</ng-container>\n<d-single-upload-view\n  #dSingleUploadView=\"dSingleUploadView\"\n  [uploadOptions]=\"uploadOptions\"\n  [filePath]=\"filePath\"\n  [uploadedFiles]=\"uploadedFiles\"\n  [uploadedFilesRef]=\"uploadedFilesRef\"\n  [preloadFilesRef]=\"preloadFilesRef\"\n  [dynamicUploadOptionsFn]=\"dynamicUploadOptionsFn\"\n  (deleteUploadedFileEvent)=\"_onDeleteUploadedFile($event)\"\n>\n</d-single-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.I18nService }, { type: i2.SelectFiles }, { 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
            }], beforeUpload: [{
                type: Input
            }], dynamicUploadOptionsFn: [{
                type: Input
            }], enableDrop: [{
                type: Input
            }], disabled: [{
                type: Input
            }], successEvent: [{
                type: Output
            }], errorEvent: [{
                type: Output
            }], errorChunkEvent: [{
                type: Output
            }], deleteUploadedFileEvent: [{
                type: Output
            }], fileDrop: [{
                type: Output
            }], fileOver: [{
                type: Output
            }], fileSelect: [{
                type: Output
            }], singleUploadViewComponent: [{
                type: ViewChild,
                args: ['dSingleUploadView', { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 