c3-components 0.8.6 → 0.9.0

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';
@@ -53,8 +53,8 @@ class C3DropdownComponent {
     _markForCheck() {
         this._changeDetectorRef.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3DropdownComponent, selector: "c3-dropdown", inputs: { dropdownClass: "dropdownClass" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3DropdownComponent, isStandalone: false, selector: "c3-dropdown", inputs: { dropdownClass: "dropdownClass" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-template>
       <div class="c3-dropdown-panel" [ngClass]="dropdownClass">
         <ng-content></ng-content>
@@ -62,7 +62,7 @@ class C3DropdownComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DropdownComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'c3-dropdown',
@@ -73,6 +73,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
       </div>
     </ng-template>
   `,
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { template: [{
                 type: ViewChild,
@@ -177,15 +178,16 @@ class C3DropdownTrigger {
         const detachments = this.overlayRef.detachments();
         return merge(backdrop, detachments).pipe(takeUntil(this._destroyed));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownTrigger, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: C3DropdownTrigger, selector: "[c3Dropdown]", inputs: { dropdown: ["c3Dropdown", "dropdown"], dropdownDisabled: ["c3DropdownDisabled", "dropdownDisabled"], dropdownClass: ["c3DropdownClass", "dropdownClass"] }, host: { listeners: { "click": "onClick()" } }, providers: [MAT_DROPDOWN_VALUE_ACCESSOR], exportAs: ["c3DropdownTrigger"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DropdownTrigger, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: C3DropdownTrigger, isStandalone: false, selector: "[c3Dropdown]", inputs: { dropdown: ["c3Dropdown", "dropdown"], dropdownDisabled: ["c3DropdownDisabled", "dropdownDisabled"], dropdownClass: ["c3DropdownClass", "dropdownClass"] }, host: { listeners: { "click": "onClick()" } }, providers: [MAT_DROPDOWN_VALUE_ACCESSOR], exportAs: ["c3DropdownTrigger"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DropdownTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3Dropdown]',
                     exportAs: 'c3DropdownTrigger',
                     providers: [MAT_DROPDOWN_VALUE_ACCESSOR],
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { dropdown: [{
                 type: Input,
@@ -202,11 +204,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
             }] } });
 
 class C3DropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownModule, declarations: [C3DropdownComponent, C3DropdownTrigger], imports: [CommonModule, OverlayModule], exports: [C3DropdownComponent, C3DropdownTrigger] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownModule, imports: [CommonModule, OverlayModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: C3DropdownModule, declarations: [C3DropdownComponent, C3DropdownTrigger], imports: [CommonModule, OverlayModule], exports: [C3DropdownComponent, C3DropdownTrigger] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DropdownModule, imports: [CommonModule, OverlayModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
@@ -223,8 +225,8 @@ class ConfirmDialogComponent {
     onNoClick() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ConfirmDialogComponent, selector: "ConfirmDialogComponent", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ConfirmDialogComponent, isStandalone: false, selector: "ConfirmDialogComponent", ngImport: i0, template: `
     <mat-dialog-content>
       <div [innerHtml]="data.text"></div>
     </mat-dialog-content>
@@ -238,7 +240,7 @@ class ConfirmDialogComponent {
     </mat-dialog-actions>
   `, isInline: true, dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ConfirmDialogComponent',
@@ -255,6 +257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
       </button>
     </mat-dialog-actions>
   `,
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
@@ -271,8 +274,8 @@ class C3PromptDialogComponent {
     onNoClick() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3PromptDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3PromptDialogComponent, selector: "PrompDialogComponent", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3PromptDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3PromptDialogComponent, isStandalone: false, selector: "PrompDialogComponent", ngImport: i0, template: `
     <div mat-dialog-title>{{ data.text }}</div>
     <mat-dialog-content>
       <mat-form-field>
@@ -304,9 +307,9 @@ class C3PromptDialogComponent {
         {{ data.accept?.text }}
       </button>
     </mat-dialog-actions>
-  `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+  `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3PromptDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3PromptDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'PrompDialogComponent', template: `
     <div mat-dialog-title>{{ data.text }}</div>
@@ -340,7 +343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
         {{ data.accept?.text }}
       </button>
     </mat-dialog-actions>
-  `, styles: ["mat-form-field{width:100%}\n"] }]
+  `, standalone: false, styles: ["mat-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -378,52 +381,158 @@ class C3DialogEmbedChildComponent {
         }
         return component;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogEmbedChildComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3DialogEmbedChildComponent, selector: "C3DialogEmbedChildComponent", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `<mat-dialog-content>
-    <mat-toolbar
-      *ngIf="data.toolbar"
-      [color]="data.toolbar.color || 'default'"
-      class="py-1"
-    >
-      <span>{{ data.toolbar.title }}</span>
-      <span class="spacer"></span>
-      <button
-        *ngIf="data.toolbar.closeBtn"
-        mat-icon-button
-        mat-dialog-close
-        color="{{ data.toolbar.closeColor }}"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogEmbedChildComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: C3DialogEmbedChildComponent, isStandalone: false, selector: "C3DialogEmbedChildComponent", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `<div [class]="'dialog-content-container ' + (data.classContainer || '')">
+    @if(data.toolbar) {
+      <mat-toolbar
+        [color]="data.toolbar.color || 'default'"
+        class="py-1"
       >
-        <mat-icon>close</mat-icon>
-      </button>
-    </mat-toolbar>
-    <div class="dialog-content">
+        <span>{{ data.toolbar.title }}</span>
+        <span class="spacer"></span>
+        <button
+          *ngIf="data.toolbar.closeBtn"
+          mat-icon-button
+          mat-dialog-close
+          color="{{ data.toolbar.closeColor }}"
+        >
+          <mat-icon>close</mat-icon>
+        </button>
+      </mat-toolbar>
+    }
+    <div [class]="'dialog-content '+ (data.classContent || '')">
       <ng-template #target></ng-template>
     </div>
-  </mat-dialog-content>`, isInline: true, styles: ["mat-dialog-content{display:flex;flex-direction:column;height:100%}mat-dialog-content .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}mat-dialog-content .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}mat-dialog-content .mat-toolbar span{color:inherit}mat-dialog-content .spacer{flex:1 1 auto;min-width:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
+    @if(data.actions && data.actions.length > 0) {
+      <div [class]="'dialog-actions' + (data.classActions || '')">
+        @for(action of data.actions; track action.label) {
+          @switch (action.apperance) {
+            @case ('basic') {
+              <button
+                [class]="action.class"
+                (click)="action.action()"
+              >
+                {{ action.label }}
+              </button>
+            }
+            @case ('raised') {
+              <button
+                mat-raised-button
+                [class]="action.class"
+                (click)="action.action()"
+              >
+                {{ action.label }}
+              </button>
+            }
+            @case ('stroked') {
+              <button
+                mat-stroked-button
+                [class]="action.class"
+                (click)="action.action()"
+              >
+                {{ action.label }}
+              </button>
+            }
+            @case ('flat') {
+              <button
+                mat-flat-button
+                [class]="action.class"
+                (click)="action.action()"
+              >
+                {{ action.label }}
+              </button>
+            }
+            @default {
+              <button
+                mat-button
+                [class]="action.class"
+                (click)="action.action()"
+              >
+                {{ action.label }}
+              </button>
+            }
+          }
+        }
+      </div>
+    }
+  </div>`, isInline: true, styles: [".dialog-content-container{display:flex;flex-direction:column;height:100%;padding:1rem;overflow:auto}.dialog-content-container .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}.dialog-content-container .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}.dialog-content-container .mat-toolbar span{color:inherit}.dialog-content-container .spacer{flex:1 1 auto;min-width:16px}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogEmbedChildComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogEmbedChildComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'C3DialogEmbedChildComponent', template: `<mat-dialog-content>
-    <mat-toolbar
-      *ngIf="data.toolbar"
-      [color]="data.toolbar.color || 'default'"
-      class="py-1"
-    >
-      <span>{{ data.toolbar.title }}</span>
-      <span class="spacer"></span>
-      <button
-        *ngIf="data.toolbar.closeBtn"
-        mat-icon-button
-        mat-dialog-close
-        color="{{ data.toolbar.closeColor }}"
+            args: [{ selector: 'C3DialogEmbedChildComponent', template: `<div [class]="'dialog-content-container ' + (data.classContainer || '')">
+    @if(data.toolbar) {
+      <mat-toolbar
+        [color]="data.toolbar.color || 'default'"
+        class="py-1"
       >
-        <mat-icon>close</mat-icon>
-      </button>
-    </mat-toolbar>
-    <div class="dialog-content">
+        <span>{{ data.toolbar.title }}</span>
+        <span class="spacer"></span>
+        <button
+          *ngIf="data.toolbar.closeBtn"
+          mat-icon-button
+          mat-dialog-close
+          color="{{ data.toolbar.closeColor }}"
+        >
+          <mat-icon>close</mat-icon>
+        </button>
+      </mat-toolbar>
+    }
+    <div [class]="'dialog-content '+ (data.classContent || '')">
       <ng-template #target></ng-template>
     </div>
-  </mat-dialog-content>`, styles: ["mat-dialog-content{display:flex;flex-direction:column;height:100%}mat-dialog-content .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}mat-dialog-content .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}mat-dialog-content .mat-toolbar span{color:inherit}mat-dialog-content .spacer{flex:1 1 auto;min-width:16px}\n"] }]
+    @if(data.actions && data.actions.length > 0) {
+      <div [class]="'dialog-actions' + (data.classActions || '')">
+        @for(action of data.actions; track action.label) {
+          @switch (action.apperance) {
+            @case ('basic') {
+              <button
+                [class]="action.class"
+                (click)="action.action()"
+              >
+                {{ action.label }}
+              </button>
+            }
+            @case ('raised') {
+              <button
+                mat-raised-button
+                [class]="action.class"
+                (click)="action.action()"
+              >
+                {{ action.label }}
+              </button>
+            }
+            @case ('stroked') {
+              <button
+                mat-stroked-button
+                [class]="action.class"
+                (click)="action.action()"
+              >
+                {{ action.label }}
+              </button>
+            }
+            @case ('flat') {
+              <button
+                mat-flat-button
+                [class]="action.class"
+                (click)="action.action()"
+              >
+                {{ action.label }}
+              </button>
+            }
+            @default {
+              <button
+                mat-button
+                [class]="action.class"
+                (click)="action.action()"
+              >
+                {{ action.label }}
+              </button>
+            }
+          }
+        }
+      </div>
+    }
+  </div>`, standalone: false, styles: [".dialog-content-container{display:flex;flex-direction:column;height:100%;padding:1rem;overflow:auto}.dialog-content-container .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}.dialog-content-container .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}.dialog-content-container .mat-toolbar span{color:inherit}.dialog-content-container .spacer{flex:1 1 auto;min-width:16px}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -440,8 +549,8 @@ class C3AlertDialogComponent {
     onNoClick() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3AlertDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3AlertDialogComponent, selector: "AlertDialogComponent", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3AlertDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3AlertDialogComponent, isStandalone: false, selector: "AlertDialogComponent", ngImport: i0, template: `
     <mat-dialog-content>
       <div [innerHtml]="data.text"></div>
     </mat-dialog-content>
@@ -452,7 +561,7 @@ class C3AlertDialogComponent {
     </mat-dialog-actions>
   `, isInline: true, dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3AlertDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3AlertDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertDialogComponent',
@@ -466,6 +575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
       </button>
     </mat-dialog-actions>
   `,
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
@@ -554,7 +664,7 @@ class C3DialogService {
      * @param {C3CreateDialogFromComponentConfig<C>} config Configuration options for the dialog. See MatDialogConfig below.
      * @returns {MatDialogRef<C> & {component: ComponentRef<C> | undefined}} The dialog reference.
      */
-    createDialogFromComponent({ component, toolbar, data, ...config }) {
+    createDialogFromComponent({ component, toolbar, data, classContainer, classContent, classActions, actions, ...config }) {
         if (!component)
             throw new Error('No component provided');
         const dialog = this.#dialog.open((C3DialogEmbedChildComponent), {
@@ -563,6 +673,10 @@ class C3DialogService {
                 component,
                 toolbar,
                 inputs: data,
+                classActions,
+                classContainer,
+                classContent,
+                actions
             },
         });
         return this.createC3DialogResult(dialog);
@@ -611,10 +725,10 @@ class C3DialogService {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -622,8 +736,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
         }] });
 
 class C3DialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3DialogModule, declarations: [C3AlertDialogComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: C3DialogModule, declarations: [C3AlertDialogComponent,
             ConfirmDialogComponent,
             C3PromptDialogComponent,
             C3DialogEmbedChildComponent], imports: [CommonModule,
@@ -635,7 +749,7 @@ class C3DialogModule {
             MatInputModule,
             MatToolbarModule,
             ReactiveFormsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogModule, providers: [C3DialogService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogModule, providers: [C3DialogService], imports: [CommonModule,
             FormsModule,
             MatButtonModule,
             MatDialogModule,
@@ -645,7 +759,7 @@ class C3DialogModule {
             MatToolbarModule,
             ReactiveFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -716,13 +830,14 @@ class FullScreenDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FullScreenDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: FullScreenDirective, selector: "[C3FullScreen], [c3-full-screen]", inputs: { fullscreenState: ["c3Screenfull", "fullscreenState"], fullscreenStateSetter: ["c3-full-screen", "fullscreenStateSetter"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: FullScreenDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: FullScreenDirective, isStandalone: false, selector: "[C3FullScreen], [c3-full-screen]", inputs: { fullscreenState: ["c3Screenfull", "fullscreenState"], fullscreenStateSetter: ["c3-full-screen", "fullscreenStateSetter"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FullScreenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: FullScreenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[C3FullScreen], [c3-full-screen]',
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { fullscreenState: [{
                 type: Input,
@@ -736,12 +851,12 @@ class C3FileViewerActionsComponent {
     get config() {
         return this.fileViewer.config;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3FileViewerActionsComponent, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-viewer-actions', 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  <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" }]
         }], propDecorators: { fileViewer: [{
                 type: Input
             }] } });
@@ -753,10 +868,10 @@ class C3SafeUrlPipe {
     transform(url) {
         return url ? this.sanitizer.bypassSecurityTrustResourceUrl(url) : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3SafeUrlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3SafeUrlPipe, isStandalone: true, name: "c3SafeUrl" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3SafeUrlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: C3SafeUrlPipe, isStandalone: true, name: "c3SafeUrl" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3SafeUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3SafeUrlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c3SafeUrl',
@@ -768,12 +883,12 @@ class C3FileViewerImageComponent {
     constructor() {
         this.dragstart = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3FileViewerImageComponent, selector: "c3-file-viewer-image, [c3-file-viewer-image]", inputs: { fileViewer: "fileViewer" }, outputs: { dragstart: "dragstart" }, ngImport: i0, template: "<img\n  *ngIf=\"fileViewer.currentFile.objectUrl\"\n  [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n  [ngStyle]=\"fileViewer.style\"\n  alt=\"Image not found...\"\n  (dragstart)=\"dragstart.emit($event)\"\n/>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: C3SafeUrlPipe, name: "c3SafeUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3FileViewerImageComponent, isStandalone: false, selector: "c3-file-viewer-image, [c3-file-viewer-image]", inputs: { fileViewer: "fileViewer" }, outputs: { dragstart: "dragstart" }, ngImport: i0, template: "<img\n  *ngIf=\"fileViewer.currentFile.objectUrl\"\n  [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n  [ngStyle]=\"fileViewer.style\"\n  alt=\"Image not found...\"\n  (dragstart)=\"dragstart.emit($event)\"\n/>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: C3SafeUrlPipe, name: "c3SafeUrl" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-viewer-image, [c3-file-viewer-image]', template: "<img\n  *ngIf=\"fileViewer.currentFile.objectUrl\"\n  [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n  [ngStyle]=\"fileViewer.style\"\n  alt=\"Image not found...\"\n  (dragstart)=\"dragstart.emit($event)\"\n/>\n" }]
+            args: [{ selector: 'c3-file-viewer-image, [c3-file-viewer-image]', standalone: false, template: "<img\n  *ngIf=\"fileViewer.currentFile.objectUrl\"\n  [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n  [ngStyle]=\"fileViewer.style\"\n  alt=\"Image not found...\"\n  (dragstart)=\"dragstart.emit($event)\"\n/>\n" }]
         }], propDecorators: { fileViewer: [{
                 type: Input
             }], dragstart: [{
@@ -784,15 +899,15 @@ class C3FileViewerPdfComponent {
     constructor() {
         this.dragstart = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerPdfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3FileViewerPdfComponent, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerPdfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerPdfComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", 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',
-                    }, 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" }]
         }], propDecorators: { fileViewer: [{
                 type: Input
             }], dragstart: [{
@@ -815,12 +930,12 @@ class C3FileViewerVideoComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3FileViewerVideoComponent, selector: "c3-file-viewer-video", inputs: { _srcUpdated: ["file", "_srcUpdated"], fileViewer: "fileViewer" }, ngImport: i0, template: "<video controls [src]=\"src\" crossorigin=\"*\"></video>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", 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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerVideoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-viewer-video', template: "<video controls [src]=\"src\" crossorigin=\"*\"></video>\n" }]
+            args: [{ selector: 'c3-file-viewer-video', standalone: false, template: "<video controls [src]=\"src\" crossorigin=\"*\"></video>\n" }]
         }], ctorParameters: () => [], propDecorators: { _srcUpdated: [{
                 type: Input,
                 args: ['file']
@@ -849,10 +964,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)
@@ -868,14 +985,14 @@ class C3FileViewerComponent {
         this.fileViewer.styleHeight =
             'calc(100% - ' + this.screenHeightOccupied + 'px)';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", 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: "18.2.1", type: C3FileViewerComponent, 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=\"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", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", 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.0.4", 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=\"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", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-file-viewer', encapsulation: ViewEncapsulation.None, host: {
                         class: 'c3-file-viewer',
-                    }, template: "<div\n  class=\"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" }]
+                    }, standalone: false, template: "<div\n  class=\"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" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -963,17 +1080,24 @@ class C3FileViewer {
     get currentFile() {
         return this.filesObjectUrl[this.currentIndex];
     }
-    set files(value) {
-        this._files = value;
+    set files(newFiles) {
+        this._files = newFiles;
         this.currentIndex = 0;
         this.index$.next(this.currentIndex);
-        this.filesObjectUrl = value.map((file) => {
-            const objectUrl = file.objectUrl || this.createObjectURL(file);
-            return {
+        for (const file of newFiles) {
+            this.filesObjectUrl.push({
                 ...file,
-                objectUrl,
-            };
-        });
+                objectUrl: file.objectUrl || this.createObjectURL(file),
+            });
+            if (file.alternativeVersions)
+                for (const alternativeVersion of file.alternativeVersions) {
+                    this.filesObjectUrl.push({
+                        ...file,
+                        ...alternativeVersion,
+                        objectUrl: this.createObjectURL(alternativeVersion),
+                    });
+                }
+        }
     }
     get files() {
         return this._files;
@@ -1002,6 +1126,7 @@ class C3FileViewer {
         this.hovered = false;
         this._files = [];
         this.filesObjectUrl = [];
+        this.locationBlobMap = new Map();
         this.scale = 1;
         this.rotation = 0;
         this.translateX = 0;
@@ -1027,8 +1152,10 @@ class C3FileViewer {
         });
     }
     createObjectURL(file) {
-        this.onLoadStart(file);
-        return this.getFile(file.location).pipe(map((response) => URL.createObjectURL(response)), tap(() => this.onLoad(file)));
+        this.onLoadStart();
+        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()));
     }
     getFile(location) {
         const client = this.config.customClient || this.client;
@@ -1088,10 +1215,10 @@ class C3FileViewer {
         this.rotation -= 90;
         this.updateStyle();
     }
-    onLoad(file) {
+    onLoad() {
         this.loading = false;
     }
-    onLoadStart(file) {
+    onLoadStart() {
         this.loading = true;
     }
     imageNotFound(file) {
@@ -1159,17 +1286,18 @@ class C3FileViewerDialog {
     constructor(fileViewer) {
         this.fileViewer = fileViewer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerDialog, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3FileViewerDialog, selector: "ng-component", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerDialog, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3FileViewerDialog, isStandalone: false, selector: "ng-component", ngImport: i0, template: `
     <c3-file-viewer [fileViewer]="fileViewer" [screenHeightOccupied]="0" />
   `, isInline: true, dependencies: [{ kind: "component", type: C3FileViewerComponent, selector: "c3-file-viewer", inputs: ["screenHeightOccupied", "fileViewer"], outputs: ["indexChange", "configChange", "customFileEvent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerDialog, decorators: [{
             type: Component,
             args: [{
                     template: `
     <c3-file-viewer [fileViewer]="fileViewer" [screenHeightOccupied]="0" />
   `,
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: C3FileViewer, decorators: [{
                     type: Inject,
@@ -1191,10 +1319,10 @@ class C3FileViewerDialogComponent {
             ...this.dialogConfig,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerDialogComponent, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: { fileViewer: "fileViewer", dialogConfig: "dialogConfig" }, host: { listeners: { "click": "openDialog()" }, classAttribute: "c3-file-viewer-dialog" }, ngImport: i0, template: ` <ng-content /> `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerDialogComponent, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3FileViewerDialogComponent, isStandalone: false, selector: "c3-file-viewer-dialog", inputs: { fileViewer: "fileViewer", dialogConfig: "dialogConfig" }, host: { listeners: { "click": "openDialog()" }, classAttribute: "c3-file-viewer-dialog" }, ngImport: i0, template: ` <ng-content /> `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'c3-file-viewer-dialog',
@@ -1202,6 +1330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                     host: {
                         class: 'c3-file-viewer-dialog',
                     },
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i1$2.MatDialog }], propDecorators: { fileViewer: [{
                 type: Input
@@ -1213,8 +1342,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
             }] } });
 
 class C3FileViewerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerModule, declarations: [FullScreenDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerModule, declarations: [FullScreenDirective,
             C3FileViewerComponent,
             C3FileViewerActionsComponent,
             C3FileViewerImageComponent,
@@ -1224,9 +1353,9 @@ class C3FileViewerModule {
             C3FileViewerDialog], imports: [CommonModule, C3SafeUrlPipe, MatDialogModule], exports: [FullScreenDirective,
             C3FileViewerComponent,
             C3FileViewerDialogComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule, MatDialogModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule, MatDialogModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1256,37 +1385,37 @@ class C3FileDisplayCardComponent {
         this.deletable = input(false);
         this.size = input('32');
         this.onDelete = output();
+        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) : '';
+        });
     }
-    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) : '';
-    }
-    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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-display-card', standalone: true, 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 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 {
@@ -1318,12 +1447,12 @@ class C3FileDisplayGridComponent {
         this.fileViewer.currentIndex = index;
         this.dialog()?.openDialog();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-display-grid', standalone: true, 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    />\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 {
@@ -1368,14 +1497,97 @@ class C3FileDisplayIconComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.1", type: C3FileDisplayIconComponent, isStandalone: true, selector: "c3-file-display-icon", inputs: { fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: C3FileDisplayIconComponent, isStandalone: true, selector: "c3-file-display-icon", inputs: { fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "18.2.1", ngImport: i0, type: C3FileDisplayIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayIconComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ selector: 'c3-file-display-icon', 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: "19.0.4", ngImport: i0, type: C3PreventClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: C3PreventClickDirective, isStandalone: true, selector: "[c3-prevent-click]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", 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: "19.0.4", ngImport: i0, type: C3PreventKeyboardEventDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", 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: "19.0.4", 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: "19.0.4", ngImport: i0, type: C3StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: C3StopPropagationDirective, isStandalone: true, selector: "[c3-stop-click-propagation]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", 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();
@@ -1404,12 +1616,13 @@ class C3FileDisplayListComponent {
         this.fileViewer.currentIndex = index;
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-display-list', standalone: true, imports: [
+            args: [{ selector: 'c3-file-display-list', imports: [
+                        C3StopPropagationDirective,
                         C3FileViewerModule,
                         C3FileDisplayIconComponent,
                         CommonModule,
@@ -1417,12 +1630,12 @@ 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 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
             C3FileDisplayGridComponent,
             C3FileDisplayListComponent,
             C3FileDisplayCardComponent,
@@ -1430,13 +1643,13 @@ class C3FileDisplayerModule {
             C3FileDisplayListComponent,
             C3FileDisplayCardComponent,
             C3FileDisplayIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
             C3FileDisplayGridComponent,
             C3FileDisplayListComponent,
             C3FileDisplayCardComponent,
             C3FileDisplayIconComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FileDisplayerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -1465,12 +1678,12 @@ class C3ExpansionHeaderComponent {
     get hostClass() {
         return 'c3-expansion-header';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<ng-content>\n  @if(title()) {\n    <h4 class=\"text-lg\">\n      {{ title() }}\n    </h4>\n  }\n  <button\n    mat-icon-button\n    (click)=\"toggleExpand.emit()\"\n    [matTooltip]=\"isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n  >\n    <mat-icon>{{\n      isExpanded() ? \"expand_less\" : \"expand_more\"\n    }}</mat-icon>\n  </button>\n</ng-content>\n", dependencies: [{ kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3ExpansionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: C3ExpansionHeaderComponent, isStandalone: false, selector: "c3-expansion-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<ng-content>\n  @if(title()) {\n    <h4 class=\"text-lg\">\n      {{ title() }}\n    </h4>\n  }\n  <button\n    mat-icon-button\n    (click)=\"toggleExpand.emit()\"\n    [matTooltip]=\"isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n  >\n    <mat-icon>{{\n      isExpanded() ? \"expand_less\" : \"expand_more\"\n    }}</mat-icon>\n  </button>\n</ng-content>\n", dependencies: [{ kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3ExpansionHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-expansion-header', encapsulation: ViewEncapsulation.None, template: "<ng-content>\n  @if(title()) {\n    <h4 class=\"text-lg\">\n      {{ title() }}\n    </h4>\n  }\n  <button\n    mat-icon-button\n    (click)=\"toggleExpand.emit()\"\n    [matTooltip]=\"isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n  >\n    <mat-icon>{{\n      isExpanded() ? \"expand_less\" : \"expand_more\"\n    }}</mat-icon>\n  </button>\n</ng-content>\n" }]
+            args: [{ selector: 'c3-expansion-header', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content>\n  @if(title()) {\n    <h4 class=\"text-lg\">\n      {{ title() }}\n    </h4>\n  }\n  <button\n    mat-icon-button\n    (click)=\"toggleExpand.emit()\"\n    [matTooltip]=\"isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n  >\n    <mat-icon>{{\n      isExpanded() ? \"expand_less\" : \"expand_more\"\n    }}</mat-icon>\n  </button>\n</ng-content>\n" }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -1483,10 +1696,10 @@ class C3AutoAnimateDirective {
     ngAfterViewInit() {
         autoAnimate(this.el.nativeElement, this.options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3AutoAnimateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: C3AutoAnimateDirective, isStandalone: true, selector: "[c3AutoAnimate]", inputs: { options: "options" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3AutoAnimateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: C3AutoAnimateDirective, isStandalone: true, selector: "[c3AutoAnimate]", inputs: { options: "options" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3AutoAnimateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3AutoAnimateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3AutoAnimate]',
@@ -1516,39 +1729,39 @@ class C3ExpansionComponent {
     toggleExpand() {
         this.isExpanded.set(!this.isExpanded());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.1", type: C3ExpansionComponent, selector: "c3-expansion", inputs: { headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "header", first: true, predicate: C3ExpansionHeaderComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: C3AutoAnimateDirective, inputs: ["options", "options"] }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n  <ng-content select=\"c3-expansion-header\">\n    <c3-expansion-header />\n  </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: ["title", "isExpanded"], outputs: ["toggleExpand"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3ExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: C3ExpansionComponent, isStandalone: false, selector: "c3-expansion", inputs: { headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "header", first: true, predicate: C3ExpansionHeaderComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: C3AutoAnimateDirective, inputs: ["options", "options"] }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n  <ng-content select=\"c3-expansion-header\">\n    <c3-expansion-header />\n  </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: ["title", "isExpanded"], outputs: ["toggleExpand"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3ExpansionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-expansion', hostDirectives: [
                         {
                             directive: C3AutoAnimateDirective,
                             inputs: ['options'],
                         },
-                    ], template: "<div [class]=\"headerClass()\">\n  <ng-content select=\"c3-expansion-header\">\n    <c3-expansion-header />\n  </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n  <ng-content></ng-content>\n</div>\n" }]
+                    ], standalone: false, template: "<div [class]=\"headerClass()\">\n  <ng-content select=\"c3-expansion-header\">\n    <c3-expansion-header />\n  </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class C3ExpansionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionModule, declarations: [C3ExpansionComponent, C3ExpansionHeaderComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3ExpansionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: C3ExpansionModule, declarations: [C3ExpansionComponent, C3ExpansionHeaderComponent], imports: [CommonModule,
             C3AutoAnimateDirective,
             MatButtonModule,
             MatIconModule,
             MatTooltipModule,
             MatButtonModule,
             MatToolbarModule], exports: [C3ExpansionComponent, C3ExpansionHeaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3ExpansionModule, imports: [CommonModule,
             MatButtonModule,
             MatIconModule,
             MatTooltipModule,
             MatButtonModule,
             MatToolbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3ExpansionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [C3ExpansionComponent, C3ExpansionHeaderComponent],
@@ -1569,10 +1782,10 @@ class C3SelectOnFocusDirective {
     onFocus(target) {
         setTimeout(() => target.select());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3SelectOnFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: C3SelectOnFocusDirective, isStandalone: true, selector: "[c3SelectOnFocus]", host: { listeners: { "focus": "onFocus($event.target)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3SelectOnFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: C3SelectOnFocusDirective, isStandalone: true, selector: "[c3SelectOnFocus]", host: { listeners: { "focus": "onFocus($event.target)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3SelectOnFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3SelectOnFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3SelectOnFocus]',
@@ -1631,12 +1844,12 @@ class C3TreeComponent {
             this.dataSource.data = this.treeData();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3TreeComponent, isStandalone: true, selector: "c3-tree", inputs: { treeData: { classPropertyName: "treeData", publicName: "treeData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeData: "treeDataChange", isLoading: "isLoadingChange", treeDataSelected: "treeDataSelected" }, ngImport: i0, template: "@if(isLoading()) {\r\n<div class=\"c3-tree-loader\">\r\n  <mat-spinner diameter=\"50\"></mat-spinner>\r\n</div>\r\n}\r\n\r\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n  <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding class=\"children\">\r\n    <button mat-ripple (click)=\"treeDataSelected.emit(node)\">\r\n      {{ node.name }}\r\n    </button>\r\n  </mat-tree-node>\r\n  <mat-tree-node\r\n    *matTreeNodeDef=\"let node; when: hasChild\"\r\n    matTreeNodePadding\r\n    class=\"has-children\"\r\n  >\r\n    <button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n      <mat-icon class=\"mat-icon-rtl-mirror\">\r\n        {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n      </mat-icon>\r\n    </button>\r\n    <div class=\"mat-tree-node-content\">\r\n      <ng-content>\r\n        <span>{{ node.name }}</span>\r\n      </ng-content>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n", styles: [":host{display:block;width:100%;position:relative;min-height:100%;padding:4px 0}.c3-tree-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}mat-tree{width:100%;height:100%;background-color:transparent;border:1px solid var(--mat-divider-color);border-radius:4px;overflow:auto}mat-tree mat-tree-node{display:flex;align-items:center;justify-content:start;gap:1rem}mat-tree mat-tree-node.has-children>button{height:32px;width:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:1px solid transparent;margin:.5rem}mat-tree mat-tree-node.has-children>button:hover{border-color:var(--mat-divider-color)}mat-tree mat-tree-node.has-children:hover{background-color:var(--background-hover)}mat-tree mat-tree-node.has-children .mat-tree-node-content{padding-right:.25rem;display:flex;justify-content:space-between;align-items:center;width:100%}mat-tree mat-tree-node.children button{width:100%;border-radius:.25rem;padding:0 1rem;height:2rem;text-align:left}mat-tree mat-tree-node.children button:hover{background-color:var(--background-hover)}mat-tree mat-tree-node:hover{background-color:var(--background-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$5.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$5.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$5.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$5.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$5.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: C3TreeComponent, isStandalone: true, selector: "c3-tree", inputs: { treeData: { classPropertyName: "treeData", publicName: "treeData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeData: "treeDataChange", isLoading: "isLoadingChange", treeDataSelected: "treeDataSelected" }, ngImport: i0, template: "@if(isLoading()) {\r\n<div class=\"c3-tree-loader\">\r\n  <mat-spinner diameter=\"50\"></mat-spinner>\r\n</div>\r\n}\r\n\r\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n  <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding class=\"children\">\r\n    <button mat-ripple (click)=\"treeDataSelected.emit(node)\">\r\n      {{ node.name }}\r\n    </button>\r\n  </mat-tree-node>\r\n  <mat-tree-node\r\n    *matTreeNodeDef=\"let node; when: hasChild\"\r\n    matTreeNodePadding\r\n    class=\"has-children\"\r\n  >\r\n    <button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n      <mat-icon class=\"mat-icon-rtl-mirror\">\r\n        {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n      </mat-icon>\r\n    </button>\r\n    <div class=\"mat-tree-node-content\">\r\n      <ng-content>\r\n        <span>{{ node.name }}</span>\r\n      </ng-content>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n", styles: [":host{display:block;width:100%;position:relative;min-height:100%;padding:4px 0}.c3-tree-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}mat-tree{width:100%;height:100%;background-color:transparent;border:1px solid var(--mat-divider-color);border-radius:4px;overflow:auto}mat-tree mat-tree-node{display:flex;align-items:center;justify-content:start;gap:1rem}mat-tree mat-tree-node.has-children>button{height:32px;width:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:1px solid transparent;margin:.5rem}mat-tree mat-tree-node.has-children>button:hover{border-color:var(--mat-divider-color)}mat-tree mat-tree-node.has-children:hover{background-color:var(--background-hover)}mat-tree mat-tree-node.has-children .mat-tree-node-content{padding-right:.25rem;display:flex;justify-content:space-between;align-items:center;width:100%}mat-tree mat-tree-node.children button{width:100%;border-radius:.25rem;padding:0 1rem;height:2rem;text-align:left}mat-tree mat-tree-node.children button:hover{background-color:var(--background-hover)}mat-tree mat-tree-node:hover{background-color:var(--background-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$5.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$5.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$5.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$5.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$5.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-tree', standalone: true, imports: [
+            args: [{ selector: 'c3-tree', imports: [
                         CommonModule,
                         MatTreeModule,
                         MatIconModule,
@@ -1655,12 +1868,12 @@ class C3FlowingMenuItemComponent {
         });
         this.active = signal(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.1", type: C3FlowingMenuItemComponent, selector: "c3-flowing-menu-item", viewQueries: [{ propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #menuTpl>\n  <ng-content select=\"[menu-title]\"></ng-content>\n</ng-template>\n<ng-template #contentTpl>\n  <ng-content select=\"c3-flowing-menu-item-content\"></ng-content>\n</ng-template>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FlowingMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: C3FlowingMenuItemComponent, isStandalone: false, selector: "c3-flowing-menu-item", viewQueries: [{ propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #menuTpl>\n  <ng-content select=\"[menu-title]\"></ng-content>\n</ng-template>\n<ng-template #contentTpl>\n  <ng-content select=\"c3-flowing-menu-item-content\"></ng-content>\n</ng-template>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FlowingMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-flowing-menu-item', template: "<ng-template #menuTpl>\n  <ng-content select=\"[menu-title]\"></ng-content>\n</ng-template>\n<ng-template #contentTpl>\n  <ng-content select=\"c3-flowing-menu-item-content\"></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'c3-flowing-menu-item', standalone: false, template: "<ng-template #menuTpl>\n  <ng-content select=\"[menu-title]\"></ng-content>\n</ng-template>\n<ng-template #contentTpl>\n  <ng-content select=\"c3-flowing-menu-item-content\"></ng-content>\n</ng-template>\n" }]
         }] });
 
 class C3FlowingMenuComponent {
@@ -1689,36 +1902,36 @@ class C3FlowingMenuComponent {
             this.targetContentRef().createEmbeddedView(selectedMenu.contentTpl());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FlowingMenuComponent, selector: "c3-flowing-menu", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, host: { attributes: { "ngSkipHydration": "true" }, classAttribute: "c3-flowing-menu" }, queries: [{ propertyName: "c3FlowingMenu", predicate: C3FlowingMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "targetContentRef", first: true, predicate: ["targetContent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<aside class=\"menu\">\n  @for(menu of c3FlowingMenu(); track menu; let i = $index) {\n    @if(menu.menuTpl()) {\n      <button (click)=\"selectMenu(i)\" [class.active]=\"i === selectedIndex()\">\n        <ng-container *ngTemplateOutlet=\"menu.menuTpl()!\"></ng-container>\n      </button>\n    }\n  }\n</aside>\n\n<section class=\"contenu\">\n  <ng-container #targetContent></ng-container>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FlowingMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: C3FlowingMenuComponent, isStandalone: false, selector: "c3-flowing-menu", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, host: { attributes: { "ngSkipHydration": "true" }, classAttribute: "c3-flowing-menu" }, queries: [{ propertyName: "c3FlowingMenu", predicate: C3FlowingMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "targetContentRef", first: true, predicate: ["targetContent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<aside class=\"menu\">\n  @for(menu of c3FlowingMenu(); track menu; let i = $index) {\n    @if(menu.menuTpl()) {\n      <button (click)=\"selectMenu(i)\" [class.active]=\"i === selectedIndex()\">\n        <ng-container *ngTemplateOutlet=\"menu.menuTpl()!\"></ng-container>\n      </button>\n    }\n  }\n</aside>\n\n<section class=\"contenu\">\n  <ng-container #targetContent></ng-container>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FlowingMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-flowing-menu', encapsulation: ViewEncapsulation.None, host: {
                         class: 'c3-flowing-menu',
                         ngSkipHydration: 'true',
-                    }, template: "<aside class=\"menu\">\n  @for(menu of c3FlowingMenu(); track menu; let i = $index) {\n    @if(menu.menuTpl()) {\n      <button (click)=\"selectMenu(i)\" [class.active]=\"i === selectedIndex()\">\n        <ng-container *ngTemplateOutlet=\"menu.menuTpl()!\"></ng-container>\n      </button>\n    }\n  }\n</aside>\n\n<section class=\"contenu\">\n  <ng-container #targetContent></ng-container>\n</section>\n" }]
+                    }, standalone: false, template: "<aside class=\"menu\">\n  @for(menu of c3FlowingMenu(); track menu; let i = $index) {\n    @if(menu.menuTpl()) {\n      <button (click)=\"selectMenu(i)\" [class.active]=\"i === selectedIndex()\">\n        <ng-container *ngTemplateOutlet=\"menu.menuTpl()!\"></ng-container>\n      </button>\n    }\n  }\n</aside>\n\n<section class=\"contenu\">\n  <ng-container #targetContent></ng-container>\n</section>\n" }]
         }], ctorParameters: () => [] });
 
 class C3FlowingMenuItemContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3FlowingMenuItemContentComponent, selector: "c3-flowing-menu-item-content", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FlowingMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3FlowingMenuItemContentComponent, isStandalone: false, selector: "c3-flowing-menu-item-content", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuItemContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FlowingMenuItemContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-flowing-menu-item-content', template: "<ng-content></ng-content>\n" }]
+            args: [{ selector: 'c3-flowing-menu-item-content', standalone: false, template: "<ng-content></ng-content>\n" }]
         }] });
 
 class C3FlowingMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuModule, declarations: [C3FlowingMenuComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FlowingMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: C3FlowingMenuModule, declarations: [C3FlowingMenuComponent,
             C3FlowingMenuItemComponent,
             C3FlowingMenuItemContentComponent], imports: [CommonModule], exports: [C3FlowingMenuComponent,
             C3FlowingMenuItemComponent,
             C3FlowingMenuItemContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FlowingMenuModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3FlowingMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1745,14 +1958,14 @@ class C3TraceCardComponent {
     get alignRight() {
         return this.align() === 'right';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3TraceCardComponent, selector: "c3-trace-card", host: { properties: { "class.align-left": "this.alignLeft", "class.align-right": "this.alignRight" }, classAttribute: "c3-trace-card" }, ngImport: i0, template: "<div class=\"content\">\n  <div class=\"horizontal-line\"></div>\n  <ng-content select=\"c3-trace-card-content\"></ng-content>\n</div>\n\n<ng-content select=\"c3-trace-card-title\"></ng-content>\n\n", styles: [".c3-trace-card{--c3-trace-card-border-color: rgba(0, 0, 0, .12);display:flex;flex-direction:row;justify-content:space-between;align-items:start;font-size:14px}.c3-trace-card.align-right{flex-direction:row-reverse}.c3-trace-card c3-trace-card-title{padding:.5rem 1rem;font-size:1.5rem;line-height:2rem;border:var(--c3-trace-card-border-color) solid 1px;border-radius:1rem;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.c3-trace-card .content{display:flex;flex-direction:column;flex-grow:1}.c3-trace-card .content .horizontal-line{margin-top:25px;height:1px;background-color:var(--c3-trace-card-border-color)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3TraceCardComponent, isStandalone: false, selector: "c3-trace-card", host: { properties: { "class.align-left": "this.alignLeft", "class.align-right": "this.alignRight" }, classAttribute: "c3-trace-card" }, ngImport: i0, template: "<div class=\"content\">\n  <div class=\"horizontal-line\"></div>\n  <ng-content select=\"c3-trace-card-content\"></ng-content>\n</div>\n\n<ng-content select=\"c3-trace-card-title\"></ng-content>\n\n", styles: [".c3-trace-card{--c3-trace-card-border-color: rgba(0, 0, 0, .12);display:flex;flex-direction:row;justify-content:space-between;align-items:start;font-size:14px}.c3-trace-card.align-right{flex-direction:row-reverse}.c3-trace-card c3-trace-card-title{padding:.5rem 1rem;font-size:1.5rem;line-height:2rem;border:var(--c3-trace-card-border-color) solid 1px;border-radius:1rem;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.c3-trace-card .content{display:flex;flex-direction:column;flex-grow:1}.c3-trace-card .content .horizontal-line{margin-top:25px;height:1px;background-color:var(--c3-trace-card-border-color)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-trace-card', encapsulation: ViewEncapsulation.None, host: {
                         class: 'c3-trace-card',
-                    }, template: "<div class=\"content\">\n  <div class=\"horizontal-line\"></div>\n  <ng-content select=\"c3-trace-card-content\"></ng-content>\n</div>\n\n<ng-content select=\"c3-trace-card-title\"></ng-content>\n\n", styles: [".c3-trace-card{--c3-trace-card-border-color: rgba(0, 0, 0, .12);display:flex;flex-direction:row;justify-content:space-between;align-items:start;font-size:14px}.c3-trace-card.align-right{flex-direction:row-reverse}.c3-trace-card c3-trace-card-title{padding:.5rem 1rem;font-size:1.5rem;line-height:2rem;border:var(--c3-trace-card-border-color) solid 1px;border-radius:1rem;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.c3-trace-card .content{display:flex;flex-direction:column;flex-grow:1}.c3-trace-card .content .horizontal-line{margin-top:25px;height:1px;background-color:var(--c3-trace-card-border-color)}\n"] }]
+                    }, standalone: false, template: "<div class=\"content\">\n  <div class=\"horizontal-line\"></div>\n  <ng-content select=\"c3-trace-card-content\"></ng-content>\n</div>\n\n<ng-content select=\"c3-trace-card-title\"></ng-content>\n\n", styles: [".c3-trace-card{--c3-trace-card-border-color: rgba(0, 0, 0, .12);display:flex;flex-direction:row;justify-content:space-between;align-items:start;font-size:14px}.c3-trace-card.align-right{flex-direction:row-reverse}.c3-trace-card c3-trace-card-title{padding:.5rem 1rem;font-size:1.5rem;line-height:2rem;border:var(--c3-trace-card-border-color) solid 1px;border-radius:1rem;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.c3-trace-card .content{display:flex;flex-direction:column;flex-grow:1}.c3-trace-card .content .horizontal-line{margin-top:25px;height:1px;background-color:var(--c3-trace-card-border-color)}\n"] }]
         }], propDecorators: { alignLeft: [{
                 type: HostBinding,
                 args: ['class.align-left']
@@ -1762,21 +1975,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
             }] } });
 
 class C3TraceCardTitleComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3TraceCardTitleComponent, selector: "c3-trace-card-title", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3TraceCardTitleComponent, isStandalone: false, selector: "c3-trace-card-title", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-trace-card-title', template: "<ng-content></ng-content>\n" }]
+            args: [{ selector: 'c3-trace-card-title', standalone: false, template: "<ng-content></ng-content>\n" }]
         }] });
 
 class C3TraceCardContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3TraceCardContentComponent, selector: "c3-trace-card-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3TraceCardContentComponent, isStandalone: false, selector: "c3-trace-card-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-trace-card-content', template: "<ng-content></ng-content>\n" }]
+            args: [{ selector: 'c3-trace-card-content', standalone: false, template: "<ng-content></ng-content>\n" }]
         }] });
 
 class C3TraceCardAlignLeftDirective {
@@ -1786,10 +1999,10 @@ class C3TraceCardAlignLeftDirective {
         });
         this.c3CardTitle.align.set('left');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardAlignLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: C3TraceCardAlignLeftDirective, isStandalone: true, selector: "c3-trace-card[align-left]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardAlignLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: C3TraceCardAlignLeftDirective, isStandalone: true, selector: "c3-trace-card[align-left]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardAlignLeftDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardAlignLeftDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'c3-trace-card[align-left]',
@@ -1804,10 +2017,10 @@ class C3TraceCardAlignRightDirective {
         });
         this.c3CardTitle.align.set('right');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardAlignRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: C3TraceCardAlignRightDirective, isStandalone: true, selector: "c3-trace-card[align-right]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardAlignRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: C3TraceCardAlignRightDirective, isStandalone: true, selector: "c3-trace-card[align-right]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardAlignRightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardAlignRightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'c3-trace-card[align-right]',
@@ -1816,8 +2029,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
         }], ctorParameters: () => [] });
 
 class C3TraceCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardModule, declarations: [C3TraceCardComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardModule, declarations: [C3TraceCardComponent,
             C3TraceCardTitleComponent,
             C3TraceCardContentComponent], imports: [CommonModule,
             C3TraceCardAlignLeftDirective,
@@ -1826,9 +2039,9 @@ class C3TraceCardModule {
             C3TraceCardContentComponent,
             C3TraceCardAlignLeftDirective,
             C3TraceCardAlignRightDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TraceCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3TraceCardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1859,5 +2072,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