import { __decorate } from "tslib";
import { Component, EventEmitter, forwardRef, Input, Output, ViewChild, } from '@angular/core';
import { NG_VALUE_ACCESSOR, UntypedFormControl, } from '@angular/forms';
import autobind from 'autobind-decorator';
import bytes from 'bytes';
import * as mime from 'mime';
import { EvoBaseControl } from '../../common/evo-base-control';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
import * as i3 from "../evo-alert/evo-alert.component";
import * as i4 from "../evo-button/components/evo-button/evo-button.component";
import * as i5 from "../evo-icon/evo-icon.component";
import * as i6 from "../../directives/evo-ui-class.directive";
import * as i7 from "../../pipes/declination.pipe";
import * as i8 from "../../pipes/safe-html.pipe";
export class EvoUploadComponent extends EvoBaseControl {
    set accept(extensions) {
        if (extensions) {
            this.acceptedMimeTypes = extensions
                .split(',')
                .map(extension => mime.getType(extension));
        }
    }
    set fileSizeLimit(fileSize) {
        this.filesSizeLimitText = fileSize;
        this.filesSizeLimitInBytes = bytes(fileSize);
    }
    constructor(formBuilder, injector) {
        super(injector);
        this.formBuilder = formBuilder;
        this.injector = injector;
        this.dropZoneLabel = 'Перетащите сюда файлы для загрузки';
        this.hideClearButton = false;
        this.hideSubmitButton = false;
        this.clickableFiles = false;
        this.earlyValidation = false;
        this.loading = false;
        this.submit = new EventEmitter();
        this.addFiles = new EventEmitter();
        this.remove = new EventEmitter();
        this.clickFile = new EventEmitter();
        this.isDisabled = false;
        this.filesForm = this.formBuilder.array([], [this.maxFilesValidator]);
        this.states = {
            isDragOver: false,
        };
        this.onChange = (value) => { };
        this.onTouched = () => { };
    }
    ngOnInit() {
        this.subscribeOnFormChanges();
    }
    ngAfterContentInit() {
        this.mergeControlsErrors();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.isDisabled = isDisabled;
        if (!isDisabled) {
            this.mergeControlsErrors();
        }
    }
    writeValue(fileList) {
        if (fileList && fileList.length > 0) {
            if (fileList instanceof Array || fileList instanceof FileList) {
                this.wipeUploadList();
                if (this.earlyValidation) {
                    this.earlyValidationFn(fileList);
                    if (this.filesForm.errors) {
                        return;
                    }
                }
                this.processFiles(fileList);
            }
            else {
                throw Error('[EvoUiKit]: wrong initial value passed to "evo-upload" component. Only FileList and File[] are allowed');
            }
        }
    }
    getControlError(control) {
        if (!control.errors) {
            return null;
        }
        return Object.keys(control.errors)[0];
    }
    handleDragOver(event) {
        event.preventDefault();
        event.stopPropagation();
        if (this.loading) {
            return;
        }
        this.states.isDragOver = true;
    }
    handleDragLeave(event) {
        event.preventDefault();
        event.stopPropagation();
        this.states.isDragOver = false;
    }
    handleDrop(event) {
        event.preventDefault();
        event.stopPropagation();
        const files = event.dataTransfer.files;
        this.states.isDragOver = false;
        if (files.length) {
            if (this.earlyValidation) {
                this.earlyValidationFn(files);
                if (this.filesForm.errors) {
                    return;
                }
            }
            this.addFiles.emit(files);
            this.processFiles(files);
        }
    }
    handleItemRemove(index) {
        if (this.loading || this.isDisabled) {
            return;
        }
        this.filesForm.removeAt(index);
        this.remove.emit(index);
    }
    handleResetButtonClick() {
        if (this.loading || this.isDisabled) {
            return;
        }
        this.wipeUploadList();
    }
    handleSubmitButtonClick() {
        this.submit.emit(this.filesForm.value);
    }
    inputChange(files) {
        if (this.earlyValidation) {
            this.earlyValidationFn(files);
            if (this.filesForm.errors) {
                return;
            }
        }
        this.addFiles.emit(files);
        this.processFiles(files);
    }
    earlyValidationFn(files) {
        this.filesForm.setErrors(null);
        const filesArray = Array.from(files);
        const errors = [];
        if (this.maxFiles && this.isFilesLengthValid(filesArray)) {
            errors.push({ maxFiles: true });
        }
        if (this.filesSizeLimitInBytes && !this.isFilesSizeValid(filesArray)) {
            errors.push({ size: true });
        }
        if (this.acceptedMimeTypes && !this.isFilesExtensionValid(filesArray)) {
            errors.push({ extension: true });
        }
        if (errors.length) {
            this.filesForm.setErrors(Object.assign({}, ...errors));
            this.mergeControlsErrors();
        }
    }
    isFilesLengthValid(files) {
        return this.maxFiles < (files.length + this.filesForm.controls.length);
    }
    isFilesSizeValid(files) {
        return !files.some(({ size }) => this.filesSizeLimitInBytes < size);
    }
    isFilesExtensionValid(files) {
        return files.every(({ type }) => {
            return this.acceptedMimeTypes.includes(type);
        });
    }
    processFiles(files) {
        if (this.loading) {
            return;
        }
        Array.from(files).forEach((file) => {
            this.filesForm.push(new UntypedFormControl(file, [this.fileExtensionValidator, this.fileSizeValidator]));
        });
        if (this.inputFileElement && this.inputFileElement.nativeElement) {
            this.inputFileElement.nativeElement.value = '';
        }
    }
    wipeUploadList() {
        while (this.filesForm.controls.length) {
            this.filesForm.removeAt(0);
        }
    }
    mergeControlsErrors() {
        if (!this.control) {
            return;
        }
        const errors = Object.assign({}, this.filesForm.errors);
        this.filesForm.controls.forEach((control) => {
            Object.assign(errors, control.errors);
        });
        this.control.setErrors(Object.keys(errors).length ? errors : null);
    }
    subscribeOnFormChanges() {
        this.filesForm.valueChanges.subscribe((value) => {
            this.onChange(value);
            this.mergeControlsErrors();
        });
    }
    fileSizeValidator(control) {
        if (!this.filesSizeLimitInBytes) {
            return null;
        }
        return control.value.size > this.filesSizeLimitInBytes ? { size: true } : null;
    }
    fileExtensionValidator(control) {
        if (!this.acceptedMimeTypes) {
            return null;
        }
        const fileType = control.value.type;
        const isExtensionAllowed = this.acceptedMimeTypes.includes(fileType);
        return isExtensionAllowed ? null : { extension: true };
    }
    maxFilesValidator(control) {
        if (!this.maxFiles) {
            return;
        }
        return control.controls.length > this.maxFiles ? { maxFiles: true } : null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EvoUploadComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EvoUploadComponent, selector: "evo-upload", inputs: { accept: "accept", dropZoneLabel: "dropZoneLabel", dropZoneHint: "dropZoneHint", hideClearButton: "hideClearButton", hideSubmitButton: "hideSubmitButton", clickableFiles: "clickableFiles", earlyValidation: "earlyValidation", fileSizeLimit: "fileSizeLimit", maxFiles: "maxFiles", loading: "loading" }, outputs: { submit: "submit", addFiles: "addFiles", remove: "remove", clickFile: "clickFile" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => EvoUploadComponent),
                multi: true,
            },
        ], viewQueries: [{ propertyName: "inputFileElement", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"evo-upload\">\n    <label\n        class=\"evo-upload__wrapper\"\n        [evoUiClass]=\"{over: states.isDragOver, disabled: isDisabled || loading}\"\n        (click)=\"onTouched()\"\n        (dragover)=\"handleDragOver($event)\"\n        (dragleave)=\"handleDragLeave($event)\"\n        (drop)=\"handleDrop($event)\"\n    >\n        <evo-icon\n            shape=\"upload\"\n            class=\"evo-upload__upload-icon\"\n            [evoUiClass]=\"{disabled: isDisabled || loading}\"\n        ></evo-icon>\n        <span class=\"evo-upload__title\" [evoUiClass]=\"{disabled: isDisabled || loading}\">{{ dropZoneLabel }}</span>\n\n        <span class=\"evo-upload__hint\" [evoUiClass]=\"{disabled: isDisabled || loading}\">\n            \u0438\u043B\u0438\n            <span class=\"evo-upload__fake-link\" [evoUiClass]=\"{disabled: isDisabled || loading}\">\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435</span>\n            <ng-container *ngIf=\"dropZoneHint\">\n                (\n                <span class=\"evo-upload__additional-hint\" [innerHTML]=\"dropZoneHint | safeHtml\"></span>\n                )\n            </ng-container>\n        </span>\n\n        <input\n            #inputFile\n            type=\"file\"\n            class=\"evo-upload__input\"\n            [accept]=\"accept\"\n            [disabled]=\"loading || isDisabled\"\n            [attr.multiple]=\"maxFiles === 1 ? null : true\"\n            (change)=\"inputChange($event.target.files)\"\n        />\n    </label>\n\n    <evo-alert *ngIf=\"!earlyValidation && filesForm.errors?.maxFiles\" type=\"danger\">\n        <ng-container>\n            \u041D\u0435\u043B\u044C\u0437\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0431\u043E\u043B\u0435\u0435 {{ maxFiles || 1 | declination:[\"\u0444\u0430\u0439\u043B\u0430\", \"\u0444\u0430\u0439\u043B\u043E\u0432\", \"\u0444\u0430\u0439\u043B\u043E\u0432\"] }}\n        </ng-container>\n    </evo-alert>\n    <evo-alert *ngIf=\"earlyValidation && filesForm.errors\" type=\"danger\">\n        <ul class=\"evo-list\">\n            <li *ngIf=\"filesForm.errors.maxFiles\">\n                \u041D\u0435\u043B\u044C\u0437\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0431\u043E\u043B\u0435\u0435 {{ maxFiles || 1 | declination:[\"\u0444\u0430\u0439\u043B\u0430\", \"\u0444\u0430\u0439\u043B\u043E\u0432\", \"\u0444\u0430\u0439\u043B\u043E\u0432\"] }}\n            </li>\n            <li *ngIf=\"filesForm.errors.size\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0430\u0437\u043C\u0435\u0440 \u043E\u0434\u043D\u043E\u0433\u043E \u0444\u0430\u0439\u043B\u0430 \u043D\u0435 \u0431\u043E\u043B\u0435\u0435 {{ filesSizeLimitText }}</li>\n            <li *ngIf=\"filesForm.errors.extension\">\u0412\u044B\u0431\u0440\u0430\u043D \u0444\u0430\u0439\u043B \u043D\u0435\u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u043E\u0433\u043E \u0444\u043E\u0440\u043C\u0430\u0442\u0430</li>\n        </ul>\n    </evo-alert>\n\n    <ul class=\"evo-upload__list\">\n        <li *ngFor=\"let file of filesForm.controls; let i = index\" class=\"evo-upload__list-item\">\n            <div class=\"evo-upload__item-inner\">\n                <evo-icon shape=\"file\" svgWidth=\"24\" svgHeight=\"24\" class=\"evo-upload__file-icon\"></evo-icon>\n\n                <span\n                    *ngIf=\"clickableFiles\"\n                    class=\"evo-upload__link evo-link\"\n                    (click)=\"clickFile.emit({ file: file.value, index: i })\"\n                >\n                    {{ file.value.name }}\n                </span>\n\n                <span *ngIf=\"!clickableFiles\">{{ file.value.name }}</span>\n            </div>\n\n            <evo-icon\n                shape=\"decline\"\n                svgWidth=\"24\"\n                svgHeight=\"24\"\n                class=\"evo-upload__button-remove\"\n                [evoUiClass]=\"{disabled: loading || isDisabled}\"\n                (click)=\"handleItemRemove(i)\"\n            ></evo-icon>\n\n            <div\n                class=\"evo-upload__list-delimiter\"\n                [evoUiClass]=\"{error: filesForm.controls[i].errors}\"\n                [ngSwitch]=\"getControlError(filesForm.controls[i])\"\n            >\n                <ng-container *ngSwitchCase=\"'size'\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430 \u043F\u0440\u0435\u0432\u044B\u0448\u0430\u0435\u0442 \u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u044B\u0439</ng-container>\n                <ng-container *ngSwitchCase=\"'extension'\">\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430</ng-container>\n            </div>\n        </li>\n    </ul>\n\n    <div *ngIf=\"filesForm.controls.length\" class=\"evo-upload__controls\">\n        <button\n            *ngIf=\"!hideClearButton\"\n            evoButton\n            color=\"secondary\"\n            theme=\"rounded-outline\"\n            [disabled]=\"loading || isDisabled\"\n            [loading]=\"loading\"\n            (click)=\"handleResetButtonClick()\"\n        >\n            \u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0432\u0441\u0451\n        </button>\n        <button\n            *ngIf=\"!hideSubmitButton\"\n            evoButton\n            color=\"success\"\n            class=\"evo-upload__submit\"\n            [disabled]=\"filesForm.invalid || loading || isDisabled\"\n            [loading]=\"loading\"\n            (click)=\"handleSubmitButtonClick()\"\n        >\n            \u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C\n        </button>\n    </div>\n</div>\n", styles: [".evo-link,.evo-upload__fake-link{color:#0986e2;font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}.evo-link:hover,.evo-upload__fake-link:hover{color:#0986e2;border-bottom-color:#0986e2}.evo-link:active,.evo-upload__fake-link:active{color:#0879cb}.evo-link_dashed{border-bottom:1px dashed}.evo-link_dashed:hover{text-decoration:none;border-bottom-color:transparent}.evo-link_danger{color:#ff1817}.evo-link_danger:hover{color:#ff4645;border-bottom-color:#ff4645}.evo-link_danger:active{color:#e51715;border-bottom-color:#e51715}.evo-upload{width:100%}.evo-upload__wrapper{display:flex;flex-direction:column;align-items:center;width:100%;margin-bottom:24px;padding:32px 0;color:#231f20;background:#f4f6f8;border:2px solid transparent;border-radius:8px}@media (max-width: 767px){.evo-upload__wrapper{padding:16px}}.evo-upload__wrapper_disabled{pointer-events:none}.evo-upload__wrapper_over{border-color:#dbe3ea}.evo-upload__upload-icon{flex:0 0 48px;width:48px;height:48px;margin-bottom:24px;transition:fill .3s;fill:#91b1b8}.evo-upload__upload-icon_disabled{fill:#727272}@media (max-width: 767px){.evo-upload__upload-icon{margin-bottom:16px}}.evo-upload__title{margin-bottom:8px;font-weight:700;font-size:24px;text-align:center;transition:color .3s}.evo-upload__title_disabled{color:#727272}@media (max-width: 767px){.evo-upload__title{font-size:16px}}.evo-upload__hint{font-size:18px;text-align:center;transition:color .3s}.evo-upload__hint_disabled{color:#727272}@media (max-width: 767px){.evo-upload__hint{font-size:14px}}.evo-upload__fake-link_disabled{color:#727272}.evo-upload__input{display:none}.evo-upload__list{margin-top:24px;margin-bottom:24px}.evo-upload__list:empty{display:none}.evo-upload__file-icon{margin-right:8px;fill:#91b1b8}.evo-upload__list-item{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:15px;color:#212121;font-weight:600;font-size:16px}.evo-upload__list-item:last-of-type{margin-bottom:24px}.evo-upload__item-inner{display:flex;flex-flow:row wrap;align-items:center}.evo-upload__list-delimiter{width:100%;margin-top:15px;color:#ff1817;font-size:14px;font-style:italic;line-height:22px;border-top:1px solid #C6C6C6}.evo-upload__list-delimiter_error{border-top-color:#ff1817}.evo-upload__button-remove{margin-left:auto;cursor:pointer;transition:fill .3s;fill:#91b1b8}.evo-upload__button-remove:not(.evo-upload__button-remove_disabled):hover{fill:#231f20}.evo-upload__button-remove_disabled{cursor:default;fill:#c6c6c6}.evo-upload__controls{display:flex;justify-content:space-between}.evo-upload__submit{margin-left:auto}.evo-upload__link{cursor:pointer}.evo-list{margin-bottom:0}.evo-list li:before{color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.EvoAlertComponent, selector: "evo-alert", inputs: ["closable", "icon", "iconSrc", "type", "size"], outputs: ["close"] }, { kind: "component", type: i4.EvoButtonComponent, selector: "button[evoButton], a[evoButton]", inputs: ["size", "color", "theme", "disabled", "loading"] }, { kind: "component", type: i5.EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }, { kind: "directive", type: i6.EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { kind: "pipe", type: i7.DeclinationPipe, name: "declination" }, { kind: "pipe", type: i8.SafeHtmlPipe, name: "safeHtml" }] }); }
}
__decorate([
    autobind
], EvoUploadComponent.prototype, "fileSizeValidator", null);
__decorate([
    autobind
], EvoUploadComponent.prototype, "fileExtensionValidator", null);
__decorate([
    autobind
], EvoUploadComponent.prototype, "maxFilesValidator", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EvoUploadComponent, decorators: [{
            type: Component,
            args: [{ selector: 'evo-upload', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => EvoUploadComponent),
                            multi: true,
                        },
                    ], template: "<div class=\"evo-upload\">\n    <label\n        class=\"evo-upload__wrapper\"\n        [evoUiClass]=\"{over: states.isDragOver, disabled: isDisabled || loading}\"\n        (click)=\"onTouched()\"\n        (dragover)=\"handleDragOver($event)\"\n        (dragleave)=\"handleDragLeave($event)\"\n        (drop)=\"handleDrop($event)\"\n    >\n        <evo-icon\n            shape=\"upload\"\n            class=\"evo-upload__upload-icon\"\n            [evoUiClass]=\"{disabled: isDisabled || loading}\"\n        ></evo-icon>\n        <span class=\"evo-upload__title\" [evoUiClass]=\"{disabled: isDisabled || loading}\">{{ dropZoneLabel }}</span>\n\n        <span class=\"evo-upload__hint\" [evoUiClass]=\"{disabled: isDisabled || loading}\">\n            \u0438\u043B\u0438\n            <span class=\"evo-upload__fake-link\" [evoUiClass]=\"{disabled: isDisabled || loading}\">\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435</span>\n            <ng-container *ngIf=\"dropZoneHint\">\n                (\n                <span class=\"evo-upload__additional-hint\" [innerHTML]=\"dropZoneHint | safeHtml\"></span>\n                )\n            </ng-container>\n        </span>\n\n        <input\n            #inputFile\n            type=\"file\"\n            class=\"evo-upload__input\"\n            [accept]=\"accept\"\n            [disabled]=\"loading || isDisabled\"\n            [attr.multiple]=\"maxFiles === 1 ? null : true\"\n            (change)=\"inputChange($event.target.files)\"\n        />\n    </label>\n\n    <evo-alert *ngIf=\"!earlyValidation && filesForm.errors?.maxFiles\" type=\"danger\">\n        <ng-container>\n            \u041D\u0435\u043B\u044C\u0437\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0431\u043E\u043B\u0435\u0435 {{ maxFiles || 1 | declination:[\"\u0444\u0430\u0439\u043B\u0430\", \"\u0444\u0430\u0439\u043B\u043E\u0432\", \"\u0444\u0430\u0439\u043B\u043E\u0432\"] }}\n        </ng-container>\n    </evo-alert>\n    <evo-alert *ngIf=\"earlyValidation && filesForm.errors\" type=\"danger\">\n        <ul class=\"evo-list\">\n            <li *ngIf=\"filesForm.errors.maxFiles\">\n                \u041D\u0435\u043B\u044C\u0437\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0431\u043E\u043B\u0435\u0435 {{ maxFiles || 1 | declination:[\"\u0444\u0430\u0439\u043B\u0430\", \"\u0444\u0430\u0439\u043B\u043E\u0432\", \"\u0444\u0430\u0439\u043B\u043E\u0432\"] }}\n            </li>\n            <li *ngIf=\"filesForm.errors.size\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0430\u0437\u043C\u0435\u0440 \u043E\u0434\u043D\u043E\u0433\u043E \u0444\u0430\u0439\u043B\u0430 \u043D\u0435 \u0431\u043E\u043B\u0435\u0435 {{ filesSizeLimitText }}</li>\n            <li *ngIf=\"filesForm.errors.extension\">\u0412\u044B\u0431\u0440\u0430\u043D \u0444\u0430\u0439\u043B \u043D\u0435\u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u043E\u0433\u043E \u0444\u043E\u0440\u043C\u0430\u0442\u0430</li>\n        </ul>\n    </evo-alert>\n\n    <ul class=\"evo-upload__list\">\n        <li *ngFor=\"let file of filesForm.controls; let i = index\" class=\"evo-upload__list-item\">\n            <div class=\"evo-upload__item-inner\">\n                <evo-icon shape=\"file\" svgWidth=\"24\" svgHeight=\"24\" class=\"evo-upload__file-icon\"></evo-icon>\n\n                <span\n                    *ngIf=\"clickableFiles\"\n                    class=\"evo-upload__link evo-link\"\n                    (click)=\"clickFile.emit({ file: file.value, index: i })\"\n                >\n                    {{ file.value.name }}\n                </span>\n\n                <span *ngIf=\"!clickableFiles\">{{ file.value.name }}</span>\n            </div>\n\n            <evo-icon\n                shape=\"decline\"\n                svgWidth=\"24\"\n                svgHeight=\"24\"\n                class=\"evo-upload__button-remove\"\n                [evoUiClass]=\"{disabled: loading || isDisabled}\"\n                (click)=\"handleItemRemove(i)\"\n            ></evo-icon>\n\n            <div\n                class=\"evo-upload__list-delimiter\"\n                [evoUiClass]=\"{error: filesForm.controls[i].errors}\"\n                [ngSwitch]=\"getControlError(filesForm.controls[i])\"\n            >\n                <ng-container *ngSwitchCase=\"'size'\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430 \u043F\u0440\u0435\u0432\u044B\u0448\u0430\u0435\u0442 \u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u044B\u0439</ng-container>\n                <ng-container *ngSwitchCase=\"'extension'\">\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430</ng-container>\n            </div>\n        </li>\n    </ul>\n\n    <div *ngIf=\"filesForm.controls.length\" class=\"evo-upload__controls\">\n        <button\n            *ngIf=\"!hideClearButton\"\n            evoButton\n            color=\"secondary\"\n            theme=\"rounded-outline\"\n            [disabled]=\"loading || isDisabled\"\n            [loading]=\"loading\"\n            (click)=\"handleResetButtonClick()\"\n        >\n            \u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0432\u0441\u0451\n        </button>\n        <button\n            *ngIf=\"!hideSubmitButton\"\n            evoButton\n            color=\"success\"\n            class=\"evo-upload__submit\"\n            [disabled]=\"filesForm.invalid || loading || isDisabled\"\n            [loading]=\"loading\"\n            (click)=\"handleSubmitButtonClick()\"\n        >\n            \u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C\n        </button>\n    </div>\n</div>\n", styles: [".evo-link,.evo-upload__fake-link{color:#0986e2;font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}.evo-link:hover,.evo-upload__fake-link:hover{color:#0986e2;border-bottom-color:#0986e2}.evo-link:active,.evo-upload__fake-link:active{color:#0879cb}.evo-link_dashed{border-bottom:1px dashed}.evo-link_dashed:hover{text-decoration:none;border-bottom-color:transparent}.evo-link_danger{color:#ff1817}.evo-link_danger:hover{color:#ff4645;border-bottom-color:#ff4645}.evo-link_danger:active{color:#e51715;border-bottom-color:#e51715}.evo-upload{width:100%}.evo-upload__wrapper{display:flex;flex-direction:column;align-items:center;width:100%;margin-bottom:24px;padding:32px 0;color:#231f20;background:#f4f6f8;border:2px solid transparent;border-radius:8px}@media (max-width: 767px){.evo-upload__wrapper{padding:16px}}.evo-upload__wrapper_disabled{pointer-events:none}.evo-upload__wrapper_over{border-color:#dbe3ea}.evo-upload__upload-icon{flex:0 0 48px;width:48px;height:48px;margin-bottom:24px;transition:fill .3s;fill:#91b1b8}.evo-upload__upload-icon_disabled{fill:#727272}@media (max-width: 767px){.evo-upload__upload-icon{margin-bottom:16px}}.evo-upload__title{margin-bottom:8px;font-weight:700;font-size:24px;text-align:center;transition:color .3s}.evo-upload__title_disabled{color:#727272}@media (max-width: 767px){.evo-upload__title{font-size:16px}}.evo-upload__hint{font-size:18px;text-align:center;transition:color .3s}.evo-upload__hint_disabled{color:#727272}@media (max-width: 767px){.evo-upload__hint{font-size:14px}}.evo-upload__fake-link_disabled{color:#727272}.evo-upload__input{display:none}.evo-upload__list{margin-top:24px;margin-bottom:24px}.evo-upload__list:empty{display:none}.evo-upload__file-icon{margin-right:8px;fill:#91b1b8}.evo-upload__list-item{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:15px;color:#212121;font-weight:600;font-size:16px}.evo-upload__list-item:last-of-type{margin-bottom:24px}.evo-upload__item-inner{display:flex;flex-flow:row wrap;align-items:center}.evo-upload__list-delimiter{width:100%;margin-top:15px;color:#ff1817;font-size:14px;font-style:italic;line-height:22px;border-top:1px solid #C6C6C6}.evo-upload__list-delimiter_error{border-top-color:#ff1817}.evo-upload__button-remove{margin-left:auto;cursor:pointer;transition:fill .3s;fill:#91b1b8}.evo-upload__button-remove:not(.evo-upload__button-remove_disabled):hover{fill:#231f20}.evo-upload__button-remove_disabled{cursor:default;fill:#c6c6c6}.evo-upload__controls{display:flex;justify-content:space-between}.evo-upload__submit{margin-left:auto}.evo-upload__link{cursor:pointer}.evo-list{margin-bottom:0}.evo-list li:before{color:#fff}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }, { type: i0.Injector }]; }, propDecorators: { accept: [{
                type: Input
            }], dropZoneLabel: [{
                type: Input
            }], dropZoneHint: [{
                type: Input
            }], hideClearButton: [{
                type: Input
            }], hideSubmitButton: [{
                type: Input
            }], clickableFiles: [{
                type: Input
            }], earlyValidation: [{
                type: Input
            }], fileSizeLimit: [{
                type: Input
            }], maxFiles: [{
                type: Input
            }], loading: [{
                type: Input
            }], submit: [{
                type: Output
            }], addFiles: [{
                type: Output
            }], remove: [{
                type: Output
            }], clickFile: [{
                type: Output
            }], inputFileElement: [{
                type: ViewChild,
                args: ['inputFile']
            }], fileSizeValidator: [], fileExtensionValidator: [], maxFilesValidator: [] } });
//# sourceMappingURL=data:application/json;base64, 