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