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