myrta-ui 1.0.43 → 14.0.0-beta.1

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

@@ -15,11 +15,11 @@ import localeEn from 'air-datepicker/locale/en';
 import localeRu from 'air-datepicker/locale/ru';
 import { getDateObject } from './helpers/get-date-object';
 import * as i0 from "@angular/core";
-import * as i1 from "../../label/label.component";
-import * as i2 from "../../error-message/error-message.component";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
 import * as i3 from "../../save-state/save-state.component";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/forms";
+import * as i4 from "../../error-message/error-message.component";
+import * as i5 from "../../label/label.component";
 import * as i6 from "ngx-mask";
 export class InputDatepickerComponent {
     constructor() {
@@ -284,11 +284,11 @@ export class InputDatepickerComponent {
         this.onTouched();
     }
 }
-InputDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputDatepickerComponent, selector: "mrx-input-datepicker", inputs: { fields: "fields", size: "size", format: "format", locale: "locale", customClasses: "customClasses", dateLabel: "dateLabel", timeLabel: "timeLabel", datePlaceholder: "datePlaceholder", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", timepicker: "timepicker", minDate: "minDate", maxDate: "maxDate", inline: "inline", closable: "closable", leadZeroDateTime: "leadZeroDateTime", mask: "mask", container: "container", validationType: "validationType", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", isShowMessages: "isShowMessages" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
+InputDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InputDatepickerComponent, selector: "mrx-input-datepicker", inputs: { fields: "fields", size: "size", format: "format", locale: "locale", customClasses: "customClasses", dateLabel: "dateLabel", timeLabel: "timeLabel", datePlaceholder: "datePlaceholder", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", timepicker: "timepicker", minDate: "minDate", maxDate: "maxDate", inline: "inline", closable: "closable", leadZeroDateTime: "leadZeroDateTime", mask: "mask", container: "container", validationType: "validationType", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", isShowMessages: "isShowMessages" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatepickerComponent), multi: true }
-    ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"mrx-input-date\"\r\n  [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class]=\"getClasses\"\r\n>\r\n  <div class=\"\">\r\n    <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n    <div class=\"mrx-input-date__wrapper\">\r\n      <input\r\n        #dateInput\r\n        type=\"text\"\r\n        autocomplete=\"nope\"\r\n        class=\"mrx-input-date__input mrx-input-date__date\"\r\n        [placeholder]=\"placeholder\"\r\n        [ngModel]=\"getDateValue\"\r\n        [mask]=\"mask\"\r\n        [leadZeroDateTime]=\"leadZeroDateTime\"\r\n        [validation]=\"false\"\r\n        [disabled]=\"disabled || readonly\"\r\n        (input)=\"updateDateValue(dateInput)\"\r\n        (click)=\"clickToInput(dateInput)\"\r\n      />\r\n\r\n      <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n          <span\r\n            class=\"mrx-icon icon-close\"\r\n            *ngIf=\"isViewCleanIcon && !(disabled || readonly)\"\r\n            (click)=\"clickToIconClear()\"\r\n            [class.icon-font-16]=\"size === 'small'\"\r\n            [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n          ></span>\r\n        <span\r\n          class=\"mrx-icon icon-calendar\"\r\n          (click)=\"clickToIconCalendar()\"\r\n          [class.icon-font-16]=\"size === 'small'\"\r\n          [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"invalid; else innerInvalidTemplate\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <ng-template #innerInvalidTemplate>\r\n    <mrx-error-message\r\n      *ngIf=\"innerInvalid\"\r\n      [invalidMessage]=\"innerInvalidMessage\"\r\n    ></mrx-error-message>\r\n  </ng-template>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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-date.mrx-input-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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-date.mrx-input-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}.mrx-input-date.mrx-input-date.-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-date.mrx-input-date.-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: i1.LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "disabled", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "isSwitch", "switchLabel", "switchValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { type: i2.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }, { type: i3.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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: i6.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDatepickerComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"mrx-input-date\"\r\n  [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class]=\"getClasses\"\r\n>\r\n  <div class=\"\">\r\n    <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n    <div class=\"mrx-input-date__wrapper\">\r\n      <input\r\n        #dateInput\r\n        type=\"text\"\r\n        autocomplete=\"nope\"\r\n        class=\"mrx-input-date__input mrx-input-date__date\"\r\n        [placeholder]=\"placeholder\"\r\n        [ngModel]=\"getDateValue\"\r\n        [mask]=\"mask\"\r\n        [leadZeroDateTime]=\"leadZeroDateTime\"\r\n        [validation]=\"false\"\r\n        [disabled]=\"disabled || readonly\"\r\n        (input)=\"updateDateValue(dateInput)\"\r\n        (click)=\"clickToInput(dateInput)\"\r\n      />\r\n\r\n      <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n          <span\r\n            class=\"mrx-icon icon-close\"\r\n            *ngIf=\"isViewCleanIcon && !(disabled || readonly)\"\r\n            (click)=\"clickToIconClear()\"\r\n            [class.icon-font-16]=\"size === 'small'\"\r\n            [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n          ></span>\r\n        <span\r\n          class=\"mrx-icon icon-calendar\"\r\n          (click)=\"clickToIconCalendar()\"\r\n          [class.icon-font-16]=\"size === 'small'\"\r\n          [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"invalid; else innerInvalidTemplate\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <ng-template #innerInvalidTemplate>\r\n    <mrx-error-message\r\n      *ngIf=\"innerInvalid\"\r\n      [invalidMessage]=\"innerInvalidMessage\"\r\n    ></mrx-error-message>\r\n  </ng-template>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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-date.mrx-input-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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-date.mrx-input-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}.mrx-input-date.mrx-input-date.-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-date.mrx-input-date.-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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }, { kind: "component", type: i5.LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "disabled", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "isSwitch", "switchLabel", "switchValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { kind: "directive", type: i6.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-datepicker', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatepickerComponent), multi: true }

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

@@ -15,21 +15,19 @@ const maskConfigFunction = () => {
 };
 export class InputDatepickerModule {
 }
-InputDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDatepickerModule, declarations: [InputDatepickerComponent], imports: [CommonModule,
+InputDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InputDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: InputDatepickerModule, declarations: [InputDatepickerComponent], imports: [CommonModule,
         FormsModule,
         SaveStateModule,
         ErrorMessageModule,
         LabelModule, i1.NgxMaskModule], exports: [InputDatepickerComponent] });
-InputDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDatepickerModule, imports: [[
-            CommonModule,
-            FormsModule,
-            SaveStateModule,
-            ErrorMessageModule,
-            LabelModule,
-            NgxMaskModule.forRoot(maskConfigFunction),
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDatepickerModule, decorators: [{
+InputDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputDatepickerModule, imports: [CommonModule,
+        FormsModule,
+        SaveStateModule,
+        ErrorMessageModule,
+        LabelModule,
+        NgxMaskModule.forRoot(maskConfigFunction)] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [InputDatepickerComponent],
@@ -45,4 +43,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     exports: [InputDatepickerComponent],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtZGF0ZXBpY2tlci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9teXJ0YS11aS9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS9pbnB1dC1kYXRlcGlja2VyL2lucHV0LWRhdGVwaWNrZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ3hFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQVcsYUFBYSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ2xELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBQzlFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7OztBQUVyRSxNQUFNLGtCQUFrQixHQUEyQixHQUFHLEVBQUU7SUFDdEQsT0FBTztRQUNMLFVBQVUsRUFBRSxLQUFLO0tBQ2xCLENBQUM7QUFDSixDQUFDLENBQUM7QUFlRixNQUFNLE9BQU8scUJBQXFCOztrSEFBckIscUJBQXFCO21IQUFyQixxQkFBcUIsaUJBWmpCLHdCQUF3QixhQUVyQyxZQUFZO1FBQ1osV0FBVztRQUNYLGVBQWU7UUFDZixrQkFBa0I7UUFDbEIsV0FBVywrQkFJSCx3QkFBd0I7bUhBRXZCLHFCQUFxQixZQVh2QjtZQUNQLFlBQVk7WUFDWixXQUFXO1lBQ1gsZUFBZTtZQUNmLGtCQUFrQjtZQUNsQixXQUFXO1lBQ1gsYUFBYSxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsQ0FBQztTQUMxQzsyRkFJVSxxQkFBcUI7a0JBYmpDLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsd0JBQXdCLENBQUM7b0JBQ3hDLE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7d0JBQ1gsZUFBZTt3QkFDZixrQkFBa0I7d0JBQ2xCLFdBQVc7d0JBQ1gsYUFBYSxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsQ0FBQztxQkFDMUM7b0JBQ0QsT0FBTyxFQUFFLENBQUMsc0JBQXNCLENBQUM7b0JBQ2pDLE9BQU8sRUFBRSxDQUFDLHdCQUF3QixDQUFDO2lCQUNwQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENVU1RPTV9FTEVNRU5UU19TQ0hFTUEsIE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IElucHV0RGF0ZXBpY2tlckNvbXBvbmVudCB9IGZyb20gJy4vaW5wdXQtZGF0ZXBpY2tlci5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgSUNvbmZpZywgTmd4TWFza01vZHVsZSB9IGZyb20gJ25neC1tYXNrJztcclxuaW1wb3J0IHsgRXJyb3JNZXNzYWdlTW9kdWxlIH0gZnJvbSAnLi4vLi4vZXJyb3ItbWVzc2FnZS9lcnJvci1tZXNzYWdlLm1vZHVsZSc7XHJcbmltcG9ydCB7IExhYmVsTW9kdWxlIH0gZnJvbSAnLi4vLi4vbGFiZWwvbGFiZWwubW9kdWxlJztcclxuaW1wb3J0IHsgU2F2ZVN0YXRlTW9kdWxlIH0gZnJvbSBcIi4uLy4uL3NhdmUtc3RhdGUvc2F2ZS1zdGF0ZS5tb2R1bGVcIjtcclxuXHJcbmNvbnN0IG1hc2tDb25maWdGdW5jdGlvbjogKCkgPT4gUGFydGlhbDxJQ29uZmlnPiA9ICgpID0+IHtcclxuICByZXR1cm4ge1xyXG4gICAgdmFsaWRhdGlvbjogZmFsc2UsXHJcbiAgfTtcclxufTtcclxuXHJcbkBOZ01vZHVsZSh7XHJcbiAgZGVjbGFyYXRpb25zOiBbSW5wdXREYXRlcGlja2VyQ29tcG9uZW50XSxcclxuICBpbXBvcnRzOiBbXHJcbiAgICBDb21tb25Nb2R1bGUsXHJcbiAgICBGb3Jtc01vZHVsZSxcclxuICAgIFNhdmVTdGF0ZU1vZHVsZSxcclxuICAgIEVycm9yTWVzc2FnZU1vZHVsZSxcclxuICAgIExhYmVsTW9kdWxlLFxyXG4gICAgTmd4TWFza01vZHVsZS5mb3JSb290KG1hc2tDb25maWdGdW5jdGlvbiksXHJcbiAgXSxcclxuICBzY2hlbWFzOiBbQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQV0sXHJcbiAgZXhwb3J0czogW0lucHV0RGF0ZXBpY2tlckNvbXBvbmVudF0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBJbnB1dERhdGVwaWNrZXJNb2R1bGUge31cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtZGF0ZXBpY2tlci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9teXJ0YS11aS9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS9pbnB1dC1kYXRlcGlja2VyL2lucHV0LWRhdGVwaWNrZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ3hFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQVcsYUFBYSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ2xELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBQzlFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7OztBQUVyRSxNQUFNLGtCQUFrQixHQUEyQixHQUFHLEVBQUU7SUFDdEQsT0FBTztRQUNMLFVBQVUsRUFBRSxLQUFLO0tBQ2xCLENBQUM7QUFDSixDQUFDLENBQUM7QUFlRixNQUFNLE9BQU8scUJBQXFCOztrSEFBckIscUJBQXFCO21IQUFyQixxQkFBcUIsaUJBWmpCLHdCQUF3QixhQUVyQyxZQUFZO1FBQ1osV0FBVztRQUNYLGVBQWU7UUFDZixrQkFBa0I7UUFDbEIsV0FBVywrQkFJSCx3QkFBd0I7bUhBRXZCLHFCQUFxQixZQVY5QixZQUFZO1FBQ1osV0FBVztRQUNYLGVBQWU7UUFDZixrQkFBa0I7UUFDbEIsV0FBVztRQUNYLGFBQWEsQ0FBQyxPQUFPLENBQUMsa0JBQWtCLENBQUM7MkZBS2hDLHFCQUFxQjtrQkFiakMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQztvQkFDeEMsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osV0FBVzt3QkFDWCxlQUFlO3dCQUNmLGtCQUFrQjt3QkFDbEIsV0FBVzt3QkFDWCxhQUFhLENBQUMsT0FBTyxDQUFDLGtCQUFrQixDQUFDO3FCQUMxQztvQkFDRCxPQUFPLEVBQUUsQ0FBQyxzQkFBc0IsQ0FBQztvQkFDakMsT0FBTyxFQUFFLENBQUMsd0JBQXdCLENBQUM7aUJBQ3BDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQSwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgSW5wdXREYXRlcGlja2VyQ29tcG9uZW50IH0gZnJvbSAnLi9pbnB1dC1kYXRlcGlja2VyLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBJQ29uZmlnLCBOZ3hNYXNrTW9kdWxlIH0gZnJvbSAnbmd4LW1hc2snO1xyXG5pbXBvcnQgeyBFcnJvck1lc3NhZ2VNb2R1bGUgfSBmcm9tICcuLi8uLi9lcnJvci1tZXNzYWdlL2Vycm9yLW1lc3NhZ2UubW9kdWxlJztcclxuaW1wb3J0IHsgTGFiZWxNb2R1bGUgfSBmcm9tICcuLi8uLi9sYWJlbC9sYWJlbC5tb2R1bGUnO1xyXG5pbXBvcnQgeyBTYXZlU3RhdGVNb2R1bGUgfSBmcm9tIFwiLi4vLi4vc2F2ZS1zdGF0ZS9zYXZlLXN0YXRlLm1vZHVsZVwiO1xyXG5cclxuY29uc3QgbWFza0NvbmZpZ0Z1bmN0aW9uOiAoKSA9PiBQYXJ0aWFsPElDb25maWc+ID0gKCkgPT4ge1xyXG4gIHJldHVybiB7XHJcbiAgICB2YWxpZGF0aW9uOiBmYWxzZSxcclxuICB9O1xyXG59O1xyXG5cclxuQE5nTW9kdWxlKHtcclxuICBkZWNsYXJhdGlvbnM6IFtJbnB1dERhdGVwaWNrZXJDb21wb25lbnRdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIEZvcm1zTW9kdWxlLFxyXG4gICAgU2F2ZVN0YXRlTW9kdWxlLFxyXG4gICAgRXJyb3JNZXNzYWdlTW9kdWxlLFxyXG4gICAgTGFiZWxNb2R1bGUsXHJcbiAgICBOZ3hNYXNrTW9kdWxlLmZvclJvb3QobWFza0NvbmZpZ0Z1bmN0aW9uKSxcclxuICBdLFxyXG4gIHNjaGVtYXM6IFtDVVNUT01fRUxFTUVOVFNfU0NIRU1BXSxcclxuICBleHBvcnRzOiBbSW5wdXREYXRlcGlja2VyQ29tcG9uZW50XSxcclxufSlcclxuZXhwb3J0IGNsYXNzIElucHV0RGF0ZXBpY2tlck1vZHVsZSB7fVxyXG4iXX0=

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) {
@@ -277,9 +277,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      <span class=\"file-link absent\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n      </span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n         [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n      <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        {{ file.name }}\r\n      </a>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"ng-custom-file-input-btn-stop ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          >\r\n            <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary)!important}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}\n"], components: [{ type: i2.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { type: i3.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: i5.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileComponent, decorators: [{
+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      <span class=\"file-link absent\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n      </span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n         [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n      <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        {{ file.name }}\r\n      </a>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"ng-custom-file-input-btn-stop ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          >\r\n            <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary)!important}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}\n"], 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: ["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      <span class=\"file-link absent\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n      </span>\r\n    </div>\r\n\r\n    <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n         [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n      <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n        <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n          <defs/>\r\n          <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n                d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n                clip-rule=\"evenodd\"/>\r\n        </svg>\r\n        {{ file.name }}\r\n      </a>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"ng-custom-file-input-btn-stop ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          >\r\n            <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary)!important}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FileUploadService }]; }, propDecorators: { autoUpload: [{

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]=\"1 / 1\"\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]=\"200\"\r\n          [cropperMaxHeight]=\"200\"\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\r\n<!--<div class=\"modal-content accent-head md mrx-input-image-modal\">-->\r\n<!--  <div class=\"modal-header\">-->\r\n<!--    <div class=\"modal-title justify-content-start\" [innerHTML]=\"title\"></div>-->\r\n<!--    <span class='close close-click' (click)=\"close()\">-->\r\n<!--            <svg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'>-->\r\n<!--              <path d='M13 1L1 13M1 1l12 12' stroke='#3A3A3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>-->\r\n<!--            </svg>-->\r\n<!--        </span>-->\r\n<!--  </div>-->\r\n<!--  <div class=\"modal-body\">-->\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]=\"1 / 1\"-->\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<!--          ></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<!--  </div>-->\r\n<!--  <div class=\"modal-footer\">-->\r\n<!--    <button class=\"btn btn-outline\" (click)=\"close()\">\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C</button>-->\r\n<!--    <button class=\"btn\" (click)=\"ok()\">\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C</button>-->\r\n<!--  </div>-->\r\n<!--</div>-->\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]=\"1 / 1\"\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]=\"200\"\r\n          [cropperMaxHeight]=\"200\"\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\r\n<!--<div class=\"modal-content accent-head md mrx-input-image-modal\">-->\r\n<!--  <div class=\"modal-header\">-->\r\n<!--    <div class=\"modal-title justify-content-start\" [innerHTML]=\"title\"></div>-->\r\n<!--    <span class='close close-click' (click)=\"close()\">-->\r\n<!--            <svg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'>-->\r\n<!--              <path d='M13 1L1 13M1 1l12 12' stroke='#3A3A3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>-->\r\n<!--            </svg>-->\r\n<!--        </span>-->\r\n<!--  </div>-->\r\n<!--  <div class=\"modal-body\">-->\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]=\"1 / 1\"-->\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<!--          ></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<!--  </div>-->\r\n<!--  <div class=\"modal-footer\">-->\r\n<!--    <button class=\"btn btn-outline\" (click)=\"close()\">\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C</button>-->\r\n<!--    <button class=\"btn\" (click)=\"ok()\">\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C</button>-->\r\n<!--  </div>-->\r\n<!--</div>-->\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]=\"1 / 1\"\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]=\"200\"\r\n          [cropperMaxHeight]=\"200\"\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\r\n<!--<div class=\"modal-content accent-head md mrx-input-image-modal\">-->\r\n<!--  <div class=\"modal-header\">-->\r\n<!--    <div class=\"modal-title justify-content-start\" [innerHTML]=\"title\"></div>-->\r\n<!--    <span class='close close-click' (click)=\"close()\">-->\r\n<!--            <svg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'>-->\r\n<!--              <path d='M13 1L1 13M1 1l12 12' stroke='#3A3A3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>-->\r\n<!--            </svg>-->\r\n<!--        </span>-->\r\n<!--  </div>-->\r\n<!--  <div class=\"modal-body\">-->\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]=\"1 / 1\"-->\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<!--          ></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<!--  </div>-->\r\n<!--  <div class=\"modal-footer\">-->\r\n<!--    <button class=\"btn btn-outline\" (click)=\"close()\">\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C</button>-->\r\n<!--    <button class=\"btn\" (click)=\"ok()\">\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C</button>-->\r\n<!--  </div>-->\r\n<!--</div>-->\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;
@@ -285,9 +285,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", 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" }, host: { properties: { "class": "this.hostClass" } }, 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=\"ng-custom-file-input-content\"\r\n            (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <span>{{placeholder || getDefaultPlaceholder}}</span>\r\n            <br/>\r\n            <span style=\"font-size: 12px\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <br/>\r\n            <span *ngIf=\"extensions\" style=\"font-size: 12px\">\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 p-3\" [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 p-2\">\r\n                <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative mb-2\"></span>\r\n                {{ file.error }}\r\n              </div>\r\n              <span class=\"mrx-input-file-image-preview__item--name mb-2\">\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 p-2\">\r\n                <span class=\"mb-2\">\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 class=\"mb-2\" [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n              <span class=\"mrx-input-file-image-preview__item--name mb-2\">\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\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=\"ng-custom-file-input-content\"\r\n            [class.mrx-input-file-image__disabled]=\"disabled\"\r\n             (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <span>{{placeholder || getDefaultPlaceholder}}</span>\r\n            <br/>\r\n            <span style=\"font-size: 12px\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <br/>\r\n            <span *ngIf=\"extensions\" style=\"font-size: 12px\">\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\">\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 p-2\">\r\n                    <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative mb-2\"></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                  <div class=\"mrx-input-file-image-avatar__item--uploading p-2\">\r\n                    <span class=\"mb-2\">\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:12px}.mrx-input-file-image__disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled)!important;color:var(--neutral-bg-stroke-default)!important;border:1px solid var(--neutral-bg-stroke-default)!important}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview__item{position:relative;border:1px solid var(--Stroke);border-radius:4px;display:flex;flex-direction:column;justify-content:flex-start;transition:.2s;word-break:break-word;height:100%}.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(--Main2)}.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:12px}.mrx-input-file-image.mrx-input-file-image__type-avatar{display:flex}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar{width:157px;height:157px;display:flex;align-items:center;justify-content:center;cursor:pointer}.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;word-break:break-word;width:154px;height:154px}.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{width:154px;height:154px;border:1px solid var(--system-bg-controls-negative-default);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading{width:154px;height:154px;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading-progress{width:96px;height:4px;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__type-avatar .ngx-file-drop__drop-zone{height:auto}.mrx-input-file-image.mrx-input-file-image__type-avatar .ngx-file-drop__content{width:154px;height:auto;min-height:154px;padding:4px}.mrx-input-file-image.mrx-input-file-image__type-avatar .ng-custom-file-input-content{padding:0}.mrx-input-file-image.mrx-input-file-image__type-default .ng-custom-file-input{width:100%}.mrx-input-file-image.mrx-input-file-image__type-default .ngx-file-drop__drop-zone{height:auto;min-height:100px}.mrx-input-file-image.mrx-input-file-image__type-default .ngx-file-drop__content{height:auto;min-height:100px;padding:16px}.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}\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", 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" }, host: { properties: { "class": "this.hostClass" } }, 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=\"ng-custom-file-input-content\"\r\n            (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <span>{{placeholder || getDefaultPlaceholder}}</span>\r\n            <br/>\r\n            <span style=\"font-size: 12px\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <br/>\r\n            <span *ngIf=\"extensions\" style=\"font-size: 12px\">\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 p-3\" [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 p-2\">\r\n                <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative mb-2\"></span>\r\n                {{ file.error }}\r\n              </div>\r\n              <span class=\"mrx-input-file-image-preview__item--name mb-2\">\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 p-2\">\r\n                <span class=\"mb-2\">\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 class=\"mb-2\" [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n              <span class=\"mrx-input-file-image-preview__item--name mb-2\">\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\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=\"ng-custom-file-input-content\"\r\n            [class.mrx-input-file-image__disabled]=\"disabled\"\r\n             (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <span>{{placeholder || getDefaultPlaceholder}}</span>\r\n            <br/>\r\n            <span style=\"font-size: 12px\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <br/>\r\n            <span *ngIf=\"extensions\" style=\"font-size: 12px\">\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\">\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 p-2\">\r\n                    <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative mb-2\"></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                  <div class=\"mrx-input-file-image-avatar__item--uploading p-2\">\r\n                    <span class=\"mb-2\">\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:12px}.mrx-input-file-image__disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled)!important;color:var(--neutral-bg-stroke-default)!important;border:1px solid var(--neutral-bg-stroke-default)!important}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview__item{position:relative;border:1px solid var(--Stroke);border-radius:4px;display:flex;flex-direction:column;justify-content:flex-start;transition:.2s;word-break:break-word;height:100%}.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(--Main2)}.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:12px}.mrx-input-file-image.mrx-input-file-image__type-avatar{display:flex}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar{width:157px;height:157px;display:flex;align-items:center;justify-content:center;cursor:pointer}.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;word-break:break-word;width:154px;height:154px}.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{width:154px;height:154px;border:1px solid var(--system-bg-controls-negative-default);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading{width:154px;height:154px;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading-progress{width:96px;height:4px;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__type-avatar .ngx-file-drop__drop-zone{height:auto}.mrx-input-file-image.mrx-input-file-image__type-avatar .ngx-file-drop__content{width:154px;height:auto;min-height:154px;padding:4px}.mrx-input-file-image.mrx-input-file-image__type-avatar .ng-custom-file-input-content{padding:0}.mrx-input-file-image.mrx-input-file-image__type-default .ng-custom-file-input{width:100%}.mrx-input-file-image.mrx-input-file-image__type-default .ngx-file-drop__drop-zone{height:auto;min-height:100px}.mrx-input-file-image.mrx-input-file-image__type-default .ngx-file-drop__content{height:auto;min-height:100px;padding:16px}.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}\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=\"ng-custom-file-input-content\"\r\n            (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <span>{{placeholder || getDefaultPlaceholder}}</span>\r\n            <br/>\r\n            <span style=\"font-size: 12px\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <br/>\r\n            <span *ngIf=\"extensions\" style=\"font-size: 12px\">\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 p-3\" [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 p-2\">\r\n                <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative mb-2\"></span>\r\n                {{ file.error }}\r\n              </div>\r\n              <span class=\"mrx-input-file-image-preview__item--name mb-2\">\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 p-2\">\r\n                <span class=\"mb-2\">\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 class=\"mb-2\" [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n              <span class=\"mrx-input-file-image-preview__item--name mb-2\">\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\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=\"ng-custom-file-input-content\"\r\n            [class.mrx-input-file-image__disabled]=\"disabled\"\r\n             (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <span>{{placeholder || getDefaultPlaceholder}}</span>\r\n            <br/>\r\n            <span style=\"font-size: 12px\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n            <br/>\r\n            <span *ngIf=\"extensions\" style=\"font-size: 12px\">\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\">\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 p-2\">\r\n                    <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative mb-2\"></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                  <div class=\"mrx-input-file-image-avatar__item--uploading p-2\">\r\n                    <span class=\"mb-2\">\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:12px}.mrx-input-file-image__disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled)!important;color:var(--neutral-bg-stroke-default)!important;border:1px solid var(--neutral-bg-stroke-default)!important}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview__item{position:relative;border:1px solid var(--Stroke);border-radius:4px;display:flex;flex-direction:column;justify-content:flex-start;transition:.2s;word-break:break-word;height:100%}.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(--Main2)}.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:12px}.mrx-input-file-image.mrx-input-file-image__type-avatar{display:flex}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar{width:157px;height:157px;display:flex;align-items:center;justify-content:center;cursor:pointer}.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;word-break:break-word;width:154px;height:154px}.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{width:154px;height:154px;border:1px solid var(--system-bg-controls-negative-default);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading{width:154px;height:154px;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading-progress{width:96px;height:4px;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__type-avatar .ngx-file-drop__drop-zone{height:auto}.mrx-input-file-image.mrx-input-file-image__type-avatar .ngx-file-drop__content{width:154px;height:auto;min-height:154px;padding:4px}.mrx-input-file-image.mrx-input-file-image__type-avatar .ng-custom-file-input-content{padding:0}.mrx-input-file-image.mrx-input-file-image__type-default .ng-custom-file-input{width:100%}.mrx-input-file-image.mrx-input-file-image__type-default .ngx-file-drop__drop-zone{height:auto;min-height:100px}.mrx-input-file-image.mrx-input-file-image__type-default .ngx-file-drop__content{height:auto;min-height:100px;padding:16px}.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}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FileUploadService }, { type: i2.SimpleModalService }]; }, propDecorators: { hostClass: [{