myrta-ui 17.0.0-beta.4 → 17.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2022/lib/components/form/input-file-image/input-file-image.component.mjs +7 -11
  2. package/esm2022/lib/components/form/input-file-image/input-file-image.enum.mjs +3 -3
  3. package/fesm2022/myrta-ui.mjs +6 -10
  4. package/fesm2022/myrta-ui.mjs.map +1 -1
  5. package/lib/components/form/input-file-image/input-file-image.component.d.ts +1 -2
  6. package/lib/components/form/input-file-image/input-file-image.enum.d.ts +2 -2
  7. package/package.json +1 -1
package/fesm2022/myrta-ui.mjs CHANGED
@@ -10749,8 +10749,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
10749
10749
 
10750
10750
  var InputFileImageTypeEnum;
10751
10751
  (function (InputFileImageTypeEnum) {
10752
- InputFileImageTypeEnum["default"] = "mrx-input-file-image__type-default";
10753
- InputFileImageTypeEnum["avatar"] = "mrx-input-file-image__type-avatar";
10752
+ InputFileImageTypeEnum["default"] = "mrx-input-file-image-type-default";
10753
+ InputFileImageTypeEnum["avatar"] = "mrx-input-file-image-type-avatar";
10754
10754
  })(InputFileImageTypeEnum || (InputFileImageTypeEnum = {}));
10755
10755
  var PreviewEnum;
10756
10756
  (function (PreviewEnum) {
@@ -10765,7 +10765,6 @@ class InputFileImageComponent {
10765
10765
  allowedExtensions = [];
10766
10766
  files = [];
10767
10767
  notFoundImage = PreviewEnum.notFoundImage;
10768
- hostClass = 'ng-form-file-input';
10769
10768
  type = 'default';
10770
10769
  preview = '';
10771
10770
  customClasses = '';
@@ -10822,7 +10821,7 @@ class InputFileImageComponent {
10822
10821
  return `${InputFileImageTypeEnum[this.type]} ${this.customClasses}`;
10823
10822
  }
10824
10823
  get getDropZoneClasses() {
10825
- return `ng-custom-file-input ${this.disabled ? 'mrx-input-file-image__disabled' : ''}`;
10824
+ return `mrx-input-file-image-drop ${this.disabled ? 'mrx-input-file-image-drop-disabled' : ''}`;
10826
10825
  }
10827
10826
  get canAdd() {
10828
10827
  if (this.type === 'avatar') {
@@ -11049,15 +11048,12 @@ class InputFileImageComponent {
11049
11048
  return true;
11050
11049
  }
11051
11050
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileImageComponent, deps: [{ token: FileUploadService }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
11052
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: InputFileImageComponent, selector: "mrx-input-file-image", inputs: { type: "type", preview: "preview", customClasses: "customClasses", required: "required", disabled: "disabled", lightDisabled: "lightDisabled", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", cropperMaxWidth: "cropperMaxWidth", cropperMaxHeight: "cropperMaxHeight", aspectRatio: "aspectRatio", formData: "formData", placeholder: "placeholder", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n\r\n <ng-container *ngIf=\"type === 'default'\">\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n\r\n <ngx-file-drop *ngIf=\"canAdd\" (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"ng-custom-file-input-content\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <span>{{placeholder || getDefaultPlaceholder}}</span>\r\n <br/>\r\n <span style=\"font-size: 12px\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <br/>\r\n <span *ngIf=\"extensions\" style=\"font-size: 12px\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <div class=\"mrx-input-file-image-preview\">\r\n <div class=\"row\">\r\n <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\" *ngFor=\"let file of files\">\r\n <div class=\"mrx-input-file-image-preview__item p-3\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-preview__item--error p-2\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative mb-2\"></span>\r\n {{ file.error }}\r\n </div>\r\n <span class=\"mrx-input-file-image-preview__item--name mb-2\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview__item--description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <div class=\"mrx-input-file-image-preview__item--uploading p-2\">\r\n <span class=\"mb-2\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-preview__item--uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img class=\"mb-2\" [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <span class=\"mrx-input-file-image-preview__item--name mb-2\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview__item--description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n\r\n <div class=\"mrx-input-file-image__controls\">\r\n <div class=\"mrx-input-file-image__controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image__controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'avatar'\">\r\n <ngx-file-drop (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n\r\n <div\r\n *ngIf=\"!files.length; else avatarTemplate\"\r\n class=\"ng-custom-file-input-content\"\r\n [class.mrx-input-file-image__disabled]=\"disabled\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <span>{{placeholder || getDefaultPlaceholder}}</span>\r\n <br/>\r\n <span style=\"font-size: 12px\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <br/>\r\n <span *ngIf=\"extensions\" style=\"font-size: 12px\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #avatarTemplate>\r\n <div class=\"mrx-input-file-image-avatar\" (click)=\"openFileSelector()\">\r\n <div *ngFor=\"let file of files\">\r\n <div class=\"mrx-input-file-image-avatar__item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar__item--error p-2\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative mb-2\"></span>\r\n {{ file.error }}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <div class=\"mrx-input-file-image-avatar__item--uploading p-2\">\r\n <span class=\"mb-2\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-avatar__item--uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image__controls\">\r\n <div class=\"mrx-input-file-image__controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image__controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n </ngx-file-drop>\r\n </ng-container>\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:12px}.mrx-input-file-image__disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled)!important;color:var(--neutral-bg-stroke-default)!important;border:1px solid var(--neutral-bg-stroke-default)!important}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview__item{position:relative;border:1px solid var(--Stroke);border-radius:4px;display:flex;flex-direction:column;justify-content:flex-start;transition:.2s;word-break:break-word;height:100%}.mrx-input-file-image-preview__item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview__item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview__item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image-preview__item:hover{border-color:var(--Main2)}.mrx-input-file-image-preview__item--name{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-input-file-image-preview__item--description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-input-file-image-preview__item--error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview__item--uploading{display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview__item--uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview__item--uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:12px}.mrx-input-file-image.mrx-input-file-image__type-avatar{display:flex}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar{width:157px;height:157px;display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item{position:relative;display:flex;flex-direction:column;justify-content:center;word-break:break-word;width:154px;height:154px}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--error{width:154px;height:154px;border:1px solid var(--system-bg-controls-negative-default);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading{width:154px;height:154px;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image.mrx-input-file-image__type-avatar .ngx-file-drop__drop-zone{height:auto}.mrx-input-file-image.mrx-input-file-image__type-avatar .ngx-file-drop__content{width:154px;height:auto;min-height:154px;padding:4px}.mrx-input-file-image.mrx-input-file-image__type-avatar .ng-custom-file-input-content{padding:0}.mrx-input-file-image.mrx-input-file-image__type-default .ng-custom-file-input{width:100%}.mrx-input-file-image.mrx-input-file-image__type-default .ngx-file-drop__drop-zone{height:auto;min-height:100px}.mrx-input-file-image.mrx-input-file-image__type-default .ngx-file-drop__content{height:auto;min-height:100px;padding:16px}.mrx-input-file-image-preview__item:hover .mrx-input-file-image__controls,.mrx-input-file-image-avatar__item:hover .mrx-input-file-image__controls{display:flex}.mrx-input-file-image__controls{position:absolute;top:-16px;right:-16px;background:#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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3$1.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }], encapsulation: i0.ViewEncapsulation.None });
11051
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: InputFileImageComponent, selector: "mrx-input-file-image", inputs: { type: "type", preview: "preview", customClasses: "customClasses", required: "required", disabled: "disabled", lightDisabled: "lightDisabled", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", cropperMaxWidth: "cropperMaxWidth", cropperMaxHeight: "cropperMaxHeight", aspectRatio: "aspectRatio", formData: "formData", placeholder: "placeholder", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged" }, ngImport: i0, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n\r\n <ng-container *ngIf=\"type === 'default'\">\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n\r\n <ngx-file-drop *ngIf=\"canAdd\" (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"mrx-input-file-image-input\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <div class=\"mrx-input-file-image-preview\">\r\n <div class=\"row\">\r\n <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\" *ngFor=\"let file of files\">\r\n <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-preview-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-preview-item-info\">\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'avatar'\">\r\n <ngx-file-drop (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n\r\n <div\r\n *ngIf=\"!files.length; else avatarTemplate\"\r\n class=\"mrx-input-file-image-input\"\r\n [class.mrx-input-file-image__disabled]=\"disabled\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #avatarTemplate>\r\n <div class=\"mrx-input-file-image-avatar\" (click)=\"openFileSelector()\">\r\n <div *ngFor=\"let file of files\" class=\"w-100 h-100\">\r\n <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n </ngx-file-drop>\r\n </ng-container>\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-input-file-image-preview-item-description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#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);border:var(--border-width-default) dashed var(--neutral-bg-stroke-default);cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3$1.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }], encapsulation: i0.ViewEncapsulation.None });
11053
11052
  }
11054
11053
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputFileImageComponent, decorators: [{
11055
11054
  type: Component,
11056
- args: [{ selector: 'mrx-input-file-image', encapsulation: ViewEncapsulation.None, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n\r\n <ng-container *ngIf=\"type === 'default'\">\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n\r\n <ngx-file-drop *ngIf=\"canAdd\" (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"ng-custom-file-input-content\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <span>{{placeholder || getDefaultPlaceholder}}</span>\r\n <br/>\r\n <span style=\"font-size: 12px\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <br/>\r\n <span *ngIf=\"extensions\" style=\"font-size: 12px\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <div class=\"mrx-input-file-image-preview\">\r\n <div class=\"row\">\r\n <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\" *ngFor=\"let file of files\">\r\n <div class=\"mrx-input-file-image-preview__item p-3\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-preview__item--error p-2\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative mb-2\"></span>\r\n {{ file.error }}\r\n </div>\r\n <span class=\"mrx-input-file-image-preview__item--name mb-2\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview__item--description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <div class=\"mrx-input-file-image-preview__item--uploading p-2\">\r\n <span class=\"mb-2\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-preview__item--uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img class=\"mb-2\" [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <span class=\"mrx-input-file-image-preview__item--name mb-2\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview__item--description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n\r\n <div class=\"mrx-input-file-image__controls\">\r\n <div class=\"mrx-input-file-image__controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image__controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'avatar'\">\r\n <ngx-file-drop (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n\r\n <div\r\n *ngIf=\"!files.length; else avatarTemplate\"\r\n class=\"ng-custom-file-input-content\"\r\n [class.mrx-input-file-image__disabled]=\"disabled\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <span>{{placeholder || getDefaultPlaceholder}}</span>\r\n <br/>\r\n <span style=\"font-size: 12px\">\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <br/>\r\n <span *ngIf=\"extensions\" style=\"font-size: 12px\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #avatarTemplate>\r\n <div class=\"mrx-input-file-image-avatar\" (click)=\"openFileSelector()\">\r\n <div *ngFor=\"let file of files\">\r\n <div class=\"mrx-input-file-image-avatar__item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar__item--error p-2\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative mb-2\"></span>\r\n {{ file.error }}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <div class=\"mrx-input-file-image-avatar__item--uploading p-2\">\r\n <span class=\"mb-2\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-avatar__item--uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image__controls\">\r\n <div class=\"mrx-input-file-image__controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image__controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n </ngx-file-drop>\r\n </ng-container>\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:12px}.mrx-input-file-image__disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled)!important;color:var(--neutral-bg-stroke-default)!important;border:1px solid var(--neutral-bg-stroke-default)!important}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview__item{position:relative;border:1px solid var(--Stroke);border-radius:4px;display:flex;flex-direction:column;justify-content:flex-start;transition:.2s;word-break:break-word;height:100%}.mrx-input-file-image-preview__item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview__item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview__item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image-preview__item:hover{border-color:var(--Main2)}.mrx-input-file-image-preview__item--name{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-input-file-image-preview__item--description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-input-file-image-preview__item--error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview__item--uploading{display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview__item--uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview__item--uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:12px}.mrx-input-file-image.mrx-input-file-image__type-avatar{display:flex}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar{width:157px;height:157px;display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item{position:relative;display:flex;flex-direction:column;justify-content:center;word-break:break-word;width:154px;height:154px}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--error{width:154px;height:154px;border:1px solid var(--system-bg-controls-negative-default);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading{width:154px;height:154px;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image__type-avatar .mrx-input-file-image-avatar__item--uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image.mrx-input-file-image__type-avatar .ngx-file-drop__drop-zone{height:auto}.mrx-input-file-image.mrx-input-file-image__type-avatar .ngx-file-drop__content{width:154px;height:auto;min-height:154px;padding:4px}.mrx-input-file-image.mrx-input-file-image__type-avatar .ng-custom-file-input-content{padding:0}.mrx-input-file-image.mrx-input-file-image__type-default .ng-custom-file-input{width:100%}.mrx-input-file-image.mrx-input-file-image__type-default .ngx-file-drop__drop-zone{height:auto;min-height:100px}.mrx-input-file-image.mrx-input-file-image__type-default .ngx-file-drop__content{height:auto;min-height:100px;padding:16px}.mrx-input-file-image-preview__item:hover .mrx-input-file-image__controls,.mrx-input-file-image-avatar__item:hover .mrx-input-file-image__controls{display:flex}.mrx-input-file-image__controls{position:absolute;top:-16px;right:-16px;background:#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}\n"] }]
11057
- }], ctorParameters: () => [{ type: FileUploadService }, { type: ModalService }], propDecorators: { hostClass: [{
11058
- type: HostBinding,
11059
- args: ['class']
11060
- }], type: [{
11055
+ args: [{ selector: 'mrx-input-file-image', encapsulation: ViewEncapsulation.None, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n\r\n <ng-container *ngIf=\"type === 'default'\">\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n\r\n <ngx-file-drop *ngIf=\"canAdd\" (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"mrx-input-file-image-input\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <div class=\"mrx-input-file-image-preview\">\r\n <div class=\"row\">\r\n <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\" *ngFor=\"let file of files\">\r\n <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-preview-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-preview-item-info\">\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'avatar'\">\r\n <ngx-file-drop (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n\r\n <div\r\n *ngIf=\"!files.length; else avatarTemplate\"\r\n class=\"mrx-input-file-image-input\"\r\n [class.mrx-input-file-image__disabled]=\"disabled\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #avatarTemplate>\r\n <div class=\"mrx-input-file-image-avatar\" (click)=\"openFileSelector()\">\r\n <div *ngFor=\"let file of files\" class=\"w-100 h-100\">\r\n <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n </ngx-file-drop>\r\n </ng-container>\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-input-file-image-preview-item-description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#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);border:var(--border-width-default) dashed var(--neutral-bg-stroke-default);cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"] }]
11056
+ }], ctorParameters: () => [{ type: FileUploadService }, { type: ModalService }], propDecorators: { type: [{
11061
11057
  type: Input
11062
11058
  }], preview: [{
11063
11059
  type: Input