myrta-ui 17.1.4 → 17.1.6

package/fesm2022/myrta-ui.mjs

@@ -35,6 +35,7 @@ import 'jodit/esm/plugins/line-height/line-height.js';
 import 'jodit/esm/plugins/indent/indent.js';
 import 'jodit/esm/plugins/video/video.js';
 import 'jodit/esm/plugins/search/search.js';
+import 'jodit/esm/plugins/resizer/resizer.js';
 import * as i3 from 'ngx-jodit';
 import { NgxJoditComponent } from 'ngx-jodit';
 import 'ace-builds/src-min-noconflict/ace.js';
@@ -3094,8 +3095,8 @@ class AutoSaveStore {
         this.clearSubscription(id);
         this.state.update(current => ({
             fields: current.fields.map(field => field.id === id
-                ? { ...field, state: field.state === 'saved' ? 'stopped' : 'saving' }
-                : field)
+                ? { ...field, state: 'saving' }
+                : { ...field, state: field.state === 'saved' ? 'stopped' : field.state })
         }));
     }
     stop() {
@@ -7543,8 +7544,11 @@ class EditorComponent {
             },
             blur: () => {
                 this.changeFocused(false);
-            }
-        }
+            },
+            paste: (event) => {
+                this.handlePaste(event);
+            },
+        },
         // uploader: {
         //   insertImageAsBase64URI: true
         // },
@@ -7650,6 +7654,49 @@ class EditorComponent {
         this.isFocused = value;
         this.changeDetection.detectChanges();
     }
+    handlePaste(event) {
+        if (!event.clipboardData || this.hasImageButton()) {
+            return;
+        }
+        const { clipboardData } = event;
+        const htmlData = clipboardData.getData('text/html');
+        const hasHtmlImage = htmlData?.includes('<img');
+        const hasImage = Array.from(clipboardData.items).some(item => item.type.startsWith('image/'));
+        if (!hasImage && !hasHtmlImage) {
+            return;
+        }
+        event.preventDefault();
+        const sanitizedHtml = this.removeImagesFromHtml(htmlData);
+        const textData = clipboardData.getData('text/plain');
+        const contentToInsert = sanitizedHtml || textData;
+        if (contentToInsert) {
+            this.editorElementRef.jodit.s.insertHTML(contentToInsert);
+        }
+    }
+    removeImagesFromHtml(html) {
+        if (!html) {
+            return null;
+        }
+        const div = document.createElement('div');
+        div.innerHTML = html;
+        div.querySelectorAll('img').forEach(img => img.remove());
+        return div.innerHTML;
+    }
+    hasImageButton() {
+        const buttons = this.defaultConfig?.buttons;
+        if (!buttons) {
+            return false;
+        }
+        if (typeof buttons === 'string') {
+            return buttons.includes('image');
+        }
+        if (Array.isArray(buttons)) {
+            return buttons.some(item => typeof item === 'string'
+                ? item === 'image'
+                : item?.name === 'image');
+        }
+        return false;
+    }
     onChange = (value) => {
     };
     onTouched = () => {
@@ -16050,11 +16097,11 @@ class InputFileComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileComponent, deps: [{ token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", disabled: "disabled", viewOnly: "viewOnly", lightDisabled: "lightDisabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n            {{formatBytes(file.length)}}\r\n          </span>\r\n          <span\r\n            *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n            (click)=\"delete($event, file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15);background:var(--system-bg-negative-secondary, #FFECE7)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px solid var(--system-bg-controls-positive-default, #108E3A);background:var(--system-bg-positive-secondary, #E7FFEE)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3$1.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", disabled: "disabled", viewOnly: "viewOnly", lightDisabled: "lightDisabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n            {{formatBytes(file.length)}}\r\n          </span>\r\n          <span\r\n            *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n            (click)=\"delete($event, file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}:host::ng-deep .ngx-file-drop__drop-zone,:host::ng-deep .ngx-file-drop__content{height:auto!important;min-height:100px!important}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15);background:var(--system-bg-negative-secondary, #FFECE7)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px solid var(--system-bg-controls-positive-default, #108E3A);background:var(--system-bg-positive-secondary, #E7FFEE)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3$1.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mrx-input-file', template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n            {{formatBytes(file.length)}}\r\n          </span>\r\n          <span\r\n            *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n            (click)=\"delete($event, file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15);background:var(--system-bg-negative-secondary, #FFECE7)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px solid var(--system-bg-controls-positive-default, #108E3A);background:var(--system-bg-positive-secondary, #E7FFEE)}\n"] }]
+            args: [{ selector: 'mrx-input-file', template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n            {{formatBytes(file.length)}}\r\n          </span>\r\n          <span\r\n            *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n            (click)=\"delete($event, file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}:host::ng-deep .ngx-file-drop__drop-zone,:host::ng-deep .ngx-file-drop__content{height:auto!important;min-height:100px!important}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default);transition:.2s}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15);background:var(--system-bg-negative-secondary, #FFECE7)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px solid var(--system-bg-controls-positive-default, #108E3A);background:var(--system-bg-positive-secondary, #E7FFEE)}\n"] }]
         }], ctorParameters: () => [{ type: FileUploadService }], propDecorators: { autoUpload: [{
                 type: Input
             }], required: [{