c3-components 0.14.1 → 0.15.0

package/fesm2022/c3-components.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, signal, viewChild, TemplateRef, inject, ChangeDetectorRef, effect, Component, forwardRef, model, HostListener, Directive, NgModule, Inject, ViewContainerRef, ViewChild, Injector, Injectable, Input, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, output, computed, InjectionToken, contentChild, contentChildren, HostBinding, ElementRef, DestroyRef } from '@angular/core';
+import { input, signal, viewChild, TemplateRef, inject, ChangeDetectorRef, effect, Component, forwardRef, model, HostListener, Directive, NgModule, Inject, Injector, Injectable, Pipe, output, ViewEncapsulation, Optional, computed, InjectionToken, contentChild, contentChildren, ViewContainerRef, HostBinding, ElementRef, DestroyRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
@@ -10,29 +10,29 @@ import { TemplatePortal } from '@angular/cdk/portal';
 import { Subscription, Subject, merge, takeUntil, BehaviorSubject, filter, skip, debounceTime, of, mergeMap, map, tap, startWith } from 'rxjs';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
-import * as i2 from '@angular/material/button';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/material/form-field';
+import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i6 from '@angular/material/input';
+import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i7 from '@angular/cdk/text-field';
-import * as i2$2 from '@angular/material/icon';
+import * as i6 from '@angular/cdk/text-field';
+import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i1$4 from '@angular/common/http';
 import { provideHttpClient, withInterceptorsFromDi, HttpClient } from '@angular/common/http';
 import * as i1$3 from '@angular/platform-browser';
-import * as i3$1 from '@angular/material/core';
+import * as i3$2 from '@angular/material/core';
 import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
 import * as i5$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i3 from '@angular/material/tooltip';
+import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import autoAnimate from '@formkit/auto-animate';
 import { FlatTreeControl } from '@angular/cdk/tree';
-import * as i4 from '@angular/material/progress-spinner';
+import * as i4$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i1$5 from '@angular/material/tree';
 import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
@@ -42,8 +42,8 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class C3DropdownComponent {
     constructor() {
-        this.panelClass = input();
-        this.isOpen = signal(false);
+        this.panelClass = input(...(ngDevMode ? [undefined, { debugName: "panelClass" }] : []));
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.template = viewChild.required((TemplateRef));
         this._changeDetectorRef = inject(ChangeDetectorRef);
         effect(() => {
@@ -52,8 +52,8 @@ class C3DropdownComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: C3DropdownComponent, isStandalone: false, selector: "c3-dropdown", inputs: { panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: C3DropdownComponent, isStandalone: false, selector: "c3-dropdown", inputs: { panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template>
       <div class="c3-dropdown-panel" [ngClass]="panelClass()">
         <ng-content></ng-content>
@@ -61,7 +61,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: "19.2.7", ngImport: i0, type: C3DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DropdownComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'c3-dropdown',
@@ -74,7 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
   `,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 const MAT_DROPDOWN_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -99,13 +99,13 @@ class C3DropdownTrigger {
         this._closingActionsSubscription = Subscription.EMPTY;
         this._destroyed = new Subject();
         /** The dropdown menu instance */
-        this.dropdown = model.required({
-            alias: 'c3DropdownTrigger',
-        });
+        this.dropdown = model.required(...(ngDevMode ? [{ debugName: "dropdown", alias: 'c3DropdownTrigger' }] : [{
+                alias: 'c3DropdownTrigger',
+            }]));
         /** Whether the dropdown is disabled. */
-        this.dropdownDisabled = input(false);
+        this.dropdownDisabled = input(false, ...(ngDevMode ? [{ debugName: "dropdownDisabled" }] : []));
         /** Classes to be passed to the dropdown menu. Supports the same syntax as `ngClass`. */
-        this.dropdownClass = input('');
+        this.dropdownClass = input('', ...(ngDevMode ? [{ debugName: "dropdownClass" }] : []));
     }
     onClick() {
         this.show();
@@ -165,27 +165,27 @@ 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: "19.2.7", 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: "17.1.0", version: "19.2.7", type: C3DropdownTrigger, isStandalone: false, selector: "[c3DropdownTrigger]", inputs: { dropdown: { classPropertyName: "dropdown", publicName: "c3DropdownTrigger", isSignal: true, isRequired: true, transformFunction: null }, dropdownDisabled: { classPropertyName: "dropdownDisabled", publicName: "dropdownDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownClass: { classPropertyName: "dropdownClass", publicName: "dropdownClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdown: "c3DropdownTriggerChange" }, host: { listeners: { "click": "onClick()" } }, providers: [MAT_DROPDOWN_VALUE_ACCESSOR], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", 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: "17.1.0", version: "20.3.14", type: C3DropdownTrigger, isStandalone: false, selector: "[c3DropdownTrigger]", inputs: { dropdown: { classPropertyName: "dropdown", publicName: "c3DropdownTrigger", isSignal: true, isRequired: true, transformFunction: null }, dropdownDisabled: { classPropertyName: "dropdownDisabled", publicName: "dropdownDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownClass: { classPropertyName: "dropdownClass", publicName: "dropdownClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdown: "c3DropdownTriggerChange" }, host: { listeners: { "click": "onClick()" } }, providers: [MAT_DROPDOWN_VALUE_ACCESSOR], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DropdownTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DropdownTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3DropdownTrigger]',
                     providers: [MAT_DROPDOWN_VALUE_ACCESSOR],
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { onClick: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "c3DropdownTrigger", required: true }] }, { type: i0.Output, args: ["c3DropdownTriggerChange"] }], dropdownDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDisabled", required: false }] }], dropdownClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownClass", required: false }] }], onClick: [{
                 type: HostListener,
                 args: ['click']
             }] } });
 
 class C3DropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: C3DropdownModule, declarations: [C3DropdownComponent, C3DropdownTrigger], imports: [CommonModule, OverlayModule], exports: [C3DropdownComponent, C3DropdownTrigger] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DropdownModule, imports: [CommonModule, OverlayModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: C3DropdownModule, declarations: [C3DropdownComponent, C3DropdownTrigger], imports: [CommonModule, OverlayModule], exports: [C3DropdownComponent, C3DropdownTrigger] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DropdownModule, imports: [CommonModule, OverlayModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule],
@@ -202,8 +202,8 @@ class C3AlertDialogComponent {
     onNoClick() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", 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.2.7", type: C3AlertDialogComponent, isStandalone: false, selector: "AlertDialogComponent", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", 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: "20.3.14", type: C3AlertDialogComponent, isStandalone: false, selector: "AlertDialogComponent", ngImport: i0, template: `
     <mat-dialog-content>
       <div [innerHtml]="data.text"></div>
     </mat-dialog-content>
@@ -212,9 +212,9 @@ class C3AlertDialogComponent {
         {{ data.acceptText || 'ok' }}
       </button>
     </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]" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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: "19.2.7", ngImport: i0, type: C3AlertDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3AlertDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertDialogComponent',
@@ -243,8 +243,8 @@ class ConfirmDialogComponent {
     onNoClick() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", 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.2.7", type: ConfirmDialogComponent, isStandalone: false, selector: "ConfirmDialogComponent", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", 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: "20.3.14", type: ConfirmDialogComponent, isStandalone: false, selector: "ConfirmDialogComponent", ngImport: i0, template: `
     <mat-dialog-content>
       <div [innerHtml]="data.text"></div>
     </mat-dialog-content>
@@ -256,9 +256,9 @@ class ConfirmDialogComponent {
         {{ data.accept?.text }}
       </button>
     </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]" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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: "19.2.7", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ConfirmDialogComponent',
@@ -292,93 +292,102 @@ class C3PromptDialogComponent {
     onNoClick() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", 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.2.7", type: C3PromptDialogComponent, isStandalone: false, selector: "PrompDialogComponent", ngImport: i0, template: `
-    <div mat-dialog-title>{{ data.text }}</div>
-    <mat-dialog-content>
-      <mat-form-field>
-        <mat-label *ngIf="data.placeholder">{{ data.placeholder }}</mat-label>
-        <input
-          *ngIf="!data.multiline"
-          matInput
-          [formControl]="result"
-          (keydown.enter)="dialogRef.close(result.value)"
-        />
-        <textarea
-          *ngIf="data.multiline"
-          matInput
-          [formControl]="result"
-          cdkTextareaAutosize
-        ></textarea>
-      </mat-form-field>
-    </mat-dialog-content>
-    <mat-dialog-actions align="center">
-      <button mat-raised-button mat-dialog-close [class]="data.reject?.color">
-        {{ data.reject?.text }}
-      </button>
-      <button
-        mat-raised-button
-        [disabled]="result.invalid || (data.required && !result.value)"
-        [class]="data.accept?.color"
-        [mat-dialog-close]="result.value"
-      >
-        {{ 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", "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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3PromptDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: C3PromptDialogComponent, isStandalone: false, selector: "PrompDialogComponent", ngImport: i0, template: `
+    <div mat-dialog-title>{{ data.text }}</div>
+    <mat-dialog-content>
+      <mat-form-field>
+        @if (data.placeholder) {
+          <mat-label>{{ data.placeholder }}</mat-label>
+        }
+        @if (!data.multiline) {
+          <input
+            matInput
+            [formControl]="result"
+            (keydown.enter)="dialogRef.close(result.value)"
+            />
+        }
+        @if (data.multiline) {
+          <textarea
+            matInput
+            [formControl]="result"
+            cdkTextareaAutosize
+          ></textarea>
+        }
+      </mat-form-field>
+    </mat-dialog-content>
+    <mat-dialog-actions align="center">
+      <button mat-raised-button mat-dialog-close [class]="data.reject?.color">
+        {{ data.reject?.text }}
+      </button>
+      <button
+        mat-raised-button
+        [disabled]="result.invalid || (data.required && !result.value)"
+        [class]="data.accept?.color"
+        [mat-dialog-close]="result.value"
+        >
+        {{ data.accept?.text }}
+      </button>
+    </mat-dialog-actions>
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.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: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3PromptDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3PromptDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'PrompDialogComponent', template: `
-    <div mat-dialog-title>{{ data.text }}</div>
-    <mat-dialog-content>
-      <mat-form-field>
-        <mat-label *ngIf="data.placeholder">{{ data.placeholder }}</mat-label>
-        <input
-          *ngIf="!data.multiline"
-          matInput
-          [formControl]="result"
-          (keydown.enter)="dialogRef.close(result.value)"
-        />
-        <textarea
-          *ngIf="data.multiline"
-          matInput
-          [formControl]="result"
-          cdkTextareaAutosize
-        ></textarea>
-      </mat-form-field>
-    </mat-dialog-content>
-    <mat-dialog-actions align="center">
-      <button mat-raised-button mat-dialog-close [class]="data.reject?.color">
-        {{ data.reject?.text }}
-      </button>
-      <button
-        mat-raised-button
-        [disabled]="result.invalid || (data.required && !result.value)"
-        [class]="data.accept?.color"
-        [mat-dialog-close]="result.value"
-      >
-        {{ data.accept?.text }}
-      </button>
-    </mat-dialog-actions>
-  `, standalone: false, styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'PrompDialogComponent', template: `
+    <div mat-dialog-title>{{ data.text }}</div>
+    <mat-dialog-content>
+      <mat-form-field>
+        @if (data.placeholder) {
+          <mat-label>{{ data.placeholder }}</mat-label>
+        }
+        @if (!data.multiline) {
+          <input
+            matInput
+            [formControl]="result"
+            (keydown.enter)="dialogRef.close(result.value)"
+            />
+        }
+        @if (data.multiline) {
+          <textarea
+            matInput
+            [formControl]="result"
+            cdkTextareaAutosize
+          ></textarea>
+        }
+      </mat-form-field>
+    </mat-dialog-content>
+    <mat-dialog-actions align="center">
+      <button mat-raised-button mat-dialog-close [class]="data.reject?.color">
+        {{ data.reject?.text }}
+      </button>
+      <button
+        mat-raised-button
+        [disabled]="result.invalid || (data.required && !result.value)"
+        [class]="data.accept?.color"
+        [mat-dialog-close]="result.value"
+        >
+        {{ data.accept?.text }}
+      </button>
+    </mat-dialog-actions>
+    `, standalone: false, styles: ["mat-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i2$1.FormBuilder }] });
+                }] }, { type: i2.FormBuilder }] });
 
 class C3DialogEmbedChildComponent {
     constructor(dialogRef, data, _cdr) {
         this.dialogRef = dialogRef;
         this.data = data;
         this._cdr = _cdr;
+        this.target = viewChild.required('target');
         // On utilise un signal pour stocker la référence du composant créé
-        this.createdComponent = signal(null);
+        this.createdComponent = signal(null, ...(ngDevMode ? [{ debugName: "createdComponent" }] : []));
     }
     ngAfterViewInit() {
         // Si on a un composant, on le crée dynamiquement
         if (this.data.component && !this.data.templateRef) {
-            const compRef = this.target.createComponent(this.data.component);
+            const compRef = this.target().createComponent(this.data.component);
             this.createdComponent.set(compRef);
             // Injecter les inputs dans le composant
             if (this.data.inputs) {
@@ -386,11 +395,11 @@ class C3DialogEmbedChildComponent {
             }
         }
         // Si on a juste un templateRef, on ne crée pas de composant :
-        // l’affichage est déjà géré dans le template via <ng-template *ngTemplateOutlet="...">
+        // l'affichage est déjà géré dans le template via <ng-template *ngTemplateOutlet="...">
         else if (this.data.templateRef) {
             this.createdComponent.set(null);
         }
-        // Si on n’a rien, on ferme le dialog
+        // Si on n'a rien, on ferme le dialog
         else {
             this.dialogRef.close(false);
         }
@@ -422,85 +431,57 @@ class C3DialogEmbedChildComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", 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.2.7", type: C3DialogEmbedChildComponent, isStandalone: false, selector: "C3DialogEmbedChildComponent", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", 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: "20.3.14", type: C3DialogEmbedChildComponent, isStandalone: false, selector: "C3DialogEmbedChildComponent", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div [class]="'dialog-content-container ' + (data.classContainer || '')">
       @if (data.toolbar) {
-        <mat-toolbar
-          [color]="data.toolbar.color || 'default'"
-          class="py-1"
-        >
+        <mat-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 }}"
-          >
-            <mat-icon>close</mat-icon>
-          </button>
+          @if (data.toolbar.closeBtn) {
+            <button mat-icon-button mat-dialog-close color="{{ data.toolbar.closeColor }}">
+              <mat-icon>close</mat-icon>
+            </button>
+          }
         </mat-toolbar>
       }
-
+    
       <div [class]="'dialog-content ' + (data.classContent || '')">
         <!-- Si templateRef est présent, on l'affiche directement,
-             sinon on laisse la place au composant dynamique -->
+        sinon on laisse la place au composant dynamique -->
         @if (data.templateRef) {
-          <ng-container
-            *ngTemplateOutlet="data.templateRef"
-          ></ng-container>
-        }
-        @else {
+          <ng-container *ngTemplateOutlet="data.templateRef"></ng-container>
+        } @else {
           <ng-template #target></ng-template>
         }
       </div>
-
+    
       @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()"
-                >
+                <button [class]="action.class" (click)="action.action()">
                   {{ action.label }}
                 </button>
               }
               @case ('raised') {
-                <button
-                  mat-raised-button
-                  [class]="action.class"
-                  (click)="action.action()"
-                >
+                <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()"
-                >
+                <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()"
-                >
+                <button mat-flat-button [class]="action.class" (click)="action.action()">
                   {{ action.label }}
                 </button>
               }
               @default {
-                <button
-                  mat-button
-                  [class]="action.class"
-                  (click)="action.action()"
-                >
+                <button mat-button [class]="action.class" (click)="action.action()">
                   {{ action.label }}
                 </button>
               }
@@ -509,88 +490,60 @@ class C3DialogEmbedChildComponent {
         </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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] }); }
+    `, 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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$1.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: "19.2.7", ngImport: i0, type: C3DialogEmbedChildComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DialogEmbedChildComponent, decorators: [{
             type: Component,
             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-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 }}"
-          >
-            <mat-icon>close</mat-icon>
-          </button>
+          @if (data.toolbar.closeBtn) {
+            <button mat-icon-button mat-dialog-close color="{{ data.toolbar.closeColor }}">
+              <mat-icon>close</mat-icon>
+            </button>
+          }
         </mat-toolbar>
       }
-
+    
       <div [class]="'dialog-content ' + (data.classContent || '')">
         <!-- Si templateRef est présent, on l'affiche directement,
-             sinon on laisse la place au composant dynamique -->
+        sinon on laisse la place au composant dynamique -->
         @if (data.templateRef) {
-          <ng-container
-            *ngTemplateOutlet="data.templateRef"
-          ></ng-container>
-        }
-        @else {
+          <ng-container *ngTemplateOutlet="data.templateRef"></ng-container>
+        } @else {
           <ng-template #target></ng-template>
         }
       </div>
-
+    
       @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()"
-                >
+                <button [class]="action.class" (click)="action.action()">
                   {{ action.label }}
                 </button>
               }
               @case ('raised') {
-                <button
-                  mat-raised-button
-                  [class]="action.class"
-                  (click)="action.action()"
-                >
+                <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()"
-                >
+                <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()"
-                >
+                <button mat-flat-button [class]="action.class" (click)="action.action()">
                   {{ action.label }}
                 </button>
               }
               @default {
-                <button
-                  mat-button
-                  [class]="action.class"
-                  (click)="action.action()"
-                >
+                <button mat-button [class]="action.class" (click)="action.action()">
                   {{ action.label }}
                 </button>
               }
@@ -599,29 +552,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         </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"] }]
+    `, 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]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { target: [{
-                type: ViewChild,
-                args: ['target', { read: ViewContainerRef }]
-            }] } });
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { target: [{ type: i0.ViewChild, args: ['target', { isSignal: true }] }] } });
 
 class C3DialogTemplateComponent {
     constructor() {
-        this.templateRef = viewChild('internalTemplate', {
-            read: TemplateRef,
-        });
-        this.dialogRef = signal(null);
+        this.templateRef = viewChild('internalTemplate', ...(ngDevMode ? [{ debugName: "templateRef", read: TemplateRef }] : [{
+                read: TemplateRef,
+            }]));
+        this.dialogRef = signal(null, ...(ngDevMode ? [{ debugName: "dialogRef" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DialogTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: C3DialogTemplateComponent, isStandalone: false, selector: "c3-dialog-template", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["internalTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #internalTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DialogTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: C3DialogTemplateComponent, isStandalone: false, selector: "c3-dialog-template", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["internalTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #internalTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DialogTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DialogTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-dialog-template', standalone: false, template: "<ng-template #internalTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
-        }] });
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['internalTemplate', { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }] } });
 
 class C3DialogService {
     constructor() {
@@ -783,10 +735,10 @@ class C3DialogService {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DialogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -795,12 +747,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class C3OpenDialogDirective {
     constructor() {
-        this.template = input(undefined, {
-            alias: 'c3-dialog'
-        });
-        this.config = input(undefined, {
-            alias: 'c3-dialog-config'
-        });
+        this.template = input(undefined, ...(ngDevMode ? [{ debugName: "template", alias: 'c3-dialog' }] : [{
+                alias: 'c3-dialog'
+            }]));
+        this.config = input(undefined, ...(ngDevMode ? [{ debugName: "config", alias: 'c3-dialog-config' }] : [{
+                alias: 'c3-dialog-config'
+            }]));
         this._dialog = inject(C3DialogService);
     }
     openDialog($event) {
@@ -809,10 +761,10 @@ class C3OpenDialogDirective {
         const dialog = this._dialog.createDialogFromTemplate(this.template().templateRef(), this.config());
         this.template()?.dialogRef.set(dialog);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3OpenDialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: C3OpenDialogDirective, isStandalone: false, selector: "[c3-dialog]", inputs: { template: { classPropertyName: "template", publicName: "c3-dialog", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "c3-dialog-config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "openDialog($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3OpenDialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: C3OpenDialogDirective, isStandalone: false, selector: "[c3-dialog]", inputs: { template: { classPropertyName: "template", publicName: "c3-dialog", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "c3-dialog-config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "openDialog($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3OpenDialogDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3OpenDialogDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3-dialog]',
@@ -821,11 +773,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         '(click)': 'openDialog($event)'
                     }
                 }]
-        }] });
+        }], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "c3-dialog", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "c3-dialog-config", required: false }] }] } });
 
 class C3DialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: C3DialogModule, declarations: [C3AlertDialogComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: C3DialogModule, declarations: [C3AlertDialogComponent,
             ConfirmDialogComponent,
             C3PromptDialogComponent,
             C3DialogEmbedChildComponent,
@@ -840,7 +792,7 @@ class C3DialogModule {
             MatToolbarModule,
             ReactiveFormsModule], exports: [C3DialogTemplateComponent,
             C3OpenDialogDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DialogModule, providers: [C3DialogService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DialogModule, providers: [C3DialogService], imports: [CommonModule,
             FormsModule,
             MatButtonModule,
             MatDialogModule,
@@ -850,7 +802,7 @@ class C3DialogModule {
             MatToolbarModule,
             ReactiveFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -881,15 +833,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }] });
 
 class FullScreenDirective {
-    set fullscreenState(value) {
-        this._fullscreenState.next(value?.valueOf() || false);
-    }
-    set fullscreenStateSetter(value) {
-        this.fullscreenState = value;
-    }
     constructor(el) {
         this.el = el;
+        this.fullscreenState = input(null, ...(ngDevMode ? [{ debugName: "fullscreenState", alias: 'c3Screenfull' }] : [{ alias: 'c3Screenfull' }]));
+        this.fullscreenStateSetter = input(null, ...(ngDevMode ? [{ debugName: "fullscreenStateSetter", alias: 'c3-full-screen' }] : [{ alias: 'c3-full-screen' }]));
         this._fullscreenState = new BehaviorSubject(false);
+        // Effect to handle fullscreenState changes
+        effect(() => {
+            const state = this.fullscreenState();
+            if (state !== null) {
+                this._fullscreenState.next(state.valueOf() || false);
+            }
+        });
+        // Effect to handle fullscreenStateSetter changes (alias for fullscreenState)
+        effect(() => {
+            const state = this.fullscreenStateSetter();
+            if (state !== null) {
+                this._fullscreenState.next(state.valueOf() || false);
+            }
+        });
         this._fullscreenState
             .pipe(filter((value) => value !== null), skip(2), debounceTime(100))
             .subscribe(() => {
@@ -927,36 +889,31 @@ class FullScreenDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FullScreenDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: FullScreenDirective, isStandalone: false, 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: "20.3.14", ngImport: i0, type: FullScreenDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: FullScreenDirective, isStandalone: false, selector: "[C3FullScreen], [c3-full-screen]", inputs: { fullscreenState: { classPropertyName: "fullscreenState", publicName: "c3Screenfull", isSignal: true, isRequired: false, transformFunction: null }, fullscreenStateSetter: { classPropertyName: "fullscreenStateSetter", publicName: "c3-full-screen", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FullScreenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FullScreenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[C3FullScreen], [c3-full-screen]',
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { fullscreenState: [{
-                type: Input,
-                args: ['c3Screenfull']
-            }], fullscreenStateSetter: [{
-                type: Input,
-                args: ['c3-full-screen']
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { fullscreenState: [{ type: i0.Input, args: [{ isSignal: true, alias: "c3Screenfull", required: false }] }], fullscreenStateSetter: [{ type: i0.Input, args: [{ isSignal: true, alias: "c3-full-screen", required: false }] }] } });
 
 class C3FileViewerActionsComponent {
+    constructor() {
+        this.fileViewer = input.required(...(ngDevMode ? [{ debugName: "fileViewer" }] : []));
+    }
     get config() {
-        return this.fileViewer.config;
+        return this.fileViewer().config;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: C3FileViewerActionsComponent, isStandalone: false, selector: "c3-file-viewer-actions", inputs: { fileViewer: "fileViewer" }, ngImport: i0, template: "<div class=\"nav-button-container\">\n  @if (config.btnShow?.prev) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.previousImage($event)\"\n      [disabled]=\"fileViewer.currentIndex === 0\"\n    >\n      @if (config.btnIcons?.prev?.classes) {\n      <span [class]=\"config.btnIcons?.prev?.classes\"></span>\n      }\n    </button>\n  @if (config.btnIcons?.prev?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.previousImage($event)\"\n    >\n        <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.prev?.text }}</span>\n      </a>\n    }\n  }\n  @if (config.btnShow?.next) {\n  <button\n    type=\"button\"\n    [class]=\"config.btnClass\"\n    (click)=\"fileViewer.nextImage($event)\"\n    [disabled]=\"fileViewer.currentIndex === fileViewer.files.length - 1\"\n  >\n    <span [class]=\"config.btnIcons?.next?.classes\"></span>\n  </button>\n  }\n\n  @if (config.btnIcons?.next?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.nextImage($event)\"\n    >\n      <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.next?.text }}</span>\n    </a>\n  }\n</div>\n\n@if (fileViewer.currentFile.type.startsWith('image')) {\n<!-- Button Container -->\n<div\n  class=\"btn-container\"\n  [class]=\"config.btnContainerClass\"\n>\n  <!-- Rotate Counter Clockwise -->\n  @if (config.btnShow?.rotateCounterClockwise) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateCounterClockwise()\"\n      *ngIf=\"config.btnIcons?.rotateCounterClockwise?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.rotateCounterClockwise?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.rotateCounterClockwise?.text\"\n      (click)=\"fileViewer.rotateCounterClockwise()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.rotateCounterClockwise?.text\n      }}</span>\n    </a>\n  }\n\n  <!-- Rotate Clockwise -->\n  @if (config.btnShow?.rotateClockwise) {\n    @if (config.btnIcons?.rotateClockwise?.classes) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateClockwise()\"\n    >\n      <span [class]=\"config.btnIcons?.rotateClockwise?.classes\"></span>\n    </button>\n    }\n    @if (config.btnIcons?.rotateClockwise?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateClockwise()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.rotateClockwise?.text\n      }}</span>\n    </a>\n    }\n  }\n\n  <!-- Zoom Out -->\n  @if (config.btnShow?.zoomOut) {\n    @if (config.btnIcons?.zoomOut?.classes) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomOut()\"\n    >\n      <span [class]=\"config.btnIcons?.zoomOut?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomOut()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomOut?.text\n      }}</span>\n    </a>\n    }\n  }\n\n  <!-- Zoom In -->\n  @if (config.btnShow?.zoomIn) {\n    @if (config.btnIcons?.zoomIn?.classes) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomIn()\"\n    >\n      <span [class]=\"config.btnIcons?.zoomIn?.classes\"></span>\n    </button>\n    }\n    @if (config.btnIcons?.zoomIn?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomIn()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomIn?.text\n      }}</span>\n    </a>\n    }\n  }\n\n  <!-- Fullscreen -->\n  @if (config.allowFullscreen) {\n    @if (config.btnIcons?.fullscreen?.classes) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n    >\n      <span [class]=\"config.btnIcons?.fullscreen?.classes\"></span>\n    </button>\n    }\n    @if (config.btnIcons?.fullscreen?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.fullscreen?.text\n      }}</span>\n    </a>\n    }\n  }\n\n  <!-- Reset -->\n  @if (config.btnShow?.reset) {\n    @if (config.btnIcons?.reset?.classes) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.reset()\"\n    >\n      <span [class]=\"config.btnIcons?.reset?.classes\"></span>\n    </button>\n    }\n    @if (config.btnIcons?.reset?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.reset()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.reset?.text\n      }}</span>\n    </a>\n    }\n  }\n\n  <!-- Download -->\n  @if (config.btnShow?.download) {\n    @if (config.btnIcons?.download?.classes) {\n    <button type=\"button\" [class]=\"config.btnClass\" (click)=\"fileViewer.download()\">\n      <span [class]=\"config.btnIcons?.download?.classes\"></span>\n    </button>\n    }\n    @if (config.btnIcons?.download?.text) {\n    <a [class]=\"config.btnClass\" (click)=\"fileViewer.download()\">\n      <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.download?.text }}</span>\n    </a>\n    }\n  }\n\n  <!-- Custom Buttons -->\n  @for (cBtn of config.customBtns; track cBtn.icon.text) {\n    @if (cBtn.icon.classes) {\n    <button type=\"button\" [class]=\"config.btnClass\">\n      <span [class]=\"cBtn.icon.classes\"></span>\n    </button>\n    }\n    @if (cBtn.icon.text) {\n    <a [class]=\"config.btnClass\">\n        <span [class]=\"config.btnSubClass\">{{ cBtn.icon.text }}</span>\n      </a>\n    }\n  }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: C3FileViewerActionsComponent, isStandalone: false, selector: "c3-file-viewer-actions", inputs: { fileViewer: { classPropertyName: "fileViewer", publicName: "fileViewer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"nav-button-container\">\n  @if (config.btnShow?.prev) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer().previousImage($event)\"\n      [disabled]=\"fileViewer().currentIndex === 0\"\n      >\n      @if (config.btnIcons?.prev?.classes) {\n        <span [class]=\"config.btnIcons?.prev?.classes\"></span>\n      }\n    </button>\n    @if (config.btnIcons?.prev?.text) {\n      <a\n        [class]=\"config.btnClass\"\n        (click)=\"fileViewer().previousImage($event)\"\n        >\n        <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.prev?.text }}</span>\n      </a>\n    }\n  }\n  @if (config.btnShow?.next) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer().nextImage($event)\"\n      [disabled]=\"fileViewer().currentIndex === fileViewer().files.length - 1\"\n      >\n      <span [class]=\"config.btnIcons?.next?.classes\"></span>\n    </button>\n  }\n\n  @if (config.btnIcons?.next?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer().nextImage($event)\"\n      >\n      <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.next?.text }}</span>\n    </a>\n  }\n</div>\n\n@if (fileViewer().currentFile.type.startsWith('image')) {\n  <!-- Button Container -->\n  <div\n    class=\"btn-container\"\n    [class]=\"config.btnContainerClass\"\n    >\n    <!-- Rotate Counter Clockwise -->\n    @if (config.btnShow?.rotateCounterClockwise) {\n      @if (config.btnIcons?.rotateCounterClockwise?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().rotateCounterClockwise()\"\n          >\n          <span [class]=\"config.btnIcons?.rotateCounterClockwise?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.rotateCounterClockwise?.text) {\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().rotateCounterClockwise()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.rotateCounterClockwise?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Rotate Clockwise -->\n    @if (config.btnShow?.rotateClockwise) {\n      @if (config.btnIcons?.rotateClockwise?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().rotateClockwise()\"\n          >\n          <span [class]=\"config.btnIcons?.rotateClockwise?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.rotateClockwise?.text) {\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().rotateClockwise()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.rotateClockwise?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Zoom Out -->\n    @if (config.btnShow?.zoomOut) {\n      @if (config.btnIcons?.zoomOut?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().zoomOut()\"\n          >\n          <span [class]=\"config.btnIcons?.zoomOut?.classes\"></span>\n        </button>\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().zoomOut()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.zoomOut?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Zoom In -->\n    @if (config.btnShow?.zoomIn) {\n      @if (config.btnIcons?.zoomIn?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().zoomIn()\"\n          >\n          <span [class]=\"config.btnIcons?.zoomIn?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.zoomIn?.text) {\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().zoomIn()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.zoomIn?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Fullscreen -->\n    @if (config.allowFullscreen) {\n      @if (config.btnIcons?.fullscreen?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().toggleFullscreen()\"\n          >\n          <span [class]=\"config.btnIcons?.fullscreen?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.fullscreen?.text) {\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().toggleFullscreen()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.fullscreen?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Reset -->\n    @if (config.btnShow?.reset) {\n      @if (config.btnIcons?.reset?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().reset()\"\n          >\n          <span [class]=\"config.btnIcons?.reset?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.reset?.text) {\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().reset()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.reset?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Download -->\n    @if (config.btnShow?.download) {\n      @if (config.btnIcons?.download?.classes) {\n        <button type=\"button\" [class]=\"config.btnClass\" (click)=\"fileViewer().download()\">\n          <span [class]=\"config.btnIcons?.download?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.download?.text) {\n        <a [class]=\"config.btnClass\" (click)=\"fileViewer().download()\">\n          <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.download?.text }}</span>\n        </a>\n      }\n    }\n\n    <!-- Custom Buttons -->\n    @for (cBtn of config.customBtns; track cBtn.icon.text) {\n      @if (cBtn.icon.classes) {\n        <button type=\"button\" [class]=\"config.btnClass\">\n          <span [class]=\"cBtn.icon.classes\"></span>\n        </button>\n      }\n      @if (cBtn.icon.text) {\n        <a [class]=\"config.btnClass\">\n          <span [class]=\"config.btnSubClass\">{{ cBtn.icon.text }}</span>\n        </a>\n      }\n    }\n  </div>\n}\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-viewer-actions', standalone: false, template: "<div class=\"nav-button-container\">\n  @if (config.btnShow?.prev) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.previousImage($event)\"\n      [disabled]=\"fileViewer.currentIndex === 0\"\n    >\n      @if (config.btnIcons?.prev?.classes) {\n      <span [class]=\"config.btnIcons?.prev?.classes\"></span>\n      }\n    </button>\n  @if (config.btnIcons?.prev?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.previousImage($event)\"\n    >\n        <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.prev?.text }}</span>\n      </a>\n    }\n  }\n  @if (config.btnShow?.next) {\n  <button\n    type=\"button\"\n    [class]=\"config.btnClass\"\n    (click)=\"fileViewer.nextImage($event)\"\n    [disabled]=\"fileViewer.currentIndex === fileViewer.files.length - 1\"\n  >\n    <span [class]=\"config.btnIcons?.next?.classes\"></span>\n  </button>\n  }\n\n  @if (config.btnIcons?.next?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.nextImage($event)\"\n    >\n      <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.next?.text }}</span>\n    </a>\n  }\n</div>\n\n@if (fileViewer.currentFile.type.startsWith('image')) {\n<!-- Button Container -->\n<div\n  class=\"btn-container\"\n  [class]=\"config.btnContainerClass\"\n>\n  <!-- Rotate Counter Clockwise -->\n  @if (config.btnShow?.rotateCounterClockwise) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateCounterClockwise()\"\n      *ngIf=\"config.btnIcons?.rotateCounterClockwise?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.rotateCounterClockwise?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.rotateCounterClockwise?.text\"\n      (click)=\"fileViewer.rotateCounterClockwise()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.rotateCounterClockwise?.text\n      }}</span>\n    </a>\n  }\n\n  <!-- Rotate Clockwise -->\n  @if (config.btnShow?.rotateClockwise) {\n    @if (config.btnIcons?.rotateClockwise?.classes) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateClockwise()\"\n    >\n      <span [class]=\"config.btnIcons?.rotateClockwise?.classes\"></span>\n    </button>\n    }\n    @if (config.btnIcons?.rotateClockwise?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateClockwise()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.rotateClockwise?.text\n      }}</span>\n    </a>\n    }\n  }\n\n  <!-- Zoom Out -->\n  @if (config.btnShow?.zoomOut) {\n    @if (config.btnIcons?.zoomOut?.classes) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomOut()\"\n    >\n      <span [class]=\"config.btnIcons?.zoomOut?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomOut()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomOut?.text\n      }}</span>\n    </a>\n    }\n  }\n\n  <!-- Zoom In -->\n  @if (config.btnShow?.zoomIn) {\n    @if (config.btnIcons?.zoomIn?.classes) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomIn()\"\n    >\n      <span [class]=\"config.btnIcons?.zoomIn?.classes\"></span>\n    </button>\n    }\n    @if (config.btnIcons?.zoomIn?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomIn()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomIn?.text\n      }}</span>\n    </a>\n    }\n  }\n\n  <!-- Fullscreen -->\n  @if (config.allowFullscreen) {\n    @if (config.btnIcons?.fullscreen?.classes) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n    >\n      <span [class]=\"config.btnIcons?.fullscreen?.classes\"></span>\n    </button>\n    }\n    @if (config.btnIcons?.fullscreen?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.fullscreen?.text\n      }}</span>\n    </a>\n    }\n  }\n\n  <!-- Reset -->\n  @if (config.btnShow?.reset) {\n    @if (config.btnIcons?.reset?.classes) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.reset()\"\n    >\n      <span [class]=\"config.btnIcons?.reset?.classes\"></span>\n    </button>\n    }\n    @if (config.btnIcons?.reset?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.reset()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.reset?.text\n      }}</span>\n    </a>\n    }\n  }\n\n  <!-- Download -->\n  @if (config.btnShow?.download) {\n    @if (config.btnIcons?.download?.classes) {\n    <button type=\"button\" [class]=\"config.btnClass\" (click)=\"fileViewer.download()\">\n      <span [class]=\"config.btnIcons?.download?.classes\"></span>\n    </button>\n    }\n    @if (config.btnIcons?.download?.text) {\n    <a [class]=\"config.btnClass\" (click)=\"fileViewer.download()\">\n      <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.download?.text }}</span>\n    </a>\n    }\n  }\n\n  <!-- Custom Buttons -->\n  @for (cBtn of config.customBtns; track cBtn.icon.text) {\n    @if (cBtn.icon.classes) {\n    <button type=\"button\" [class]=\"config.btnClass\">\n      <span [class]=\"cBtn.icon.classes\"></span>\n    </button>\n    }\n    @if (cBtn.icon.text) {\n    <a [class]=\"config.btnClass\">\n        <span [class]=\"config.btnSubClass\">{{ cBtn.icon.text }}</span>\n      </a>\n    }\n  }\n  </div>\n}\n" }]
-        }], propDecorators: { fileViewer: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'c3-file-viewer-actions', standalone: false, template: "<div class=\"nav-button-container\">\n  @if (config.btnShow?.prev) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer().previousImage($event)\"\n      [disabled]=\"fileViewer().currentIndex === 0\"\n      >\n      @if (config.btnIcons?.prev?.classes) {\n        <span [class]=\"config.btnIcons?.prev?.classes\"></span>\n      }\n    </button>\n    @if (config.btnIcons?.prev?.text) {\n      <a\n        [class]=\"config.btnClass\"\n        (click)=\"fileViewer().previousImage($event)\"\n        >\n        <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.prev?.text }}</span>\n      </a>\n    }\n  }\n  @if (config.btnShow?.next) {\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer().nextImage($event)\"\n      [disabled]=\"fileViewer().currentIndex === fileViewer().files.length - 1\"\n      >\n      <span [class]=\"config.btnIcons?.next?.classes\"></span>\n    </button>\n  }\n\n  @if (config.btnIcons?.next?.text) {\n    <a\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer().nextImage($event)\"\n      >\n      <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.next?.text }}</span>\n    </a>\n  }\n</div>\n\n@if (fileViewer().currentFile.type.startsWith('image')) {\n  <!-- Button Container -->\n  <div\n    class=\"btn-container\"\n    [class]=\"config.btnContainerClass\"\n    >\n    <!-- Rotate Counter Clockwise -->\n    @if (config.btnShow?.rotateCounterClockwise) {\n      @if (config.btnIcons?.rotateCounterClockwise?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().rotateCounterClockwise()\"\n          >\n          <span [class]=\"config.btnIcons?.rotateCounterClockwise?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.rotateCounterClockwise?.text) {\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().rotateCounterClockwise()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.rotateCounterClockwise?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Rotate Clockwise -->\n    @if (config.btnShow?.rotateClockwise) {\n      @if (config.btnIcons?.rotateClockwise?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().rotateClockwise()\"\n          >\n          <span [class]=\"config.btnIcons?.rotateClockwise?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.rotateClockwise?.text) {\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().rotateClockwise()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.rotateClockwise?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Zoom Out -->\n    @if (config.btnShow?.zoomOut) {\n      @if (config.btnIcons?.zoomOut?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().zoomOut()\"\n          >\n          <span [class]=\"config.btnIcons?.zoomOut?.classes\"></span>\n        </button>\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().zoomOut()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.zoomOut?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Zoom In -->\n    @if (config.btnShow?.zoomIn) {\n      @if (config.btnIcons?.zoomIn?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().zoomIn()\"\n          >\n          <span [class]=\"config.btnIcons?.zoomIn?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.zoomIn?.text) {\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().zoomIn()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.zoomIn?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Fullscreen -->\n    @if (config.allowFullscreen) {\n      @if (config.btnIcons?.fullscreen?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().toggleFullscreen()\"\n          >\n          <span [class]=\"config.btnIcons?.fullscreen?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.fullscreen?.text) {\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().toggleFullscreen()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.fullscreen?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Reset -->\n    @if (config.btnShow?.reset) {\n      @if (config.btnIcons?.reset?.classes) {\n        <button\n          type=\"button\"\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().reset()\"\n          >\n          <span [class]=\"config.btnIcons?.reset?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.reset?.text) {\n        <a\n          [class]=\"config.btnClass\"\n          (click)=\"fileViewer().reset()\"\n          >\n          <span [class]=\"config.btnSubClass\">{{\n            config.btnIcons?.reset?.text\n          }}</span>\n        </a>\n      }\n    }\n\n    <!-- Download -->\n    @if (config.btnShow?.download) {\n      @if (config.btnIcons?.download?.classes) {\n        <button type=\"button\" [class]=\"config.btnClass\" (click)=\"fileViewer().download()\">\n          <span [class]=\"config.btnIcons?.download?.classes\"></span>\n        </button>\n      }\n      @if (config.btnIcons?.download?.text) {\n        <a [class]=\"config.btnClass\" (click)=\"fileViewer().download()\">\n          <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.download?.text }}</span>\n        </a>\n      }\n    }\n\n    <!-- Custom Buttons -->\n    @for (cBtn of config.customBtns; track cBtn.icon.text) {\n      @if (cBtn.icon.classes) {\n        <button type=\"button\" [class]=\"config.btnClass\">\n          <span [class]=\"cBtn.icon.classes\"></span>\n        </button>\n      }\n      @if (cBtn.icon.text) {\n        <a [class]=\"config.btnClass\">\n          <span [class]=\"config.btnSubClass\">{{ cBtn.icon.text }}</span>\n        </a>\n      }\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { fileViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileViewer", required: true }] }] } });
 
 class C3SafeUrlPipe {
     constructor(sanitizer) {
@@ -965,10 +922,10 @@ class C3SafeUrlPipe {
     transform(url) {
         return url ? this.sanitizer.bypassSecurityTrustResourceUrl(url) : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3SafeUrlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: C3SafeUrlPipe, isStandalone: true, name: "c3SafeUrl" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3SafeUrlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: C3SafeUrlPipe, isStandalone: true, name: "c3SafeUrl" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3SafeUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3SafeUrlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'c3SafeUrl',
@@ -978,129 +935,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class C3FileViewerImageComponent {
     constructor() {
-        this.dragstart = new EventEmitter();
+        this.fileViewer = input.required(...(ngDevMode ? [{ debugName: "fileViewer" }] : []));
+        this.dragstart = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: C3FileViewerImageComponent, isStandalone: false, selector: "c3-file-viewer-image, [c3-file-viewer-image]", inputs: { fileViewer: { classPropertyName: "fileViewer", publicName: "fileViewer", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dragstart: "dragstart" }, ngImport: i0, template: "@if (fileViewer().currentFile.objectUrl) {\n  <img\n    [src]=\"fileViewer().currentFile.objectUrl | async | c3SafeUrl\"\n    [ngStyle]=\"fileViewer().style\"\n    alt=\"Image not found...\"\n    (dragstart)=\"dragstart.emit($event)\"\n    />\n}\n", dependencies: [{ 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: "19.2.7", ngImport: i0, type: C3FileViewerImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerImageComponent, decorators: [{
             type: Component,
-            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: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'c3-file-viewer-image, [c3-file-viewer-image]', standalone: false, template: "@if (fileViewer().currentFile.objectUrl) {\n  <img\n    [src]=\"fileViewer().currentFile.objectUrl | async | c3SafeUrl\"\n    [ngStyle]=\"fileViewer().style\"\n    alt=\"Image not found...\"\n    (dragstart)=\"dragstart.emit($event)\"\n    />\n}\n" }]
+        }], propDecorators: { fileViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileViewer", required: true }] }], dragstart: [{ type: i0.Output, args: ["dragstart"] }] } });
 
 class C3FileViewerPdfComponent {
     constructor() {
-        this.dragstart = new EventEmitter();
+        this.fileViewer = input.required(...(ngDevMode ? [{ debugName: "fileViewer" }] : []));
+        this.dragstart = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerPdfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: C3FileViewerPdfComponent, isStandalone: false, selector: "c3-file-viewer-pdf", inputs: { fileViewer: "fileViewer" }, outputs: { dragstart: "dragstart" }, host: { styleAttribute: "display: block", classAttribute: "c3-file-viewer-pdf" }, ngImport: i0, template: "<!-- pdf viewer -->\n<embed\n  type=\"application/pdf\"\n  [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n  [style.height]=\"'100%'\"\n  [style.width]=\"'100%'\"\n/>\n<!-- floating download button -->\n<button mat-icon-button class=\"download-button\" (click)=\"fileViewer.download()\">\n  <mat-icon>download</mat-icon>\n</button>\n", dependencies: [{ kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: C3SafeUrlPipe, name: "c3SafeUrl" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerPdfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: C3FileViewerPdfComponent, isStandalone: false, selector: "c3-file-viewer-pdf", inputs: { fileViewer: { classPropertyName: "fileViewer", publicName: "fileViewer", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dragstart: "dragstart" }, host: { styleAttribute: "display: block", classAttribute: "c3-file-viewer-pdf" }, ngImport: i0, template: "<!-- pdf viewer -->\n<embed\n  type=\"application/pdf\"\n  [src]=\"fileViewer().currentFile.objectUrl | async | c3SafeUrl\"\n  [style.height]=\"'100%'\"\n  [style.width]=\"'100%'\"\n/>\n<!-- floating download button -->\n<button mat-icon-button class=\"download-button\" (click)=\"fileViewer().download()\">\n  <mat-icon>download</mat-icon>\n</button>\n", dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: C3SafeUrlPipe, name: "c3SafeUrl" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerPdfComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerPdfComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-file-viewer-pdf', encapsulation: ViewEncapsulation.None, host: {
                         style: 'display: block',
                         class: 'c3-file-viewer-pdf',
-                    }, standalone: false, template: "<!-- pdf viewer -->\n<embed\n  type=\"application/pdf\"\n  [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n  [style.height]=\"'100%'\"\n  [style.width]=\"'100%'\"\n/>\n<!-- floating download button -->\n<button mat-icon-button class=\"download-button\" (click)=\"fileViewer.download()\">\n  <mat-icon>download</mat-icon>\n</button>\n" }]
-        }], propDecorators: { fileViewer: [{
-                type: Input
-            }], dragstart: [{
-                type: Output
-            }] } });
+                    }, standalone: false, template: "<!-- pdf viewer -->\n<embed\n  type=\"application/pdf\"\n  [src]=\"fileViewer().currentFile.objectUrl | async | c3SafeUrl\"\n  [style.height]=\"'100%'\"\n  [style.width]=\"'100%'\"\n/>\n<!-- floating download button -->\n<button mat-icon-button class=\"download-button\" (click)=\"fileViewer().download()\">\n  <mat-icon>download</mat-icon>\n</button>\n" }]
+        }], propDecorators: { fileViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileViewer", required: true }] }], dragstart: [{ type: i0.Output, args: ["dragstart"] }] } });
 
 class C3FileViewerVideoComponent {
     constructor() {
-        this.fileViewer = input.required();
+        this.fileViewer = input.required(...(ngDevMode ? [{ debugName: "fileViewer" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: C3FileViewerVideoComponent, isStandalone: false, selector: "c3-file-viewer-video", inputs: { fileViewer: { classPropertyName: "fileViewer", publicName: "fileViewer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<video controls [src]=\"fileViewer().currentFile.objectUrl | async | c3SafeUrl\" crossorigin=\"*\"></video>\n", dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: C3SafeUrlPipe, name: "c3SafeUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: C3FileViewerVideoComponent, isStandalone: false, selector: "c3-file-viewer-video", inputs: { fileViewer: { classPropertyName: "fileViewer", publicName: "fileViewer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<video controls [src]=\"fileViewer().currentFile.objectUrl | async | c3SafeUrl\" crossorigin=\"*\"></video>\n", dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: C3SafeUrlPipe, name: "c3SafeUrl" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerVideoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-file-viewer-video', standalone: false, template: "<video controls [src]=\"fileViewer().currentFile.objectUrl | async | c3SafeUrl\" crossorigin=\"*\"></video>\n" }]
-        }] });
+        }], propDecorators: { fileViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileViewer", required: true }] }] } });
 
 class C3FileViewerDefaultComponent {
     constructor() {
-        this.fileViewer = input.required();
+        this.fileViewer = input.required(...(ngDevMode ? [{ debugName: "fileViewer" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: C3FileViewerDefaultComponent, isStandalone: false, selector: "c3-file-viewer-default", inputs: { fileViewer: { classPropertyName: "fileViewer", publicName: "fileViewer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container>\n  <button (click)=\"fileViewer().download()\">Download {{ fileViewer().getOriginalName() }}</button>\n</ng-container>\n", styles: [":host{display:block}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: C3FileViewerDefaultComponent, isStandalone: false, selector: "c3-file-viewer-default", inputs: { fileViewer: { classPropertyName: "fileViewer", publicName: "fileViewer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container>\n  <button (click)=\"fileViewer().download()\">Download {{ fileViewer().getOriginalName() }}</button>\n</ng-container>\n", styles: [":host{display:block}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerDefaultComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerDefaultComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-file-viewer-default', standalone: false, template: "<ng-container>\n  <button (click)=\"fileViewer().download()\">Download {{ fileViewer().getOriginalName() }}</button>\n</ng-container>\n", styles: [":host{display:block}\n"] }]
-        }] });
+        }], propDecorators: { fileViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileViewer", required: true }] }] } });
 
 class C3FileViewerComponent {
     constructor(moduleConfig, _http) {
         this.moduleConfig = moduleConfig;
         this._http = _http;
-        this.indexChange = new EventEmitter();
-        this.configChange = new EventEmitter();
-        this.customFileEvent = new EventEmitter();
+        this.screenHeightOccupied = input(0, ...(ngDevMode ? [{ debugName: "screenHeightOccupied" }] : [])); // In Px
+        this.fileViewer = input.required(...(ngDevMode ? [{ debugName: "fileViewer" }] : []));
+        this.indexChange = output();
+        this.configChange = output();
+        this.customFileEvent = output();
+        // Setup subscriptions in constructor using effect
+        effect(() => {
+            const viewer = this.fileViewer();
+            viewer.customFile$.subscribe((event) => {
+                this.customFileEvent.emit(event);
+            });
+            viewer.index$.subscribe((index) => {
+                this.indexChange.emit(index);
+            });
+            viewer.config$.subscribe((config) => {
+                this.configChange.emit(config);
+            });
+        });
     }
     ngOnInit() {
         this.defineStyleHeight();
-        this.fileViewer.customFile$.subscribe((event) => {
-            this.customFileEvent.emit(event);
-        });
-        this.fileViewer.index$.subscribe((index) => {
-            this.indexChange.emit(index);
-        });
-        this.fileViewer.config$.subscribe((config) => {
-            this.configChange.emit(config);
-        });
     }
     onMouseOver() {
-        if (this.fileViewer)
-            this.fileViewer.hovered = true;
+        const viewer = this.fileViewer();
+        if (viewer)
+            viewer.hovered = true;
     }
     onMouseLeave() {
-        if (this.fileViewer)
-            this.fileViewer.hovered = false;
+        const viewer = this.fileViewer();
+        if (viewer)
+            viewer.hovered = false;
     }
     ngOnChanges(changes) {
-        if (changes['screenHeightOccupied'] && this.fileViewer)
+        if (changes['screenHeightOccupied'] && this.fileViewer())
             this.defineStyleHeight();
     }
     next(event) {
-        this.fileViewer.nextImage(event);
+        this.fileViewer().nextImage(event);
     }
     previous(event) {
-        this.fileViewer.previousImage(event);
+        this.fileViewer().previousImage(event);
     }
     defineStyleHeight() {
-        this.fileViewer.styleHeight =
-            'calc(100% - ' + this.screenHeightOccupied + 'px)';
+        this.fileViewer().styleHeight =
+            'calc(100% - ' + this.screenHeightOccupied() + 'px)';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerComponent, deps: [{ token: 'config', optional: true }, { token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: C3FileViewerComponent, isStandalone: false, selector: "c3-file-viewer", inputs: { screenHeightOccupied: "screenHeightOccupied", fileViewer: "fileViewer" }, outputs: { indexChange: "indexChange", configChange: "configChange", customFileEvent: "customFileEvent" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()", "window:keyup.ArrowRight": "next($event)", "window:keyup.ArrowLeft": "previous($event)" }, classAttribute: "c3-file-viewer" }, usesOnChanges: true, ngImport: i0, template: "@if (fileViewer) {\n<div\n  class=\"c3-file-container\"\n  [c3-full-screen]=\"fileViewer.fullscreen$ | async\"\n  [style.height]=\"fileViewer.styleHeight\"\n  [style.backgroundColor]=\"fileViewer.config.containerBackgroundColor\"\n  (wheel)=\"fileViewer.scrollZoom($event)\"\n  (dragover)=\"fileViewer.onDragOver($event)\"\n>\n  @if (fileViewer.currentFile.type.startsWith('image')) {\n    <c3-file-viewer-image\n      [fileViewer]=\"fileViewer\"\n      [style]=\"fileViewer.style\"\n      (dragstart)=\"fileViewer.onDragStart($event)\"\n    />\n  } @else if (fileViewer.currentFile.type.startsWith('video')) {\n    <c3-file-viewer-video\n      [fileViewer]=\"fileViewer\"\n    />\n  } @else if (fileViewer.currentFile.type.startsWith('application/pdf')) {\n    <c3-file-viewer-pdf\n      [fileViewer]=\"fileViewer\"\n    />\n  } @else {\n    <c3-file-viewer-default\n      [fileViewer]=\"fileViewer\"\n    />\n  }\n\n  <!-- Div below will be used to hide the 'ghost' image when dragging -->\n  <div></div>\n  @if (fileViewer.loading) {\n    <div class=\"spinner-container\">\n      <div class=\"spinner\"></div>\n    </div>\n  }\n\n    <c3-file-viewer-actions [fileViewer]=\"fileViewer\" />\n  </div>\n}\n", styles: [".c3-file-container{position:relative;width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: FullScreenDirective, selector: "[C3FullScreen], [c3-full-screen]", inputs: ["c3Screenfull", "c3-full-screen"] }, { kind: "component", type: C3FileViewerActionsComponent, selector: "c3-file-viewer-actions", inputs: ["fileViewer"] }, { kind: "component", type: C3FileViewerImageComponent, selector: "c3-file-viewer-image, [c3-file-viewer-image]", inputs: ["fileViewer"], outputs: ["dragstart"] }, { kind: "component", type: C3FileViewerPdfComponent, selector: "c3-file-viewer-pdf", inputs: ["fileViewer"], outputs: ["dragstart"] }, { kind: "component", type: C3FileViewerVideoComponent, selector: "c3-file-viewer-video", inputs: ["fileViewer"] }, { kind: "component", type: C3FileViewerDefaultComponent, selector: "c3-file-viewer-default", inputs: ["fileViewer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerComponent, deps: [{ token: 'config', optional: true }, { token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: C3FileViewerComponent, isStandalone: false, selector: "c3-file-viewer", inputs: { screenHeightOccupied: { classPropertyName: "screenHeightOccupied", publicName: "screenHeightOccupied", isSignal: true, isRequired: false, transformFunction: null }, fileViewer: { classPropertyName: "fileViewer", publicName: "fileViewer", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { indexChange: "indexChange", configChange: "configChange", customFileEvent: "customFileEvent" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()", "window:keyup.ArrowRight": "next($event)", "window:keyup.ArrowLeft": "previous($event)" }, classAttribute: "c3-file-viewer" }, usesOnChanges: true, ngImport: i0, template: "@if (fileViewer(); as viewer) {\n<div\n  class=\"c3-file-container\"\n  [c3-full-screen]=\"viewer.fullscreen$ | async\"\n  [style.height]=\"viewer.styleHeight\"\n  [style.backgroundColor]=\"viewer.config.containerBackgroundColor\"\n  (wheel)=\"viewer.scrollZoom($event)\"\n  (dragover)=\"viewer.onDragOver($event)\"\n>\n  @if (viewer.currentFile.type.startsWith('image')) {\n    <c3-file-viewer-image\n      [fileViewer]=\"viewer\"\n      [style]=\"viewer.style\"\n      (dragstart)=\"viewer.onDragStart($event)\"\n    />\n  } @else if (viewer.currentFile.type.startsWith('video')) {\n    <c3-file-viewer-video\n      [fileViewer]=\"viewer\"\n    />\n  } @else if (viewer.currentFile.type.startsWith('application/pdf')) {\n    <c3-file-viewer-pdf\n      [fileViewer]=\"viewer\"\n    />\n  } @else {\n    <c3-file-viewer-default\n      [fileViewer]=\"viewer\"\n    />\n  }\n\n  <!-- Div below will be used to hide the 'ghost' image when dragging -->\n  <div></div>\n  @if (viewer.loading) {\n    <div class=\"spinner-container\">\n      <div class=\"spinner\"></div>\n    </div>\n  }\n\n    <c3-file-viewer-actions [fileViewer]=\"viewer\" />\n  </div>\n}\n", styles: [".c3-file-container{position:relative;width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: FullScreenDirective, selector: "[C3FullScreen], [c3-full-screen]", inputs: ["c3Screenfull", "c3-full-screen"] }, { kind: "component", type: C3FileViewerActionsComponent, selector: "c3-file-viewer-actions", inputs: ["fileViewer"] }, { kind: "component", type: C3FileViewerImageComponent, selector: "c3-file-viewer-image, [c3-file-viewer-image]", inputs: ["fileViewer"], outputs: ["dragstart"] }, { kind: "component", type: C3FileViewerPdfComponent, selector: "c3-file-viewer-pdf", inputs: ["fileViewer"], outputs: ["dragstart"] }, { kind: "component", type: C3FileViewerVideoComponent, selector: "c3-file-viewer-video", inputs: ["fileViewer"] }, { kind: "component", type: C3FileViewerDefaultComponent, selector: "c3-file-viewer-default", inputs: ["fileViewer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-file-viewer', encapsulation: ViewEncapsulation.None, host: {
                         class: 'c3-file-viewer',
-                    }, standalone: false, template: "@if (fileViewer) {\n<div\n  class=\"c3-file-container\"\n  [c3-full-screen]=\"fileViewer.fullscreen$ | async\"\n  [style.height]=\"fileViewer.styleHeight\"\n  [style.backgroundColor]=\"fileViewer.config.containerBackgroundColor\"\n  (wheel)=\"fileViewer.scrollZoom($event)\"\n  (dragover)=\"fileViewer.onDragOver($event)\"\n>\n  @if (fileViewer.currentFile.type.startsWith('image')) {\n    <c3-file-viewer-image\n      [fileViewer]=\"fileViewer\"\n      [style]=\"fileViewer.style\"\n      (dragstart)=\"fileViewer.onDragStart($event)\"\n    />\n  } @else if (fileViewer.currentFile.type.startsWith('video')) {\n    <c3-file-viewer-video\n      [fileViewer]=\"fileViewer\"\n    />\n  } @else if (fileViewer.currentFile.type.startsWith('application/pdf')) {\n    <c3-file-viewer-pdf\n      [fileViewer]=\"fileViewer\"\n    />\n  } @else {\n    <c3-file-viewer-default\n      [fileViewer]=\"fileViewer\"\n    />\n  }\n\n  <!-- Div below will be used to hide the 'ghost' image when dragging -->\n  <div></div>\n  @if (fileViewer.loading) {\n    <div class=\"spinner-container\">\n      <div class=\"spinner\"></div>\n    </div>\n  }\n\n    <c3-file-viewer-actions [fileViewer]=\"fileViewer\" />\n  </div>\n}\n", styles: [".c3-file-container{position:relative;width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}\n"] }]
+                    }, standalone: false, template: "@if (fileViewer(); as viewer) {\n<div\n  class=\"c3-file-container\"\n  [c3-full-screen]=\"viewer.fullscreen$ | async\"\n  [style.height]=\"viewer.styleHeight\"\n  [style.backgroundColor]=\"viewer.config.containerBackgroundColor\"\n  (wheel)=\"viewer.scrollZoom($event)\"\n  (dragover)=\"viewer.onDragOver($event)\"\n>\n  @if (viewer.currentFile.type.startsWith('image')) {\n    <c3-file-viewer-image\n      [fileViewer]=\"viewer\"\n      [style]=\"viewer.style\"\n      (dragstart)=\"viewer.onDragStart($event)\"\n    />\n  } @else if (viewer.currentFile.type.startsWith('video')) {\n    <c3-file-viewer-video\n      [fileViewer]=\"viewer\"\n    />\n  } @else if (viewer.currentFile.type.startsWith('application/pdf')) {\n    <c3-file-viewer-pdf\n      [fileViewer]=\"viewer\"\n    />\n  } @else {\n    <c3-file-viewer-default\n      [fileViewer]=\"viewer\"\n    />\n  }\n\n  <!-- Div below will be used to hide the 'ghost' image when dragging -->\n  <div></div>\n  @if (viewer.loading) {\n    <div class=\"spinner-container\">\n      <div class=\"spinner\"></div>\n    </div>\n  }\n\n    <c3-file-viewer-actions [fileViewer]=\"viewer\" />\n  </div>\n}\n", styles: [".c3-file-container{position:relative;width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: ['config']
-                }] }, { type: i1$4.HttpClient }], propDecorators: { screenHeightOccupied: [{
-                type: Input
-            }], fileViewer: [{
-                type: Input
-            }], indexChange: [{
-                type: Output
-            }], configChange: [{
-                type: Output
-            }], customFileEvent: [{
-                type: Output
-            }], onMouseOver: [{
+                }] }, { type: i1$4.HttpClient }], propDecorators: { screenHeightOccupied: [{ type: i0.Input, args: [{ isSignal: true, alias: "screenHeightOccupied", required: false }] }], fileViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileViewer", required: true }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], configChange: [{ type: i0.Output, args: ["configChange"] }], customFileEvent: [{ type: i0.Output, args: ["customFileEvent"] }], onMouseOver: [{
                 type: HostListener,
                 args: ['mouseover']
             }], onMouseLeave: [{
@@ -1294,12 +1243,63 @@ class C3FileViewer {
             ? of(this.locationBlobMap.get(location))
             : this.getFile(location).pipe(map((response) => URL.createObjectURL(response)), tap((url) => this.locationBlobMap.set(location, url)))), tap(() => this.onLoaded()));
     }
+    /**
+     * Encode une URL de manière sûre pour éviter les problèmes avec les caractères spéciaux
+     * comme +, espaces, etc.
+     * Cette fonction encode correctement les segments du chemin et les paramètres de requête.
+     */
+    encodeUrl(url) {
+        try {
+            // Si l'URL est relative, on doit encoder manuellement
+            if (!url.includes('://')) {
+                // Pour les URLs relatives, on sépare le chemin et les paramètres de requête
+                const [path, query] = url.split('?');
+                // Encoder chaque segment du chemin (sauf les séparateurs /)
+                const encodedPath = path
+                    .split('/')
+                    .map((segment) => (segment ? encodeURIComponent(segment) : ''))
+                    .join('/');
+                if (query) {
+                    // Pour les paramètres de requête, encoder chaque clé et valeur
+                    const params = query.split('&');
+                    const encodedParams = params.map((param) => {
+                        const [key, ...valueParts] = param.split('=');
+                        const value = valueParts.join('=');
+                        return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+                    });
+                    return `${encodedPath}?${encodedParams.join('&')}`;
+                }
+                return encodedPath;
+            }
+            // Pour les URLs absolues, utiliser le constructeur URL pour parser
+            const urlObj = new URL(url);
+            // Encoder chaque segment du chemin
+            const encodedPath = urlObj.pathname
+                .split('/')
+                .map((segment) => (segment ? encodeURIComponent(segment) : ''))
+                .join('/');
+            // Les searchParams sont déjà gérés correctement par URLSearchParams
+            // mais on doit s'assurer que les valeurs sont encodées
+            const searchParams = new URLSearchParams();
+            urlObj.searchParams.forEach((value, key) => {
+                searchParams.append(key, value);
+            });
+            const encodedSearch = searchParams.toString() ? `?${searchParams.toString()}` : '';
+            return `${urlObj.protocol}//${urlObj.host}${encodedPath}${encodedSearch}${urlObj.hash}`;
+        }
+        catch (e) {
+            // Si le parsing échoue (URL malformée ou relative sans base),
+            // encoder avec encodeURI qui préserve la structure de l'URL
+            return encodeURI(url);
+        }
+    }
     getFile(location) {
         const client = this.config.customClient || this.client;
         if (!client) {
             throw new Error('No http client provided. Please provide a custom client or import HttpClientModule');
         }
-        return client(location, {
+        const encodedLocation = this.encodeUrl(location);
+        return client(encodedLocation, {
             responseType: 'blob',
         });
     }
@@ -1422,7 +1422,7 @@ class C3FileViewer {
     }
     download(file = this.currentFile) {
         const client = this.config.customClient || this.client;
-        const originalName = this.getOriginalName();
+        const originalName = this.getOriginalName(file);
         // Si le fichier est déjà en blob (petit fichier déjà chargé)
         if (file.objectUrl && this.locationBlobMap.has(file.location)) {
             const url = this.locationBlobMap.get(file.location);
@@ -1446,7 +1446,8 @@ class C3FileViewer {
     }
     downloadWithClient(file, client, originalName) {
         // Utiliser le client fourni pour récupérer le fichier
-        client(file.location, {
+        const encodedLocation = this.encodeUrl(file.location);
+        client(encodedLocation, {
             responseType: 'blob',
         }).subscribe({
             next: (blob) => {
@@ -1479,12 +1480,12 @@ class C3FileViewerDialog {
     constructor(fileViewer) {
         this.fileViewer = fileViewer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerDialog, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: C3FileViewerDialog, isStandalone: false, selector: "ng-component", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerDialog, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", 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: "19.2.7", ngImport: i0, type: C3FileViewerDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerDialog, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1500,22 +1501,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 class C3FileViewerDialogComponent {
     constructor(_dialog) {
         this._dialog = _dialog;
-        this.dialogConfig = {
+        this.fileViewer = input.required(...(ngDevMode ? [{ debugName: "fileViewer" }] : []));
+        this.dialogConfig = input({
             panelClass: 'c3-file-viewer-dialog',
             width: '80%',
             height: '80%',
-        };
+        }, ...(ngDevMode ? [{ debugName: "dialogConfig" }] : []));
     }
     openDialog() {
         this._dialog.open(C3FileViewerDialog, {
-            data: this.fileViewer,
-            ...this.dialogConfig,
+            data: this.fileViewer(),
+            ...this.dialogConfig(),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerDialogComponent, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerDialogComponent, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: C3FileViewerDialogComponent, isStandalone: false, selector: "c3-file-viewer-dialog", inputs: { fileViewer: { classPropertyName: "fileViewer", publicName: "fileViewer", isSignal: true, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "dialogConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "openDialog()" }, classAttribute: "c3-file-viewer-dialog" }, ngImport: i0, template: ` <ng-content /> `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'c3-file-viewer-dialog',
@@ -1525,18 +1527,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     },
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i1$2.MatDialog }], propDecorators: { fileViewer: [{
-                type: Input
-            }], dialogConfig: [{
-                type: Input
-            }], openDialog: [{
+        }], ctorParameters: () => [{ type: i1$2.MatDialog }], propDecorators: { fileViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileViewer", required: true }] }], dialogConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogConfig", required: false }] }], openDialog: [{
                 type: HostListener,
                 args: ['click']
             }] } });
 
 class C3FileViewerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerModule, declarations: [FullScreenDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerModule, declarations: [FullScreenDirective,
             C3FileViewerComponent,
             C3FileViewerActionsComponent,
             C3FileViewerImageComponent,
@@ -1545,9 +1543,9 @@ class C3FileViewerModule {
             C3FileViewerDialogComponent,
             C3FileViewerDialog,
             C3FileViewerDefaultComponent], imports: [CommonModule, C3SafeUrlPipe, MatDialogModule, MatIconModule, MatButtonModule], exports: [FullScreenDirective, C3FileViewerComponent, C3FileViewerDialogComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule, MatDialogModule, MatIconModule, MatButtonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule, MatDialogModule, MatIconModule, MatButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileViewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1569,10 +1567,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class C3FileDisplayCardComponent {
     constructor() {
-        this.fileObjectUrl = input.required();
-        this.displayFn = input((file) => file.name);
-        this.deletable = input(false);
-        this.size = input('32');
+        this.fileObjectUrl = input.required(...(ngDevMode ? [{ debugName: "fileObjectUrl" }] : []));
+        this.displayFn = input((file) => file.name, ...(ngDevMode ? [{ debugName: "displayFn" }] : []));
+        this.deletable = input(false, ...(ngDevMode ? [{ debugName: "deletable" }] : []));
+        this.size = input('32', ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.onDelete = output();
         this.onDownload = output();
         this.getFileType = computed(() => {
@@ -1586,37 +1584,37 @@ class C3FileDisplayCardComponent {
                     return 'video';
             }
             return 'unknown';
-        });
+        }, ...(ngDevMode ? [{ debugName: "getFileType" }] : []));
         this.getFileObjectUrl = computed(() => {
             const file = this.fileObjectUrl();
             return file && file.objectUrl ? file.objectUrl : null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "getFileObjectUrl" }] : []));
         this.getFileName = computed(() => {
             const file = this.fileObjectUrl();
             return file ? this.displayFn()(file) : '';
-        });
+        }, ...(ngDevMode ? [{ debugName: "getFileName" }] : []));
         this.getDisplayName = computed(() => {
             const file = this.fileObjectUrl();
             return file ? this.displayFn()(file) : '';
-        });
+        }, ...(ngDevMode ? [{ debugName: "getDisplayName" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: C3FileDisplayCardComponent, isStandalone: true, selector: "c3-file-display-card", inputs: { fileObjectUrl: { classPropertyName: "fileObjectUrl", publicName: "fileObjectUrl", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete", onDownload: "onDownload" }, ngImport: i0, template: "<button\n  class=\"file-card border\"\n  [class.size-16]=\"size() === '16'\"\n  [class.size-32]=\"size() === '32'\"\n  [class.size-64]=\"size() === '64'\"\n  [class.size-128]=\"size() === '128'\"\n  [class.size-256]=\"size() === '256'\"\n>\n  @if(deletable()) {\n    <div class=\"actions\">\n      <button mat-icon-button (click)=\"onDownload.emit()\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  } @if(fileObjectUrl()) {\n    @switch (getFileType()) { @case ('image') {\n      <img\n        class=\"h-full w-full object-cover\"\n        [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n        [alt]=\"getFileName()\"\n      />\n      } @case ('application') {\n      <mat-icon> file-pdf-box </mat-icon>\n      } @case ('video') {\n      <mat-icon> video </mat-icon>\n      }\n    }\n\n    <div class=\"informations flex justify-between items-center\">\n      <span class=\"text-xs text-white\">\n        {{ getDisplayName() }}\n      </span>\n    </div>\n  }\n</button>\n", styles: [":host{display:block;width:fit-content}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:hidden}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}:host .size-16{height:4rem;width:4rem}:host .size-32{height:8rem;width:8rem}:host .size-64{height:16rem;width:16rem}:host .size-128{height:32rem;width:32rem}:host .size-256{height:64rem;width:64rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: C3FileDisplayCardComponent, isStandalone: true, selector: "c3-file-display-card", inputs: { fileObjectUrl: { classPropertyName: "fileObjectUrl", publicName: "fileObjectUrl", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete", onDownload: "onDownload" }, ngImport: i0, template: "<button\n  class=\"file-card border\"\n  [class.size-16]=\"size() === '16'\"\n  [class.size-32]=\"size() === '32'\"\n  [class.size-64]=\"size() === '64'\"\n  [class.size-128]=\"size() === '128'\"\n  [class.size-256]=\"size() === '256'\"\n>\n  @if(deletable()) {\n    <div class=\"actions\">\n      <button mat-icon-button (click)=\"onDownload.emit()\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  } @if(fileObjectUrl()) {\n    @switch (getFileType()) { @case ('image') {\n      <img\n        class=\"h-full w-full object-cover\"\n        [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n        [alt]=\"getFileName()\"\n      />\n      } @case ('application') {\n      <mat-icon> file-pdf-box </mat-icon>\n      } @case ('video') {\n      <mat-icon> video </mat-icon>\n      }\n    }\n\n    <div class=\"informations flex justify-between items-center\">\n      <span class=\"text-xs text-white\">\n        {{ getDisplayName() }}\n      </span>\n    </div>\n  }\n</button>\n", styles: [":host{display:block;width:fit-content}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:hidden}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}:host .size-16{height:4rem;width:4rem}:host .size-32{height:8rem;width:8rem}:host .size-64{height:16rem;width:16rem}:host .size-128{height:32rem;width:32rem}:host .size-256{height:64rem;width:64rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-file-display-card', imports: [CommonModule, MatButtonModule, MatIconModule], template: "<button\n  class=\"file-card border\"\n  [class.size-16]=\"size() === '16'\"\n  [class.size-32]=\"size() === '32'\"\n  [class.size-64]=\"size() === '64'\"\n  [class.size-128]=\"size() === '128'\"\n  [class.size-256]=\"size() === '256'\"\n>\n  @if(deletable()) {\n    <div class=\"actions\">\n      <button mat-icon-button (click)=\"onDownload.emit()\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  } @if(fileObjectUrl()) {\n    @switch (getFileType()) { @case ('image') {\n      <img\n        class=\"h-full w-full object-cover\"\n        [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n        [alt]=\"getFileName()\"\n      />\n      } @case ('application') {\n      <mat-icon> file-pdf-box </mat-icon>\n      } @case ('video') {\n      <mat-icon> video </mat-icon>\n      }\n    }\n\n    <div class=\"informations flex justify-between items-center\">\n      <span class=\"text-xs text-white\">\n        {{ getDisplayName() }}\n      </span>\n    </div>\n  }\n</button>\n", styles: [":host{display:block;width:fit-content}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:hidden}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}:host .size-16{height:4rem;width:4rem}:host .size-32{height:8rem;width:8rem}:host .size-64{height:16rem;width:16rem}:host .size-128{height:32rem;width:32rem}:host .size-256{height:64rem;width:64rem}\n"] }]
-        }] });
+        }], propDecorators: { fileObjectUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileObjectUrl", required: true }] }], displayFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFn", required: false }] }], deletable: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onDelete: [{ type: i0.Output, args: ["onDelete"] }], onDownload: [{ type: i0.Output, args: ["onDownload"] }] } });
 
 class C3FileDisplayGridComponent {
     constructor() {
-        this.files = input.required();
-        this.config = input();
-        this.cardSize = input('32');
-        this.displayFn = input((file) => file.name);
-        this.deletable = input(false);
+        this.files = input.required(...(ngDevMode ? [{ debugName: "files" }] : []));
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+        this.cardSize = input('32', ...(ngDevMode ? [{ debugName: "cardSize" }] : []));
+        this.displayFn = input((file) => file.name, ...(ngDevMode ? [{ debugName: "displayFn" }] : []));
+        this.deletable = input(false, ...(ngDevMode ? [{ debugName: "deletable" }] : []));
         this.onDelete = output();
-        this.dialog = viewChild(C3FileViewerDialogComponent);
+        this.dialog = viewChild(C3FileViewerDialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
         this.fileViewer = new C3FileViewer({
             client: inject(HttpClient),
         });
@@ -1633,17 +1631,17 @@ class C3FileDisplayGridComponent {
         this.fileViewer.currentIndex = index;
         this.dialog()?.openDialog();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: C3FileDisplayGridComponent, isStandalone: true, selector: "c3-file-display-grid", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, cardSize: { classPropertyName: "cardSize", publicName: "cardSize", isSignal: true, isRequired: false, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"c3-file-display-grid\">\n    @for (file of files(); track $index) {\n    <c3-file-display-card\n      [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n      [size]=\"cardSize()\"\n      (click)=\"openDialog($event, $index)\"\n      (onDelete)=\"onDelete.emit(file)\"\n      (onDownload)=\"fileViewer.download(file)\"\n    />\n    }\n  </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:flex;flex-flow:wrap;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: C3FileDisplayCardComponent, selector: "c3-file-display-card", inputs: ["fileObjectUrl", "displayFn", "deletable", "size"], outputs: ["onDelete", "onDownload"] }, { kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: C3FileDisplayGridComponent, isStandalone: true, selector: "c3-file-display-grid", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, cardSize: { classPropertyName: "cardSize", publicName: "cardSize", isSignal: true, isRequired: false, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"c3-file-display-grid\">\n    @for (file of files(); track $index) {\n    <c3-file-display-card\n      [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n      [size]=\"cardSize()\"\n      (click)=\"openDialog($event, $index)\"\n      (onDelete)=\"onDelete.emit(file)\"\n      (onDownload)=\"fileViewer.download(file)\"\n    />\n    }\n  </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:flex;flex-flow:wrap;gap:1rem}\n"], dependencies: [{ kind: "component", type: C3FileDisplayCardComponent, selector: "c3-file-display-card", inputs: ["fileObjectUrl", "displayFn", "deletable", "size"], outputs: ["onDelete", "onDownload"] }, { kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-display-grid', imports: [CommonModule, C3FileDisplayCardComponent, C3FileViewerModule], template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"c3-file-display-grid\">\n    @for (file of files(); track $index) {\n    <c3-file-display-card\n      [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n      [size]=\"cardSize()\"\n      (click)=\"openDialog($event, $index)\"\n      (onDelete)=\"onDelete.emit(file)\"\n      (onDownload)=\"fileViewer.download(file)\"\n    />\n    }\n  </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:flex;flex-flow:wrap;gap:1rem}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'c3-file-display-grid', imports: [C3FileDisplayCardComponent, C3FileViewerModule], template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"c3-file-display-grid\">\n    @for (file of files(); track $index) {\n    <c3-file-display-card\n      [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n      [size]=\"cardSize()\"\n      (click)=\"openDialog($event, $index)\"\n      (onDelete)=\"onDelete.emit(file)\"\n      (onDownload)=\"fileViewer.download(file)\"\n    />\n    }\n  </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:flex;flex-flow:wrap;gap:1rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], cardSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardSize", required: false }] }], displayFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFn", required: false }] }], deletable: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletable", required: false }] }], onDelete: [{ type: i0.Output, args: ["onDelete"] }], dialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => C3FileViewerDialogComponent), { isSignal: true }] }] } });
 
 class C3FileDisplayIconComponent {
     constructor() {
-        this.fileType = input.required();
+        this.fileType = input.required(...(ngDevMode ? [{ debugName: "fileType" }] : []));
         this.displayedIcon = computed(() => {
             switch (this.fileType()) {
                 case 'image/webp':
@@ -1662,7 +1660,7 @@ class C3FileDisplayIconComponent {
                 default:
                     return 'content_copy';
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "displayedIcon" }] : []));
         this.color = computed(() => {
             switch (this.fileType()) {
                 case 'image/webp':
@@ -1681,15 +1679,15 @@ class C3FileDisplayIconComponent {
                 default:
                     return 'text-gray';
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "color" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", 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: "20.3.14", ngImport: i0, type: C3FileDisplayIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", 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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayIconComponent, decorators: [{
             type: Component,
             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"] }]
-        }] });
+        }], propDecorators: { fileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileType", required: true }] }] } });
 
 /**
  * A directive that prevents the default action and stops event propagation on click events.
@@ -1703,10 +1701,10 @@ class C3PreventClickDirective {
         event.preventDefault();
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3PreventClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: C3PreventClickDirective, isStandalone: true, selector: "[c3-prevent-click]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3PreventClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: C3PreventClickDirective, isStandalone: true, selector: "[c3-prevent-click]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3PreventClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3PreventClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3-prevent-click]',
@@ -1725,7 +1723,7 @@ class C3PreventKeyboardEventDirective {
         /**
          * The keyboard key to prevent the default action and stop event propagation for. Defaults to 'enter'.
          */
-        this.key = 'enter';
+        this.key = input('enter', ...(ngDevMode ? [{ debugName: "key" }] : []));
     }
     /**
      * HostListener for the 'keydown' event.
@@ -1733,25 +1731,23 @@ class C3PreventKeyboardEventDirective {
      */
     onKeyDown(event) {
         // Check if the key pressed matches the input key.
-        if (event.key?.toLocaleLowerCase() === this.key.toLocaleLowerCase()) {
+        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.2.7", ngImport: i0, type: C3PreventKeyboardEventDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: C3PreventKeyboardEventDirective, isStandalone: true, selector: "[c3-prevent-keyboard-event]", inputs: { key: "key" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3PreventKeyboardEventDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: C3PreventKeyboardEventDirective, isStandalone: true, selector: "[c3-prevent-keyboard-event]", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3PreventKeyboardEventDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3PreventKeyboardEventDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3-prevent-keyboard-event]',
                     standalone: true,
                 }]
-        }], propDecorators: { key: [{
-                type: Input
-            }], onKeyDown: [{
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], onKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
@@ -1760,10 +1756,10 @@ class C3StopPropagationDirective {
     onClick(event) {
         event.stopImmediatePropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: C3StopPropagationDirective, isStandalone: true, selector: "[c3-stop-click-propagation]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: C3StopPropagationDirective, isStandalone: true, selector: "[c3-stop-click-propagation]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3StopPropagationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3StopPropagationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3-stop-click-propagation]',
@@ -1778,31 +1774,31 @@ const C3_FILE_DISPLAY_LIST = new InjectionToken('C3_FILE_DISPLAY_LIST');
 
 class C3FileDisplayListColumnDefDirective {
     constructor() {
-        this.title = input.required({
-            alias: 'c3FileDisplayListColumnDef',
-        });
-        this.classList = input([]);
+        this.title = input.required(...(ngDevMode ? [{ debugName: "title", alias: 'c3FileDisplayListColumnDef' }] : [{
+                alias: 'c3FileDisplayListColumnDef',
+            }]));
+        this.classList = input([], ...(ngDevMode ? [{ debugName: "classList" }] : []));
         this._table = inject(C3_FILE_DISPLAY_LIST, { optional: true });
-        this.headerCellDef = contentChild(C3FileDisplayListHeaderCellDefDirective);
-        this.cellDef = contentChild(C3FileDisplayListCellDefDirective);
+        this.headerCellDef = contentChild(C3FileDisplayListHeaderCellDefDirective, ...(ngDevMode ? [{ debugName: "headerCellDef" }] : []));
+        this.cellDef = contentChild(C3FileDisplayListCellDefDirective, ...(ngDevMode ? [{ debugName: "cellDef" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListColumnDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.7", type: C3FileDisplayListColumnDefDirective, isStandalone: true, selector: "[c3FileDisplayListColumnDef]", inputs: { title: { classPropertyName: "title", publicName: "c3FileDisplayListColumnDef", isSignal: true, isRequired: true, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerCellDef", first: true, predicate: C3FileDisplayListHeaderCellDefDirective, descendants: true, isSignal: true }, { propertyName: "cellDef", first: true, predicate: C3FileDisplayListCellDefDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayListColumnDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.14", type: C3FileDisplayListColumnDefDirective, isStandalone: true, selector: "[c3FileDisplayListColumnDef]", inputs: { title: { classPropertyName: "title", publicName: "c3FileDisplayListColumnDef", isSignal: true, isRequired: true, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerCellDef", first: true, predicate: C3FileDisplayListHeaderCellDefDirective, descendants: true, isSignal: true }, { propertyName: "cellDef", first: true, predicate: C3FileDisplayListCellDefDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListColumnDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayListColumnDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3FileDisplayListColumnDef]',
                 }]
-        }] });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "c3FileDisplayListColumnDef", required: true }] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], headerCellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => C3FileDisplayListHeaderCellDefDirective), { isSignal: true }] }], cellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => C3FileDisplayListCellDefDirective), { isSignal: true }] }] } });
 class C3FileDisplayListHeaderCellDefDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListHeaderCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: C3FileDisplayListHeaderCellDefDirective, isStandalone: true, selector: "[c3FileDisplayListHeaderCellDef]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayListHeaderCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: C3FileDisplayListHeaderCellDefDirective, isStandalone: true, selector: "[c3FileDisplayListHeaderCellDef]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListHeaderCellDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayListHeaderCellDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3FileDisplayListHeaderCellDef]',
@@ -1812,10 +1808,10 @@ class C3FileDisplayListCellDefDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: C3FileDisplayListCellDefDirective, isStandalone: true, selector: "[c3FileDisplayListCellDef]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayListCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: C3FileDisplayListCellDefDirective, isStandalone: true, selector: "[c3FileDisplayListCellDef]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListCellDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayListCellDefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3FileDisplayListCellDef]',
@@ -1824,14 +1820,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class C3FileDisplayListComponent {
     constructor() {
-        this.files = input.required();
-        this.config = input();
-        this.displayFn = input((file) => file.name);
-        this.columns = input(['icon', 'name', 'date']);
-        this.deletable = input(false);
+        this.files = input.required(...(ngDevMode ? [{ debugName: "files" }] : []));
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+        this.displayFn = input((file) => file.name, ...(ngDevMode ? [{ debugName: "displayFn" }] : []));
+        this.columns = input(['icon', 'name', 'date'], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.deletable = input(false, ...(ngDevMode ? [{ debugName: "deletable" }] : []));
         this.onDelete = output();
-        this.dialog = viewChild(C3FileViewerDialogComponent);
-        this._columnDefs = contentChildren(C3FileDisplayListColumnDefDirective);
+        this.dialog = viewChild(C3FileViewerDialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
+        this._columnDefs = contentChildren(C3FileDisplayListColumnDefDirective, ...(ngDevMode ? [{ debugName: "_columnDefs" }] : []));
         this._viewContainer = inject(ViewContainerRef);
         this.fileViewer = new C3FileViewer({
             client: inject(HttpClient),
@@ -1852,15 +1848,15 @@ class C3FileDisplayListComponent {
     getColumnDef(columnName) {
         return this._columnDefs().find((col) => col.title() === columnName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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 }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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 }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, providers: [
             {
                 provide: C3_FILE_DISPLAY_LIST,
                 useExisting: C3FileDisplayListComponent,
             },
-        ], queries: [{ propertyName: "_columnDefs", predicate: C3FileDisplayListColumnDefDirective, isSignal: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n<!-- header -->\n  <table class=\"file-table\">\n    <thead>\n      <tr>\n        @for (columnName of columns(); track columnName) {\n          <th [class.full]=\"columnName === 'name'\" [class.icon]=\"columnName === 'icon'\">\n            @if (getColumnDef(columnName)?.headerCellDef()) {\n              <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.headerCellDef()!.template\"></ng-container>\n            } @else {\n              @if (columnName === 'icon') {\n                <span></span>\n              } @else if (columnName === 'name') {\n                <span>Nom</span>\n              } @else if (columnName === 'date') {\n                <span>Date d'ajout</span>\n              }\n            }\n          </th>\n        }\n        <th class=\"actions\">\n          <ng-content></ng-content>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (file of files(); track $index) {\n        <tr (click)=\"openDialog($event, $index)\">\n          @for (columnName of columns(); track columnName) {\n            @if (columnName === 'name') {\n              <td class=\"name full\">\n                @if (getColumnDef(columnName)?.cellDef()) {\n                  <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n                } @else {\n                  <span>{{ displayFn()(file) }}</span>\n                }\n              </td>\n            } @else if (columnName === 'icon') {\n              <td class=\"icon\">\n                @if (getColumnDef(columnName)?.cellDef()) {\n                  <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n                } @else {\n                  <c3-file-display-icon [fileType]=\"file.type\" />\n                }\n              </td>\n            } @else {\n              <td [classList]=\"getColumnDef(columnName)?.classList()\">\n                @if (getColumnDef(columnName)?.cellDef()) {\n                  <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n                } @else {\n                  @if (columnName === 'date') {\n                    <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n                  }\n                }\n              </td>\n            }\n          }\n          <td class=\"actions\">\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n              <button mat-menu-item (click)=\"openDialog($event, $index)\">\n                Ouvrir\n              </button>\n              <button mat-menu-item (click)=\"fileViewer.download(file)\">T\u00E9l\u00E9charger</button>\n              @if (deletable()) {\n                <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n              }\n            </mat-menu>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</c3-file-viewer-dialog>\n\n<!-- <div class=\"file-display-list\">\n  @for (file of files(); track $index) {\n  <button>\n    @for (columnName of columns(); track columnName) {\n      @if (columnName === 'name') {\n        <div class=\"name\">\n          @if (getColumnDef(columnName)?.cellDef()) {\n            <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n          } @else {\n            <span>{{ displayFn()(file) }}</span>\n          }\n        </div>\n      } @else if (columnName === 'icon') {\n        <div class=\"icon-cell\">\n          @if (getColumnDef(columnName)?.cellDef()) {\n            <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n          } @else {\n            <div class=\"icon\">\n              <c3-file-display-icon [fileType]=\"file.type\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"cell\">\n          @if (getColumnDef(columnName)?.cellDef()) {\n            <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n          } @else {\n            @if (columnName === 'date') {\n              <div class=\"date-label\">\n                <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n              </div>\n            }\n          }\n        </div>\n      }\n    }\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item (click)=\"openDialog($event, $index)\">\n        Ouvrir\n      </button>\n      @if (deletable()) {\n      <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n      }\n    </mat-menu>\n  </button>\n  }\n</div> -->\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .file-table{width:100%;border-collapse:collapse}:host .file-table th,:host .file-table td{padding:.5rem;text-align:left;border-bottom:1px solid var(--mat-divider-color)}:host .file-table th{font-size:1.5rem;font-weight:700;background-color:var(--mat-table-header-container-background-color)}:host .file-table tr:hover{background-color:var(--background-hover)}:host .file-table .icon{width:56px;min-width:56px;text-align:center}:host .file-table :where(th,td):not(.full){width:0;white-space:nowrap}:host .file-table .actions{width:48px;text-align:center}\n"], dependencies: [{ kind: "directive", type: C3StopPropagationDirective, selector: "[c3-stop-click-propagation]" }, { kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }, { kind: "component", type: C3FileDisplayIconComponent, selector: "c3-file-display-icon", inputs: ["fileType"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+        ], queries: [{ propertyName: "_columnDefs", predicate: C3FileDisplayListColumnDefDirective, isSignal: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n<!-- header -->\n  <table class=\"file-table\">\n    <thead>\n      <tr>\n        @for (columnName of columns(); track columnName) {\n          <th [class.full]=\"columnName === 'name'\" [class.icon]=\"columnName === 'icon'\">\n            @if (getColumnDef(columnName)?.headerCellDef()) {\n              <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.headerCellDef()!.template\"></ng-container>\n            } @else {\n              @if (columnName === 'icon') {\n                <span></span>\n              } @else if (columnName === 'name') {\n                <span>Nom</span>\n              } @else if (columnName === 'date') {\n                <span>Date d'ajout</span>\n              }\n            }\n          </th>\n        }\n        <th class=\"actions\">\n          <ng-content></ng-content>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (file of files(); track $index) {\n        <tr (click)=\"openDialog($event, $index)\">\n          @for (columnName of columns(); track columnName) {\n            @if (columnName === 'name') {\n              <td class=\"name full\">\n                @if (getColumnDef(columnName)?.cellDef()) {\n                  <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n                } @else {\n                  <span>{{ displayFn()(file) }}</span>\n                }\n              </td>\n            } @else if (columnName === 'icon') {\n              <td class=\"icon\">\n                @if (getColumnDef(columnName)?.cellDef()) {\n                  <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n                } @else {\n                  <c3-file-display-icon [fileType]=\"file.type\" />\n                }\n              </td>\n            } @else {\n              <td [classList]=\"getColumnDef(columnName)?.classList()\">\n                @if (getColumnDef(columnName)?.cellDef()) {\n                  <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n                } @else {\n                  @if (columnName === 'date') {\n                    <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n                  }\n                }\n              </td>\n            }\n          }\n          <td class=\"actions\">\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n              <button mat-menu-item (click)=\"openDialog($event, $index)\">\n                Ouvrir\n              </button>\n              <button mat-menu-item (click)=\"fileViewer.download(file)\">T\u00E9l\u00E9charger</button>\n              @if (deletable()) {\n                <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n              }\n            </mat-menu>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</c3-file-viewer-dialog>\n\n<!-- <div class=\"file-display-list\">\n  @for (file of files(); track $index) {\n  <button>\n    @for (columnName of columns(); track columnName) {\n      @if (columnName === 'name') {\n        <div class=\"name\">\n          @if (getColumnDef(columnName)?.cellDef()) {\n            <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n          } @else {\n            <span>{{ displayFn()(file) }}</span>\n          }\n        </div>\n      } @else if (columnName === 'icon') {\n        <div class=\"icon-cell\">\n          @if (getColumnDef(columnName)?.cellDef()) {\n            <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n          } @else {\n            <div class=\"icon\">\n              <c3-file-display-icon [fileType]=\"file.type\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"cell\">\n          @if (getColumnDef(columnName)?.cellDef()) {\n            <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n          } @else {\n            @if (columnName === 'date') {\n              <div class=\"date-label\">\n                <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n              </div>\n            }\n          }\n        </div>\n      }\n    }\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item (click)=\"openDialog($event, $index)\">\n        Ouvrir\n      </button>\n      @if (deletable()) {\n      <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n      }\n    </mat-menu>\n  </button>\n  }\n</div> -->\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .file-table{width:100%;border-collapse:collapse}:host .file-table th,:host .file-table td{padding:.5rem;text-align:left;border-bottom:1px solid var(--mat-divider-color)}:host .file-table th{font-size:1.5rem;font-weight:700;background-color:var(--mat-table-header-container-background-color)}:host .file-table tr:hover{background-color:var(--background-hover)}:host .file-table .icon{width:56px;min-width:56px;text-align:center}:host .file-table :where(th,td):not(.full){width:0;white-space:nowrap}:host .file-table .actions{width:48px;text-align:center}\n"], dependencies: [{ kind: "directive", type: C3StopPropagationDirective, selector: "[c3-stop-click-propagation]" }, { kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }, { kind: "component", type: C3FileDisplayIconComponent, selector: "c3-file-display-icon", inputs: ["fileType"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.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"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-file-display-list', imports: [
                         C3StopPropagationDirective,
@@ -1877,11 +1873,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             useExisting: C3FileDisplayListComponent,
                         },
                     ], template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n<!-- header -->\n  <table class=\"file-table\">\n    <thead>\n      <tr>\n        @for (columnName of columns(); track columnName) {\n          <th [class.full]=\"columnName === 'name'\" [class.icon]=\"columnName === 'icon'\">\n            @if (getColumnDef(columnName)?.headerCellDef()) {\n              <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.headerCellDef()!.template\"></ng-container>\n            } @else {\n              @if (columnName === 'icon') {\n                <span></span>\n              } @else if (columnName === 'name') {\n                <span>Nom</span>\n              } @else if (columnName === 'date') {\n                <span>Date d'ajout</span>\n              }\n            }\n          </th>\n        }\n        <th class=\"actions\">\n          <ng-content></ng-content>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (file of files(); track $index) {\n        <tr (click)=\"openDialog($event, $index)\">\n          @for (columnName of columns(); track columnName) {\n            @if (columnName === 'name') {\n              <td class=\"name full\">\n                @if (getColumnDef(columnName)?.cellDef()) {\n                  <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n                } @else {\n                  <span>{{ displayFn()(file) }}</span>\n                }\n              </td>\n            } @else if (columnName === 'icon') {\n              <td class=\"icon\">\n                @if (getColumnDef(columnName)?.cellDef()) {\n                  <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n                } @else {\n                  <c3-file-display-icon [fileType]=\"file.type\" />\n                }\n              </td>\n            } @else {\n              <td [classList]=\"getColumnDef(columnName)?.classList()\">\n                @if (getColumnDef(columnName)?.cellDef()) {\n                  <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n                } @else {\n                  @if (columnName === 'date') {\n                    <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n                  }\n                }\n              </td>\n            }\n          }\n          <td class=\"actions\">\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n              <button mat-menu-item (click)=\"openDialog($event, $index)\">\n                Ouvrir\n              </button>\n              <button mat-menu-item (click)=\"fileViewer.download(file)\">T\u00E9l\u00E9charger</button>\n              @if (deletable()) {\n                <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n              }\n            </mat-menu>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</c3-file-viewer-dialog>\n\n<!-- <div class=\"file-display-list\">\n  @for (file of files(); track $index) {\n  <button>\n    @for (columnName of columns(); track columnName) {\n      @if (columnName === 'name') {\n        <div class=\"name\">\n          @if (getColumnDef(columnName)?.cellDef()) {\n            <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n          } @else {\n            <span>{{ displayFn()(file) }}</span>\n          }\n        </div>\n      } @else if (columnName === 'icon') {\n        <div class=\"icon-cell\">\n          @if (getColumnDef(columnName)?.cellDef()) {\n            <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n          } @else {\n            <div class=\"icon\">\n              <c3-file-display-icon [fileType]=\"file.type\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"cell\">\n          @if (getColumnDef(columnName)?.cellDef()) {\n            <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n          } @else {\n            @if (columnName === 'date') {\n              <div class=\"date-label\">\n                <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n              </div>\n            }\n          }\n        </div>\n      }\n    }\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item (click)=\"openDialog($event, $index)\">\n        Ouvrir\n      </button>\n      @if (deletable()) {\n      <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n      }\n    </mat-menu>\n  </button>\n  }\n</div> -->\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .file-table{width:100%;border-collapse:collapse}:host .file-table th,:host .file-table td{padding:.5rem;text-align:left;border-bottom:1px solid var(--mat-divider-color)}:host .file-table th{font-size:1.5rem;font-weight:700;background-color:var(--mat-table-header-container-background-color)}:host .file-table tr:hover{background-color:var(--background-hover)}:host .file-table .icon{width:56px;min-width:56px;text-align:center}:host .file-table :where(th,td):not(.full){width:0;white-space:nowrap}:host .file-table .actions{width:48px;text-align:center}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], displayFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFn", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], deletable: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletable", required: false }] }], onDelete: [{ type: i0.Output, args: ["onDelete"] }], dialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => C3FileViewerDialogComponent), { isSignal: true }] }], _columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => C3FileDisplayListColumnDefDirective), { isSignal: true }] }] } });
 
 class C3FileDisplayerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
             C3FileDisplayGridComponent,
             C3FileDisplayListComponent,
             C3FileDisplayCardComponent,
@@ -1895,13 +1891,13 @@ class C3FileDisplayerModule {
             C3FileDisplayListColumnDefDirective,
             C3FileDisplayListHeaderCellDefDirective,
             C3FileDisplayListCellDefDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
             C3FileDisplayGridComponent,
             C3FileDisplayListComponent,
             C3FileDisplayCardComponent,
             C3FileDisplayIconComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -1929,20 +1925,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class C3ExpansionHeaderComponent {
     constructor() {
-        this.title = input();
-        this.isExpanded = input(false);
+        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+        this.isExpanded = input(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
         this.toggleExpand = output();
     }
     get hostClass() {
         return 'c3-expansion-header';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3ExpansionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3ExpansionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.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: "19.2.7", ngImport: i0, type: C3ExpansionHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3ExpansionHeaderComponent, decorators: [{
             type: Component,
             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: [{
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], toggleExpand: [{ type: i0.Output, args: ["toggleExpand"] }], hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -1950,32 +1946,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 class C3AutoAnimateDirective {
     constructor(el) {
         this.el = el;
+        this.options = input(undefined, ...(ngDevMode ? [{ debugName: "options" }] : []));
     }
     ngAfterViewInit() {
-        autoAnimate(this.el.nativeElement, this.options);
+        autoAnimate(this.el.nativeElement, this.options());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3AutoAnimateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: C3AutoAnimateDirective, isStandalone: true, selector: "[c3AutoAnimate]", inputs: { options: "options" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3AutoAnimateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: C3AutoAnimateDirective, isStandalone: true, selector: "[c3AutoAnimate]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3AutoAnimateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3AutoAnimateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3AutoAnimate]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
 class C3ExpansionComponent {
     get hostClass() {
         return 'c3-expansion';
     }
     constructor() {
-        this.headerClass = input('c3-expansion-header');
-        this.isExpanded = model(false);
+        this.headerClass = input('c3-expansion-header', ...(ngDevMode ? [{ debugName: "headerClass" }] : []));
+        this.isExpanded = model(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
         this._elementRef = inject(ElementRef);
-        this.header = contentChild(C3ExpansionHeaderComponent);
+        this.header = contentChild(C3ExpansionHeaderComponent, ...(ngDevMode ? [{ debugName: "header" }] : []));
         effect(() => {
             this.expandSubsciption?.unsubscribe();
             this.header()?.toggleExpand.subscribe(() => this.toggleExpand());
@@ -1987,39 +1982,39 @@ class C3ExpansionComponent {
     toggleExpand() {
         this.isExpanded.set(!this.isExpanded());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3ExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3ExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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@if (isExpanded()) {\n  <div>\n    <ng-content></ng-content>\n  </div>\n}\n", dependencies: [{ kind: "component", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: ["title", "isExpanded"], outputs: ["toggleExpand"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3ExpansionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3ExpansionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-expansion', hostDirectives: [
                         {
                             directive: C3AutoAnimateDirective,
                             inputs: ['options'],
                         },
-                    ], 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: [{
+                    ], standalone: false, template: "<div [class]=\"headerClass()\">\n  <ng-content select=\"c3-expansion-header\">\n    <c3-expansion-header />\n  </ng-content>\n</div>\n\n@if (isExpanded()) {\n  <div>\n    <ng-content></ng-content>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { headerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerClass", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }, { type: i0.Output, args: ["isExpandedChange"] }], hostClass: [{
                 type: HostBinding,
                 args: ['class']
-            }] } });
+            }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => C3ExpansionHeaderComponent), { isSignal: true }] }] } });
 
 class C3ExpansionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3ExpansionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: C3ExpansionModule, declarations: [C3ExpansionComponent, C3ExpansionHeaderComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3ExpansionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", 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: "19.2.7", ngImport: i0, type: C3ExpansionModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3ExpansionModule, imports: [CommonModule,
             MatButtonModule,
             MatIconModule,
             MatTooltipModule,
             MatButtonModule,
             MatToolbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3ExpansionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3ExpansionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [C3ExpansionComponent, C3ExpansionHeaderComponent],
@@ -2040,10 +2035,10 @@ class C3SelectOnFocusDirective {
     onFocus(target) {
         setTimeout(() => target.select());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3SelectOnFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: C3SelectOnFocusDirective, isStandalone: true, selector: "[c3SelectOnFocus]", host: { listeners: { "focus": "onFocus($event.target)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3SelectOnFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: C3SelectOnFocusDirective, isStandalone: true, selector: "[c3SelectOnFocus]", host: { listeners: { "focus": "onFocus($event.target)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3SelectOnFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3SelectOnFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c3SelectOnFocus]',
@@ -2056,8 +2051,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class C3TreeComponent {
     constructor() {
-        this.treeData = model.required();
-        this.isLoading = model(false);
+        this.treeData = model.required(...(ngDevMode ? [{ debugName: "treeData" }] : []));
+        this.isLoading = model(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.treeDataSelected = output();
         this._transformer = (node, level) => ({
             expandable: !!node.children && node.children.length > 0,
@@ -2075,45 +2070,48 @@ class C3TreeComponent {
             this.dataSource.data = this.treeData();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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: "20.3.14", ngImport: i0, type: C3TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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: 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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3TreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-tree', imports: [
-                        CommonModule,
                         MatTreeModule,
                         MatIconModule,
                         MatRippleModule,
-                        MatProgressSpinnerModule,
+                        MatProgressSpinnerModule
                     ], 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"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { treeData: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeData", required: true }] }, { type: i0.Output, args: ["treeDataChange"] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], treeDataSelected: [{ type: i0.Output, args: ["treeDataSelected"] }] } });
 
 class C3FlowingMenuItemComponent {
     constructor() {
-        this.menuTpl = viewChild('menuTpl', {
-            read: TemplateRef,
-        });
-        this.contentTpl = viewChild('contentTpl', {
-            read: TemplateRef,
-        });
-        this.active = signal(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FlowingMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", 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" }); }
+        this.menuTpl = viewChild('menuTpl', ...(ngDevMode ? [{ debugName: "menuTpl", read: TemplateRef }] : [{
+                read: TemplateRef,
+            }]));
+        this.contentTpl = viewChild('contentTpl', ...(ngDevMode ? [{ debugName: "contentTpl", read: TemplateRef }] : [{
+                read: TemplateRef,
+            }]));
+        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FlowingMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", 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: "19.2.7", ngImport: i0, type: C3FlowingMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FlowingMenuItemComponent, decorators: [{
             type: Component,
             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" }]
-        }] });
+        }], propDecorators: { menuTpl: [{ type: i0.ViewChild, args: ['menuTpl', { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }], contentTpl: [{ type: i0.ViewChild, args: ['contentTpl', { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }] } });
 
 class C3FlowingMenuComponent {
     constructor() {
-        this.c3FlowingMenu = contentChildren(C3FlowingMenuItemComponent);
-        this.targetContentRef = viewChild('targetContent', {
-            read: ViewContainerRef,
-        });
-        this.selectedIndex = model(0);
+        this.c3FlowingMenu = contentChildren(C3FlowingMenuItemComponent, ...(ngDevMode ? [{ debugName: "c3FlowingMenu" }] : []));
+        this.targetContentRef = viewChild('targetContent', ...(ngDevMode ? [{ debugName: "targetContentRef", read: ViewContainerRef }] : [{
+                read: ViewContainerRef,
+            }]));
+        this.selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
         effect(() => {
             if (this.targetContentRef()) {
                 this.updateView();
@@ -2133,36 +2131,38 @@ class C3FlowingMenuComponent {
             this.targetContentRef().createEmbeddedView(selectedMenu.contentTpl());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FlowingMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FlowingMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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: "19.2.7", ngImport: i0, type: C3FlowingMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FlowingMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-flowing-menu', encapsulation: ViewEncapsulation.None, host: {
                         class: 'c3-flowing-menu',
                         ngSkipHydration: 'true',
                     }, 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: () => [] });
+        }], ctorParameters: () => [], propDecorators: { c3FlowingMenu: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => C3FlowingMenuItemComponent), { isSignal: true }] }], targetContentRef: [{ type: i0.ViewChild, args: ['targetContent', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }] } });
 
 class C3FlowingMenuItemContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FlowingMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: C3FlowingMenuItemContentComponent, isStandalone: false, selector: "c3-flowing-menu-item-content", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FlowingMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", 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: "19.2.7", ngImport: i0, type: C3FlowingMenuItemContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FlowingMenuItemContentComponent, decorators: [{
             type: Component,
             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: "19.2.7", ngImport: i0, type: C3FlowingMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: C3FlowingMenuModule, declarations: [C3FlowingMenuComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FlowingMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: C3FlowingMenuModule, declarations: [C3FlowingMenuComponent,
             C3FlowingMenuItemComponent,
             C3FlowingMenuItemContentComponent], imports: [CommonModule], exports: [C3FlowingMenuComponent,
             C3FlowingMenuItemComponent,
             C3FlowingMenuItemContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FlowingMenuModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FlowingMenuModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FlowingMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FlowingMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2181,7 +2181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class C3TraceCardComponent {
     constructor() {
-        this.align = signal('left');
+        this.align = signal('left', ...(ngDevMode ? [{ debugName: "align" }] : []));
     }
     get alignLeft() {
         return this.align() === 'left';
@@ -2189,10 +2189,10 @@ class C3TraceCardComponent {
     get alignRight() {
         return this.align() === 'right';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3TraceCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", 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: "19.2.7", ngImport: i0, type: C3TraceCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-trace-card', encapsulation: ViewEncapsulation.None, host: {
                         class: 'c3-trace-card',
@@ -2206,19 +2206,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             }] } });
 
 class C3TraceCardTitleComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3TraceCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: C3TraceCardTitleComponent, isStandalone: false, selector: "c3-trace-card-title", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", 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: "19.2.7", ngImport: i0, type: C3TraceCardTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardTitleComponent, decorators: [{
             type: Component,
             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: "19.2.7", ngImport: i0, type: C3TraceCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: C3TraceCardContentComponent, isStandalone: false, selector: "c3-trace-card-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", 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: "19.2.7", ngImport: i0, type: C3TraceCardContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-trace-card-content', standalone: false, template: "<ng-content></ng-content>\n" }]
         }] });
@@ -2230,10 +2230,10 @@ class C3TraceCardAlignLeftDirective {
         });
         this.c3CardTitle.align.set('left');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3TraceCardAlignLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: C3TraceCardAlignLeftDirective, isStandalone: true, selector: "c3-trace-card[align-left]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardAlignLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: C3TraceCardAlignLeftDirective, isStandalone: true, selector: "c3-trace-card[align-left]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3TraceCardAlignLeftDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardAlignLeftDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'c3-trace-card[align-left]',
@@ -2248,10 +2248,10 @@ class C3TraceCardAlignRightDirective {
         });
         this.c3CardTitle.align.set('right');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3TraceCardAlignRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: C3TraceCardAlignRightDirective, isStandalone: true, selector: "c3-trace-card[align-right]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardAlignRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: C3TraceCardAlignRightDirective, isStandalone: true, selector: "c3-trace-card[align-right]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3TraceCardAlignRightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardAlignRightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'c3-trace-card[align-right]',
@@ -2260,8 +2260,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class C3TraceCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3TraceCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: C3TraceCardModule, declarations: [C3TraceCardComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardModule, declarations: [C3TraceCardComponent,
             C3TraceCardTitleComponent,
             C3TraceCardContentComponent], imports: [CommonModule,
             C3TraceCardAlignLeftDirective,
@@ -2270,9 +2270,9 @@ class C3TraceCardModule {
             C3TraceCardContentComponent,
             C3TraceCardAlignLeftDirective,
             C3TraceCardAlignRightDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3TraceCardModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3TraceCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2298,8 +2298,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 class C3MenuService {
     constructor() {
         this.selectedElement = null;
-        this.currentRoute = signal('');
-        this.isHeadless = signal(false);
+        this.currentRoute = signal('', ...(ngDevMode ? [{ debugName: "currentRoute" }] : []));
+        this.isHeadless = signal(false, ...(ngDevMode ? [{ debugName: "isHeadless" }] : []));
         this._router = inject(Router);
         this._ar = inject(ActivatedRoute);
         this.currentRoute.set(this._router.routerState.snapshot.url);
@@ -2315,10 +2315,10 @@ class C3MenuService {
         this.selectedElement = element;
         this.selectedElement.classList.add("active-item");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3MenuService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3MenuService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3MenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3MenuService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2329,26 +2329,26 @@ class C3MenuComponent {
     constructor() {
         this._c3Menu = inject(C3MenuService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: C3MenuComponent, isStandalone: false, selector: "c3-menu", ngImport: i0, template: "@if(!_c3Menu.isHeadless()) {\n  <div id=\"app-menu\">\n    <div class=\"ui-scroll\">\n      <ul>\n        <ng-content></ng-content>\n      </ul>\n    </div>\n  </div>\n}\n<div class=\"layout-main\" [class.headless]=\"_c3Menu.isHeadless()\">\n  <router-outlet></router-outlet>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$6.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: C3MenuComponent, isStandalone: false, selector: "c3-menu", ngImport: i0, template: "@if(!_c3Menu.isHeadless()) {\n  <div id=\"app-menu\">\n    <div class=\"ui-scroll\">\n      <ul>\n        <ng-content></ng-content>\n      </ul>\n    </div>\n  </div>\n}\n<div class=\"layout-main\" [class.headless]=\"_c3Menu.isHeadless()\">\n  <router-outlet></router-outlet>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$6.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3MenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-menu', standalone: false, template: "@if(!_c3Menu.isHeadless()) {\n  <div id=\"app-menu\">\n    <div class=\"ui-scroll\">\n      <ul>\n        <ng-content></ng-content>\n      </ul>\n    </div>\n  </div>\n}\n<div class=\"layout-main\" [class.headless]=\"_c3Menu.isHeadless()\">\n  <router-outlet></router-outlet>\n</div>\n", styles: [":host{display:block}\n"] }]
         }] });
 
 class C3NavItemComponent {
     constructor() {
-        this.route = input.required();
-        this.itemTitle = input.required();
-        this.check = input(null);
-        this.isExternal = input(false);
-        this.element = viewChild('button', {
-            read: (ElementRef),
-        });
+        this.route = input.required(...(ngDevMode ? [{ debugName: "route" }] : []));
+        this.itemTitle = input.required(...(ngDevMode ? [{ debugName: "itemTitle" }] : []));
+        this.check = input(null, ...(ngDevMode ? [{ debugName: "check" }] : []));
+        this.isExternal = input(false, ...(ngDevMode ? [{ debugName: "isExternal" }] : []));
+        this.element = viewChild('button', ...(ngDevMode ? [{ debugName: "element", read: (ElementRef) }] : [{
+                read: (ElementRef),
+            }]));
         this._menu = inject(C3MenuService);
         this.destroyRef = inject(DestroyRef);
-        this.currentRouteChangeSubscription = signal(null);
+        this.currentRouteChangeSubscription = signal(null, ...(ngDevMode ? [{ debugName: "currentRouteChangeSubscription" }] : []));
         effect(() => {
             if (!this.currentRouteChangeSubscription() && this.element()) {
                 const subscribtion = this._menu.currentRouteChange
@@ -2362,20 +2362,22 @@ class C3NavItemComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: C3NavItemComponent, isStandalone: false, selector: "c3-nav-item", inputs: { route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: true, transformFunction: null }, itemTitle: { classPropertyName: "itemTitle", publicName: "itemTitle", isSignal: true, isRequired: true, transformFunction: null }, check: { classPropertyName: "check", publicName: "check", isSignal: true, isRequired: false, transformFunction: null }, isExternal: { classPropertyName: "isExternal", publicName: "isExternal", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "element", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<li #button>\n  <a matRipple matRippleColor=\"#ffffff66\" [routerLink]=\"isExternal() ? null : route()\" [href]=\"isExternal() ? route() : null\">\n    <ng-content></ng-content>\n    <span> {{ itemTitle() }} </span>\n  </a>\n</li>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: C3NavItemComponent, isStandalone: false, selector: "c3-nav-item", inputs: { route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: true, transformFunction: null }, itemTitle: { classPropertyName: "itemTitle", publicName: "itemTitle", isSignal: true, isRequired: true, transformFunction: null }, check: { classPropertyName: "check", publicName: "check", isSignal: true, isRequired: false, transformFunction: null }, isExternal: { classPropertyName: "isExternal", publicName: "isExternal", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "element", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<li #button>\n  <a matRipple matRippleColor=\"#ffffff66\" [routerLink]=\"isExternal() ? null : route()\" [href]=\"isExternal() ? route() : null\">\n    <ng-content></ng-content>\n    <span> {{ itemTitle() }} </span>\n  </a>\n</li>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3NavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3NavItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c3-nav-item', standalone: false, template: "<li #button>\n  <a matRipple matRippleColor=\"#ffffff66\" [routerLink]=\"isExternal() ? null : route()\" [href]=\"isExternal() ? route() : null\">\n    <ng-content></ng-content>\n    <span> {{ itemTitle() }} </span>\n  </a>\n</li>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: true }] }], itemTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTitle", required: true }] }], check: [{ type: i0.Input, args: [{ isSignal: true, alias: "check", required: false }] }], isExternal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExternal", required: false }] }], element: [{ type: i0.ViewChild, args: ['button', { ...{
+                            read: (ElementRef),
+                        }, isSignal: true }] }] } });
 
 class C3MenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: C3MenuModule, declarations: [C3MenuComponent, C3NavItemComponent], imports: [CommonModule, RouterModule, MatRippleModule], exports: [C3MenuComponent, C3NavItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3MenuModule, imports: [CommonModule, RouterModule, MatRippleModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: C3MenuModule, declarations: [C3MenuComponent, C3NavItemComponent], imports: [CommonModule, RouterModule, MatRippleModule], exports: [C3MenuComponent, C3NavItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3MenuModule, imports: [CommonModule, RouterModule, MatRippleModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3MenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3MenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, MatRippleModule],