myrta-ui 17.0.7 → 17.0.9

package/esm2022/lib/components/form/input-date-time/input-date-time.component.mjs

@@ -312,12 +312,12 @@ export class InputDateTimeComponent {
         this.onChange(insideValue);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: InputDateTimeComponent, selector: "mrx-input-date-time", inputs: { fields: "fields", size: "size", customClasses: "customClasses", dateLabel: "dateLabel", timeLabel: "timeLabel", datePlaceholder: "datePlaceholder", timePlaceholder: "timePlaceholder", disabled: "disabled", readonly: "readonly", required: "required", timepicker: "timepicker", minDate: "minDate", maxDate: "maxDate", timezone: "timezone", inline: "inline", isManualInput: "isManualInput", addMinTime: "addMinTime", addMaxTime: "addMaxTime", addMinTimeObj: "addMinTimeObj", addMaxTimeObj: "addMaxTimeObj", disableValidate: "disableValidate", container: "container", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputDateTimeComponent, selector: "mrx-input-date-time", inputs: { fields: "fields", size: "size", customClasses: "customClasses", dateLabel: "dateLabel", timeLabel: "timeLabel", datePlaceholder: "datePlaceholder", timePlaceholder: "timePlaceholder", disabled: "disabled", readonly: "readonly", required: "required", timepicker: "timepicker", minDate: "minDate", maxDate: "maxDate", timezone: "timezone", inline: "inline", isManualInput: "isManualInput", addMinTime: "addMinTime", addMaxTime: "addMaxTime", addMinTimeObj: "addMinTimeObj", addMaxTimeObj: "addMaxTimeObj", disableValidate: "disableValidate", container: "container", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateTimeComponent), multi: true }
         ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], 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.mrx-input-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]=\"datePlaceholder\"\r\n          [ngModel]=\"getDateValue\"\r\n          [mask]=\"'00.00.0000 00:m0'\"\r\n          [leadZeroDateTime]=\"true\"\r\n          [validation]=\"false\"\r\n          [disabled]=\"disabled\"\r\n          [readOnly]=\"!isManualInput\"\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\"\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__input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-half) - 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-half) - 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)}\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: ["invalid", "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"], exportAs: ["mask", "ngxMask"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDateTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-date-time', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateTimeComponent), multi: true }

package/esm2022/lib/components/form/input-date-time/input-date-time.module.mjs

@@ -13,20 +13,20 @@ const maskConfigFunction = () => {
     };
 };
 export class InputDateTimeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: InputDateTimeModule, declarations: [InputDateTimeComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: InputDateTimeModule, declarations: [InputDateTimeComponent], imports: [CommonModule,
             FormsModule,
             SaveStateModule,
             ErrorMessageModule,
             LabelModule,
             NgxMaskDirective], exports: [InputDateTimeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDateTimeModule, providers: [provideNgxMask(maskConfigFunction)], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateTimeModule, providers: [provideNgxMask(maskConfigFunction)], imports: [CommonModule,
             FormsModule,
             SaveStateModule,
             ErrorMessageModule,
             LabelModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [InputDateTimeComponent],

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

@@ -285,12 +285,12 @@ export class InputDatepickerComponent {
         this.onChange(insideValue);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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-half) - 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-half) - 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: ["invalid", "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"], exportAs: ["mask", "ngxMask"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-datepicker', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatepickerComponent), multi: true }

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

@@ -13,20 +13,20 @@ const maskConfigFunction = () => {
     };
 };
 export class InputDatepickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: InputDatepickerModule, declarations: [InputDatepickerComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: InputDatepickerModule, declarations: [InputDatepickerComponent], imports: [CommonModule,
             FormsModule,
             SaveStateModule,
             ErrorMessageModule,
             LabelModule,
             NgxMaskDirective], exports: [InputDatepickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDatepickerModule, providers: [provideNgxMask(maskConfigFunction)], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDatepickerModule, providers: [provideNgxMask(maskConfigFunction)], imports: [CommonModule,
             FormsModule,
             SaveStateModule,
             ErrorMessageModule,
             LabelModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [InputDatepickerComponent],

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

@@ -280,10 +280,10 @@ export class InputFileComponent {
         }
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileComponent, deps: [{ token: i1.FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", disabled: "disabled", viewOnly: "viewOnly", lightDisabled: "lightDisabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && 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          <div class=\"ng-custom-file-input_progress\">\r\n            <span [ngStyle]=\"{width: 75 + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n            (click)=\"delete($event, file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary)}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:none;background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i5.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileComponent, deps: [{ token: i1.FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", disabled: "disabled", viewOnly: "viewOnly", lightDisabled: "lightDisabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && 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          <div class=\"ng-custom-file-input_progress\">\r\n            <span [ngStyle]=\"{width: 75 + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n            (click)=\"delete($event, file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary)}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:none;background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i5.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-file', template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notDisabled>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"lightDisabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && 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          <div class=\"ng-custom-file-input_progress\">\r\n            <span [ngStyle]=\"{width: 75 + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n          <span\r\n            *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n            (click)=\"delete($event, file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary)}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:none;background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.FileUploadService }], propDecorators: { autoUpload: [{

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

@@ -9,11 +9,11 @@ import { ErrorMessageModule } from '../../error-message/error-message.module';
 import { CdkTooltipModule } from '../../cdk-tooltip/cdk-tooltip.module';
 import * as i0 from "@angular/core";
 export class InputFileModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: InputFileModule, declarations: [InputFileComponent], imports: [CommonModule, FormsModule, HttpClientModule, NgxFileDropModule, ErrorMessageModule, CdkTooltipModule], exports: [InputFileComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileModule, providers: [FileUploadService], imports: [CommonModule, FormsModule, HttpClientModule, NgxFileDropModule, ErrorMessageModule, CdkTooltipModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: InputFileModule, declarations: [InputFileComponent], imports: [CommonModule, FormsModule, HttpClientModule, NgxFileDropModule, ErrorMessageModule, CdkTooltipModule], exports: [InputFileComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileModule, providers: [FileUploadService], imports: [CommonModule, FormsModule, HttpClientModule, NgxFileDropModule, ErrorMessageModule, CdkTooltipModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [InputFileComponent],

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

@@ -75,10 +75,10 @@ export class FileImageEditModalComponent extends ModalServiceComponent {
     close() {
         this.dialogRef.close(this.result);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FileImageEditModalComponent, deps: [{ token: i1.ModalRef }, { token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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]=\"maintainAspectRatio\"\r\n          [aspectRatio]=\"aspectRatio\"\r\n          format=\"png\"\r\n          output=\"base64\"\r\n          (imageCropped)=\"imageCropped($event)\"\r\n          (imageLoaded)=\"imageLoaded($event)\"\r\n          (cropperReady)=\"cropperReady()\"\r\n          (loadImageFailed)=\"loadImageFailed()\"\r\n          [backgroundColor]=\"'#000000'\"\r\n          [canvasRotation]=\"canvasRotation\"\r\n          [transform]=\"transform\"\r\n          [cropperMaxWidth]=\"cropperMaxWidth\"\r\n          [cropperMaxHeight]=\"cropperMaxHeight\"\r\n        ></image-cropper>\r\n\r\n        <div class=\"mrx-input-image-cropper__controls\">\r\n          <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n\r\n          <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #footerContent>\r\n    <mrx-button\r\n      [customClasses]=\"'mr-3'\"\r\n      [type]=\"'secondary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"close()\"\r\n    >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n    </mrx-button>\r\n    <mrx-button\r\n      [type]=\"'primary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"ok()\"\r\n    >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n    </mrx-button>\r\n  </ng-template>\r\n</mrx-modal>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:#1f222680;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: i2.ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { kind: "component", type: i3.ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileImageEditModalComponent, deps: [{ token: i1.ModalRef }, { token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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]=\"maintainAspectRatio\"\r\n          [aspectRatio]=\"aspectRatio\"\r\n          format=\"png\"\r\n          output=\"base64\"\r\n          (imageCropped)=\"imageCropped($event)\"\r\n          (imageLoaded)=\"imageLoaded($event)\"\r\n          (cropperReady)=\"cropperReady()\"\r\n          (loadImageFailed)=\"loadImageFailed()\"\r\n          [backgroundColor]=\"'#000000'\"\r\n          [canvasRotation]=\"canvasRotation\"\r\n          [transform]=\"transform\"\r\n          [cropperMaxWidth]=\"cropperMaxWidth\"\r\n          [cropperMaxHeight]=\"cropperMaxHeight\"\r\n        ></image-cropper>\r\n\r\n        <div class=\"mrx-input-image-cropper__controls\">\r\n          <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n\r\n          <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #footerContent>\r\n    <mrx-button\r\n      [customClasses]=\"'mr-3'\"\r\n      [type]=\"'secondary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"close()\"\r\n    >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n    </mrx-button>\r\n    <mrx-button\r\n      [type]=\"'primary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"ok()\"\r\n    >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n    </mrx-button>\r\n  </ng-template>\r\n</mrx-modal>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:#1f222680;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: i2.ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { kind: "component", type: i3.ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FileImageEditModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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]=\"maintainAspectRatio\"\r\n          [aspectRatio]=\"aspectRatio\"\r\n          format=\"png\"\r\n          output=\"base64\"\r\n          (imageCropped)=\"imageCropped($event)\"\r\n          (imageLoaded)=\"imageLoaded($event)\"\r\n          (cropperReady)=\"cropperReady()\"\r\n          (loadImageFailed)=\"loadImageFailed()\"\r\n          [backgroundColor]=\"'#000000'\"\r\n          [canvasRotation]=\"canvasRotation\"\r\n          [transform]=\"transform\"\r\n          [cropperMaxWidth]=\"cropperMaxWidth\"\r\n          [cropperMaxHeight]=\"cropperMaxHeight\"\r\n        ></image-cropper>\r\n\r\n        <div class=\"mrx-input-image-cropper__controls\">\r\n          <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n\r\n          <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n            <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #footerContent>\r\n    <mrx-button\r\n      [customClasses]=\"'mr-3'\"\r\n      [type]=\"'secondary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"close()\"\r\n    >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n    </mrx-button>\r\n    <mrx-button\r\n      [type]=\"'primary'\"\r\n      [size]=\"'medium'\"\r\n      (click)=\"ok()\"\r\n    >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n    </mrx-button>\r\n  </ng-template>\r\n</mrx-modal>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:#1f222680;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: () => [{ type: i1.ModalRef }, { type: undefined, decorators: [{

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

@@ -298,10 +298,10 @@ export class InputFileImageComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileImageComponent, deps: [{ token: i1.FileUploadService }, { token: i1.ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: InputFileImageComponent, selector: "mrx-input-file-image", inputs: { type: "type", customClasses: "customClasses", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", cropperMaxWidth: "cropperMaxWidth", cropperMaxHeight: "cropperMaxHeight", aspectRatio: "aspectRatio", maintainAspectRatio: "maintainAspectRatio", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", deleteConfirm: "deleteConfirm", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged" }, ngImport: i0, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n  @switch (type) {\r\n    @case ('avatar') {\r\n      <ngx-file-drop\r\n        [className]=\"getDropZoneClasses\"\r\n        [accept]=\"extensions || ''\"\r\n        [disabled]=\"disabled\"\r\n        (onFileDrop)=\"dropped($event)\"\r\n        (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\"\r\n      >\r\n        <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n          @if (files.length) {\r\n            <div class=\"mrx-input-file-image-avatar\">\r\n\r\n              @for (file of files; track file.id) {\r\n                <div class=\"w-100 h-100\">\r\n                  <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n\r\n                    @if (file.error) {\r\n\r\n                      <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"clear(file)\"></span>\r\n                      <div class=\"mrx-input-file-image-avatar-item-error\">\r\n                        <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                        {{ file.error }}\r\n                      </div>\r\n\r\n                    } @else if (file.uploading && !file.error) {\r\n\r\n                      <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n                      <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n                        <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                        <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n                          <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                        </div>\r\n                      </div>\r\n\r\n                    } @else if (!file.uploading && !file.error) {\r\n\r\n                      <img [src]=\"downloadUrl(file)\" [alt]=\"file.name\" height=\"154\" width=\"154\">\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\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          } @else {\r\n            <div\r\n              class=\"mrx-input-file-image-input\"\r\n              [class.mrx-input-file-image__disabled]=\"disabled\"\r\n              (click)=\"!disabled ? openFileSelector() : undefined\"\r\n            >\r\n              <span class=\"mrx-input-file-image-input-placeholder\">{{ placeholder || getDefaultPlaceholder }}</span>\r\n              <div class=\"mrx-input-file-image-input-info\">\r\n                <span>\u0420\u0430\u0437\u043C\u0435\u0440: \u0434\u043E {{ formatBytes(maxSize) }}</span>\r\n                <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442: {{ extensions }}</span>\r\n              </div>\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </ngx-file-drop>\r\n    }\r\n    @default {\r\n      @if (canAdd) {\r\n        <ngx-file-drop\r\n          [className]=\"getDropZoneClasses\"\r\n          [accept]=\"extensions || ''\"\r\n          [disabled]=\"disabled\"\r\n          (onFileDrop)=\"dropped($event)\"\r\n          (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\"\r\n        >\r\n          <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n            <div\r\n              class=\"mrx-input-file-image-input\"\r\n              (click)=\"!disabled ? openFileSelector() : undefined\"\r\n            >\r\n              <span class=\"mrx-input-file-image-input-placeholder\">\r\n                {{ placeholder || getDefaultPlaceholder }}\r\n              </span>\r\n              <div class=\"mrx-input-file-image-input-info\">\r\n                <span>\u0420\u0430\u0437\u043C\u0435\u0440: \u0434\u043E {{ formatBytes(maxSize) }}</span>\r\n                <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442: {{ extensions }}</span>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </ngx-file-drop>\r\n      }\r\n\r\n      <div class=\"mrx-input-file-image-preview\">\r\n        <div class=\"row\">\r\n          @for (file of files; track file.id) {\r\n\r\n            <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\">\r\n              <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n                @if (file.error) {\r\n\r\n                  <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item-error\">\r\n                    <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                    {{ file.error }}\r\n                  </div>\r\n                  <div class=\"mrx-input-file-image-preview-item-name\">{{ file.name }}</div>\r\n                  <div class=\"mrx-input-file-image-preview-item-description\">{{ formatBytes(file.length) }}</div>\r\n\r\n                } @else if (file.uploading && !file.error) {\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n                    <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                    <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n                      <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                    </div>\r\n                  </div>\r\n\r\n                } @else if (!file.uploading && !file.error) {\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item__image\">\r\n                    <img [src]=\"downloadUrl(file)\" [alt]=\"file.name\">\r\n                  </div>\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item-info\">\r\n                    <div class=\"mrx-input-file-image-preview-item-name\">{{ file.name }}</div>\r\n                    <div class=\"mrx-input-file-image-preview-item-description\">{{ formatBytes(file.length) }}</div>\r\n                  </div>\r\n\r\n                  <div class=\"mrx-input-file-image-controls\">\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n                      <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n                    </div>\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n                      <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n                    </div>\r\n                  </div>\r\n\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;min-height:218px;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item__image{height:128px;position:relative}.mrx-input-file-image-preview-item__image img{word-wrap:break-word;height:100%;width:100%;object-fit:cover}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-input-file-image-preview-item-description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;object-fit:cover}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#fff;box-shadow:0 1px 4px #3a3a3a4d;border-radius:5px;padding:5px;display:none}.mrx-input-file-image-controls-item{min-width:16px;height:16px;cursor:pointer}.mrx-input-file-image-controls-item:not(:last-child){position:relative;padding-right:8px;border-right:1px solid #BFC5CC;margin-right:8px}.mrx-input-file-image-input{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-4);width:100%;height:100%;min-height:100px;gap:var(--spacing-2);border-radius:var(--border-radius-1);background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat;cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileImageComponent, deps: [{ token: i1.FileUploadService }, { token: i1.ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputFileImageComponent, selector: "mrx-input-file-image", inputs: { type: "type", customClasses: "customClasses", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", cropperMaxWidth: "cropperMaxWidth", cropperMaxHeight: "cropperMaxHeight", aspectRatio: "aspectRatio", maintainAspectRatio: "maintainAspectRatio", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", deleteConfirm: "deleteConfirm", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged" }, ngImport: i0, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n  @switch (type) {\r\n    @case ('avatar') {\r\n      <ngx-file-drop\r\n        [className]=\"getDropZoneClasses\"\r\n        [accept]=\"extensions || ''\"\r\n        [disabled]=\"disabled\"\r\n        (onFileDrop)=\"dropped($event)\"\r\n        (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\"\r\n      >\r\n        <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n          @if (files.length) {\r\n            <div class=\"mrx-input-file-image-avatar\">\r\n\r\n              @for (file of files; track file.id) {\r\n                <div class=\"w-100 h-100\">\r\n                  <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n\r\n                    @if (file.error) {\r\n\r\n                      <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"clear(file)\"></span>\r\n                      <div class=\"mrx-input-file-image-avatar-item-error\">\r\n                        <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                        {{ file.error }}\r\n                      </div>\r\n\r\n                    } @else if (file.uploading && !file.error) {\r\n\r\n                      <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n                      <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n                        <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                        <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n                          <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                        </div>\r\n                      </div>\r\n\r\n                    } @else if (!file.uploading && !file.error) {\r\n\r\n                      <img [src]=\"downloadUrl(file)\" [alt]=\"file.name\" height=\"154\" width=\"154\">\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\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          } @else {\r\n            <div\r\n              class=\"mrx-input-file-image-input\"\r\n              [class.mrx-input-file-image__disabled]=\"disabled\"\r\n              (click)=\"!disabled ? openFileSelector() : undefined\"\r\n            >\r\n              <span class=\"mrx-input-file-image-input-placeholder\">{{ placeholder || getDefaultPlaceholder }}</span>\r\n              <div class=\"mrx-input-file-image-input-info\">\r\n                <span>\u0420\u0430\u0437\u043C\u0435\u0440: \u0434\u043E {{ formatBytes(maxSize) }}</span>\r\n                <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442: {{ extensions }}</span>\r\n              </div>\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </ngx-file-drop>\r\n    }\r\n    @default {\r\n      @if (canAdd) {\r\n        <ngx-file-drop\r\n          [className]=\"getDropZoneClasses\"\r\n          [accept]=\"extensions || ''\"\r\n          [disabled]=\"disabled\"\r\n          (onFileDrop)=\"dropped($event)\"\r\n          (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\"\r\n        >\r\n          <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n            <div\r\n              class=\"mrx-input-file-image-input\"\r\n              (click)=\"!disabled ? openFileSelector() : undefined\"\r\n            >\r\n              <span class=\"mrx-input-file-image-input-placeholder\">\r\n                {{ placeholder || getDefaultPlaceholder }}\r\n              </span>\r\n              <div class=\"mrx-input-file-image-input-info\">\r\n                <span>\u0420\u0430\u0437\u043C\u0435\u0440: \u0434\u043E {{ formatBytes(maxSize) }}</span>\r\n                <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442: {{ extensions }}</span>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </ngx-file-drop>\r\n      }\r\n\r\n      <div class=\"mrx-input-file-image-preview\">\r\n        <div class=\"row\">\r\n          @for (file of files; track file.id) {\r\n\r\n            <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\">\r\n              <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n                @if (file.error) {\r\n\r\n                  <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item-error\">\r\n                    <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                    {{ file.error }}\r\n                  </div>\r\n                  <div class=\"mrx-input-file-image-preview-item-name\">{{ file.name }}</div>\r\n                  <div class=\"mrx-input-file-image-preview-item-description\">{{ formatBytes(file.length) }}</div>\r\n\r\n                } @else if (file.uploading && !file.error) {\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n                    <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                    <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n                      <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                    </div>\r\n                  </div>\r\n\r\n                } @else if (!file.uploading && !file.error) {\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item__image\">\r\n                    <img [src]=\"downloadUrl(file)\" [alt]=\"file.name\">\r\n                  </div>\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item-info\">\r\n                    <div class=\"mrx-input-file-image-preview-item-name\">{{ file.name }}</div>\r\n                    <div class=\"mrx-input-file-image-preview-item-description\">{{ formatBytes(file.length) }}</div>\r\n                  </div>\r\n\r\n                  <div class=\"mrx-input-file-image-controls\">\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n                      <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n                    </div>\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n                      <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n                    </div>\r\n                  </div>\r\n\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;min-height:218px;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item__image{height:128px;position:relative}.mrx-input-file-image-preview-item__image img{word-wrap:break-word;height:100%;width:100%;object-fit:cover}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-input-file-image-preview-item-description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;object-fit:cover}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#fff;box-shadow:0 1px 4px #3a3a3a4d;border-radius:5px;padding:5px;display:none}.mrx-input-file-image-controls-item{min-width:16px;height:16px;cursor:pointer}.mrx-input-file-image-controls-item:not(:last-child){position:relative;padding-right:8px;border-right:1px solid #BFC5CC;margin-right:8px}.mrx-input-file-image-input{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-4);width:100%;height:100%;min-height:100px;gap:var(--spacing-2);border-radius:var(--border-radius-1);background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat;cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-file-image', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n  @switch (type) {\r\n    @case ('avatar') {\r\n      <ngx-file-drop\r\n        [className]=\"getDropZoneClasses\"\r\n        [accept]=\"extensions || ''\"\r\n        [disabled]=\"disabled\"\r\n        (onFileDrop)=\"dropped($event)\"\r\n        (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\"\r\n      >\r\n        <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n          @if (files.length) {\r\n            <div class=\"mrx-input-file-image-avatar\">\r\n\r\n              @for (file of files; track file.id) {\r\n                <div class=\"w-100 h-100\">\r\n                  <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n\r\n                    @if (file.error) {\r\n\r\n                      <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"clear(file)\"></span>\r\n                      <div class=\"mrx-input-file-image-avatar-item-error\">\r\n                        <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                        {{ file.error }}\r\n                      </div>\r\n\r\n                    } @else if (file.uploading && !file.error) {\r\n\r\n                      <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n                      <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n                        <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                        <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n                          <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                        </div>\r\n                      </div>\r\n\r\n                    } @else if (!file.uploading && !file.error) {\r\n\r\n                      <img [src]=\"downloadUrl(file)\" [alt]=\"file.name\" height=\"154\" width=\"154\">\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\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          } @else {\r\n            <div\r\n              class=\"mrx-input-file-image-input\"\r\n              [class.mrx-input-file-image__disabled]=\"disabled\"\r\n              (click)=\"!disabled ? openFileSelector() : undefined\"\r\n            >\r\n              <span class=\"mrx-input-file-image-input-placeholder\">{{ placeholder || getDefaultPlaceholder }}</span>\r\n              <div class=\"mrx-input-file-image-input-info\">\r\n                <span>\u0420\u0430\u0437\u043C\u0435\u0440: \u0434\u043E {{ formatBytes(maxSize) }}</span>\r\n                <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442: {{ extensions }}</span>\r\n              </div>\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </ngx-file-drop>\r\n    }\r\n    @default {\r\n      @if (canAdd) {\r\n        <ngx-file-drop\r\n          [className]=\"getDropZoneClasses\"\r\n          [accept]=\"extensions || ''\"\r\n          [disabled]=\"disabled\"\r\n          (onFileDrop)=\"dropped($event)\"\r\n          (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\"\r\n        >\r\n          <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n            <div\r\n              class=\"mrx-input-file-image-input\"\r\n              (click)=\"!disabled ? openFileSelector() : undefined\"\r\n            >\r\n              <span class=\"mrx-input-file-image-input-placeholder\">\r\n                {{ placeholder || getDefaultPlaceholder }}\r\n              </span>\r\n              <div class=\"mrx-input-file-image-input-info\">\r\n                <span>\u0420\u0430\u0437\u043C\u0435\u0440: \u0434\u043E {{ formatBytes(maxSize) }}</span>\r\n                <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442: {{ extensions }}</span>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </ngx-file-drop>\r\n      }\r\n\r\n      <div class=\"mrx-input-file-image-preview\">\r\n        <div class=\"row\">\r\n          @for (file of files; track file.id) {\r\n\r\n            <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\">\r\n              <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n                @if (file.error) {\r\n\r\n                  <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item-error\">\r\n                    <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n                    {{ file.error }}\r\n                  </div>\r\n                  <div class=\"mrx-input-file-image-preview-item-name\">{{ file.name }}</div>\r\n                  <div class=\"mrx-input-file-image-preview-item-description\">{{ formatBytes(file.length) }}</div>\r\n\r\n                } @else if (file.uploading && !file.error) {\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n                    <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n                    <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n                      <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n                    </div>\r\n                  </div>\r\n\r\n                } @else if (!file.uploading && !file.error) {\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item__image\">\r\n                    <img [src]=\"downloadUrl(file)\" [alt]=\"file.name\">\r\n                  </div>\r\n\r\n                  <div class=\"mrx-input-file-image-preview-item-info\">\r\n                    <div class=\"mrx-input-file-image-preview-item-name\">{{ file.name }}</div>\r\n                    <div class=\"mrx-input-file-image-preview-item-description\">{{ formatBytes(file.length) }}</div>\r\n                  </div>\r\n\r\n                  <div class=\"mrx-input-file-image-controls\">\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n                      <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n                    </div>\r\n                    <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n                      <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n                    </div>\r\n                  </div>\r\n\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;min-height:218px;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item__image{height:128px;position:relative}.mrx-input-file-image-preview-item__image img{word-wrap:break-word;height:100%;width:100%;object-fit:cover}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-input-file-image-preview-item-description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;object-fit:cover}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#fff;box-shadow:0 1px 4px #3a3a3a4d;border-radius:5px;padding:5px;display:none}.mrx-input-file-image-controls-item{min-width:16px;height:16px;cursor:pointer}.mrx-input-file-image-controls-item:not(:last-child){position:relative;padding-right:8px;border-right:1px solid #BFC5CC;margin-right:8px}.mrx-input-file-image-input{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-4);width:100%;height:100%;min-height:100px;gap:var(--spacing-2);border-radius:var(--border-radius-1);background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat;cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"] }]
         }], ctorParameters: () => [{ type: i1.FileUploadService }, { type: i1.ModalService }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{

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

@@ -10,8 +10,8 @@ import { ModalModule } from '../../modal/modal.module';
 import { ButtonModule } from '../../button/button.module';
 import * as i0 from "@angular/core";
 export class InputFileImageModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: InputFileImageModule, declarations: [InputFileImageComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: InputFileImageModule, declarations: [InputFileImageComponent,
             FileImageEditModalComponent], imports: [CommonModule,
             FormsModule,
             HttpClientModule,
@@ -20,7 +20,7 @@ export class InputFileImageModule {
             ButtonModule,
             ImageCropperComponent,
             NgOptimizedImage], exports: [InputFileImageComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileImageModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileImageModule, imports: [CommonModule,
             FormsModule,
             HttpClientModule,
             NgxFileDropModule,
@@ -28,7 +28,7 @@ export class InputFileImageModule {
             ButtonModule,
             ImageCropperComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileImageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileImageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

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

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