c3-components 0.12.0 → 0.14.0
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/fesm2022/c3-components.mjs +143 -49
- package/fesm2022/c3-components.mjs.map +1 -1
- package/lib/c3-file-displayer/c3-file-display-card/c3-file-display-card.component.d.ts +2 -1
- package/lib/c3-file-displayer/c3-file-display-list/c3-file-display-list-column-def.directive.d.ts +2 -1
- package/lib/c3-file-displayer/c3-file-display-list/c3-file-display-list.component.scss +26 -67
- package/lib/c3-file-viewer/c3-file-viewer.module.d.ts +7 -4
- package/lib/c3-file-viewer/components/c3-file-viewer-default/c3-file-viewer-default.component.d.ts +7 -0
- package/lib/c3-file-viewer/components/c3-file-viewer-default/c3-file-viewer-default.component.scss +3 -0
- package/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.d.ts +2 -7
- package/lib/c3-file-viewer/consts/supported-type.d.ts +2 -0
- package/lib/c3-file-viewer/models/file-viewer-config.model.d.ts +2 -0
- package/lib/c3-file-viewer/models/file-viewer.d.ts +8 -4
- package/lib/c3-file-viewer/styles/_c3-file-viewer.scss +14 -0
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/fo
|
|
|
7
7
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
8
8
|
import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
9
9
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
10
|
-
import { Subscription, Subject, merge, takeUntil, BehaviorSubject, filter, skip, debounceTime,
|
|
10
|
+
import { Subscription, Subject, merge, takeUntil, BehaviorSubject, filter, skip, debounceTime, of, mergeMap, map, tap, startWith } from 'rxjs';
|
|
11
11
|
import * as i1$2 from '@angular/material/dialog';
|
|
12
12
|
import { MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
|
|
13
13
|
import * as i2 from '@angular/material/button';
|
|
@@ -949,11 +949,11 @@ class C3FileViewerActionsComponent {
|
|
|
949
949
|
return this.fileViewer.config;
|
|
950
950
|
}
|
|
951
951
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
952
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
952
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: C3FileViewerActionsComponent, isStandalone: false, selector: "c3-file-viewer-actions", inputs: { fileViewer: "fileViewer" }, ngImport: i0, template: "<div class=\"nav-button-container\">\n @if (config.btnShow?.prev) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.previousImage($event)\"\n [disabled]=\"fileViewer.currentIndex === 0\"\n >\n @if (config.btnIcons?.prev?.classes) {\n <span [class]=\"config.btnIcons?.prev?.classes\"></span>\n }\n </button>\n @if (config.btnIcons?.prev?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.previousImage($event)\"\n >\n <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.prev?.text }}</span>\n </a>\n }\n }\n @if (config.btnShow?.next) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.nextImage($event)\"\n [disabled]=\"fileViewer.currentIndex === fileViewer.files.length - 1\"\n >\n <span [class]=\"config.btnIcons?.next?.classes\"></span>\n </button>\n }\n\n @if (config.btnIcons?.next?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.nextImage($event)\"\n >\n <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.next?.text }}</span>\n </a>\n }\n</div>\n\n@if (fileViewer.currentFile.type.startsWith('image')) {\n<!-- Button Container -->\n<div\n class=\"btn-container\"\n [class]=\"config.btnContainerClass\"\n>\n <!-- Rotate Counter Clockwise -->\n @if (config.btnShow?.rotateCounterClockwise) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.rotateCounterClockwise()\"\n *ngIf=\"config.btnIcons?.rotateCounterClockwise?.classes\"\n >\n <span [class]=\"config.btnIcons?.rotateCounterClockwise?.classes\"></span>\n </button>\n <a\n [class]=\"config.btnClass\"\n *ngIf=\"config.btnIcons?.rotateCounterClockwise?.text\"\n (click)=\"fileViewer.rotateCounterClockwise()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.rotateCounterClockwise?.text\n }}</span>\n </a>\n }\n\n <!-- Rotate Clockwise -->\n @if (config.btnShow?.rotateClockwise) {\n @if (config.btnIcons?.rotateClockwise?.classes) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.rotateClockwise()\"\n >\n <span [class]=\"config.btnIcons?.rotateClockwise?.classes\"></span>\n </button>\n }\n @if (config.btnIcons?.rotateClockwise?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.rotateClockwise()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.rotateClockwise?.text\n }}</span>\n </a>\n }\n }\n\n <!-- Zoom Out -->\n @if (config.btnShow?.zoomOut) {\n @if (config.btnIcons?.zoomOut?.classes) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.zoomOut()\"\n >\n <span [class]=\"config.btnIcons?.zoomOut?.classes\"></span>\n </button>\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.zoomOut()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.zoomOut?.text\n }}</span>\n </a>\n }\n }\n\n <!-- Zoom In -->\n @if (config.btnShow?.zoomIn) {\n @if (config.btnIcons?.zoomIn?.classes) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.zoomIn()\"\n >\n <span [class]=\"config.btnIcons?.zoomIn?.classes\"></span>\n </button>\n }\n @if (config.btnIcons?.zoomIn?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.zoomIn()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.zoomIn?.text\n }}</span>\n </a>\n }\n }\n\n <!-- Fullscreen -->\n @if (config.allowFullscreen) {\n @if (config.btnIcons?.fullscreen?.classes) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.toggleFullscreen()\"\n >\n <span [class]=\"config.btnIcons?.fullscreen?.classes\"></span>\n </button>\n }\n @if (config.btnIcons?.fullscreen?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.toggleFullscreen()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.fullscreen?.text\n }}</span>\n </a>\n }\n }\n\n <!-- Reset -->\n @if (config.btnShow?.reset) {\n @if (config.btnIcons?.reset?.classes) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.reset()\"\n >\n <span [class]=\"config.btnIcons?.reset?.classes\"></span>\n </button>\n }\n @if (config.btnIcons?.reset?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.reset()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.reset?.text\n }}</span>\n </a>\n }\n }\n\n <!-- Download -->\n @if (config.btnShow?.download) {\n @if (config.btnIcons?.download?.classes) {\n <button type=\"button\" [class]=\"config.btnClass\" (click)=\"fileViewer.download()\">\n <span [class]=\"config.btnIcons?.download?.classes\"></span>\n </button>\n }\n @if (config.btnIcons?.download?.text) {\n <a [class]=\"config.btnClass\" (click)=\"fileViewer.download()\">\n <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.download?.text }}</span>\n </a>\n }\n }\n\n <!-- Custom Buttons -->\n @for (cBtn of config.customBtns; track cBtn.icon.text) {\n @if (cBtn.icon.classes) {\n <button type=\"button\" [class]=\"config.btnClass\">\n <span [class]=\"cBtn.icon.classes\"></span>\n </button>\n }\n @if (cBtn.icon.text) {\n <a [class]=\"config.btnClass\">\n <span [class]=\"config.btnSubClass\">{{ cBtn.icon.text }}</span>\n </a>\n }\n }\n </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
953
953
|
}
|
|
954
954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerActionsComponent, decorators: [{
|
|
955
955
|
type: Component,
|
|
956
|
-
args: [{ selector: 'c3-file-viewer-actions', standalone: false, template: "<div class=\"nav-button-container\">\n
|
|
956
|
+
args: [{ selector: 'c3-file-viewer-actions', standalone: false, template: "<div class=\"nav-button-container\">\n @if (config.btnShow?.prev) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.previousImage($event)\"\n [disabled]=\"fileViewer.currentIndex === 0\"\n >\n @if (config.btnIcons?.prev?.classes) {\n <span [class]=\"config.btnIcons?.prev?.classes\"></span>\n }\n </button>\n @if (config.btnIcons?.prev?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.previousImage($event)\"\n >\n <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.prev?.text }}</span>\n </a>\n }\n }\n @if (config.btnShow?.next) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.nextImage($event)\"\n [disabled]=\"fileViewer.currentIndex === fileViewer.files.length - 1\"\n >\n <span [class]=\"config.btnIcons?.next?.classes\"></span>\n </button>\n }\n\n @if (config.btnIcons?.next?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.nextImage($event)\"\n >\n <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.next?.text }}</span>\n </a>\n }\n</div>\n\n@if (fileViewer.currentFile.type.startsWith('image')) {\n<!-- Button Container -->\n<div\n class=\"btn-container\"\n [class]=\"config.btnContainerClass\"\n>\n <!-- Rotate Counter Clockwise -->\n @if (config.btnShow?.rotateCounterClockwise) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.rotateCounterClockwise()\"\n *ngIf=\"config.btnIcons?.rotateCounterClockwise?.classes\"\n >\n <span [class]=\"config.btnIcons?.rotateCounterClockwise?.classes\"></span>\n </button>\n <a\n [class]=\"config.btnClass\"\n *ngIf=\"config.btnIcons?.rotateCounterClockwise?.text\"\n (click)=\"fileViewer.rotateCounterClockwise()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.rotateCounterClockwise?.text\n }}</span>\n </a>\n }\n\n <!-- Rotate Clockwise -->\n @if (config.btnShow?.rotateClockwise) {\n @if (config.btnIcons?.rotateClockwise?.classes) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.rotateClockwise()\"\n >\n <span [class]=\"config.btnIcons?.rotateClockwise?.classes\"></span>\n </button>\n }\n @if (config.btnIcons?.rotateClockwise?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.rotateClockwise()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.rotateClockwise?.text\n }}</span>\n </a>\n }\n }\n\n <!-- Zoom Out -->\n @if (config.btnShow?.zoomOut) {\n @if (config.btnIcons?.zoomOut?.classes) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.zoomOut()\"\n >\n <span [class]=\"config.btnIcons?.zoomOut?.classes\"></span>\n </button>\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.zoomOut()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.zoomOut?.text\n }}</span>\n </a>\n }\n }\n\n <!-- Zoom In -->\n @if (config.btnShow?.zoomIn) {\n @if (config.btnIcons?.zoomIn?.classes) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.zoomIn()\"\n >\n <span [class]=\"config.btnIcons?.zoomIn?.classes\"></span>\n </button>\n }\n @if (config.btnIcons?.zoomIn?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.zoomIn()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.zoomIn?.text\n }}</span>\n </a>\n }\n }\n\n <!-- Fullscreen -->\n @if (config.allowFullscreen) {\n @if (config.btnIcons?.fullscreen?.classes) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.toggleFullscreen()\"\n >\n <span [class]=\"config.btnIcons?.fullscreen?.classes\"></span>\n </button>\n }\n @if (config.btnIcons?.fullscreen?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.toggleFullscreen()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.fullscreen?.text\n }}</span>\n </a>\n }\n }\n\n <!-- Reset -->\n @if (config.btnShow?.reset) {\n @if (config.btnIcons?.reset?.classes) {\n <button\n type=\"button\"\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.reset()\"\n >\n <span [class]=\"config.btnIcons?.reset?.classes\"></span>\n </button>\n }\n @if (config.btnIcons?.reset?.text) {\n <a\n [class]=\"config.btnClass\"\n (click)=\"fileViewer.reset()\"\n >\n <span [class]=\"config.btnSubClass\">{{\n config.btnIcons?.reset?.text\n }}</span>\n </a>\n }\n }\n\n <!-- Download -->\n @if (config.btnShow?.download) {\n @if (config.btnIcons?.download?.classes) {\n <button type=\"button\" [class]=\"config.btnClass\" (click)=\"fileViewer.download()\">\n <span [class]=\"config.btnIcons?.download?.classes\"></span>\n </button>\n }\n @if (config.btnIcons?.download?.text) {\n <a [class]=\"config.btnClass\" (click)=\"fileViewer.download()\">\n <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.download?.text }}</span>\n </a>\n }\n }\n\n <!-- Custom Buttons -->\n @for (cBtn of config.customBtns; track cBtn.icon.text) {\n @if (cBtn.icon.classes) {\n <button type=\"button\" [class]=\"config.btnClass\">\n <span [class]=\"cBtn.icon.classes\"></span>\n </button>\n }\n @if (cBtn.icon.text) {\n <a [class]=\"config.btnClass\">\n <span [class]=\"config.btnSubClass\">{{ cBtn.icon.text }}</span>\n </a>\n }\n }\n </div>\n}\n" }]
|
|
957
957
|
}], propDecorators: { fileViewer: [{
|
|
958
958
|
type: Input
|
|
959
959
|
}] } });
|
|
@@ -997,14 +997,14 @@ class C3FileViewerPdfComponent {
|
|
|
997
997
|
this.dragstart = new EventEmitter();
|
|
998
998
|
}
|
|
999
999
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerPdfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1000
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: C3FileViewerPdfComponent, isStandalone: false, selector: "c3-file-viewer-pdf", inputs: { fileViewer: "fileViewer" }, outputs: { dragstart: "dragstart" }, host: { styleAttribute: "display: block", classAttribute: "c3-file-viewer-pdf" }, ngImport: i0, template: "<!-- pdf viewer -->\n<embed\n type=\"application/pdf\"\n [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n [style.height]=\"'100%'\"\n [style.width]=\"'100%'\"\n/>\n", dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: C3SafeUrlPipe, name: "c3SafeUrl" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1000
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: C3FileViewerPdfComponent, isStandalone: false, selector: "c3-file-viewer-pdf", inputs: { fileViewer: "fileViewer" }, outputs: { dragstart: "dragstart" }, host: { styleAttribute: "display: block", classAttribute: "c3-file-viewer-pdf" }, ngImport: i0, template: "<!-- pdf viewer -->\n<embed\n type=\"application/pdf\"\n [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n [style.height]=\"'100%'\"\n [style.width]=\"'100%'\"\n/>\n<!-- floating download button -->\n<button mat-icon-button class=\"download-button\" (click)=\"fileViewer.download()\">\n <mat-icon>download</mat-icon>\n</button>\n", dependencies: [{ kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: C3SafeUrlPipe, name: "c3SafeUrl" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1001
1001
|
}
|
|
1002
1002
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerPdfComponent, decorators: [{
|
|
1003
1003
|
type: Component,
|
|
1004
1004
|
args: [{ selector: 'c3-file-viewer-pdf', encapsulation: ViewEncapsulation.None, host: {
|
|
1005
1005
|
style: 'display: block',
|
|
1006
1006
|
class: 'c3-file-viewer-pdf',
|
|
1007
|
-
}, standalone: false, template: "<!-- pdf viewer -->\n<embed\n type=\"application/pdf\"\n [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n [style.height]=\"'100%'\"\n [style.width]=\"'100%'\"\n/>\n" }]
|
|
1007
|
+
}, standalone: false, template: "<!-- pdf viewer -->\n<embed\n type=\"application/pdf\"\n [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n [style.height]=\"'100%'\"\n [style.width]=\"'100%'\"\n/>\n<!-- floating download button -->\n<button mat-icon-button class=\"download-button\" (click)=\"fileViewer.download()\">\n <mat-icon>download</mat-icon>\n</button>\n" }]
|
|
1008
1008
|
}], propDecorators: { fileViewer: [{
|
|
1009
1009
|
type: Input
|
|
1010
1010
|
}], dragstart: [{
|
|
@@ -1012,33 +1012,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1012
1012
|
}] } });
|
|
1013
1013
|
|
|
1014
1014
|
class C3FileViewerVideoComponent {
|
|
1015
|
-
set _srcUpdated({ location }) {
|
|
1016
|
-
this.src$.next(location);
|
|
1017
|
-
}
|
|
1018
1015
|
constructor() {
|
|
1019
|
-
this.
|
|
1020
|
-
this.src$ = new Subject();
|
|
1021
|
-
this.src$
|
|
1022
|
-
.pipe(mergeMap((src) => this.fileViewer.getFile(src)), filter((blob) => blob.type.startsWith('application/pdf')), tap((blob) => (this.src = URL.createObjectURL(blob))))
|
|
1023
|
-
.subscribe({
|
|
1024
|
-
next: () => null,
|
|
1025
|
-
error: (error) => {
|
|
1026
|
-
console.log(error);
|
|
1027
|
-
},
|
|
1028
|
-
});
|
|
1016
|
+
this.fileViewer = input.required();
|
|
1029
1017
|
}
|
|
1030
1018
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1031
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1019
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: C3FileViewerVideoComponent, isStandalone: false, selector: "c3-file-viewer-video", inputs: { fileViewer: { classPropertyName: "fileViewer", publicName: "fileViewer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<video controls [src]=\"fileViewer().currentFile.objectUrl | async | c3SafeUrl\" crossorigin=\"*\"></video>\n", dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: C3SafeUrlPipe, name: "c3SafeUrl" }] }); }
|
|
1032
1020
|
}
|
|
1033
1021
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerVideoComponent, decorators: [{
|
|
1034
1022
|
type: Component,
|
|
1035
|
-
args: [{ selector: 'c3-file-viewer-video', standalone: false, template: "<video controls [src]=\"
|
|
1036
|
-
}]
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1023
|
+
args: [{ selector: 'c3-file-viewer-video', standalone: false, template: "<video controls [src]=\"fileViewer().currentFile.objectUrl | async | c3SafeUrl\" crossorigin=\"*\"></video>\n" }]
|
|
1024
|
+
}] });
|
|
1025
|
+
|
|
1026
|
+
class C3FileViewerDefaultComponent {
|
|
1027
|
+
constructor() {
|
|
1028
|
+
this.fileViewer = input.required();
|
|
1029
|
+
}
|
|
1030
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1031
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: C3FileViewerDefaultComponent, isStandalone: false, selector: "c3-file-viewer-default", inputs: { fileViewer: { classPropertyName: "fileViewer", publicName: "fileViewer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container>\n <button (click)=\"fileViewer().download()\">Download {{ fileViewer().getOriginalName() }}</button>\n</ng-container>\n", styles: [":host{display:block}\n"] }); }
|
|
1032
|
+
}
|
|
1033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerDefaultComponent, decorators: [{
|
|
1034
|
+
type: Component,
|
|
1035
|
+
args: [{ selector: 'c3-file-viewer-default', standalone: false, template: "<ng-container>\n <button (click)=\"fileViewer().download()\">Download {{ fileViewer().getOriginalName() }}</button>\n</ng-container>\n", styles: [":host{display:block}\n"] }]
|
|
1036
|
+
}] });
|
|
1042
1037
|
|
|
1043
1038
|
class C3FileViewerComponent {
|
|
1044
1039
|
constructor(moduleConfig, _http) {
|
|
@@ -1083,13 +1078,13 @@ class C3FileViewerComponent {
|
|
|
1083
1078
|
'calc(100% - ' + this.screenHeightOccupied + 'px)';
|
|
1084
1079
|
}
|
|
1085
1080
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerComponent, deps: [{ token: 'config', optional: true }, { token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1086
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1081
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: C3FileViewerComponent, isStandalone: false, selector: "c3-file-viewer", inputs: { screenHeightOccupied: "screenHeightOccupied", fileViewer: "fileViewer" }, outputs: { indexChange: "indexChange", configChange: "configChange", customFileEvent: "customFileEvent" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()", "window:keyup.ArrowRight": "next($event)", "window:keyup.ArrowLeft": "previous($event)" }, classAttribute: "c3-file-viewer" }, usesOnChanges: true, ngImport: i0, template: "@if (fileViewer) {\n<div\n class=\"c3-file-container\"\n [c3-full-screen]=\"fileViewer.fullscreen$ | async\"\n [style.height]=\"fileViewer.styleHeight\"\n [style.backgroundColor]=\"fileViewer.config.containerBackgroundColor\"\n (wheel)=\"fileViewer.scrollZoom($event)\"\n (dragover)=\"fileViewer.onDragOver($event)\"\n>\n @if (fileViewer.currentFile.type.startsWith('image')) {\n <c3-file-viewer-image\n [fileViewer]=\"fileViewer\"\n [style]=\"fileViewer.style\"\n (dragstart)=\"fileViewer.onDragStart($event)\"\n />\n } @else if (fileViewer.currentFile.type.startsWith('video')) {\n <c3-file-viewer-video\n [fileViewer]=\"fileViewer\"\n />\n } @else if (fileViewer.currentFile.type.startsWith('application/pdf')) {\n <c3-file-viewer-pdf\n [fileViewer]=\"fileViewer\"\n />\n } @else {\n <c3-file-viewer-default\n [fileViewer]=\"fileViewer\"\n />\n }\n\n <!-- Div below will be used to hide the 'ghost' image when dragging -->\n <div></div>\n @if (fileViewer.loading) {\n <div class=\"spinner-container\">\n <div class=\"spinner\"></div>\n </div>\n }\n\n <c3-file-viewer-actions [fileViewer]=\"fileViewer\" />\n </div>\n}\n", styles: [".c3-file-container{position:relative;width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: FullScreenDirective, selector: "[C3FullScreen], [c3-full-screen]", inputs: ["c3Screenfull", "c3-full-screen"] }, { kind: "component", type: C3FileViewerActionsComponent, selector: "c3-file-viewer-actions", inputs: ["fileViewer"] }, { kind: "component", type: C3FileViewerImageComponent, selector: "c3-file-viewer-image, [c3-file-viewer-image]", inputs: ["fileViewer"], outputs: ["dragstart"] }, { kind: "component", type: C3FileViewerPdfComponent, selector: "c3-file-viewer-pdf", inputs: ["fileViewer"], outputs: ["dragstart"] }, { kind: "component", type: C3FileViewerVideoComponent, selector: "c3-file-viewer-video", inputs: ["fileViewer"] }, { kind: "component", type: C3FileViewerDefaultComponent, selector: "c3-file-viewer-default", inputs: ["fileViewer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1087
1082
|
}
|
|
1088
1083
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerComponent, decorators: [{
|
|
1089
1084
|
type: Component,
|
|
1090
1085
|
args: [{ selector: 'c3-file-viewer', encapsulation: ViewEncapsulation.None, host: {
|
|
1091
1086
|
class: 'c3-file-viewer',
|
|
1092
|
-
}, standalone: false, template: "<div\n class=\"c3-file-container\"\n
|
|
1087
|
+
}, standalone: false, template: "@if (fileViewer) {\n<div\n class=\"c3-file-container\"\n [c3-full-screen]=\"fileViewer.fullscreen$ | async\"\n [style.height]=\"fileViewer.styleHeight\"\n [style.backgroundColor]=\"fileViewer.config.containerBackgroundColor\"\n (wheel)=\"fileViewer.scrollZoom($event)\"\n (dragover)=\"fileViewer.onDragOver($event)\"\n>\n @if (fileViewer.currentFile.type.startsWith('image')) {\n <c3-file-viewer-image\n [fileViewer]=\"fileViewer\"\n [style]=\"fileViewer.style\"\n (dragstart)=\"fileViewer.onDragStart($event)\"\n />\n } @else if (fileViewer.currentFile.type.startsWith('video')) {\n <c3-file-viewer-video\n [fileViewer]=\"fileViewer\"\n />\n } @else if (fileViewer.currentFile.type.startsWith('application/pdf')) {\n <c3-file-viewer-pdf\n [fileViewer]=\"fileViewer\"\n />\n } @else {\n <c3-file-viewer-default\n [fileViewer]=\"fileViewer\"\n />\n }\n\n <!-- Div below will be used to hide the 'ghost' image when dragging -->\n <div></div>\n @if (fileViewer.loading) {\n <div class=\"spinner-container\">\n <div class=\"spinner\"></div>\n </div>\n }\n\n <c3-file-viewer-actions [fileViewer]=\"fileViewer\" />\n </div>\n}\n", styles: [".c3-file-container{position:relative;width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}\n"] }]
|
|
1093
1088
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1094
1089
|
type: Optional
|
|
1095
1090
|
}, {
|
|
@@ -1136,6 +1131,7 @@ const DEFAULT_CONFIG = {
|
|
|
1136
1131
|
next: true,
|
|
1137
1132
|
prev: true,
|
|
1138
1133
|
reset: true,
|
|
1134
|
+
download: true,
|
|
1139
1135
|
},
|
|
1140
1136
|
btnIcons: {
|
|
1141
1137
|
zoomIn: {
|
|
@@ -1156,6 +1152,9 @@ const DEFAULT_CONFIG = {
|
|
|
1156
1152
|
reset: {
|
|
1157
1153
|
text: 'restore',
|
|
1158
1154
|
},
|
|
1155
|
+
download: {
|
|
1156
|
+
text: 'download',
|
|
1157
|
+
},
|
|
1159
1158
|
},
|
|
1160
1159
|
};
|
|
1161
1160
|
|
|
@@ -1166,6 +1165,42 @@ class CustomFileEvent {
|
|
|
1166
1165
|
}
|
|
1167
1166
|
}
|
|
1168
1167
|
|
|
1168
|
+
const SUPPORTED_MIME_TYPES = [
|
|
1169
|
+
// Documents et Applications
|
|
1170
|
+
// 'text/html',
|
|
1171
|
+
// 'text/css',
|
|
1172
|
+
// 'text/plain',
|
|
1173
|
+
// 'application/javascript',
|
|
1174
|
+
// 'application/json',
|
|
1175
|
+
// 'application/xml',
|
|
1176
|
+
'application/pdf',
|
|
1177
|
+
// Images
|
|
1178
|
+
'image/jpeg',
|
|
1179
|
+
'image/png',
|
|
1180
|
+
'image/gif',
|
|
1181
|
+
'image/svg+xml',
|
|
1182
|
+
'image/webp',
|
|
1183
|
+
'image/avif',
|
|
1184
|
+
'image/bmp',
|
|
1185
|
+
'image/x-icon',
|
|
1186
|
+
// Audio et Vidéo
|
|
1187
|
+
// 'audio/mpeg',
|
|
1188
|
+
// 'audio/ogg',
|
|
1189
|
+
// 'audio/wav',
|
|
1190
|
+
// 'audio/webm',
|
|
1191
|
+
'video/mp4',
|
|
1192
|
+
'video/webm',
|
|
1193
|
+
'video/ogg',
|
|
1194
|
+
// Polices de Caractères
|
|
1195
|
+
// 'font/woff',
|
|
1196
|
+
// 'font/woff2',
|
|
1197
|
+
// 'font/ttf',
|
|
1198
|
+
// 'font/otf',
|
|
1199
|
+
];
|
|
1200
|
+
function isMimeTypeSupported(mimeType) {
|
|
1201
|
+
return SUPPORTED_MIME_TYPES.includes(mimeType);
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1169
1204
|
class C3FileViewer {
|
|
1170
1205
|
get config() {
|
|
1171
1206
|
return this._config;
|
|
@@ -1199,7 +1234,7 @@ class C3FileViewer {
|
|
|
1199
1234
|
get files() {
|
|
1200
1235
|
return this._files;
|
|
1201
1236
|
}
|
|
1202
|
-
constructor({ config, files, client
|
|
1237
|
+
constructor({ config, files, client }) {
|
|
1203
1238
|
this._config = DEFAULT_CONFIG;
|
|
1204
1239
|
this.config$ = new BehaviorSubject(DEFAULT_CONFIG);
|
|
1205
1240
|
this.fullscreen$ = new BehaviorSubject(false);
|
|
@@ -1250,9 +1285,14 @@ class C3FileViewer {
|
|
|
1250
1285
|
}
|
|
1251
1286
|
createObjectURL(file) {
|
|
1252
1287
|
this.onLoadStart();
|
|
1288
|
+
const fileType = isFileMetadata(file) ? file.type : file.contentType;
|
|
1289
|
+
if (!isMimeTypeSupported(fileType)) {
|
|
1290
|
+
this.onLoaded();
|
|
1291
|
+
return;
|
|
1292
|
+
}
|
|
1253
1293
|
return of(file.location).pipe(mergeMap((location) => this.locationBlobMap.has(location)
|
|
1254
1294
|
? of(this.locationBlobMap.get(location))
|
|
1255
|
-
: this.getFile(location).pipe(map((response) => URL.createObjectURL(response)), tap((url) => this.locationBlobMap.set(location, url)))), tap(() => this.
|
|
1295
|
+
: this.getFile(location).pipe(map((response) => URL.createObjectURL(response)), tap((url) => this.locationBlobMap.set(location, url)))), tap(() => this.onLoaded()));
|
|
1256
1296
|
}
|
|
1257
1297
|
getFile(location) {
|
|
1258
1298
|
const client = this.config.customClient || this.client;
|
|
@@ -1312,7 +1352,7 @@ class C3FileViewer {
|
|
|
1312
1352
|
this.rotation -= 90;
|
|
1313
1353
|
this.updateStyle();
|
|
1314
1354
|
}
|
|
1315
|
-
|
|
1355
|
+
onLoaded() {
|
|
1316
1356
|
this.loading = false;
|
|
1317
1357
|
}
|
|
1318
1358
|
onLoadStart() {
|
|
@@ -1352,8 +1392,11 @@ class C3FileViewer {
|
|
|
1352
1392
|
this.translateY = 0;
|
|
1353
1393
|
this.updateStyle();
|
|
1354
1394
|
}
|
|
1395
|
+
getOriginalName(file = this.currentFile) {
|
|
1396
|
+
return file.metadata?.['originalName'] || file.name;
|
|
1397
|
+
}
|
|
1355
1398
|
canNavigate(event) {
|
|
1356
|
-
return
|
|
1399
|
+
return event == null || (this.config.allowKeyboardNavigation && this.hovered);
|
|
1357
1400
|
}
|
|
1358
1401
|
updateStyle() {
|
|
1359
1402
|
this.style.transform = `translate(${this.translateX}px, ${this.translateY}px) rotate(${this.rotation}deg) scale(${this.scale})`;
|
|
@@ -1377,6 +1420,59 @@ class C3FileViewer {
|
|
|
1377
1420
|
}
|
|
1378
1421
|
return result;
|
|
1379
1422
|
}
|
|
1423
|
+
download(file = this.currentFile) {
|
|
1424
|
+
const client = this.config.customClient || this.client;
|
|
1425
|
+
const originalName = this.getOriginalName();
|
|
1426
|
+
// Si le fichier est déjà en blob (petit fichier déjà chargé)
|
|
1427
|
+
if (file.objectUrl && this.locationBlobMap.has(file.location)) {
|
|
1428
|
+
const url = this.locationBlobMap.get(file.location);
|
|
1429
|
+
this.downloadFromUrl(url, originalName);
|
|
1430
|
+
}
|
|
1431
|
+
// Pour les gros fichiers, on utilise le client fourni avec streaming
|
|
1432
|
+
else if (client) {
|
|
1433
|
+
this.downloadWithClient(file, client, originalName);
|
|
1434
|
+
}
|
|
1435
|
+
else {
|
|
1436
|
+
console.error('No http client available for download');
|
|
1437
|
+
}
|
|
1438
|
+
}
|
|
1439
|
+
downloadFromUrl(url, filename) {
|
|
1440
|
+
const a = document.createElement('a');
|
|
1441
|
+
a.href = url;
|
|
1442
|
+
a.download = filename;
|
|
1443
|
+
document.body.appendChild(a);
|
|
1444
|
+
a.click();
|
|
1445
|
+
document.body.removeChild(a);
|
|
1446
|
+
}
|
|
1447
|
+
downloadWithClient(file, client, originalName) {
|
|
1448
|
+
// Utiliser le client fourni pour récupérer le fichier
|
|
1449
|
+
client(file.location, {
|
|
1450
|
+
responseType: 'blob',
|
|
1451
|
+
}).subscribe({
|
|
1452
|
+
next: (blob) => {
|
|
1453
|
+
// Créer une URL blob temporaire pour le téléchargement
|
|
1454
|
+
const url = URL.createObjectURL(blob);
|
|
1455
|
+
this.downloadFromUrl(url, originalName);
|
|
1456
|
+
// Nettoyer l'URL après un délai
|
|
1457
|
+
setTimeout(() => {
|
|
1458
|
+
URL.revokeObjectURL(url);
|
|
1459
|
+
}, 1000);
|
|
1460
|
+
},
|
|
1461
|
+
error: (error) => {
|
|
1462
|
+
console.error('Download failed:', error);
|
|
1463
|
+
// Fallback: essayer de créer un lien direct vers l'URL
|
|
1464
|
+
// (peut fonctionner si l'URL est accessible directement)
|
|
1465
|
+
const a = document.createElement('a');
|
|
1466
|
+
a.href = file.location;
|
|
1467
|
+
a.download = originalName;
|
|
1468
|
+
a.target = '_blank';
|
|
1469
|
+
a.click();
|
|
1470
|
+
},
|
|
1471
|
+
});
|
|
1472
|
+
}
|
|
1473
|
+
}
|
|
1474
|
+
function isFileMetadata(file) {
|
|
1475
|
+
return 'type' in file;
|
|
1380
1476
|
}
|
|
1381
1477
|
|
|
1382
1478
|
class C3FileViewerDialog {
|
|
@@ -1447,10 +1543,9 @@ class C3FileViewerModule {
|
|
|
1447
1543
|
C3FileViewerPdfComponent,
|
|
1448
1544
|
C3FileViewerVideoComponent,
|
|
1449
1545
|
C3FileViewerDialogComponent,
|
|
1450
|
-
C3FileViewerDialog
|
|
1451
|
-
C3FileViewerComponent,
|
|
1452
|
-
|
|
1453
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule, MatDialogModule] }); }
|
|
1546
|
+
C3FileViewerDialog,
|
|
1547
|
+
C3FileViewerDefaultComponent], imports: [CommonModule, C3SafeUrlPipe, MatDialogModule, MatIconModule, MatButtonModule], exports: [FullScreenDirective, C3FileViewerComponent, C3FileViewerDialogComponent] }); }
|
|
1548
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule, MatDialogModule, MatIconModule, MatButtonModule] }); }
|
|
1454
1549
|
}
|
|
1455
1550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerModule, decorators: [{
|
|
1456
1551
|
type: NgModule,
|
|
@@ -1464,13 +1559,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1464
1559
|
C3FileViewerVideoComponent,
|
|
1465
1560
|
C3FileViewerDialogComponent,
|
|
1466
1561
|
C3FileViewerDialog,
|
|
1562
|
+
C3FileViewerDefaultComponent,
|
|
1467
1563
|
],
|
|
1468
|
-
exports: [
|
|
1469
|
-
|
|
1470
|
-
C3FileViewerComponent,
|
|
1471
|
-
C3FileViewerDialogComponent,
|
|
1472
|
-
],
|
|
1473
|
-
imports: [CommonModule, C3SafeUrlPipe, MatDialogModule],
|
|
1564
|
+
exports: [FullScreenDirective, C3FileViewerComponent, C3FileViewerDialogComponent],
|
|
1565
|
+
imports: [CommonModule, C3SafeUrlPipe, MatDialogModule, MatIconModule, MatButtonModule],
|
|
1474
1566
|
providers: [provideHttpClient(withInterceptorsFromDi())],
|
|
1475
1567
|
}]
|
|
1476
1568
|
}] });
|
|
@@ -1482,6 +1574,7 @@ class C3FileDisplayCardComponent {
|
|
|
1482
1574
|
this.deletable = input(false);
|
|
1483
1575
|
this.size = input('32');
|
|
1484
1576
|
this.onDelete = output();
|
|
1577
|
+
this.onDownload = output();
|
|
1485
1578
|
this.getFileType = computed(() => {
|
|
1486
1579
|
const file = this.fileObjectUrl();
|
|
1487
1580
|
if (file && file.type) {
|
|
@@ -1508,11 +1601,11 @@ class C3FileDisplayCardComponent {
|
|
|
1508
1601
|
});
|
|
1509
1602
|
}
|
|
1510
1603
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1511
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: C3FileDisplayCardComponent, isStandalone: true, selector: "c3-file-display-card", inputs: { fileObjectUrl: { classPropertyName: "fileObjectUrl", publicName: "fileObjectUrl", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<button\n class=\"file-card border\"\n [class.size-16]=\"size() === '16'\"\n [class.size-32]=\"size() === '32'\"\n [class.size-64]=\"size() === '64'\"\n [class.size-128]=\"size() === '128'\"\n [class.size-256]=\"size() === '256'\"\n>\n @if(deletable()) {\n <div class=\"actions\">\n <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n } @if(fileObjectUrl()) {\n @switch (getFileType()) { @case ('image') {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n [alt]=\"getFileName()\"\n />\n } @case ('application') {\n <mat-icon> file-pdf-box </mat-icon>\n } @case ('video') {\n <mat-icon> video </mat-icon>\n }\n }\n\n <div class=\"informations flex justify-between items-center\">\n <span class=\"text-xs text-white\">\n {{ getDisplayName() }}\n </span>\n </div>\n }\n</button>\n", styles: [":host{display:block;width:fit-content}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:hidden}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}:host .size-16{height:4rem;width:4rem}:host .size-32{height:8rem;width:8rem}:host .size-64{height:16rem;width:16rem}:host .size-128{height:32rem;width:32rem}:host .size-256{height:64rem;width:64rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1604
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: C3FileDisplayCardComponent, isStandalone: true, selector: "c3-file-display-card", inputs: { fileObjectUrl: { classPropertyName: "fileObjectUrl", publicName: "fileObjectUrl", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete", onDownload: "onDownload" }, ngImport: i0, template: "<button\n class=\"file-card border\"\n [class.size-16]=\"size() === '16'\"\n [class.size-32]=\"size() === '32'\"\n [class.size-64]=\"size() === '64'\"\n [class.size-128]=\"size() === '128'\"\n [class.size-256]=\"size() === '256'\"\n>\n @if(deletable()) {\n <div class=\"actions\">\n <button mat-icon-button (click)=\"onDownload.emit()\">\n <mat-icon>download</mat-icon>\n </button>\n <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n } @if(fileObjectUrl()) {\n @switch (getFileType()) { @case ('image') {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n [alt]=\"getFileName()\"\n />\n } @case ('application') {\n <mat-icon> file-pdf-box </mat-icon>\n } @case ('video') {\n <mat-icon> video </mat-icon>\n }\n }\n\n <div class=\"informations flex justify-between items-center\">\n <span class=\"text-xs text-white\">\n {{ getDisplayName() }}\n </span>\n </div>\n }\n</button>\n", styles: [":host{display:block;width:fit-content}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:hidden}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}:host .size-16{height:4rem;width:4rem}:host .size-32{height:8rem;width:8rem}:host .size-64{height:16rem;width:16rem}:host .size-128{height:32rem;width:32rem}:host .size-256{height:64rem;width:64rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1512
1605
|
}
|
|
1513
1606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayCardComponent, decorators: [{
|
|
1514
1607
|
type: Component,
|
|
1515
|
-
args: [{ selector: 'c3-file-display-card', imports: [CommonModule, MatButtonModule, MatIconModule], template: "<button\n class=\"file-card border\"\n [class.size-16]=\"size() === '16'\"\n [class.size-32]=\"size() === '32'\"\n [class.size-64]=\"size() === '64'\"\n [class.size-128]=\"size() === '128'\"\n [class.size-256]=\"size() === '256'\"\n>\n @if(deletable()) {\n <div class=\"actions\">\n <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n } @if(fileObjectUrl()) {\n @switch (getFileType()) { @case ('image') {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n [alt]=\"getFileName()\"\n />\n } @case ('application') {\n <mat-icon> file-pdf-box </mat-icon>\n } @case ('video') {\n <mat-icon> video </mat-icon>\n }\n }\n\n <div class=\"informations flex justify-between items-center\">\n <span class=\"text-xs text-white\">\n {{ getDisplayName() }}\n </span>\n </div>\n }\n</button>\n", styles: [":host{display:block;width:fit-content}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:hidden}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}:host .size-16{height:4rem;width:4rem}:host .size-32{height:8rem;width:8rem}:host .size-64{height:16rem;width:16rem}:host .size-128{height:32rem;width:32rem}:host .size-256{height:64rem;width:64rem}\n"] }]
|
|
1608
|
+
args: [{ selector: 'c3-file-display-card', imports: [CommonModule, MatButtonModule, MatIconModule], template: "<button\n class=\"file-card border\"\n [class.size-16]=\"size() === '16'\"\n [class.size-32]=\"size() === '32'\"\n [class.size-64]=\"size() === '64'\"\n [class.size-128]=\"size() === '128'\"\n [class.size-256]=\"size() === '256'\"\n>\n @if(deletable()) {\n <div class=\"actions\">\n <button mat-icon-button (click)=\"onDownload.emit()\">\n <mat-icon>download</mat-icon>\n </button>\n <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n } @if(fileObjectUrl()) {\n @switch (getFileType()) { @case ('image') {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n [alt]=\"getFileName()\"\n />\n } @case ('application') {\n <mat-icon> file-pdf-box </mat-icon>\n } @case ('video') {\n <mat-icon> video </mat-icon>\n }\n }\n\n <div class=\"informations flex justify-between items-center\">\n <span class=\"text-xs text-white\">\n {{ getDisplayName() }}\n </span>\n </div>\n }\n</button>\n", styles: [":host{display:block;width:fit-content}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:hidden}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}:host .size-16{height:4rem;width:4rem}:host .size-32{height:8rem;width:8rem}:host .size-64{height:16rem;width:16rem}:host .size-128{height:32rem;width:32rem}:host .size-256{height:64rem;width:64rem}\n"] }]
|
|
1516
1609
|
}] });
|
|
1517
1610
|
|
|
1518
1611
|
class C3FileDisplayGridComponent {
|
|
@@ -1541,11 +1634,11 @@ class C3FileDisplayGridComponent {
|
|
|
1541
1634
|
this.dialog()?.openDialog();
|
|
1542
1635
|
}
|
|
1543
1636
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1544
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: C3FileDisplayGridComponent, isStandalone: true, selector: "c3-file-display-grid", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, cardSize: { classPropertyName: "cardSize", publicName: "cardSize", isSignal: true, isRequired: false, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n <div class=\"c3-file-display-grid\">\n @for (file of files(); track $index) {\n <c3-file-display-card\n [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n [size]=\"cardSize()\"\n (click)=\"openDialog($event, $index)\"\n (onDelete)=\"onDelete.emit(file)\"\n />\n }\n </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:flex;flex-flow:wrap;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: C3FileDisplayCardComponent, selector: "c3-file-display-card", inputs: ["fileObjectUrl", "displayFn", "deletable", "size"], outputs: ["onDelete"] }, { kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }] }); }
|
|
1637
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: C3FileDisplayGridComponent, isStandalone: true, selector: "c3-file-display-grid", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, cardSize: { classPropertyName: "cardSize", publicName: "cardSize", isSignal: true, isRequired: false, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n <div class=\"c3-file-display-grid\">\n @for (file of files(); track $index) {\n <c3-file-display-card\n [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n [size]=\"cardSize()\"\n (click)=\"openDialog($event, $index)\"\n (onDelete)=\"onDelete.emit(file)\"\n (onDownload)=\"fileViewer.download(file)\"\n />\n }\n </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:flex;flex-flow:wrap;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: C3FileDisplayCardComponent, selector: "c3-file-display-card", inputs: ["fileObjectUrl", "displayFn", "deletable", "size"], outputs: ["onDelete", "onDownload"] }, { kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }] }); }
|
|
1545
1638
|
}
|
|
1546
1639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayGridComponent, decorators: [{
|
|
1547
1640
|
type: Component,
|
|
1548
|
-
args: [{ selector: 'c3-file-display-grid', imports: [CommonModule, C3FileDisplayCardComponent, C3FileViewerModule], template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n <div class=\"c3-file-display-grid\">\n @for (file of files(); track $index) {\n <c3-file-display-card\n [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n [size]=\"cardSize()\"\n (click)=\"openDialog($event, $index)\"\n (onDelete)=\"onDelete.emit(file)\"\n />\n }\n </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:flex;flex-flow:wrap;gap:1rem}\n"] }]
|
|
1641
|
+
args: [{ selector: 'c3-file-display-grid', imports: [CommonModule, C3FileDisplayCardComponent, C3FileViewerModule], template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n <div class=\"c3-file-display-grid\">\n @for (file of files(); track $index) {\n <c3-file-display-card\n [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n [size]=\"cardSize()\"\n (click)=\"openDialog($event, $index)\"\n (onDelete)=\"onDelete.emit(file)\"\n (onDownload)=\"fileViewer.download(file)\"\n />\n }\n </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:flex;flex-flow:wrap;gap:1rem}\n"] }]
|
|
1549
1642
|
}], ctorParameters: () => [] });
|
|
1550
1643
|
|
|
1551
1644
|
class C3FileDisplayIconComponent {
|
|
@@ -1688,12 +1781,13 @@ class C3FileDisplayListColumnDefDirective {
|
|
|
1688
1781
|
this.title = input.required({
|
|
1689
1782
|
alias: 'c3FileDisplayListColumnDef',
|
|
1690
1783
|
});
|
|
1784
|
+
this.classList = input([]);
|
|
1691
1785
|
this._table = inject(C3_FILE_DISPLAY_LIST, { optional: true });
|
|
1692
1786
|
this.headerCellDef = contentChild(C3FileDisplayListHeaderCellDefDirective);
|
|
1693
1787
|
this.cellDef = contentChild(C3FileDisplayListCellDefDirective);
|
|
1694
1788
|
}
|
|
1695
1789
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListColumnDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1696
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.7", type: C3FileDisplayListColumnDefDirective, isStandalone: true, selector: "[c3FileDisplayListColumnDef]", inputs: { title: { classPropertyName: "title", publicName: "c3FileDisplayListColumnDef", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "headerCellDef", first: true, predicate: C3FileDisplayListHeaderCellDefDirective, descendants: true, isSignal: true }, { propertyName: "cellDef", first: true, predicate: C3FileDisplayListCellDefDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
1790
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.7", type: C3FileDisplayListColumnDefDirective, isStandalone: true, selector: "[c3FileDisplayListColumnDef]", inputs: { title: { classPropertyName: "title", publicName: "c3FileDisplayListColumnDef", isSignal: true, isRequired: true, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerCellDef", first: true, predicate: C3FileDisplayListHeaderCellDefDirective, descendants: true, isSignal: true }, { propertyName: "cellDef", first: true, predicate: C3FileDisplayListCellDefDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
1697
1791
|
}
|
|
1698
1792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListColumnDefDirective, decorators: [{
|
|
1699
1793
|
type: Directive,
|
|
@@ -1764,7 +1858,7 @@ class C3FileDisplayListComponent {
|
|
|
1764
1858
|
provide: C3_FILE_DISPLAY_LIST,
|
|
1765
1859
|
useExisting: C3FileDisplayListComponent,
|
|
1766
1860
|
},
|
|
1767
|
-
], queries: [{ propertyName: "_columnDefs", predicate: C3FileDisplayListColumnDefDirective, isSignal: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- header -->\n<
|
|
1861
|
+
], queries: [{ propertyName: "_columnDefs", predicate: C3FileDisplayListColumnDefDirective, isSignal: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n<!-- header -->\n <table class=\"file-table\">\n <thead>\n <tr>\n @for (columnName of columns(); track columnName) {\n <th [class.full]=\"columnName === 'name'\" [class.icon]=\"columnName === 'icon'\">\n @if (getColumnDef(columnName)?.headerCellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.headerCellDef()!.template\"></ng-container>\n } @else {\n @if (columnName === 'icon') {\n <span></span>\n } @else if (columnName === 'name') {\n <span>Nom</span>\n } @else if (columnName === 'date') {\n <span>Date d'ajout</span>\n }\n }\n </th>\n }\n <th class=\"actions\">\n <ng-content></ng-content>\n </th>\n </tr>\n </thead>\n <tbody>\n @for (file of files(); track $index) {\n <tr (click)=\"openDialog($event, $index)\">\n @for (columnName of columns(); track columnName) {\n @if (columnName === 'name') {\n <td class=\"name full\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <span>{{ displayFn()(file) }}</span>\n }\n </td>\n } @else if (columnName === 'icon') {\n <td class=\"icon\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <c3-file-display-icon [fileType]=\"file.type\" />\n }\n </td>\n } @else {\n <td [classList]=\"getColumnDef(columnName)?.classList()\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n @if (columnName === 'date') {\n <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n }\n }\n </td>\n }\n }\n <td class=\"actions\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"openDialog($event, $index)\">\n Ouvrir\n </button>\n <button mat-menu-item (click)=\"fileViewer.download(file)\">T\u00E9l\u00E9charger</button>\n @if (deletable()) {\n <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n }\n </mat-menu>\n </td>\n </tr>\n }\n </tbody>\n </table>\n</c3-file-viewer-dialog>\n\n<!-- <div class=\"file-display-list\">\n @for (file of files(); track $index) {\n <button>\n @for (columnName of columns(); track columnName) {\n @if (columnName === 'name') {\n <div class=\"name\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <span>{{ displayFn()(file) }}</span>\n }\n </div>\n } @else if (columnName === 'icon') {\n <div class=\"icon-cell\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <div class=\"icon\">\n <c3-file-display-icon [fileType]=\"file.type\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"cell\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n @if (columnName === 'date') {\n <div class=\"date-label\">\n <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n </div>\n }\n }\n </div>\n }\n }\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"openDialog($event, $index)\">\n Ouvrir\n </button>\n @if (deletable()) {\n <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n }\n </mat-menu>\n </button>\n }\n</div> -->\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .file-table{width:100%;border-collapse:collapse}:host .file-table th,:host .file-table td{padding:.5rem;text-align:left;border-bottom:1px solid var(--mat-divider-color)}:host .file-table th{font-size:1.5rem;font-weight:700;background-color:var(--mat-table-header-container-background-color)}:host .file-table tr:hover{background-color:var(--background-hover)}:host .file-table .icon{width:56px;min-width:56px;text-align:center}:host .file-table :where(th,td):not(.full){width:0;white-space:nowrap}:host .file-table .actions{width:48px;text-align:center}\n"], dependencies: [{ kind: "directive", type: C3StopPropagationDirective, selector: "[c3-stop-click-propagation]" }, { kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }, { kind: "component", type: C3FileDisplayIconComponent, selector: "c3-file-display-icon", inputs: ["fileType"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
1768
1862
|
}
|
|
1769
1863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
|
|
1770
1864
|
type: Component,
|
|
@@ -1782,7 +1876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1782
1876
|
provide: C3_FILE_DISPLAY_LIST,
|
|
1783
1877
|
useExisting: C3FileDisplayListComponent,
|
|
1784
1878
|
},
|
|
1785
|
-
], template: "<!-- header -->\n<
|
|
1879
|
+
], template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n<!-- header -->\n <table class=\"file-table\">\n <thead>\n <tr>\n @for (columnName of columns(); track columnName) {\n <th [class.full]=\"columnName === 'name'\" [class.icon]=\"columnName === 'icon'\">\n @if (getColumnDef(columnName)?.headerCellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.headerCellDef()!.template\"></ng-container>\n } @else {\n @if (columnName === 'icon') {\n <span></span>\n } @else if (columnName === 'name') {\n <span>Nom</span>\n } @else if (columnName === 'date') {\n <span>Date d'ajout</span>\n }\n }\n </th>\n }\n <th class=\"actions\">\n <ng-content></ng-content>\n </th>\n </tr>\n </thead>\n <tbody>\n @for (file of files(); track $index) {\n <tr (click)=\"openDialog($event, $index)\">\n @for (columnName of columns(); track columnName) {\n @if (columnName === 'name') {\n <td class=\"name full\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <span>{{ displayFn()(file) }}</span>\n }\n </td>\n } @else if (columnName === 'icon') {\n <td class=\"icon\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <c3-file-display-icon [fileType]=\"file.type\" />\n }\n </td>\n } @else {\n <td [classList]=\"getColumnDef(columnName)?.classList()\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n @if (columnName === 'date') {\n <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n }\n }\n </td>\n }\n }\n <td class=\"actions\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"openDialog($event, $index)\">\n Ouvrir\n </button>\n <button mat-menu-item (click)=\"fileViewer.download(file)\">T\u00E9l\u00E9charger</button>\n @if (deletable()) {\n <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n }\n </mat-menu>\n </td>\n </tr>\n }\n </tbody>\n </table>\n</c3-file-viewer-dialog>\n\n<!-- <div class=\"file-display-list\">\n @for (file of files(); track $index) {\n <button>\n @for (columnName of columns(); track columnName) {\n @if (columnName === 'name') {\n <div class=\"name\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <span>{{ displayFn()(file) }}</span>\n }\n </div>\n } @else if (columnName === 'icon') {\n <div class=\"icon-cell\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <div class=\"icon\">\n <c3-file-display-icon [fileType]=\"file.type\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"cell\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n @if (columnName === 'date') {\n <div class=\"date-label\">\n <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n </div>\n }\n }\n </div>\n }\n }\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"openDialog($event, $index)\">\n Ouvrir\n </button>\n @if (deletable()) {\n <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n }\n </mat-menu>\n </button>\n }\n</div> -->\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .file-table{width:100%;border-collapse:collapse}:host .file-table th,:host .file-table td{padding:.5rem;text-align:left;border-bottom:1px solid var(--mat-divider-color)}:host .file-table th{font-size:1.5rem;font-weight:700;background-color:var(--mat-table-header-container-background-color)}:host .file-table tr:hover{background-color:var(--background-hover)}:host .file-table .icon{width:56px;min-width:56px;text-align:center}:host .file-table :where(th,td):not(.full){width:0;white-space:nowrap}:host .file-table .actions{width:48px;text-align:center}\n"] }]
|
|
1786
1880
|
}], ctorParameters: () => [] });
|
|
1787
1881
|
|
|
1788
1882
|
class C3FileDisplayerModule {
|