myrta-ui 1.1.13 → 14.0.0-beta.2

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

@@ -8,9 +8,9 @@ import { ErrorMessagesEnum } from './enums/error-messages.enum';
 import { InputFileTargetTypesEnum } from './input-file.enum';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../services/file-upload/file-upload.service";
-import * as i2 from "ngx-file-drop";
-import * as i3 from "../../error-message/error-message.component";
-import * as i4 from "@angular/common";
+import * as i2 from "@angular/common";
+import * as i3 from "ngx-file-drop";
+import * as i4 from "../../error-message/error-message.component";
 import * as i5 from "../../cdk-tooltip/cdk-tooltip.directive";
 export class InputFileComponent {
     constructor(fileUploadService) {
@@ -278,9 +278,9 @@ export class InputFileComponent {
         return true;
     }
 }
-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", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <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          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363)}.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{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF)}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary)}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:none;background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{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{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\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: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: [{
+InputFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputFileComponent, deps: [{ token: i1.FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
+InputFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.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", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <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          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363)}.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{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF)}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary)}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:none;background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{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{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i5.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.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    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <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          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363)}.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{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF)}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary)}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:none;background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{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{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FileUploadService }]; }, propDecorators: { autoUpload: [{

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

@@ -10,10 +10,10 @@ import { CdkTooltipModule } from '../../cdk-tooltip/cdk-tooltip.module';
 import * as i0 from "@angular/core";
 export class InputFileModule {
 }
-InputFileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputFileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileModule, declarations: [InputFileComponent], imports: [CommonModule, FormsModule, HttpClientModule, NgxFileDropModule, ErrorMessageModule, CdkTooltipModule], exports: [InputFileComponent] });
-InputFileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileModule, providers: [FileUploadService], imports: [[CommonModule, FormsModule, HttpClientModule, NgxFileDropModule, ErrorMessageModule, CdkTooltipModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileModule, decorators: [{
+InputFileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InputFileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: InputFileModule, declarations: [InputFileComponent], imports: [CommonModule, FormsModule, HttpClientModule, NgxFileDropModule, ErrorMessageModule, CdkTooltipModule], exports: [InputFileComponent] });
+InputFileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputFileModule, providers: [FileUploadService], imports: [CommonModule, FormsModule, HttpClientModule, NgxFileDropModule, ErrorMessageModule, CdkTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputFileModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [InputFileComponent],
@@ -23,4 +23,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     providers: [FileUploadService]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtZmlsZS5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9teXJ0YS11aS9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS9pbnB1dC1maWxlL2lucHV0LWZpbGUubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbEQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDNUQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sbURBQW1ELENBQUM7QUFDdEYsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDOUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7O0FBU3hFLE1BQU0sT0FBTyxlQUFlOzs0R0FBZixlQUFlOzZHQUFmLGVBQWUsaUJBTlgsa0JBQWtCLGFBQ3ZCLFlBQVksRUFBRSxXQUFXLEVBQUUsZ0JBQWdCLEVBQUUsaUJBQWlCLEVBQUUsa0JBQWtCLEVBQUUsZ0JBQWdCLGFBRXBHLGtCQUFrQjs2R0FHakIsZUFBZSxhQUZmLENBQUMsaUJBQWlCLENBQUMsWUFIckIsQ0FBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLGdCQUFnQixFQUFFLGlCQUFpQixFQUFFLGtCQUFrQixFQUFFLGdCQUFnQixDQUFDOzJGQUtwRyxlQUFlO2tCQVAzQixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRSxDQUFDLGtCQUFrQixDQUFDO29CQUNsQyxPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLGdCQUFnQixFQUFFLGlCQUFpQixFQUFFLGtCQUFrQixFQUFFLGdCQUFnQixDQUFDO29CQUMvRyxPQUFPLEVBQUUsQ0FBQyxzQkFBc0IsQ0FBQztvQkFDakMsT0FBTyxFQUFFLENBQUMsa0JBQWtCLENBQUM7b0JBQzdCLFNBQVMsRUFBRSxDQUFDLGlCQUFpQixDQUFDO2lCQUMvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENVU1RPTV9FTEVNRU5UU19TQ0hFTUEsIE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBOZ3hGaWxlRHJvcE1vZHVsZSB9IGZyb20gJ25neC1maWxlLWRyb3AnO1xyXG5pbXBvcnQgeyBJbnB1dEZpbGVDb21wb25lbnQgfSBmcm9tICcuL2lucHV0LWZpbGUuY29tcG9uZW50JztcclxuaW1wb3J0IHsgSHR0cENsaWVudE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcclxuaW1wb3J0IHsgRmlsZVVwbG9hZFNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9zZXJ2aWNlcy9maWxlLXVwbG9hZC9maWxlLXVwbG9hZC5zZXJ2aWNlJztcclxuaW1wb3J0IHsgRXJyb3JNZXNzYWdlTW9kdWxlIH0gZnJvbSAnLi4vLi4vZXJyb3ItbWVzc2FnZS9lcnJvci1tZXNzYWdlLm1vZHVsZSc7XHJcbmltcG9ydCB7IENka1Rvb2x0aXBNb2R1bGUgfSBmcm9tICcuLi8uLi9jZGstdG9vbHRpcC9jZGstdG9vbHRpcC5tb2R1bGUnO1xyXG5cclxuQE5nTW9kdWxlKHtcclxuICBkZWNsYXJhdGlvbnM6IFtJbnB1dEZpbGVDb21wb25lbnRdLFxyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEZvcm1zTW9kdWxlLCBIdHRwQ2xpZW50TW9kdWxlLCBOZ3hGaWxlRHJvcE1vZHVsZSwgRXJyb3JNZXNzYWdlTW9kdWxlLCBDZGtUb29sdGlwTW9kdWxlXSxcclxuICBzY2hlbWFzOiBbQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQV0sXHJcbiAgZXhwb3J0czogW0lucHV0RmlsZUNvbXBvbmVudF0sXHJcbiAgcHJvdmlkZXJzOiBbRmlsZVVwbG9hZFNlcnZpY2VdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBJbnB1dEZpbGVNb2R1bGUge31cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtZmlsZS5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9teXJ0YS11aS9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS9pbnB1dC1maWxlL2lucHV0LWZpbGUubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbEQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDNUQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sbURBQW1ELENBQUM7QUFDdEYsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDOUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7O0FBU3hFLE1BQU0sT0FBTyxlQUFlOzs0R0FBZixlQUFlOzZHQUFmLGVBQWUsaUJBTlgsa0JBQWtCLGFBQ3ZCLFlBQVksRUFBRSxXQUFXLEVBQUUsZ0JBQWdCLEVBQUUsaUJBQWlCLEVBQUUsa0JBQWtCLEVBQUUsZ0JBQWdCLGFBRXBHLGtCQUFrQjs2R0FHakIsZUFBZSxhQUZmLENBQUMsaUJBQWlCLENBQUMsWUFIcEIsWUFBWSxFQUFFLFdBQVcsRUFBRSxnQkFBZ0IsRUFBRSxpQkFBaUIsRUFBRSxrQkFBa0IsRUFBRSxnQkFBZ0I7MkZBS25HLGVBQWU7a0JBUDNCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsa0JBQWtCLENBQUM7b0JBQ2xDLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxXQUFXLEVBQUUsZ0JBQWdCLEVBQUUsaUJBQWlCLEVBQUUsa0JBQWtCLEVBQUUsZ0JBQWdCLENBQUM7b0JBQy9HLE9BQU8sRUFBRSxDQUFDLHNCQUFzQixDQUFDO29CQUNqQyxPQUFPLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQztvQkFDN0IsU0FBUyxFQUFFLENBQUMsaUJBQWlCLENBQUM7aUJBQy9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQSwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcbmltcG9ydCB7IE5neEZpbGVEcm9wTW9kdWxlIH0gZnJvbSAnbmd4LWZpbGUtZHJvcCc7XHJcbmltcG9ydCB7IElucHV0RmlsZUNvbXBvbmVudCB9IGZyb20gJy4vaW5wdXQtZmlsZS5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBIdHRwQ2xpZW50TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2h0dHAnO1xyXG5pbXBvcnQgeyBGaWxlVXBsb2FkU2VydmljZSB9IGZyb20gJy4uLy4uLy4uL3NlcnZpY2VzL2ZpbGUtdXBsb2FkL2ZpbGUtdXBsb2FkLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBFcnJvck1lc3NhZ2VNb2R1bGUgfSBmcm9tICcuLi8uLi9lcnJvci1tZXNzYWdlL2Vycm9yLW1lc3NhZ2UubW9kdWxlJztcclxuaW1wb3J0IHsgQ2RrVG9vbHRpcE1vZHVsZSB9IGZyb20gJy4uLy4uL2Nkay10b29sdGlwL2Nkay10b29sdGlwLm1vZHVsZSc7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW0lucHV0RmlsZUNvbXBvbmVudF0sXHJcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRm9ybXNNb2R1bGUsIEh0dHBDbGllbnRNb2R1bGUsIE5neEZpbGVEcm9wTW9kdWxlLCBFcnJvck1lc3NhZ2VNb2R1bGUsIENka1Rvb2x0aXBNb2R1bGVdLFxyXG4gIHNjaGVtYXM6IFtDVVNUT01fRUxFTUVOVFNfU0NIRU1BXSxcclxuICBleHBvcnRzOiBbSW5wdXRGaWxlQ29tcG9uZW50XSxcclxuICBwcm92aWRlcnM6IFtGaWxlVXBsb2FkU2VydmljZV1cclxufSlcclxuZXhwb3J0IGNsYXNzIElucHV0RmlsZU1vZHVsZSB7fVxyXG4iXX0=

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

@@ -3,8 +3,8 @@ import { SimpleModalComponent } from 'ngx-simple-modal';
 import { convertBase64ToFile } from '../../../../../helpers/extension/input-file.extension';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../../modal/modal.component";
-import * as i2 from "ngx-image-cropper";
-import * as i3 from "../../../../button/button.component";
+import * as i2 from "../../../../button/button.component";
+import * as i3 from "ngx-image-cropper";
 export class FileImageEditModalComponent extends SimpleModalComponent {
     constructor() {
         super();
@@ -57,9 +57,9 @@ export class FileImageEditModalComponent extends SimpleModalComponent {
         // show message
     }
 }
-FileImageEditModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FileImageEditModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileImageEditModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FileImageEditModalComponent, selector: "mrx-file-image-edit-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n  [title]=\"title\"\r\n  [size]=\"'medium'\"\r\n  (close)=\"close()\"\r\n>\r\n  <div class=\"row\">\r\n    <div class=\"col col-12\">\r\n      <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u0430\u044F \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0431\u0443\u0434\u0435\u0442 \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0430 \u043E\u0431\u043B\u043E\u0436\u043A\u0435 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B</p>\r\n    </div>\r\n\r\n    <div class=\"col col-12\">\r\n      <div class=\"mrx-input-image-cropper__wrapper\">\r\n        <image-cropper\r\n          [imageFile]=\"fileImage\"\r\n          [maintainAspectRatio]=\"true\"\r\n          [aspectRatio]=\"aspectRatio\"\r\n          format=\"png\"\r\n          (imageCropped)=\"imageCropped($event)\"\r\n          (imageLoaded)=\"imageLoaded($event)\"\r\n          (cropperReady)=\"cropperReady()\"\r\n          (loadImageFailed)=\"loadImageFailed()\"\r\n          [backgroundColor]=\"'#000000'\"\r\n          [canvasRotation]=\"canvasRotation\"\r\n          [transform]=\"transform\"\r\n          [cropperMaxWidth]=\"cropperMaxWidth\"\r\n          [cropperMaxHeight]=\"cropperMaxHeight\"\r\n        ></image-cropper>\r\n\r\n        <div class=\"mrx-input-image-cropper__controls\">\r\n          <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n\r\n          <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #footerContent>\r\n    <mrx-button\r\n      [customClasses]=\"'mr-3'\"\r\n      [type]=\"'secondary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"close()\"\r\n    >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n    </mrx-button>\r\n    <mrx-button\r\n      [type]=\"'primary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"ok()\"\r\n    >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n    </mrx-button>\r\n  </ng-template>\r\n</mrx-modal>\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:rgba(31,34,38,.5);border-radius:4px;position:absolute;left:50%;bottom:24px;transform:translate(-50%)}:host::ng-deep .mrx-input-image-cropper__controls svg{cursor:pointer}:host::ng-deep .mrx-input-image-cropper__controls svg:not(:last-child){margin-right:16px}\n"], components: [{ type: i1.ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "okText", "closeText", "size", "color", "customClasses", "expandable", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { type: i2.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { type: i3.ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FileImageEditModalComponent, decorators: [{
+FileImageEditModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileImageEditModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileImageEditModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FileImageEditModalComponent, selector: "mrx-file-image-edit-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n  [title]=\"title\"\r\n  [size]=\"'medium'\"\r\n  (close)=\"close()\"\r\n>\r\n  <div class=\"row\">\r\n    <div class=\"col col-12\">\r\n      <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u0430\u044F \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0431\u0443\u0434\u0435\u0442 \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0430 \u043E\u0431\u043B\u043E\u0436\u043A\u0435 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B</p>\r\n    </div>\r\n\r\n    <div class=\"col col-12\">\r\n      <div class=\"mrx-input-image-cropper__wrapper\">\r\n        <image-cropper\r\n          [imageFile]=\"fileImage\"\r\n          [maintainAspectRatio]=\"true\"\r\n          [aspectRatio]=\"aspectRatio\"\r\n          format=\"png\"\r\n          (imageCropped)=\"imageCropped($event)\"\r\n          (imageLoaded)=\"imageLoaded($event)\"\r\n          (cropperReady)=\"cropperReady()\"\r\n          (loadImageFailed)=\"loadImageFailed()\"\r\n          [backgroundColor]=\"'#000000'\"\r\n          [canvasRotation]=\"canvasRotation\"\r\n          [transform]=\"transform\"\r\n          [cropperMaxWidth]=\"cropperMaxWidth\"\r\n          [cropperMaxHeight]=\"cropperMaxHeight\"\r\n        ></image-cropper>\r\n\r\n        <div class=\"mrx-input-image-cropper__controls\">\r\n          <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n\r\n          <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #footerContent>\r\n    <mrx-button\r\n      [customClasses]=\"'mr-3'\"\r\n      [type]=\"'secondary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"close()\"\r\n    >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n    </mrx-button>\r\n    <mrx-button\r\n      [type]=\"'primary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"ok()\"\r\n    >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n    </mrx-button>\r\n  </ng-template>\r\n</mrx-modal>\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:rgba(31,34,38,.5);border-radius:4px;position:absolute;left:50%;bottom:24px;transform:translate(-50%)}:host::ng-deep .mrx-input-image-cropper__controls svg{cursor:pointer}:host::ng-deep .mrx-input-image-cropper__controls svg:not(:last-child){margin-right:16px}\n"], dependencies: [{ kind: "component", type: i1.ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "okText", "closeText", "size", "color", "customClasses", "expandable", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { kind: "component", type: i2.ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }, { kind: "component", type: i3.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileImageEditModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-file-image-edit-modal', template: "<mrx-modal\r\n  [title]=\"title\"\r\n  [size]=\"'medium'\"\r\n  (close)=\"close()\"\r\n>\r\n  <div class=\"row\">\r\n    <div class=\"col col-12\">\r\n      <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u0430\u044F \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0431\u0443\u0434\u0435\u0442 \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0430 \u043E\u0431\u043B\u043E\u0436\u043A\u0435 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B</p>\r\n    </div>\r\n\r\n    <div class=\"col col-12\">\r\n      <div class=\"mrx-input-image-cropper__wrapper\">\r\n        <image-cropper\r\n          [imageFile]=\"fileImage\"\r\n          [maintainAspectRatio]=\"true\"\r\n          [aspectRatio]=\"aspectRatio\"\r\n          format=\"png\"\r\n          (imageCropped)=\"imageCropped($event)\"\r\n          (imageLoaded)=\"imageLoaded($event)\"\r\n          (cropperReady)=\"cropperReady()\"\r\n          (loadImageFailed)=\"loadImageFailed()\"\r\n          [backgroundColor]=\"'#000000'\"\r\n          [canvasRotation]=\"canvasRotation\"\r\n          [transform]=\"transform\"\r\n          [cropperMaxWidth]=\"cropperMaxWidth\"\r\n          [cropperMaxHeight]=\"cropperMaxHeight\"\r\n        ></image-cropper>\r\n\r\n        <div class=\"mrx-input-image-cropper__controls\">\r\n          <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n\r\n          <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #footerContent>\r\n    <mrx-button\r\n      [customClasses]=\"'mr-3'\"\r\n      [type]=\"'secondary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"close()\"\r\n    >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n    </mrx-button>\r\n    <mrx-button\r\n      [type]=\"'primary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"ok()\"\r\n    >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n    </mrx-button>\r\n  </ng-template>\r\n</mrx-modal>\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:rgba(31,34,38,.5);border-radius:4px;position:absolute;left:50%;bottom:24px;transform:translate(-50%)}:host::ng-deep .mrx-input-image-cropper__controls svg{cursor:pointer}:host::ng-deep .mrx-input-image-cropper__controls svg:not(:last-child){margin-right:16px}\n"] }]
         }], ctorParameters: function () { return []; } });

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

@@ -10,8 +10,8 @@ import { PreviewEnum } from './input-file-image.enum';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../services/file-upload/file-upload.service";
 import * as i2 from "ngx-simple-modal";
-import * as i3 from "ngx-file-drop";
-import * as i4 from "@angular/common";
+import * as i3 from "@angular/common";
+import * as i4 from "ngx-file-drop";
 export class InputFileImageComponent {
     constructor(imageUploadService, simpleModalService) {
         this.imageUploadService = imageUploadService;
@@ -293,9 +293,9 @@ export class InputFileImageComponent {
         return true;
     }
 }
-InputFileImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileImageComponent, deps: [{ token: i1.FileUploadService }, { token: i2.SimpleModalService }], target: i0.ɵɵFactoryTarget.Component });
-InputFileImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputFileImageComponent, selector: "mrx-input-file-image", inputs: { type: "type", preview: "preview", customClasses: "customClasses", required: "required", disabled: "disabled", lightDisabled: "lightDisabled", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", cropperMaxWidth: "cropperMaxWidth", cropperMaxHeight: "cropperMaxHeight", aspectRatio: "aspectRatio", formData: "formData", placeholder: "placeholder", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged" }, ngImport: i0, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n\r\n  <ng-container *ngIf=\"type === 'default'\">\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n\r\n    <ngx-file-drop *ngIf=\"canAdd\" (onFileDrop)=\"dropped($event)\"\r\n                   [className]=\"getDropZoneClasses\"\r\n                   [accept]=\"extensions || ''\"\r\n                   [disabled]=\"disabled\"\r\n                   (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n            class=\"mrx-input-file-image-input\"\r\n            (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n          <div class=\"mrx-input-file-image-input-info\">\r\n            <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <div class=\"mrx-input-file-image-preview\">\r\n      <div class=\"row\">\r\n        <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\" *ngFor=\"let file of files\">\r\n          <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n            <ng-container *ngIf=\"file.error\">\r\n              <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n              <div class=\"mrx-input-file-image-preview-item-error\">\r\n                <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                {{ file.error }}\r\n              </div>\r\n              <span class=\"mrx-input-file-image-preview-item-name\">\r\n                {{ file.name }}\r\n              </span>\r\n              <span class=\"mrx-input-file-image-preview-item-description\">\r\n                {{ formatBytes(file.size) }}\r\n              </span>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"file.uploading && !file.error\">\r\n              <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n                <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n                  <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n              <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n              <div class=\"mrx-input-file-image-preview-item-info\">\r\n                <span class=\"mrx-input-file-image-preview-item-name\">\r\n                  {{ file.name }}\r\n                </span>\r\n                <span class=\"mrx-input-file-image-preview-item-description\">\r\n                  {{ formatBytes(file.size) }}\r\n                </span>\r\n              </div>\r\n\r\n              <div class=\"mrx-input-file-image-controls\">\r\n                <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n                  <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n                </div>\r\n                <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n                  <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"type === 'avatar'\">\r\n    <ngx-file-drop (onFileDrop)=\"dropped($event)\"\r\n                   [className]=\"getDropZoneClasses\"\r\n                   [accept]=\"extensions || ''\"\r\n                   [disabled]=\"disabled\"\r\n                   (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n\r\n        <div\r\n            *ngIf=\"!files.length; else avatarTemplate\"\r\n            class=\"mrx-input-file-image-input\"\r\n            [class.mrx-input-file-image__disabled]=\"disabled\"\r\n             (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n          <div class=\"mrx-input-file-image-input-info\">\r\n            <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <ng-template #avatarTemplate>\r\n          <div class=\"mrx-input-file-image-avatar\" (click)=\"openFileSelector()\">\r\n            <div *ngFor=\"let file of files\" class=\"w-100 h-100\">\r\n              <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n                <ng-container *ngIf=\"file.error\">\r\n                  <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n                  <div class=\"mrx-input-file-image-avatar-item-error\">\r\n                    <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                    {{ file.error }}\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"file.uploading && !file.error\">\r\n                  <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n                  <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n                    <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                    <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n                      <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n                  <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n                  <div class=\"mrx-input-file-image-controls\">\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n                      <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n                    </div>\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n                      <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n  </ng-container>\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{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-primary)}.mrx-input-file-image-preview-item-description{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)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#FFFFFF;box-shadow:0 1px 4px #3a3a3a4d;border-radius:5px;padding:5px;display:none}.mrx-input-file-image-controls-item{min-width:16px;height:16px;cursor:pointer}.mrx-input-file-image-controls-item:not(:last-child){position:relative;padding-right:8px;border-right:1px solid #BFC5CC;margin-right:8px}.mrx-input-file-image-input{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-4);width:100%;height:100%;min-height:100px;gap:var(--spacing-2);border-radius:var(--border-radius-1);border:var(--border-width-default) dashed var(--neutral-bg-stroke-default);cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"], components: [{ type: i3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileImageComponent, decorators: [{
+InputFileImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputFileImageComponent, deps: [{ token: i1.FileUploadService }, { token: i2.SimpleModalService }], target: i0.ɵɵFactoryTarget.Component });
+InputFileImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InputFileImageComponent, selector: "mrx-input-file-image", inputs: { type: "type", preview: "preview", customClasses: "customClasses", required: "required", disabled: "disabled", lightDisabled: "lightDisabled", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", cropperMaxWidth: "cropperMaxWidth", cropperMaxHeight: "cropperMaxHeight", aspectRatio: "aspectRatio", formData: "formData", placeholder: "placeholder", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged" }, ngImport: i0, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n\r\n  <ng-container *ngIf=\"type === 'default'\">\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n\r\n    <ngx-file-drop *ngIf=\"canAdd\" (onFileDrop)=\"dropped($event)\"\r\n                   [className]=\"getDropZoneClasses\"\r\n                   [accept]=\"extensions || ''\"\r\n                   [disabled]=\"disabled\"\r\n                   (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n            class=\"mrx-input-file-image-input\"\r\n            (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n          <div class=\"mrx-input-file-image-input-info\">\r\n            <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <div class=\"mrx-input-file-image-preview\">\r\n      <div class=\"row\">\r\n        <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\" *ngFor=\"let file of files\">\r\n          <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n            <ng-container *ngIf=\"file.error\">\r\n              <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n              <div class=\"mrx-input-file-image-preview-item-error\">\r\n                <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                {{ file.error }}\r\n              </div>\r\n              <span class=\"mrx-input-file-image-preview-item-name\">\r\n                {{ file.name }}\r\n              </span>\r\n              <span class=\"mrx-input-file-image-preview-item-description\">\r\n                {{ formatBytes(file.size) }}\r\n              </span>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"file.uploading && !file.error\">\r\n              <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n                <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n                  <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n              <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n              <div class=\"mrx-input-file-image-preview-item-info\">\r\n                <span class=\"mrx-input-file-image-preview-item-name\">\r\n                  {{ file.name }}\r\n                </span>\r\n                <span class=\"mrx-input-file-image-preview-item-description\">\r\n                  {{ formatBytes(file.size) }}\r\n                </span>\r\n              </div>\r\n\r\n              <div class=\"mrx-input-file-image-controls\">\r\n                <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n                  <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n                </div>\r\n                <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n                  <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"type === 'avatar'\">\r\n    <ngx-file-drop (onFileDrop)=\"dropped($event)\"\r\n                   [className]=\"getDropZoneClasses\"\r\n                   [accept]=\"extensions || ''\"\r\n                   [disabled]=\"disabled\"\r\n                   (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n\r\n        <div\r\n            *ngIf=\"!files.length; else avatarTemplate\"\r\n            class=\"mrx-input-file-image-input\"\r\n            [class.mrx-input-file-image__disabled]=\"disabled\"\r\n             (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n          <div class=\"mrx-input-file-image-input-info\">\r\n            <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <ng-template #avatarTemplate>\r\n          <div class=\"mrx-input-file-image-avatar\" (click)=\"openFileSelector()\">\r\n            <div *ngFor=\"let file of files\" class=\"w-100 h-100\">\r\n              <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n                <ng-container *ngIf=\"file.error\">\r\n                  <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n                  <div class=\"mrx-input-file-image-avatar-item-error\">\r\n                    <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                    {{ file.error }}\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"file.uploading && !file.error\">\r\n                  <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n                  <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n                    <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                    <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n                      <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n                  <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n                  <div class=\"mrx-input-file-image-controls\">\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n                      <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n                    </div>\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n                      <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n  </ng-container>\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{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-primary)}.mrx-input-file-image-preview-item-description{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)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#FFFFFF;box-shadow:0 1px 4px #3a3a3a4d;border-radius:5px;padding:5px;display:none}.mrx-input-file-image-controls-item{min-width:16px;height:16px;cursor:pointer}.mrx-input-file-image-controls-item:not(:last-child){position:relative;padding-right:8px;border-right:1px solid #BFC5CC;margin-right:8px}.mrx-input-file-image-input{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-4);width:100%;height:100%;min-height:100px;gap:var(--spacing-2);border-radius:var(--border-radius-1);border:var(--border-width-default) dashed var(--neutral-bg-stroke-default);cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i4.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputFileImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-file-image', encapsulation: ViewEncapsulation.None, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n\r\n  <ng-container *ngIf=\"type === 'default'\">\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n\r\n    <ngx-file-drop *ngIf=\"canAdd\" (onFileDrop)=\"dropped($event)\"\r\n                   [className]=\"getDropZoneClasses\"\r\n                   [accept]=\"extensions || ''\"\r\n                   [disabled]=\"disabled\"\r\n                   (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n            class=\"mrx-input-file-image-input\"\r\n            (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n          <div class=\"mrx-input-file-image-input-info\">\r\n            <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <div class=\"mrx-input-file-image-preview\">\r\n      <div class=\"row\">\r\n        <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\" *ngFor=\"let file of files\">\r\n          <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n            <ng-container *ngIf=\"file.error\">\r\n              <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n              <div class=\"mrx-input-file-image-preview-item-error\">\r\n                <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                {{ file.error }}\r\n              </div>\r\n              <span class=\"mrx-input-file-image-preview-item-name\">\r\n                {{ file.name }}\r\n              </span>\r\n              <span class=\"mrx-input-file-image-preview-item-description\">\r\n                {{ formatBytes(file.size) }}\r\n              </span>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"file.uploading && !file.error\">\r\n              <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n                <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n                  <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n              <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n              <div class=\"mrx-input-file-image-preview-item-info\">\r\n                <span class=\"mrx-input-file-image-preview-item-name\">\r\n                  {{ file.name }}\r\n                </span>\r\n                <span class=\"mrx-input-file-image-preview-item-description\">\r\n                  {{ formatBytes(file.size) }}\r\n                </span>\r\n              </div>\r\n\r\n              <div class=\"mrx-input-file-image-controls\">\r\n                <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n                  <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n                </div>\r\n                <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n                  <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"type === 'avatar'\">\r\n    <ngx-file-drop (onFileDrop)=\"dropped($event)\"\r\n                   [className]=\"getDropZoneClasses\"\r\n                   [accept]=\"extensions || ''\"\r\n                   [disabled]=\"disabled\"\r\n                   (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n\r\n        <div\r\n            *ngIf=\"!files.length; else avatarTemplate\"\r\n            class=\"mrx-input-file-image-input\"\r\n            [class.mrx-input-file-image__disabled]=\"disabled\"\r\n             (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n          <div class=\"mrx-input-file-image-input-info\">\r\n            <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <ng-template #avatarTemplate>\r\n          <div class=\"mrx-input-file-image-avatar\" (click)=\"openFileSelector()\">\r\n            <div *ngFor=\"let file of files\" class=\"w-100 h-100\">\r\n              <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n                <ng-container *ngIf=\"file.error\">\r\n                  <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n                  <div class=\"mrx-input-file-image-avatar-item-error\">\r\n                    <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                    {{ file.error }}\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"file.uploading && !file.error\">\r\n                  <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n                  <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n                    <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                    <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n                      <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n                  <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n                  <div class=\"mrx-input-file-image-controls\">\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n                      <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n                    </div>\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n                      <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n  </ng-container>\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{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-primary)}.mrx-input-file-image-preview-item-description{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)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#FFFFFF;box-shadow:0 1px 4px #3a3a3a4d;border-radius:5px;padding:5px;display:none}.mrx-input-file-image-controls-item{min-width:16px;height:16px;cursor:pointer}.mrx-input-file-image-controls-item:not(:last-child){position:relative;padding-right:8px;border-right:1px solid #BFC5CC;margin-right:8px}.mrx-input-file-image-input{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-4);width:100%;height:100%;min-height:100px;gap:var(--spacing-2);border-radius:var(--border-radius-1);border:var(--border-width-default) dashed var(--neutral-bg-stroke-default);cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FileUploadService }, { type: i2.SimpleModalService }]; }, propDecorators: { type: [{

package/esm2020/lib/components/form/input-file-image/input-file-image.module.mjs

@@ -13,27 +13,25 @@ import * as i0 from "@angular/core";
 import * as i1 from "ngx-simple-modal";
 export class InputFileImageModule {
 }
-InputFileImageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputFileImageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileImageModule, declarations: [InputFileImageComponent,
+InputFileImageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputFileImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InputFileImageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: InputFileImageModule, declarations: [InputFileImageComponent,
         FileImageEditModalComponent], imports: [CommonModule,
         FormsModule,
         HttpClientModule,
         NgxFileDropModule,
         ModalModule,
         ButtonModule, i1.SimpleModalModule, ImageCropperModule], exports: [InputFileImageComponent] });
-InputFileImageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileImageModule, imports: [[
-            CommonModule,
-            FormsModule,
-            HttpClientModule,
-            NgxFileDropModule,
-            ModalModule,
-            ButtonModule,
-            SimpleModalModule.forRoot({
-                container: (() => document.querySelector('.page-wrapper'))()
-            }),
-            ImageCropperModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileImageModule, decorators: [{
+InputFileImageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputFileImageModule, imports: [CommonModule,
+        FormsModule,
+        HttpClientModule,
+        NgxFileDropModule,
+        ModalModule,
+        ButtonModule,
+        SimpleModalModule.forRoot({
+            container: (() => document.querySelector('.page-wrapper'))()
+        }),
+        ImageCropperModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputFileImageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -57,4 +55,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     ]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtZmlsZS1pbWFnZS5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9teXJ0YS11aS9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS9pbnB1dC1maWxlLWltYWdlL2lucHV0LWZpbGUtaW1hZ2UubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDckQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDdkQsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sb0VBQW9FLENBQUM7QUFDakgsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7O0FBdUIxRCxNQUFNLE9BQU8sb0JBQW9COztpSEFBcEIsb0JBQW9CO2tIQUFwQixvQkFBb0IsaUJBbkI3Qix1QkFBdUI7UUFDdkIsMkJBQTJCLGFBRzNCLFlBQVk7UUFDWixXQUFXO1FBQ1gsZ0JBQWdCO1FBQ2hCLGlCQUFpQjtRQUNqQixXQUFXO1FBQ1gsWUFBWSx3QkFJWixrQkFBa0IsYUFHbEIsdUJBQXVCO2tIQUdkLG9CQUFvQixZQWhCdEI7WUFDUCxZQUFZO1lBQ1osV0FBVztZQUNYLGdCQUFnQjtZQUNoQixpQkFBaUI7WUFDakIsV0FBVztZQUNYLFlBQVk7WUFDWixpQkFBaUIsQ0FBQyxPQUFPLENBQUM7Z0JBQ3hCLFNBQVMsRUFBRSxDQUFDLEdBQUcsRUFBRSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsZUFBZSxDQUFnQixDQUFDLEVBQUU7YUFBQyxDQUM3RTtZQUNELGtCQUFrQjtTQUNuQjsyRkFLVSxvQkFBb0I7a0JBckJoQyxRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWix1QkFBdUI7d0JBQ3ZCLDJCQUEyQjtxQkFDNUI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osV0FBVzt3QkFDWCxnQkFBZ0I7d0JBQ2hCLGlCQUFpQjt3QkFDakIsV0FBVzt3QkFDWCxZQUFZO3dCQUNaLGlCQUFpQixDQUFDLE9BQU8sQ0FBQzs0QkFDeEIsU0FBUyxFQUFFLENBQUMsR0FBRyxFQUFFLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxlQUFlLENBQWdCLENBQUMsRUFBRTt5QkFBQyxDQUM3RTt3QkFDRCxrQkFBa0I7cUJBQ25CO29CQUNELE9BQU8sRUFBRTt3QkFDUCx1QkFBdUI7cUJBQ3hCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgSW5wdXRGaWxlSW1hZ2VDb21wb25lbnQgfSBmcm9tICcuL2lucHV0LWZpbGUtaW1hZ2UuY29tcG9uZW50JztcclxuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcbmltcG9ydCB7IEh0dHBDbGllbnRNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24vaHR0cCc7XHJcbmltcG9ydCB7IE5neEZpbGVEcm9wTW9kdWxlIH0gZnJvbSAnbmd4LWZpbGUtZHJvcCc7XHJcbmltcG9ydCB7IFNpbXBsZU1vZGFsTW9kdWxlIH0gZnJvbSAnbmd4LXNpbXBsZS1tb2RhbCc7XHJcbmltcG9ydCB7IEltYWdlQ3JvcHBlck1vZHVsZSB9IGZyb20gJ25neC1pbWFnZS1jcm9wcGVyJztcclxuaW1wb3J0IHsgRmlsZUltYWdlRWRpdE1vZGFsQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2ZpbGUtaW1hZ2UtZWRpdC1tb2RhbC9maWxlLWltYWdlLWVkaXQtbW9kYWwuY29tcG9uZW50JztcclxuaW1wb3J0IHsgTW9kYWxNb2R1bGUgfSBmcm9tICcuLi8uLi9tb2RhbC9tb2RhbC5tb2R1bGUnO1xyXG5pbXBvcnQgeyBCdXR0b25Nb2R1bGUgfSBmcm9tICcuLi8uLi9idXR0b24vYnV0dG9uLm1vZHVsZSc7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgSW5wdXRGaWxlSW1hZ2VDb21wb25lbnQsXHJcbiAgICBGaWxlSW1hZ2VFZGl0TW9kYWxDb21wb25lbnRcclxuICBdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIEZvcm1zTW9kdWxlLFxyXG4gICAgSHR0cENsaWVudE1vZHVsZSxcclxuICAgIE5neEZpbGVEcm9wTW9kdWxlLFxyXG4gICAgTW9kYWxNb2R1bGUsXHJcbiAgICBCdXR0b25Nb2R1bGUsXHJcbiAgICBTaW1wbGVNb2RhbE1vZHVsZS5mb3JSb290KHtcclxuICAgICAgY29udGFpbmVyOiAoKCkgPT4gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLnBhZ2Utd3JhcHBlcicpIGFzIEhUTUxFbGVtZW50KSgpfVxyXG4gICAgKSxcclxuICAgIEltYWdlQ3JvcHBlck1vZHVsZVxyXG4gIF0sXHJcbiAgZXhwb3J0czogW1xyXG4gICAgSW5wdXRGaWxlSW1hZ2VDb21wb25lbnRcclxuICBdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBJbnB1dEZpbGVJbWFnZU1vZHVsZSB7IH1cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtZmlsZS1pbWFnZS5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9teXJ0YS11aS9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS9pbnB1dC1maWxlLWltYWdlL2lucHV0LWZpbGUtaW1hZ2UubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDckQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDdkQsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sb0VBQW9FLENBQUM7QUFDakgsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7O0FBdUIxRCxNQUFNLE9BQU8sb0JBQW9COztpSEFBcEIsb0JBQW9CO2tIQUFwQixvQkFBb0IsaUJBbkI3Qix1QkFBdUI7UUFDdkIsMkJBQTJCLGFBRzNCLFlBQVk7UUFDWixXQUFXO1FBQ1gsZ0JBQWdCO1FBQ2hCLGlCQUFpQjtRQUNqQixXQUFXO1FBQ1gsWUFBWSx3QkFJWixrQkFBa0IsYUFHbEIsdUJBQXVCO2tIQUdkLG9CQUFvQixZQWY3QixZQUFZO1FBQ1osV0FBVztRQUNYLGdCQUFnQjtRQUNoQixpQkFBaUI7UUFDakIsV0FBVztRQUNYLFlBQVk7UUFDWixpQkFBaUIsQ0FBQyxPQUFPLENBQUM7WUFDeEIsU0FBUyxFQUFFLENBQUMsR0FBRyxFQUFFLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxlQUFlLENBQWdCLENBQUMsRUFBRTtTQUFDLENBQzdFO1FBQ0Qsa0JBQWtCOzJGQU1ULG9CQUFvQjtrQkFyQmhDLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLHVCQUF1Qjt3QkFDdkIsMkJBQTJCO3FCQUM1QjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixXQUFXO3dCQUNYLGdCQUFnQjt3QkFDaEIsaUJBQWlCO3dCQUNqQixXQUFXO3dCQUNYLFlBQVk7d0JBQ1osaUJBQWlCLENBQUMsT0FBTyxDQUFDOzRCQUN4QixTQUFTLEVBQUUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBZ0IsQ0FBQyxFQUFFO3lCQUFDLENBQzdFO3dCQUNELGtCQUFrQjtxQkFDbkI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLHVCQUF1QjtxQkFDeEI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBJbnB1dEZpbGVJbWFnZUNvbXBvbmVudCB9IGZyb20gJy4vaW5wdXQtZmlsZS1pbWFnZS5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgSHR0cENsaWVudE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcclxuaW1wb3J0IHsgTmd4RmlsZURyb3BNb2R1bGUgfSBmcm9tICduZ3gtZmlsZS1kcm9wJztcclxuaW1wb3J0IHsgU2ltcGxlTW9kYWxNb2R1bGUgfSBmcm9tICduZ3gtc2ltcGxlLW1vZGFsJztcclxuaW1wb3J0IHsgSW1hZ2VDcm9wcGVyTW9kdWxlIH0gZnJvbSAnbmd4LWltYWdlLWNyb3BwZXInO1xyXG5pbXBvcnQgeyBGaWxlSW1hZ2VFZGl0TW9kYWxDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZmlsZS1pbWFnZS1lZGl0LW1vZGFsL2ZpbGUtaW1hZ2UtZWRpdC1tb2RhbC5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBNb2RhbE1vZHVsZSB9IGZyb20gJy4uLy4uL21vZGFsL21vZGFsLm1vZHVsZSc7XHJcbmltcG9ydCB7IEJ1dHRvbk1vZHVsZSB9IGZyb20gJy4uLy4uL2J1dHRvbi9idXR0b24ubW9kdWxlJztcclxuXHJcbkBOZ01vZHVsZSh7XHJcbiAgZGVjbGFyYXRpb25zOiBbXHJcbiAgICBJbnB1dEZpbGVJbWFnZUNvbXBvbmVudCxcclxuICAgIEZpbGVJbWFnZUVkaXRNb2RhbENvbXBvbmVudFxyXG4gIF0sXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gICAgRm9ybXNNb2R1bGUsXHJcbiAgICBIdHRwQ2xpZW50TW9kdWxlLFxyXG4gICAgTmd4RmlsZURyb3BNb2R1bGUsXHJcbiAgICBNb2RhbE1vZHVsZSxcclxuICAgIEJ1dHRvbk1vZHVsZSxcclxuICAgIFNpbXBsZU1vZGFsTW9kdWxlLmZvclJvb3Qoe1xyXG4gICAgICBjb250YWluZXI6ICgoKSA9PiBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcucGFnZS13cmFwcGVyJykgYXMgSFRNTEVsZW1lbnQpKCl9XHJcbiAgICApLFxyXG4gICAgSW1hZ2VDcm9wcGVyTW9kdWxlXHJcbiAgXSxcclxuICBleHBvcnRzOiBbXHJcbiAgICBJbnB1dEZpbGVJbWFnZUNvbXBvbmVudFxyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIElucHV0RmlsZUltYWdlTW9kdWxlIHsgfVxyXG4iXX0=

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

@@ -5,10 +5,10 @@ import { v4 as uuidv4 } from 'uuid';
 import { distinctUntilChanged, pairwise, startWith } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "../../error-message/error-message.component";
+import * as i2 from "@angular/common";
 import * as i3 from "../../save-state/save-state.component";
-import * as i4 from "ngx-mask";
-import * as i5 from "@angular/common";
+import * as i4 from "../../error-message/error-message.component";
+import * as i5 from "ngx-mask";
 const noop = () => {
 };
 export class InputNumberComponent {
@@ -199,11 +199,11 @@ export class InputNumberComponent {
     }
 }
 InputNumberComponent._delimitersInitialised = false;
-InputNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputNumberComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-InputNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputNumberComponent, selector: "mrx-input-number", inputs: { fields: "fields", placeholder: "placeholder", innerClass: "innerClass", customClasses: "customClasses", required: "required", allowNegative: "allowNegative", size: "size", separator: "separator", decimalSeparator: "decimalSeparator", isNullableValue: "isNullableValue", isAutoCorrectingValue: "isAutoCorrectingValue", invalid: "invalid", checkInvalid: "checkInvalid", setNumberType: ["numberType", "setNumberType"], setInvalidMessage: ["invalidMessage", "setInvalidMessage"], setDisabled: ["disabled", "setDisabled"], setReadonly: ["readonly", "setReadonly"], setMin: ["minValue", "setMin"], setMax: ["maxValue", "setMax"] }, outputs: { changed: "changed", modelChange: "modelChange", blurred: "blurred" }, providers: [
+InputNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputNumberComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+InputNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InputNumberComponent, selector: "mrx-input-number", inputs: { fields: "fields", placeholder: "placeholder", innerClass: "innerClass", customClasses: "customClasses", required: "required", allowNegative: "allowNegative", size: "size", separator: "separator", decimalSeparator: "decimalSeparator", isNullableValue: "isNullableValue", isAutoCorrectingValue: "isAutoCorrectingValue", invalid: "invalid", checkInvalid: "checkInvalid", setNumberType: ["numberType", "setNumberType"], setInvalidMessage: ["invalidMessage", "setInvalidMessage"], setDisabled: ["disabled", "setDisabled"], setReadonly: ["readonly", "setReadonly"], setMin: ["minValue", "setMin"], setMax: ["maxValue", "setMax"] }, outputs: { changed: "changed", modelChange: "modelChange", blurred: "blurred" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputNumberComponent), multi: true },
-    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n    class=\"mrx-input-number\"\r\n    [class]=\"getClasses\"\r\n    [class.mrx-input-error]=\"!isValid || invalid\"\r\n    [class.-disabled]=\"disabled\"\r\n    [class.-readonly]=\"readonly\"\r\n>\r\n  <div class=\"mrx-input-number__wrapper\">\r\n    <form [formGroup]=\"numberForm\">\r\n      <div>\r\n        <input\r\n            #inputElement\r\n            autocomplete=\"nope\"\r\n            formControlName=\"number\"\r\n            type=\"text\"\r\n            [thousandSeparator]=\"thousandsSeparator\"\r\n            [decimalMarker]=\"decimalMarker\"\r\n            [class]=\"innerClass\"\r\n            [mask]=\"'separator.' + decimals\"\r\n            [allowNegativeNumbers]=\"allowNegative\"\r\n            [placeholder]=\"placeholder ? placeholder : ''\"\r\n            (blur)=\"onBlur($event)\"\r\n        />\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <mrx-error-message *ngIf=\"!isValid && invalidMessageStart\">\r\n    {{invalidMessageStart}}\r\n    <a href=\"#\" (click)=\"resetToMax($event)\">{{maxMessage}}</a>\r\n    {{invalidMessageEnd}}\r\n  </mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-number.mrx-input-number{width:100%;position:relative}.mrx-input-number.mrx-input-number .mrx-input-text__wrapper{position:relative}.mrx-input-number.mrx-input-number input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-number.mrx-input-number input:focus,.mrx-input-number.mrx-input-number input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-number.mrx-input-number input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-number.mrx-input-number.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input__readonly input{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input-number-lg input{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)}.mrx-input-number.mrx-input-number.mrx-input-number-lg:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-lg.mrx-input-number-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-md input{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)}.mrx-input-number.mrx-input-number.mrx-input-number-md:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-md.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-sm input{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)}.mrx-input-number.mrx-input-number.mrx-input-number-sm:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-sm.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-number.mrx-input-number.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-number.mrx-input-number.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-number.mrx-input-number.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-number.mrx-input-number.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-number.mrx-input-number.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"], components: [{ type: i2.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: i3.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputNumberComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n    class=\"mrx-input-number\"\r\n    [class]=\"getClasses\"\r\n    [class.mrx-input-error]=\"!isValid || invalid\"\r\n    [class.-disabled]=\"disabled\"\r\n    [class.-readonly]=\"readonly\"\r\n>\r\n  <div class=\"mrx-input-number__wrapper\">\r\n    <form [formGroup]=\"numberForm\">\r\n      <div>\r\n        <input\r\n            #inputElement\r\n            autocomplete=\"nope\"\r\n            formControlName=\"number\"\r\n            type=\"text\"\r\n            [thousandSeparator]=\"thousandsSeparator\"\r\n            [decimalMarker]=\"decimalMarker\"\r\n            [class]=\"innerClass\"\r\n            [mask]=\"'separator.' + decimals\"\r\n            [allowNegativeNumbers]=\"allowNegative\"\r\n            [placeholder]=\"placeholder ? placeholder : ''\"\r\n            (blur)=\"onBlur($event)\"\r\n        />\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <mrx-error-message *ngIf=\"!isValid && invalidMessageStart\">\r\n    {{invalidMessageStart}}\r\n    <a href=\"#\" (click)=\"resetToMax($event)\">{{maxMessage}}</a>\r\n    {{invalidMessageEnd}}\r\n  </mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-number.mrx-input-number{width:100%;position:relative}.mrx-input-number.mrx-input-number .mrx-input-text__wrapper{position:relative}.mrx-input-number.mrx-input-number input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-number.mrx-input-number input:focus,.mrx-input-number.mrx-input-number input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-number.mrx-input-number input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-number.mrx-input-number.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input__readonly input{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input-number-lg input{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)}.mrx-input-number.mrx-input-number.mrx-input-number-lg:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-lg.mrx-input-number-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-md input{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)}.mrx-input-number.mrx-input-number.mrx-input-number-md:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-md.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-sm input{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)}.mrx-input-number.mrx-input-number.mrx-input-number-sm:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-sm.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-number.mrx-input-number.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-number.mrx-input-number.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-number.mrx-input-number.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-number.mrx-input-number.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-number.mrx-input-number.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i5.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-number', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputNumberComponent), multi: true },