myrta-ui 1.1.51 → 1.1.53
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.
- package/esm2020/lib/components/form/checkbox-group/checkbox-group.component.mjs +3 -3
- package/esm2020/lib/components/form/formula-editor/formula-editor.module.mjs +1 -1
- package/esm2020/lib/components/form/input-file-image/input-file-image.component.mjs +2 -2
- package/esm2020/lib/components/form/radio-group/radio-group.component.mjs +3 -3
- package/fesm2015/myrta-ui.mjs +6 -6
- package/fesm2015/myrta-ui.mjs.map +1 -1
- package/fesm2020/myrta-ui.mjs +6 -6
- package/fesm2020/myrta-ui.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2015/myrta-ui.mjs
CHANGED
|
@@ -12303,10 +12303,10 @@ class InputFileImageComponent {
|
|
|
12303
12303
|
}
|
|
12304
12304
|
}
|
|
12305
12305
|
InputFileImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileImageComponent, deps: [{ token: FileUploadService }, { token: i2$2.SimpleModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
12306
|
-
InputFileImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputFileImageComponent, selector: "mrx-input-file-image", inputs: { type: "type", preview: "preview", customClasses: "customClasses", required: "required", disabled: "disabled", lightDisabled: "lightDisabled", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", cropperMaxWidth: "cropperMaxWidth", cropperMaxHeight: "cropperMaxHeight", aspectRatio: "aspectRatio", formData: "formData", placeholder: "placeholder", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged" }, ngImport: i0, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n\r\n <ng-container *ngIf=\"type === 'default'\">\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n\r\n <ngx-file-drop *ngIf=\"canAdd\" (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"mrx-input-file-image-input\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <div class=\"mrx-input-file-image-preview\">\r\n <div class=\"row\">\r\n <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\" *ngFor=\"let file of files\">\r\n <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-preview-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-preview-item-info\">\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'avatar'\">\r\n <ngx-file-drop (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n\r\n <div\r\n *ngIf=\"!files.length; else avatarTemplate\"\r\n class=\"mrx-input-file-image-input\"\r\n [class.mrx-input-file-image__disabled]=\"disabled\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #avatarTemplate>\r\n <div class=\"mrx-input-file-image-avatar\" (click)=\"openFileSelector()\">\r\n <div *ngFor=\"let file of files\" class=\"w-100 h-100\">\r\n <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n </ngx-file-drop>\r\n </ng-container>\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-input-file-image-preview-item-description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#FFFFFF;box-shadow:0 1px 4px #3a3a3a4d;border-radius:5px;padding:5px;display:none}.mrx-input-file-image-controls-item{min-width:16px;height:16px;cursor:pointer}.mrx-input-file-image-controls-item:not(:last-child){position:relative;padding-right:8px;border-right:1px solid #BFC5CC;margin-right:8px}.mrx-input-file-image-input{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-4);width:100%;height:100%;min-height:100px;gap:var(--spacing-2);border-radius:var(--border-radius-1);border:var(--border-width-default) dashed var(--neutral-bg-stroke-default);cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"], components: [{ type: i2$3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
12306
|
+
InputFileImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputFileImageComponent, selector: "mrx-input-file-image", inputs: { type: "type", preview: "preview", customClasses: "customClasses", required: "required", disabled: "disabled", lightDisabled: "lightDisabled", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", cropperMaxWidth: "cropperMaxWidth", cropperMaxHeight: "cropperMaxHeight", aspectRatio: "aspectRatio", formData: "formData", placeholder: "placeholder", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged" }, ngImport: i0, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n\r\n <ng-container *ngIf=\"type === 'default'\">\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n\r\n <ngx-file-drop *ngIf=\"canAdd\" (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"mrx-input-file-image-input\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <div class=\"mrx-input-file-image-preview\">\r\n <div class=\"row\">\r\n <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\" *ngFor=\"let file of files\">\r\n <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-preview-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-preview-item-info\">\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'avatar'\">\r\n <ngx-file-drop (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n\r\n <div\r\n *ngIf=\"!files.length; else avatarTemplate\"\r\n class=\"mrx-input-file-image-input\"\r\n [class.mrx-input-file-image__disabled]=\"disabled\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #avatarTemplate>\r\n <div class=\"mrx-input-file-image-avatar\" (click)=\"openFileSelector()\">\r\n <div *ngFor=\"let file of files\" class=\"w-100 h-100\">\r\n <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n </ngx-file-drop>\r\n </ng-container>\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-input-file-image-preview-item-description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#FFFFFF;box-shadow:0 1px 4px #3a3a3a4d;border-radius:5px;padding:5px;display:none}.mrx-input-file-image-controls-item{min-width:16px;height:16px;cursor:pointer}.mrx-input-file-image-controls-item:not(:last-child){position:relative;padding-right:8px;border-right:1px solid #BFC5CC;margin-right:8px}.mrx-input-file-image-input{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-4);width:100%;height:100%;min-height:100px;gap:var(--spacing-2);border-radius:var(--border-radius-1);background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat;cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"], components: [{ type: i2$3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
12307
12307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileImageComponent, decorators: [{
|
|
12308
12308
|
type: Component,
|
|
12309
|
-
args: [{ selector: 'mrx-input-file-image', encapsulation: ViewEncapsulation.None, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n\r\n <ng-container *ngIf=\"type === 'default'\">\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n\r\n <ngx-file-drop *ngIf=\"canAdd\" (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"mrx-input-file-image-input\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <div class=\"mrx-input-file-image-preview\">\r\n <div class=\"row\">\r\n <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\" *ngFor=\"let file of files\">\r\n <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-preview-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-preview-item-info\">\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'avatar'\">\r\n <ngx-file-drop (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n\r\n <div\r\n *ngIf=\"!files.length; else avatarTemplate\"\r\n class=\"mrx-input-file-image-input\"\r\n [class.mrx-input-file-image__disabled]=\"disabled\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #avatarTemplate>\r\n <div class=\"mrx-input-file-image-avatar\" (click)=\"openFileSelector()\">\r\n <div *ngFor=\"let file of files\" class=\"w-100 h-100\">\r\n <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n </ngx-file-drop>\r\n </ng-container>\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-input-file-image-preview-item-description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#FFFFFF;box-shadow:0 1px 4px #3a3a3a4d;border-radius:5px;padding:5px;display:none}.mrx-input-file-image-controls-item{min-width:16px;height:16px;cursor:pointer}.mrx-input-file-image-controls-item:not(:last-child){position:relative;padding-right:8px;border-right:1px solid #BFC5CC;margin-right:8px}.mrx-input-file-image-input{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-4);width:100%;height:100%;min-height:100px;gap:var(--spacing-2);border-radius:var(--border-radius-1);border:var(--border-width-default) dashed var(--neutral-bg-stroke-default);cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"] }]
|
|
12309
|
+
args: [{ selector: 'mrx-input-file-image', encapsulation: ViewEncapsulation.None, template: "<div class=\"mrx-input-file-image\" [class]=\"getClasses\">\r\n\r\n <ng-container *ngIf=\"type === 'default'\">\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n\r\n <ngx-file-drop *ngIf=\"canAdd\" (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"mrx-input-file-image-input\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <div class=\"mrx-input-file-image-preview\">\r\n <div class=\"row\">\r\n <div class=\"col col-12 col-sm-6 col-md-4 col-lg-3\" *ngFor=\"let file of files\">\r\n <div class=\"mrx-input-file-image-preview-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-preview-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <div class=\"mrx-input-file-image-preview-item-uploading\">\r\n <span class=\"mrx-input-file-image-preview-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-preview-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-preview-item-info\">\r\n <span class=\"mrx-input-file-image-preview-item-name\">\r\n {{ file.name }}\r\n </span>\r\n <span class=\"mrx-input-file-image-preview-item-description\">\r\n {{ formatBytes(file.size) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'avatar'\">\r\n <ngx-file-drop (onFileDrop)=\"dropped($event)\"\r\n [className]=\"getDropZoneClasses\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"disabled\"\r\n (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n\r\n <div\r\n *ngIf=\"!files.length; else avatarTemplate\"\r\n class=\"mrx-input-file-image-input\"\r\n [class.mrx-input-file-image__disabled]=\"disabled\"\r\n (click)=\"!disabled ? openFileSelector() : undefined\"\r\n >\r\n <span class=\"mrx-input-file-image-input-placeholder\">{{placeholder || getDefaultPlaceholder}}</span>\r\n <div class=\"mrx-input-file-image-input-info\">\r\n <span>\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430: \u0434\u043E {{formatBytes(maxSize)}}</span>\r\n <span *ngIf=\"extensions\">\u0424\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430: {{extensions}}</span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #avatarTemplate>\r\n <div class=\"mrx-input-file-image-avatar\" (click)=\"openFileSelector()\">\r\n <div *ngFor=\"let file of files\" class=\"w-100 h-100\">\r\n <div class=\"mrx-input-file-image-avatar-item\" [class.mrx-input-file-image-error]=\"file.error\">\r\n <ng-container *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-error\">\r\n <span class=\"mrx-icon icon-image icon-font-24 icon-filled-color-negative\"></span>\r\n {{ file.error }}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"file.uploading && !file.error\">\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"delete($event, file)\"></span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading\">\r\n <span class=\"mrx-input-file-image-avatar-item-uploading-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...</span>\r\n <div class=\"mrx-input-file-image-avatar-item-uploading-progress\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!file.uploading && !file.error\">\r\n <img [src]=\"file.url || downloadUrl(file)\" [alt]=\"file.name\">\r\n\r\n <div class=\"mrx-input-file-image-controls\">\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"changePreview($event, file)\">\r\n <span class=\"mrx-icon icon-pen icon-font-16\"></span>\r\n </div>\r\n <div class=\"mrx-input-file-image-controls-item\" (click)=\"delete($event, file)\">\r\n <span class=\"mrx-icon icon-delete icon-font-16\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n </ngx-file-drop>\r\n </ng-container>\r\n</div>\r\n", styles: [".mrx-input-file-image{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-3)}.mrx-input-file-image-preview{width:100%}.mrx-input-file-image-preview-item{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-2);border:1px solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;word-break:break-word;height:100%;padding:var(--spacing-4)}.mrx-input-file-image-preview-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image-preview-item.mrx-input-file-image-error{border:1px solid var(--system-bg-controls-negative-default)}.mrx-input-file-image-preview-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image-preview-item:hover{border-color:var(--neutral-bg-stroke-hover)}.mrx-input-file-image-preview-item-info{display:flex;flex-direction:column;gap:var(--spacing-2)}.mrx-input-file-image-preview-item-name{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-input-file-image-preview-item-description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-input-file-image-preview-item-error{max-height:236px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--system-text-negative)}.mrx-input-file-image-preview-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center}.mrx-input-file-image-preview-item-uploading-progress{width:96px;height:4px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image-preview-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image-preview .row{row-gap:var(--spacing-3)}.mrx-input-file-image.mrx-input-file-image-type-avatar{max-width:154px;min-width:154px;min-height:154px;max-height:154px;height:154px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;word-break:break-word}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item .icon-close{position:absolute;top:8px;right:8px;cursor:pointer}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item img{word-wrap:break-word;max-height:236px;object-fit:cover;width:100%;height:100%}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item:hover{border-color:var(--Main2)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-error{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%;border:1px solid var(--system-bg-controls-negative-default);border-radius:var(--border-radius-1);color:var(--system-text-negative)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-3);width:100%;height:100%;border:1px solid var(--neutral-bg-stroke-default);border-radius:4px}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-text{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-primary)}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress{width:96px;height:4px;border-radius:2px;background-color:var(--neutral-bg-island-default);display:flex;justify-content:flex-start}.mrx-input-file-image.mrx-input-file-image-type-avatar .mrx-input-file-image-avatar-item-uploading-progress span{display:block;height:100%;width:0;background-color:var(--brand-bg-primary-default);border-radius:2px}.mrx-input-file-image .mrx-input-file-image-drop{width:100%;height:100%}.mrx-input-file-image .mrx-input-file-image-drop-disabled .mrx-input-file-image-input{border-color:var(--neutral-bg-stroke-default);background-color:var(--neutral-bg-disabled);cursor:default}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone{height:100%;border:none;border-radius:0}.mrx-input-file-image .mrx-input-file-image-drop .ngx-file-drop__drop-zone .ngx-file-drop__content{height:100%}.mrx-input-file-image-preview-item:hover .mrx-input-file-image-controls,.mrx-input-file-image-avatar-item:hover .mrx-input-file-image-controls{display:flex}.mrx-input-file-image-controls{position:absolute;top:-16px;right:-16px;background:#FFFFFF;box-shadow:0 1px 4px #3a3a3a4d;border-radius:5px;padding:5px;display:none}.mrx-input-file-image-controls-item{min-width:16px;height:16px;cursor:pointer}.mrx-input-file-image-controls-item:not(:last-child){position:relative;padding-right:8px;border-right:1px solid #BFC5CC;margin-right:8px}.mrx-input-file-image-input{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-4);width:100%;height:100%;min-height:100px;gap:var(--spacing-2);border-radius:var(--border-radius-1);background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat;cursor:pointer}.mrx-input-file-image-input-placeholder{font-size:var(--body-md-font-size);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);text-align:center;color:var(--neutral-text-secondary)}.mrx-input-file-image-input-info{display:flex;flex-direction:column;align-items:center}.mrx-input-file-image-input-info *{font-size:var(--body-sm-font-size);font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);text-align:center;color:var(--neutral-text-secondary)}\n"] }]
|
|
12310
12310
|
}], ctorParameters: function () { return [{ type: FileUploadService }, { type: i2$2.SimpleModalService }]; }, propDecorators: { type: [{
|
|
12311
12311
|
type: Input
|
|
12312
12312
|
}], preview: [{
|
|
@@ -13510,7 +13510,7 @@ CheckboxGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
13510
13510
|
useExisting: forwardRef(() => CheckboxGroupComponent),
|
|
13511
13511
|
multi: true,
|
|
13512
13512
|
},
|
|
13513
|
-
], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n <mrx-checkbox-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"], components: [{ type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: ["searchable", "searchPlaceholder", "tooltip", "labelText", "linkText", "checkedItemsCount"], outputs: ["updateCheckboxGroupSearchValue", "clearFilters"] }, { type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["displaced", "level", "animationTrigger", "isLast", "disabled", "readonly", "invalid", "item"], outputs: ["animationEnd", "checkboxChanged"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13513
|
+
], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n <mrx-checkbox-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n [customClasses]=\"'mt-2'\"\r\n ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"], components: [{ type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: ["searchable", "searchPlaceholder", "tooltip", "labelText", "linkText", "checkedItemsCount"], outputs: ["updateCheckboxGroupSearchValue", "clearFilters"] }, { type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["displaced", "level", "animationTrigger", "isLast", "disabled", "readonly", "invalid", "item"], outputs: ["animationEnd", "checkboxChanged"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13514
13514
|
CheckboxGroupComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupComponent, providedIn: CheckboxGroupComponent });
|
|
13515
13515
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
13516
13516
|
type: Injectable,
|
|
@@ -13525,7 +13525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
13525
13525
|
useExisting: forwardRef(() => CheckboxGroupComponent),
|
|
13526
13526
|
multi: true,
|
|
13527
13527
|
},
|
|
13528
|
-
], template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n <mrx-checkbox-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"] }]
|
|
13528
|
+
], template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n <mrx-checkbox-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n [customClasses]=\"'mt-2'\"\r\n ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"] }]
|
|
13529
13529
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fields: [{
|
|
13530
13530
|
type: Input
|
|
13531
13531
|
}], scrollMaxHeight: [{
|
|
@@ -13991,7 +13991,7 @@ RadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
13991
13991
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
13992
13992
|
multi: true,
|
|
13993
13993
|
},
|
|
13994
|
-
], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-radio-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"radioGroup\"></mrx-save-state>\r\n\r\n <mrx-radio-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [required]=\"required\"\r\n [searchSize]=\"searchSize\"\r\n [labelText]=\"labelText\"\r\n (updateradioGroupSearchValue)=\"updateRadioGroupSearchValue($event)\"\r\n ></mrx-radio-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-radio-group-wrapper\"\r\n [class.mrx-radio-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\">\r\n <mrx-radio-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [selectedValue]=\"selectedValue\"\r\n [name]=\"name\"\r\n [bold]=\"bold\"\r\n [invalid]=\"invalid\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (radioChanged)=\"radioChanged($event)\"\r\n ></mrx-radio-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-radio-group__empty-message py-12px\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n [customClasses]=\"'mt-
|
|
13994
|
+
], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-radio-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"radioGroup\"></mrx-save-state>\r\n\r\n <mrx-radio-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [required]=\"required\"\r\n [searchSize]=\"searchSize\"\r\n [labelText]=\"labelText\"\r\n (updateradioGroupSearchValue)=\"updateRadioGroupSearchValue($event)\"\r\n ></mrx-radio-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-radio-group-wrapper\"\r\n [class.mrx-radio-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\">\r\n <mrx-radio-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [selectedValue]=\"selectedValue\"\r\n [name]=\"name\"\r\n [bold]=\"bold\"\r\n [invalid]=\"invalid\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (radioChanged)=\"radioChanged($event)\"\r\n ></mrx-radio-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-radio-group__empty-message py-12px\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n [customClasses]=\"'mt-2'\"\r\n ></mrx-error-message>\r\n </div>\r\n", styles: [".mrx-radio-group{position:relative}.mrx-radio-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-radio-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}\n"], components: [{ type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: RadioGroupHeaderComponent, selector: "mrx-radio-group-header", inputs: ["searchSize", "searchable", "searchPlaceholder", "tooltip", "labelText", "linkText", "checkedItemsCount", "required"], outputs: ["updateradioGroupSearchValue"] }, { type: RadioGroupItemComponent, selector: "mrx-radio-group-item", inputs: ["invalid", "name", "selectedValue", "item", "displaced", "level", "bold", "animationTrigger", "isLast", "disabled", "readonly"], outputs: ["animationEnd", "radioChanged"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13995
13995
|
RadioGroupComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RadioGroupComponent, providedIn: RadioGroupComponent });
|
|
13996
13996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
13997
13997
|
type: Injectable,
|
|
@@ -14006,7 +14006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
14006
14006
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
14007
14007
|
multi: true,
|
|
14008
14008
|
},
|
|
14009
|
-
], template: "<div class=\"mrx-radio-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"radioGroup\"></mrx-save-state>\r\n\r\n <mrx-radio-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [required]=\"required\"\r\n [searchSize]=\"searchSize\"\r\n [labelText]=\"labelText\"\r\n (updateradioGroupSearchValue)=\"updateRadioGroupSearchValue($event)\"\r\n ></mrx-radio-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-radio-group-wrapper\"\r\n [class.mrx-radio-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\">\r\n <mrx-radio-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [selectedValue]=\"selectedValue\"\r\n [name]=\"name\"\r\n [bold]=\"bold\"\r\n [invalid]=\"invalid\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (radioChanged)=\"radioChanged($event)\"\r\n ></mrx-radio-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-radio-group__empty-message py-12px\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n [customClasses]=\"'mt-
|
|
14009
|
+
], template: "<div class=\"mrx-radio-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"radioGroup\"></mrx-save-state>\r\n\r\n <mrx-radio-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [required]=\"required\"\r\n [searchSize]=\"searchSize\"\r\n [labelText]=\"labelText\"\r\n (updateradioGroupSearchValue)=\"updateRadioGroupSearchValue($event)\"\r\n ></mrx-radio-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-radio-group-wrapper\"\r\n [class.mrx-radio-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\">\r\n <mrx-radio-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [selectedValue]=\"selectedValue\"\r\n [name]=\"name\"\r\n [bold]=\"bold\"\r\n [invalid]=\"invalid\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (radioChanged)=\"radioChanged($event)\"\r\n ></mrx-radio-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-radio-group__empty-message py-12px\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n [customClasses]=\"'mt-2'\"\r\n ></mrx-error-message>\r\n </div>\r\n", styles: [".mrx-radio-group{position:relative}.mrx-radio-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-radio-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}\n"] }]
|
|
14010
14010
|
}], propDecorators: { fields: [{
|
|
14011
14011
|
type: Input
|
|
14012
14012
|
}], searchSize: [{
|