c3-components 0.8.6 → 0.8.7

package/fesm2022/c3-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, inject, Injector, effect, Injectable, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, input, output, viewChild, computed, HostBinding, model, ElementRef, contentChild, contentChildren } from '@angular/core';
+import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, inject, Injector, effect, Injectable, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, input, output, computed, viewChild, HostBinding, model, ElementRef, contentChild, contentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
@@ -8,7 +8,7 @@ import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { Subscription, Subject, merge, takeUntil, BehaviorSubject, filter, skip, debounceTime, mergeMap, tap, map } from 'rxjs';
+import { Subscription, Subject, merge, takeUntil, BehaviorSubject, filter, skip, debounceTime, mergeMap, tap, of, map } 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';
@@ -849,10 +849,12 @@ class C3FileViewerComponent {
         });
     }
     onMouseOver() {
-        this.fileViewer.hovered = true;
+        if (this.fileViewer)
+            this.fileViewer.hovered = true;
     }
     onMouseLeave() {
-        this.fileViewer.hovered = false;
+        if (this.fileViewer)
+            this.fileViewer.hovered = false;
     }
     ngOnChanges(changes) {
         if (changes['screenHeightOccupied'] && this.fileViewer)
@@ -1002,6 +1004,7 @@ class C3FileViewer {
         this.hovered = false;
         this._files = [];
         this.filesObjectUrl = [];
+        this.locationBlobMap = new Map();
         this.scale = 1;
         this.rotation = 0;
         this.translateX = 0;
@@ -1028,7 +1031,9 @@ class C3FileViewer {
     }
     createObjectURL(file) {
         this.onLoadStart(file);
-        return this.getFile(file.location).pipe(map((response) => URL.createObjectURL(response)), tap(() => this.onLoad(file)));
+        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(file)));
     }
     getFile(location) {
         const client = this.config.customClient || this.client;
@@ -1256,30 +1261,30 @@ class C3FileDisplayCardComponent {
         this.deletable = input(false);
         this.size = input('32');
         this.onDelete = output();
-    }
-    getFileType() {
-        const file = this.fileObjectUrl();
-        if (file && file.type) {
-            if (file.type.startsWith('image'))
-                return 'image';
-            if (file.type.startsWith('application'))
-                return 'application';
-            if (file.type.startsWith('video'))
-                return 'video';
-        }
-        return 'unknown';
-    }
-    getFileObjectUrl() {
-        const file = this.fileObjectUrl();
-        return file && file.objectUrl ? file.objectUrl : null;
-    }
-    getFileName() {
-        const file = this.fileObjectUrl();
-        return file ? this.displayFn()(file) : '';
-    }
-    getDisplayName() {
-        const file = this.fileObjectUrl();
-        return file ? this.displayFn()(file) : '';
+        this.getFileType = computed(() => {
+            const file = this.fileObjectUrl();
+            if (file && file.type) {
+                if (file.type.startsWith('image'))
+                    return 'image';
+                if (file.type.startsWith('application'))
+                    return 'application';
+                if (file.type.startsWith('video'))
+                    return 'video';
+            }
+            return 'unknown';
+        });
+        this.getFileObjectUrl = computed(() => {
+            const file = this.fileObjectUrl();
+            return file && file.objectUrl ? file.objectUrl : null;
+        });
+        this.getFileName = computed(() => {
+            const file = this.fileObjectUrl();
+            return file ? this.displayFn()(file) : '';
+        });
+        this.getDisplayName = computed(() => {
+            const file = this.fileObjectUrl();
+            return file ? this.displayFn()(file) : '';
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", 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"] }] }); }
@@ -1376,6 +1381,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
             args: [{ selector: 'c3-file-display-icon', standalone: true, imports: [CommonModule, MatIconModule], template: "<mat-icon [ngClass]=\"color()\">{{ displayedIcon() }}</mat-icon>\n", styles: [":host{display:block}:host .text-primary{color:var(--primary-color)}:host .text-secondary{color:var(--secondary-color)}:host .text-success{color:var(--success-color)}:host .text-gray{color:var(--gray-color)}\n"] }]
         }] });
 
+/**
+ * A directive that prevents the default action and stops event propagation on click events.
+ */
+class C3PreventClickDirective {
+    /**
+     * HostListener for the 'click' event.
+     * @param {MouseEvent} event - The MouseEvent object representing the click event.
+     */
+    onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3PreventClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: C3PreventClickDirective, isStandalone: true, selector: "[c3-prevent-click]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3PreventClickDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[c3-prevent-click]',
+                    standalone: true,
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/**
+ * A directive that prevents the default action and stops event propagation on specified keyboard events.
+ */
+class C3PreventKeyboardEventDirective {
+    constructor() {
+        /**
+         * The keyboard key to prevent the default action and stop event propagation for. Defaults to 'enter'.
+         */
+        this.key = 'enter';
+    }
+    /**
+     * HostListener for the 'keydown' event.
+     * @param {KeyboardEvent} event - The KeyboardEvent object representing the keydown event.
+     */
+    onKeyDown(event) {
+        // Check if the key pressed matches the input key.
+        if (event.key?.toLocaleLowerCase() === this.key.toLocaleLowerCase()) {
+            // Prevent the default action associated with the event.
+            event.preventDefault();
+            // Stop the event from bubbling up the event chain.
+            event.stopPropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3PreventKeyboardEventDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: C3PreventKeyboardEventDirective, isStandalone: true, selector: "[c3-prevent-keyboard-event]", inputs: { key: "key" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3PreventKeyboardEventDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[c3-prevent-keyboard-event]',
+                    standalone: true,
+                }]
+        }], propDecorators: { key: [{
+                type: Input
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class C3StopPropagationDirective {
+    onClick(event) {
+        event.stopImmediatePropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: C3StopPropagationDirective, isStandalone: true, selector: "[c3-stop-click-propagation]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3StopPropagationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[c3-stop-click-propagation]',
+                    standalone: true,
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 class C3FileDisplayListComponent {
     constructor() {
         this.files = input.required();
@@ -1405,11 +1493,12 @@ class C3FileDisplayListComponent {
         this.dialog()?.openDialog();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayListComponent, isStandalone: true, selector: "c3-file-display-list", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", 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: "<!-- header -->\n<div class=\"header\">\n  <div class=\"title full\">\n    <span>Nom</span>\n  </div>\n  <div class=\"title\">\n    <span>Date d'ajout</span>\n  </div>\n  <div class=\"icon\">\n    <mat-icon>more_vert</mat-icon>\n  </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"file-display-list\">\n    @for (file of files(); track $index) {\n    <button>\n      <div class=\"icon\">\n        <c3-file-display-icon [fileType]=\"file.type\" />\n      </div>\n      <div class=\"name\">\n        <span>{{ displayFn()(file) }}</span>\n      </div>\n      <div class=\"date-label\">\n        <span>{{\n          file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n        }}</span>\n      </div>\n      <button mat-icon-button>\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</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}:host .file-display-list{display:flex;flex-direction:column}:host .file-display-list>button{display:flex;flex-direction:row;height:3rem;align-items:center;border-bottom:1px solid var(--mat-divider-color);background-color:var(--mdc-protected-button-container-color);text-align:start;padding:0 .5rem}:host .file-display-list>button:hover{background-color:var(--background-hover)}:host .file-display-list>button .icon{flex-basis:56px;width:56px}:host .file-display-list>button .name{flex:auto;flex-basis:304px;width:304px}:host .file-display-list>button .date-label{flex-basis:304px;width:304px}\n"], dependencies: [{ 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: "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayListComponent, isStandalone: true, selector: "c3-file-display-list", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", 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: "<!-- header -->\n<div class=\"header\">\n  <div class=\"title full\">\n    <span>Nom</span>\n  </div>\n  <div class=\"title\">\n    <span>Date d'ajout</span>\n  </div>\n  <div class=\"actions\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"file-display-list\">\n    @for (file of files(); track $index) {\n    <button>\n      <div class=\"icon\">\n        <c3-file-display-icon [fileType]=\"file.type\" />\n      </div>\n      <div class=\"name\">\n        <span>{{ displayFn()(file) }}</span>\n      </div>\n      <div class=\"date-label\">\n        <span>{{\n          file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n        }}</span>\n      </div>\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</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}:host .file-display-list{display:flex;flex-direction:column}:host .file-display-list>button{display:flex;flex-direction:row;height:3rem;align-items:center;border-bottom:1px solid var(--mat-divider-color);background-color:var(--mdc-protected-button-container-color);text-align:start;padding:0 .5rem}:host .file-display-list>button:hover{background-color:var(--background-hover)}:host .file-display-list>button .icon{flex-basis:56px;width:56px}:host .file-display-list>button .name{flex:auto;flex-basis:304px;width:304px}:host .file-display-list>button .date-label{flex-basis:304px;width:304px}\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: "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: "18.2.1", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-file-display-list', standalone: true, imports: [
+                        C3StopPropagationDirective,
                         C3FileViewerModule,
                         C3FileDisplayIconComponent,
                         CommonModule,
@@ -1417,7 +1506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                         MatIconModule,
                         MatNativeDateModule,
                         MatMenuModule,
-                    ], template: "<!-- header -->\n<div class=\"header\">\n  <div class=\"title full\">\n    <span>Nom</span>\n  </div>\n  <div class=\"title\">\n    <span>Date d'ajout</span>\n  </div>\n  <div class=\"icon\">\n    <mat-icon>more_vert</mat-icon>\n  </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"file-display-list\">\n    @for (file of files(); track $index) {\n    <button>\n      <div class=\"icon\">\n        <c3-file-display-icon [fileType]=\"file.type\" />\n      </div>\n      <div class=\"name\">\n        <span>{{ displayFn()(file) }}</span>\n      </div>\n      <div class=\"date-label\">\n        <span>{{\n          file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n        }}</span>\n      </div>\n      <button mat-icon-button>\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</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}:host .file-display-list{display:flex;flex-direction:column}:host .file-display-list>button{display:flex;flex-direction:row;height:3rem;align-items:center;border-bottom:1px solid var(--mat-divider-color);background-color:var(--mdc-protected-button-container-color);text-align:start;padding:0 .5rem}:host .file-display-list>button:hover{background-color:var(--background-hover)}:host .file-display-list>button .icon{flex-basis:56px;width:56px}:host .file-display-list>button .name{flex:auto;flex-basis:304px;width:304px}:host .file-display-list>button .date-label{flex-basis:304px;width:304px}\n"] }]
+                    ], template: "<!-- header -->\n<div class=\"header\">\n  <div class=\"title full\">\n    <span>Nom</span>\n  </div>\n  <div class=\"title\">\n    <span>Date d'ajout</span>\n  </div>\n  <div class=\"actions\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"file-display-list\">\n    @for (file of files(); track $index) {\n    <button>\n      <div class=\"icon\">\n        <c3-file-display-icon [fileType]=\"file.type\" />\n      </div>\n      <div class=\"name\">\n        <span>{{ displayFn()(file) }}</span>\n      </div>\n      <div class=\"date-label\">\n        <span>{{\n          file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n        }}</span>\n      </div>\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</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}:host .file-display-list{display:flex;flex-direction:column}:host .file-display-list>button{display:flex;flex-direction:row;height:3rem;align-items:center;border-bottom:1px solid var(--mat-divider-color);background-color:var(--mdc-protected-button-container-color);text-align:start;padding:0 .5rem}:host .file-display-list>button:hover{background-color:var(--background-hover)}:host .file-display-list>button .icon{flex-basis:56px;width:56px}:host .file-display-list>button .name{flex:auto;flex-basis:304px;width:304px}:host .file-display-list>button .date-label{flex-basis:304px;width:304px}\n"] }]
         }], ctorParameters: () => [] });
 
 class C3FileDisplayerModule {
@@ -1859,5 +1948,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListComponent, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3FlowingMenuComponent, C3FlowingMenuItemComponent, C3FlowingMenuItemContentComponent, C3FlowingMenuModule, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, C3TraceCardAlignLeftDirective, C3TraceCardAlignRightDirective, C3TraceCardComponent, C3TraceCardContentComponent, C3TraceCardModule, C3TraceCardTitleComponent, C3TreeComponent, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal };
+export { C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListComponent, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3FlowingMenuComponent, C3FlowingMenuItemComponent, C3FlowingMenuItemContentComponent, C3FlowingMenuModule, C3PreventClickDirective, C3PreventKeyboardEventDirective, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, C3StopPropagationDirective, C3TraceCardAlignLeftDirective, C3TraceCardAlignRightDirective, C3TraceCardComponent, C3TraceCardContentComponent, C3TraceCardModule, C3TraceCardTitleComponent, C3TreeComponent, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal };
 //# sourceMappingURL=c3-components.mjs.map