@netgrif/components
Version:
Netgrif Application Engine frontend Angular components
35 lines • 9.6 kB
JavaScript
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FilePreviewType } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ngbracket/ngx-layout";
import * as i3 from "@angular/material/button";
import * as i4 from "@angular/material/dialog";
import * as i5 from "@angular/material/icon";
export class PreviewDialogComponent {
data;
image;
constructor(data) {
this.data = data;
data.imageFull.subscribe(imageSource => {
this.image = imageSource;
});
}
fullImageExists() {
return !!this.image;
}
isPdf() {
return this.data.extension === FilePreviewType.pdf;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PreviewDialogComponent, selector: "nc-preview-dialog", ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <h1 mat-dialog-title *ngIf=\"!isPdf()\">Image: {{data.dataField.value.name}}</h1>\n <h1 mat-dialog-title *ngIf=\"isPdf()\">PDF: {{data.dataField.value.name}}</h1>\n <div fxFlex></div>\n <button mat-icon-button [mat-dialog-close]=\"true\">\n <mat-icon>close</mat-icon>\n </button>\n</div>\n\n<div mat-dialog-content fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"fit-content\">\n <img class=\"image-size\" *ngIf=\"!fullImageExists()\" [src]=\"data.imagePreview\" alt=\"Image preview\"/>\n <img class=\"image-size\" *ngIf=\"fullImageExists() && !isPdf()\" [src]=\"image\" alt=\"Image\"/>\n <embed class=\"pdf-view\" *ngIf=\"fullImageExists() && isPdf()\" [src]=\"image\" [type]=\"'application/pdf'\" />\n</div>\n", styles: [".image-size{height:64vh}.close{float:right;top:-24px;right:-24px}.pdf-view{width:50vw;height:64vh}.fit-content{height:fit-content}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PreviewDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'nc-preview-dialog', template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <h1 mat-dialog-title *ngIf=\"!isPdf()\">Image: {{data.dataField.value.name}}</h1>\n <h1 mat-dialog-title *ngIf=\"isPdf()\">PDF: {{data.dataField.value.name}}</h1>\n <div fxFlex></div>\n <button mat-icon-button [mat-dialog-close]=\"true\">\n <mat-icon>close</mat-icon>\n </button>\n</div>\n\n<div mat-dialog-content fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"fit-content\">\n <img class=\"image-size\" *ngIf=\"!fullImageExists()\" [src]=\"data.imagePreview\" alt=\"Image preview\"/>\n <img class=\"image-size\" *ngIf=\"fullImageExists() && !isPdf()\" [src]=\"image\" alt=\"Image\"/>\n <embed class=\"pdf-view\" *ngIf=\"fullImageExists() && isPdf()\" [src]=\"image\" [type]=\"'application/pdf'\" />\n</div>\n", styles: [".image-size{height:64vh}.close{float:right;top:-24px;right:-24px}.pdf-view{width:50vw;height:64vh}.fit-content{height:fit-content}\n"] }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJldmlldy1kaWFsb2cuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvZGF0YS1maWVsZHMvZmlsZS1maWVsZC9wcmV2aWV3LWRpYWxvZy9wcmV2aWV3LWRpYWxvZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRhLWZpZWxkcy9maWxlLWZpZWxkL3ByZXZpZXctZGlhbG9nL3ByZXZpZXctZGlhbG9nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsTUFBTSxFQUFTLE1BQU0sZUFBZSxDQUFDO0FBQ3hELE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUN6RCxPQUFPLEVBQUMsZUFBZSxFQUFvQixNQUFNLDBCQUEwQixDQUFDOzs7Ozs7O0FBUzVFLE1BQU0sT0FBTyxzQkFBc0I7SUFHYTtJQUY1QyxLQUFLLENBQVU7SUFFZixZQUE0QyxJQUF1QjtRQUF2QixTQUFJLEdBQUosSUFBSSxDQUFtQjtRQUMvRCxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsRUFBRTtZQUNuQyxJQUFJLENBQUMsS0FBSyxHQUFHLFdBQVcsQ0FBQztRQUM3QixDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxlQUFlO1FBQ1gsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztJQUN4QixDQUFDO0lBRUQsS0FBSztRQUNELE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEtBQUssZUFBZSxDQUFDLEdBQUcsQ0FBQztJQUN2RCxDQUFDO3dHQWZRLHNCQUFzQixrQkFHWCxlQUFlOzRGQUgxQixzQkFBc0IseURDWG5DLHl5QkFjQTs7NEZESGEsc0JBQXNCO2tCQUxsQyxTQUFTOytCQUNJLG1CQUFtQjs7MEJBT2hCLE1BQU07MkJBQUMsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbmplY3QsIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge01BVF9ESUFMT0dfREFUQX0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJztcbmltcG9ydCB7RmlsZVByZXZpZXdUeXBlLCBQcmV2aWV3RGlhbG9nRGF0YX0gZnJvbSAnQG5ldGdyaWYvY29tcG9uZW50cy1jb3JlJztcbmltcG9ydCB7U2FmZVVybH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5cblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduYy1wcmV2aWV3LWRpYWxvZycsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3ByZXZpZXctZGlhbG9nLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9wcmV2aWV3LWRpYWxvZy5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFByZXZpZXdEaWFsb2dDb21wb25lbnQge1xuICAgIGltYWdlOiBTYWZlVXJsO1xuXG4gICAgY29uc3RydWN0b3IoQEluamVjdChNQVRfRElBTE9HX0RBVEEpIHB1YmxpYyBkYXRhOiBQcmV2aWV3RGlhbG9nRGF0YSkge1xuICAgICAgICBkYXRhLmltYWdlRnVsbC5zdWJzY3JpYmUoaW1hZ2VTb3VyY2UgPT4ge1xuICAgICAgICAgICAgdGhpcy5pbWFnZSA9IGltYWdlU291cmNlO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBmdWxsSW1hZ2VFeGlzdHMoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiAhIXRoaXMuaW1hZ2U7XG4gICAgfVxuXG4gICAgaXNQZGYoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLmRhdGEuZXh0ZW5zaW9uID09PSBGaWxlUHJldmlld1R5cGUucGRmO1xuICAgIH1cbn1cbiIsIjxkaXYgZnhMYXlvdXQ9XCJyb3dcIiBmeExheW91dEFsaWduPVwic3RhcnQgY2VudGVyXCI+XG4gICAgPGgxIG1hdC1kaWFsb2ctdGl0bGUgKm5nSWY9XCIhaXNQZGYoKVwiPkltYWdlOiB7e2RhdGEuZGF0YUZpZWxkLnZhbHVlLm5hbWV9fTwvaDE+XG4gICAgPGgxIG1hdC1kaWFsb2ctdGl0bGUgKm5nSWY9XCJpc1BkZigpXCI+UERGOiB7e2RhdGEuZGF0YUZpZWxkLnZhbHVlLm5hbWV9fTwvaDE+XG4gICAgPGRpdiBmeEZsZXg+PC9kaXY+XG4gICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gW21hdC1kaWFsb2ctY2xvc2VdPVwidHJ1ZVwiPlxuICAgICAgICA8bWF0LWljb24+Y2xvc2U8L21hdC1pY29uPlxuICAgIDwvYnV0dG9uPlxuPC9kaXY+XG5cbjxkaXYgbWF0LWRpYWxvZy1jb250ZW50IGZ4TGF5b3V0PVwicm93XCIgZnhMYXlvdXRBbGlnbj1cImNlbnRlciBjZW50ZXJcIiBjbGFzcz1cImZpdC1jb250ZW50XCI+XG4gICAgPGltZyBjbGFzcz1cImltYWdlLXNpemVcIiAqbmdJZj1cIiFmdWxsSW1hZ2VFeGlzdHMoKVwiIFtzcmNdPVwiZGF0YS5pbWFnZVByZXZpZXdcIiBhbHQ9XCJJbWFnZSBwcmV2aWV3XCIvPlxuICAgIDxpbWcgY2xhc3M9XCJpbWFnZS1zaXplXCIgKm5nSWY9XCJmdWxsSW1hZ2VFeGlzdHMoKSAmJiAhaXNQZGYoKVwiIFtzcmNdPVwiaW1hZ2VcIiBhbHQ9XCJJbWFnZVwiLz5cbiAgICA8ZW1iZWQgY2xhc3M9XCJwZGYtdmlld1wiICpuZ0lmPVwiZnVsbEltYWdlRXhpc3RzKCkgJiYgaXNQZGYoKVwiIFtzcmNdPVwiaW1hZ2VcIiBbdHlwZV09XCInYXBwbGljYXRpb24vcGRmJ1wiIC8+XG48L2Rpdj5cbiJdfQ==