c3-components 0.12.1 → 0.14.0

package/fesm2022/c3-components.mjs

@@ -7,7 +7,7 @@ import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/fo
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { Subscription, Subject, merge, takeUntil, BehaviorSubject, filter, skip, debounceTime, mergeMap, tap, of, map, startWith } from 'rxjs';
+import { Subscription, Subject, merge, takeUntil, BehaviorSubject, filter, skip, debounceTime, of, mergeMap, map, tap, startWith } from 'rxjs';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import * as i2 from '@angular/material/button';
@@ -949,11 +949,11 @@ class C3FileViewerActionsComponent {
         return this.fileViewer.config;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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  <button\n    *ngIf=\"config.btnShow?.prev\"\n    type=\"button\"\n    [class]=\"config.btnClass\"\n    (click)=\"fileViewer.previousImage($event)\"\n    [disabled]=\"fileViewer.currentIndex === 0\"\n  >\n    <span\n      *ngIf=\"config.btnIcons?.prev?.classes\"\n      [class]=\"config.btnIcons?.prev?.classes\"\n    ></span>\n  </button>\n  <a\n    [class]=\"config.btnClass\"\n    *ngIf=\"config.btnIcons?.prev?.text\"\n    (click)=\"fileViewer.previousImage($event)\"\n  >\n    <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.prev?.text }}</span>\n  </a>\n  <button\n    *ngIf=\"config.btnShow?.next\"\n    type=\"button\"\n    [class]=\"config.btnClass\"\n    (click)=\"fileViewer.nextImage($event)\"\n    [disabled]=\"fileViewer.currentIndex === fileViewer.files.length - 1\"\n  >\n    <span\n      *ngIf=\"config.btnIcons?.next?.classes\"\n      [class]=\"config.btnIcons?.next?.classes\"\n    ></span>\n  </button>\n  <a\n    [class]=\"config.btnClass\"\n    *ngIf=\"config.btnIcons?.next?.text\"\n    (click)=\"fileViewer.nextImage($event)\"\n  >\n    <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.next?.text }}</span>\n  </a>\n</div>\n\n<!-- Button Container -->\n<div\n  class=\"btn-container\"\n  [class]=\"config.btnContainerClass\"\n  *ngIf=\"fileViewer.currentFile.type.startsWith('image')\"\n>\n  <!-- Rotate Counter Clockwise -->\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <!-- Rotate Clockwise -->\n  <ng-container *ngIf=\"config.btnShow?.rotateClockwise\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateClockwise()\"\n      *ngIf=\"config.btnIcons?.rotateClockwise?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.rotateClockwise?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.rotateClockwise?.text\"\n      (click)=\"fileViewer.rotateClockwise()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.rotateClockwise?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Zoom Out -->\n  <ng-container *ngIf=\"config.btnShow?.zoomOut\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomOut()\"\n      *ngIf=\"config.btnIcons?.zoomOut?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.zoomOut?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.zoomOut?.text\"\n      (click)=\"fileViewer.zoomOut()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomOut?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Zoom In -->\n  <ng-container *ngIf=\"config.btnShow?.zoomIn\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomIn()\"\n      *ngIf=\"config.btnIcons?.zoomIn?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.zoomIn?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.zoomIn?.text\"\n      (click)=\"fileViewer.zoomIn()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomIn?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Fullscreen -->\n  <ng-container *ngIf=\"config.allowFullscreen\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n      *ngIf=\"config.btnIcons?.fullscreen?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.fullscreen?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.fullscreen?.text\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.fullscreen?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Reset -->\n  <ng-container *ngIf=\"config.btnShow?.reset\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.reset()\"\n      *ngIf=\"config.btnIcons?.reset?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.reset?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.reset?.text\"\n      (click)=\"fileViewer.reset()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.reset?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Custom Buttons -->\n  <ng-container *ngFor=\"let cBtn of config.customBtns\">\n    <button *ngIf=\"cBtn.icon.classes\" type=\"button\" [class]=\"config.btnClass\">\n      <span *ngIf=\"cBtn.icon.classes\" [class]=\"cBtn.icon.classes\"></span>\n    </button>\n    <ng-container *ngIf=\"cBtn.icon.text\">\n      <a [class]=\"config.btnClass\" *ngIf=\"cBtn.icon.text\">\n        <span [class]=\"config.btnSubClass\">{{ cBtn.icon.text }}</span>\n      </a>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-viewer-actions', standalone: false, template: "<div class=\"nav-button-container\">\n  <button\n    *ngIf=\"config.btnShow?.prev\"\n    type=\"button\"\n    [class]=\"config.btnClass\"\n    (click)=\"fileViewer.previousImage($event)\"\n    [disabled]=\"fileViewer.currentIndex === 0\"\n  >\n    <span\n      *ngIf=\"config.btnIcons?.prev?.classes\"\n      [class]=\"config.btnIcons?.prev?.classes\"\n    ></span>\n  </button>\n  <a\n    [class]=\"config.btnClass\"\n    *ngIf=\"config.btnIcons?.prev?.text\"\n    (click)=\"fileViewer.previousImage($event)\"\n  >\n    <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.prev?.text }}</span>\n  </a>\n  <button\n    *ngIf=\"config.btnShow?.next\"\n    type=\"button\"\n    [class]=\"config.btnClass\"\n    (click)=\"fileViewer.nextImage($event)\"\n    [disabled]=\"fileViewer.currentIndex === fileViewer.files.length - 1\"\n  >\n    <span\n      *ngIf=\"config.btnIcons?.next?.classes\"\n      [class]=\"config.btnIcons?.next?.classes\"\n    ></span>\n  </button>\n  <a\n    [class]=\"config.btnClass\"\n    *ngIf=\"config.btnIcons?.next?.text\"\n    (click)=\"fileViewer.nextImage($event)\"\n  >\n    <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.next?.text }}</span>\n  </a>\n</div>\n\n<!-- Button Container -->\n<div\n  class=\"btn-container\"\n  [class]=\"config.btnContainerClass\"\n  *ngIf=\"fileViewer.currentFile.type.startsWith('image')\"\n>\n  <!-- Rotate Counter Clockwise -->\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <!-- Rotate Clockwise -->\n  <ng-container *ngIf=\"config.btnShow?.rotateClockwise\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateClockwise()\"\n      *ngIf=\"config.btnIcons?.rotateClockwise?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.rotateClockwise?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.rotateClockwise?.text\"\n      (click)=\"fileViewer.rotateClockwise()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.rotateClockwise?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Zoom Out -->\n  <ng-container *ngIf=\"config.btnShow?.zoomOut\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomOut()\"\n      *ngIf=\"config.btnIcons?.zoomOut?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.zoomOut?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.zoomOut?.text\"\n      (click)=\"fileViewer.zoomOut()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomOut?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Zoom In -->\n  <ng-container *ngIf=\"config.btnShow?.zoomIn\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomIn()\"\n      *ngIf=\"config.btnIcons?.zoomIn?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.zoomIn?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.zoomIn?.text\"\n      (click)=\"fileViewer.zoomIn()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomIn?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Fullscreen -->\n  <ng-container *ngIf=\"config.allowFullscreen\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n      *ngIf=\"config.btnIcons?.fullscreen?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.fullscreen?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.fullscreen?.text\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.fullscreen?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Reset -->\n  <ng-container *ngIf=\"config.btnShow?.reset\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.reset()\"\n      *ngIf=\"config.btnIcons?.reset?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.reset?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.reset?.text\"\n      (click)=\"fileViewer.reset()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.reset?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Custom Buttons -->\n  <ng-container *ngFor=\"let cBtn of config.customBtns\">\n    <button *ngIf=\"cBtn.icon.classes\" type=\"button\" [class]=\"config.btnClass\">\n      <span *ngIf=\"cBtn.icon.classes\" [class]=\"cBtn.icon.classes\"></span>\n    </button>\n    <ng-container *ngIf=\"cBtn.icon.text\">\n      <a [class]=\"config.btnClass\" *ngIf=\"cBtn.icon.text\">\n        <span [class]=\"config.btnSubClass\">{{ cBtn.icon.text }}</span>\n      </a>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+            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" }]
         }], propDecorators: { fileViewer: [{
                 type: Input
             }] } });
@@ -997,14 +997,14 @@ class C3FileViewerPdfComponent {
         this.dragstart = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerPdfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerPdfComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-file-viewer-pdf', encapsulation: ViewEncapsulation.None, host: {
                         style: 'display: block',
                         class: 'c3-file-viewer-pdf',
-                    }, 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" }]
+                    }, 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" }]
         }], propDecorators: { fileViewer: [{
                 type: Input
             }], dragstart: [{
@@ -1012,33 +1012,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             }] } });
 
 class C3FileViewerVideoComponent {
-    set _srcUpdated({ location }) {
-        this.src$.next(location);
-    }
     constructor() {
-        this.src = '';
-        this.src$ = new Subject();
-        this.src$
-            .pipe(mergeMap((src) => this.fileViewer.getFile(src)), filter((blob) => blob.type.startsWith('application/pdf')), tap((blob) => (this.src = URL.createObjectURL(blob))))
-            .subscribe({
-            next: () => null,
-            error: (error) => {
-                console.log(error);
-            },
-        });
+        this.fileViewer = input.required();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: C3FileViewerVideoComponent, isStandalone: false, selector: "c3-file-viewer-video", inputs: { _srcUpdated: ["file", "_srcUpdated"], fileViewer: "fileViewer" }, ngImport: i0, template: "<video controls [src]=\"src\" crossorigin=\"*\"></video>\n" }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerVideoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-viewer-video', standalone: false, template: "<video controls [src]=\"src\" crossorigin=\"*\"></video>\n" }]
-        }], ctorParameters: () => [], propDecorators: { _srcUpdated: [{
-                type: Input,
-                args: ['file']
-            }], fileViewer: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'c3-file-viewer-video', standalone: false, template: "<video controls [src]=\"fileViewer().currentFile.objectUrl | async | c3SafeUrl\" crossorigin=\"*\"></video>\n" }]
+        }] });
+
+class C3FileViewerDefaultComponent {
+    constructor() {
+        this.fileViewer = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerDefaultComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }] });
 
 class C3FileViewerComponent {
     constructor(moduleConfig, _http) {
@@ -1083,13 +1078,13 @@ class C3FileViewerComponent {
             'calc(100% - ' + this.screenHeightOccupied + 'px)';
     }
     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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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: "<div\n  class=\"c3-file-container\"\n  *ngIf=\"fileViewer\"\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  <c3-file-viewer-image\n    *ngIf=\"fileViewer.currentFile.type.startsWith('image')\"\n    [fileViewer]=\"fileViewer\"\n    [style]=\"fileViewer.style\"\n    (dragstart)=\"fileViewer.onDragStart($event)\"\n  />\n\n  <c3-file-viewer-video\n    *ngIf=\"fileViewer.currentFile.type.startsWith('video')\"\n  />\n\n  <c3-file-viewer-pdf\n    *ngIf=\"fileViewer.currentFile.type.startsWith('application/pdf')\"\n    [fileViewer]=\"fileViewer\"\n  />\n  <!-- Div below will be used to hide the 'ghost' image when dragging -->\n  <div></div>\n  <div class=\"spinner-container\" *ngIf=\"fileViewer.loading\">\n    <div class=\"spinner\"></div>\n  </div>\n\n  <c3-file-viewer-actions [fileViewer]=\"fileViewer\" />\n</div>\n", styles: [".c3-file-container{position:relative;width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["file", "fileViewer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-file-viewer', encapsulation: ViewEncapsulation.None, host: {
                         class: 'c3-file-viewer',
-                    }, standalone: false, template: "<div\n  class=\"c3-file-container\"\n  *ngIf=\"fileViewer\"\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  <c3-file-viewer-image\n    *ngIf=\"fileViewer.currentFile.type.startsWith('image')\"\n    [fileViewer]=\"fileViewer\"\n    [style]=\"fileViewer.style\"\n    (dragstart)=\"fileViewer.onDragStart($event)\"\n  />\n\n  <c3-file-viewer-video\n    *ngIf=\"fileViewer.currentFile.type.startsWith('video')\"\n  />\n\n  <c3-file-viewer-pdf\n    *ngIf=\"fileViewer.currentFile.type.startsWith('application/pdf')\"\n    [fileViewer]=\"fileViewer\"\n  />\n  <!-- Div below will be used to hide the 'ghost' image when dragging -->\n  <div></div>\n  <div class=\"spinner-container\" *ngIf=\"fileViewer.loading\">\n    <div class=\"spinner\"></div>\n  </div>\n\n  <c3-file-viewer-actions [fileViewer]=\"fileViewer\" />\n</div>\n", styles: [".c3-file-container{position:relative;width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}\n"] }]
+                    }, 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1136,6 +1131,7 @@ const DEFAULT_CONFIG = {
         next: true,
         prev: true,
         reset: true,
+        download: true,
     },
     btnIcons: {
         zoomIn: {
@@ -1156,6 +1152,9 @@ const DEFAULT_CONFIG = {
         reset: {
             text: 'restore',
         },
+        download: {
+            text: 'download',
+        },
     },
 };
 
@@ -1166,6 +1165,42 @@ class CustomFileEvent {
     }
 }
 
+const SUPPORTED_MIME_TYPES = [
+    // Documents et Applications
+    // 'text/html',
+    // 'text/css',
+    // 'text/plain',
+    // 'application/javascript',
+    // 'application/json',
+    // 'application/xml',
+    'application/pdf',
+    // Images
+    'image/jpeg',
+    'image/png',
+    'image/gif',
+    'image/svg+xml',
+    'image/webp',
+    'image/avif',
+    'image/bmp',
+    'image/x-icon',
+    // Audio et Vidéo
+    // 'audio/mpeg',
+    // 'audio/ogg',
+    // 'audio/wav',
+    // 'audio/webm',
+    'video/mp4',
+    'video/webm',
+    'video/ogg',
+    // Polices de Caractères
+    // 'font/woff',
+    // 'font/woff2',
+    // 'font/ttf',
+    // 'font/otf',
+];
+function isMimeTypeSupported(mimeType) {
+    return SUPPORTED_MIME_TYPES.includes(mimeType);
+}
+
 class C3FileViewer {
     get config() {
         return this._config;
@@ -1199,7 +1234,7 @@ class C3FileViewer {
     get files() {
         return this._files;
     }
-    constructor({ config, files, client, }) {
+    constructor({ config, files, client }) {
         this._config = DEFAULT_CONFIG;
         this.config$ = new BehaviorSubject(DEFAULT_CONFIG);
         this.fullscreen$ = new BehaviorSubject(false);
@@ -1250,9 +1285,14 @@ class C3FileViewer {
     }
     createObjectURL(file) {
         this.onLoadStart();
+        const fileType = isFileMetadata(file) ? file.type : file.contentType;
+        if (!isMimeTypeSupported(fileType)) {
+            this.onLoaded();
+            return;
+        }
         return of(file.location).pipe(mergeMap((location) => this.locationBlobMap.has(location)
             ? of(this.locationBlobMap.get(location))
-            : this.getFile(location).pipe(map((response) => URL.createObjectURL(response)), tap((url) => this.locationBlobMap.set(location, url)))), tap(() => this.onLoad()));
+            : this.getFile(location).pipe(map((response) => URL.createObjectURL(response)), tap((url) => this.locationBlobMap.set(location, url)))), tap(() => this.onLoaded()));
     }
     getFile(location) {
         const client = this.config.customClient || this.client;
@@ -1312,7 +1352,7 @@ class C3FileViewer {
         this.rotation -= 90;
         this.updateStyle();
     }
-    onLoad() {
+    onLoaded() {
         this.loading = false;
     }
     onLoadStart() {
@@ -1352,8 +1392,11 @@ class C3FileViewer {
         this.translateY = 0;
         this.updateStyle();
     }
+    getOriginalName(file = this.currentFile) {
+        return file.metadata?.['originalName'] || file.name;
+    }
     canNavigate(event) {
-        return (event == null || (this.config.allowKeyboardNavigation && this.hovered));
+        return event == null || (this.config.allowKeyboardNavigation && this.hovered);
     }
     updateStyle() {
         this.style.transform = `translate(${this.translateX}px, ${this.translateY}px) rotate(${this.rotation}deg) scale(${this.scale})`;
@@ -1377,6 +1420,59 @@ class C3FileViewer {
         }
         return result;
     }
+    download(file = this.currentFile) {
+        const client = this.config.customClient || this.client;
+        const originalName = this.getOriginalName();
+        // Si le fichier est déjà en blob (petit fichier déjà chargé)
+        if (file.objectUrl && this.locationBlobMap.has(file.location)) {
+            const url = this.locationBlobMap.get(file.location);
+            this.downloadFromUrl(url, originalName);
+        }
+        // Pour les gros fichiers, on utilise le client fourni avec streaming
+        else if (client) {
+            this.downloadWithClient(file, client, originalName);
+        }
+        else {
+            console.error('No http client available for download');
+        }
+    }
+    downloadFromUrl(url, filename) {
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+    downloadWithClient(file, client, originalName) {
+        // Utiliser le client fourni pour récupérer le fichier
+        client(file.location, {
+            responseType: 'blob',
+        }).subscribe({
+            next: (blob) => {
+                // Créer une URL blob temporaire pour le téléchargement
+                const url = URL.createObjectURL(blob);
+                this.downloadFromUrl(url, originalName);
+                // Nettoyer l'URL après un délai
+                setTimeout(() => {
+                    URL.revokeObjectURL(url);
+                }, 1000);
+            },
+            error: (error) => {
+                console.error('Download failed:', error);
+                // Fallback: essayer de créer un lien direct vers l'URL
+                // (peut fonctionner si l'URL est accessible directement)
+                const a = document.createElement('a');
+                a.href = file.location;
+                a.download = originalName;
+                a.target = '_blank';
+                a.click();
+            },
+        });
+    }
+}
+function isFileMetadata(file) {
+    return 'type' in file;
 }
 
 class C3FileViewerDialog {
@@ -1447,10 +1543,9 @@ class C3FileViewerModule {
             C3FileViewerPdfComponent,
             C3FileViewerVideoComponent,
             C3FileViewerDialogComponent,
-            C3FileViewerDialog], imports: [CommonModule, C3SafeUrlPipe, MatDialogModule], exports: [FullScreenDirective,
-            C3FileViewerComponent,
-            C3FileViewerDialogComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule, MatDialogModule] }); }
+            C3FileViewerDialog,
+            C3FileViewerDefaultComponent], imports: [CommonModule, C3SafeUrlPipe, MatDialogModule, MatIconModule, MatButtonModule], exports: [FullScreenDirective, C3FileViewerComponent, C3FileViewerDialogComponent] }); }
+    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] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerModule, decorators: [{
             type: NgModule,
@@ -1464,13 +1559,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         C3FileViewerVideoComponent,
                         C3FileViewerDialogComponent,
                         C3FileViewerDialog,
+                        C3FileViewerDefaultComponent,
                     ],
-                    exports: [
-                        FullScreenDirective,
-                        C3FileViewerComponent,
-                        C3FileViewerDialogComponent,
-                    ],
-                    imports: [CommonModule, C3SafeUrlPipe, MatDialogModule],
+                    exports: [FullScreenDirective, C3FileViewerComponent, C3FileViewerDialogComponent],
+                    imports: [CommonModule, C3SafeUrlPipe, MatDialogModule, MatIconModule, MatButtonModule],
                     providers: [provideHttpClient(withInterceptorsFromDi())],
                 }]
         }] });
@@ -1482,6 +1574,7 @@ class C3FileDisplayCardComponent {
         this.deletable = input(false);
         this.size = input('32');
         this.onDelete = output();
+        this.onDownload = output();
         this.getFileType = computed(() => {
             const file = this.fileObjectUrl();
             if (file && file.type) {
@@ -1508,11 +1601,11 @@ class C3FileDisplayCardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayCardComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }] });
 
 class C3FileDisplayGridComponent {
@@ -1541,11 +1634,11 @@ class C3FileDisplayGridComponent {
         this.dialog()?.openDialog();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayGridComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: () => [] });
 
 class C3FileDisplayIconComponent {
@@ -1765,7 +1858,7 @@ class C3FileDisplayListComponent {
                 provide: C3_FILE_DISPLAY_LIST,
                 useExisting: C3FileDisplayListComponent,
             },
-        ], 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              @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"] }] }); }
+        ], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
             type: Component,
@@ -1783,7 +1876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             provide: C3_FILE_DISPLAY_LIST,
                             useExisting: C3FileDisplayListComponent,
                         },
-                    ], 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              @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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [] });
 
 class C3FileDisplayerModule {