myrta-ui 1.0.11 → 1.0.13

package/esm2020/lib/components/dropdown/dropdown.component.mjs

@@ -76,10 +76,10 @@ export class DropdownComponent {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DropdownComponent, selector: "mrx-dropdown", inputs: { mainPlacement: "mainPlacement", fallbackPlacements: "fallbackPlacements", closeOnClick: "closeOnClick", customClasses: "customClasses" }, queries: [{ propertyName: "dropdownToggle", first: true, predicate: ["dropdownToggle"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], viewQueries: [{ propertyName: "dropdownToggleEl", first: true, predicate: ["dropdownToggleEl"], descendants: true }, { propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;overflow:hidden;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}.mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;padding:5px 0;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.175)}.mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:.25rem 1rem;clear:both;color:#282828;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;cursor:pointer}.mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:#282828;background-color:#edf5ff}.mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}.mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DropdownComponent, selector: "mrx-dropdown", inputs: { mainPlacement: "mainPlacement", fallbackPlacements: "fallbackPlacements", closeOnClick: "closeOnClick", customClasses: "customClasses" }, queries: [{ propertyName: "dropdownToggle", first: true, predicate: ["dropdownToggle"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], viewQueries: [{ propertyName: "dropdownToggleEl", first: true, predicate: ["dropdownToggleEl"], descendants: true }, { propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;overflow:hidden;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;padding:5px 0;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.175)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:.25rem 1rem;clear:both;color:#282828;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:#282828;background-color:#edf5ff}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mrx-dropdown', template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;overflow:hidden;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}.mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;padding:5px 0;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.175)}.mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:.25rem 1rem;clear:both;color:#282828;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;cursor:pointer}.mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:#282828;background-color:#edf5ff}.mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}.mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"] }]
+            args: [{ selector: 'mrx-dropdown', template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;overflow:hidden;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;padding:5px 0;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.175)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:.25rem 1rem;clear:both;color:#282828;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:#282828;background-color:#edf5ff}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"] }]
         }], propDecorators: { dropdownToggleEl: [{
                 type: ViewChild,
                 args: ['dropdownToggleEl']

package/esm2020/lib/components/form/input-file/input-file.component.mjs

@@ -276,10 +276,10 @@ export class InputFileComponent {
     }
 }
 InputFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileComponent, deps: [{ token: i1.FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
-InputFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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" }, 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      <span class=\"file-link absent\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n      </span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n         [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n      <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        {{ file.name }}\r\n      </a>\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      (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      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\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\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(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          <button\r\n            type=\"button\"\r\n            class=\"ng-custom-file-input-btn-stop ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          >\r\n            <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n          </button>\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)!important}.ng-form-file-input{display:flex;flex-direction:column;gap:8px}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{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-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.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__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.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)}\n"], components: [{ type: i2.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { type: i3.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: i5.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+InputFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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" }, 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      <span class=\"file-link absent\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n      </span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n         [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n      <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        {{ file.name }}\r\n      </a>\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      (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      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\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\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(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          <button\r\n            type=\"button\"\r\n            class=\"ng-custom-file-input-btn-stop ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          >\r\n            <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n          </button>\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)!important}.ng-form-file-input{display:flex;flex-direction:column;gap:8px}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{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-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.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__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.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)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}\n"], components: [{ type: i2.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { type: i3.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: i5.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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      <span class=\"file-link absent\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n      </span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n         [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n      <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        {{ file.name }}\r\n      </a>\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      (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      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\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\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(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          <button\r\n            type=\"button\"\r\n            class=\"ng-custom-file-input-btn-stop ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          >\r\n            <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n          </button>\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)!important}.ng-form-file-input{display:flex;flex-direction:column;gap:8px}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{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-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.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__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.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)}\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      <span class=\"file-link absent\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n      </span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n         [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n      <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        {{ file.name }}\r\n      </a>\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      (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      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\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\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(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          <button\r\n            type=\"button\"\r\n            class=\"ng-custom-file-input-btn-stop ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          >\r\n            <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n          </button>\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)!important}.ng-form-file-input{display:flex;flex-direction:column;gap:8px}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{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-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.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__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.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)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FileUploadService }]; }, propDecorators: { autoUpload: [{
                 type: Input
             }], required: [{

package/fesm2015/myrta-ui.mjs

@@ -1471,10 +1471,10 @@ class DropdownComponent {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DropdownComponent, selector: "mrx-dropdown", inputs: { mainPlacement: "mainPlacement", fallbackPlacements: "fallbackPlacements", closeOnClick: "closeOnClick", customClasses: "customClasses" }, queries: [{ propertyName: "dropdownToggle", first: true, predicate: ["dropdownToggle"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], viewQueries: [{ propertyName: "dropdownToggleEl", first: true, predicate: ["dropdownToggleEl"], descendants: true }, { propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;overflow:hidden;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}.mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;padding:5px 0;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.175)}.mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:.25rem 1rem;clear:both;color:#282828;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;cursor:pointer}.mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:#282828;background-color:#edf5ff}.mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}.mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"], directives: [{ type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DropdownComponent, selector: "mrx-dropdown", inputs: { mainPlacement: "mainPlacement", fallbackPlacements: "fallbackPlacements", closeOnClick: "closeOnClick", customClasses: "customClasses" }, queries: [{ propertyName: "dropdownToggle", first: true, predicate: ["dropdownToggle"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], viewQueries: [{ propertyName: "dropdownToggleEl", first: true, predicate: ["dropdownToggleEl"], descendants: true }, { propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;overflow:hidden;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;padding:5px 0;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.175)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:.25rem 1rem;clear:both;color:#282828;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:#282828;background-color:#edf5ff}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"], directives: [{ type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mrx-dropdown', template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;overflow:hidden;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}.mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;padding:5px 0;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.175)}.mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:.25rem 1rem;clear:both;color:#282828;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;cursor:pointer}.mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:#282828;background-color:#edf5ff}.mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}.mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"] }]
+            args: [{ selector: 'mrx-dropdown', template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;overflow:hidden;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;padding:5px 0;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.175)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:.25rem 1rem;clear:both;color:#282828;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:#282828;background-color:#edf5ff}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"] }]
         }], propDecorators: { dropdownToggleEl: [{
                 type: ViewChild,
                 args: ['dropdownToggleEl']
@@ -10541,10 +10541,10 @@ class InputFileComponent {
     }
 }
 InputFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileComponent, deps: [{ token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
-InputFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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" }, 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      <span class=\"file-link absent\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n      </span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n         [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n      <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        {{ file.name }}\r\n      </a>\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      (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      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\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\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(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          <button\r\n            type=\"button\"\r\n            class=\"ng-custom-file-input-btn-stop ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          >\r\n            <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n          </button>\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)!important}.ng-form-file-input{display:flex;flex-direction:column;gap:8px}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{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-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.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__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.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)}\n"], components: [{ type: i2$3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+InputFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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" }, 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      <span class=\"file-link absent\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n      </span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n         [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n      <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        {{ file.name }}\r\n      </a>\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      (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      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\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\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(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          <button\r\n            type=\"button\"\r\n            class=\"ng-custom-file-input-btn-stop ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          >\r\n            <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n          </button>\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)!important}.ng-form-file-input{display:flex;flex-direction:column;gap:8px}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{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-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.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__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.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)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}\n"], components: [{ type: i2$3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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      <span class=\"file-link absent\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n      </span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n         [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n      <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        {{ file.name }}\r\n      </a>\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      (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      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\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\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(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          <button\r\n            type=\"button\"\r\n            class=\"ng-custom-file-input-btn-stop ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          >\r\n            <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n          </button>\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)!important}.ng-form-file-input{display:flex;flex-direction:column;gap:8px}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{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-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.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__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.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)}\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      <span class=\"file-link absent\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n      </span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n         [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n      <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        {{ file.name }}\r\n      </a>\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      (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      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\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\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(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          <button\r\n            type=\"button\"\r\n            class=\"ng-custom-file-input-btn-stop ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          >\r\n            <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n          </button>\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)!important}.ng-form-file-input{display:flex;flex-direction:column;gap:8px}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{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-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.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__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.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)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}\n"] }]
         }], ctorParameters: function () { return [{ type: FileUploadService }]; }, propDecorators: { autoUpload: [{
                 type: Input
             }], required: [{