c3-components 0.2.4 → 0.6.1

package/fesm2022/c3-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, inject, Injector, effect, Injectable, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, input, output, viewChild, computed, HostBinding, model } from '@angular/core';
+import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, inject, Injector, effect, Injectable, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, input, output, viewChild, computed, HostBinding, model, ElementRef, contentChild, contentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
@@ -18,7 +18,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i7 from '@angular/cdk/text-field';
-import * as i4 from '@angular/material/icon';
+import * as i2$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -26,15 +26,15 @@ import 'reflect-metadata';
 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 from '@angular/material/core';
+import * as i3$1 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 i4$1 from '@angular/material/tooltip';
+import * as i3 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$2 from '@angular/material/progress-spinner';
+import * as i4 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';
@@ -399,7 +399,7 @@ class C3DialogEmbedChildComponent {
     <div class="dialog-content">
       <ng-template #target></ng-template>
     </div>
-  </mat-dialog-content>`, isInline: true, styles: ["mat-dialog-content{display:flex;flex-direction:column;height:100%}mat-dialog-content .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}mat-dialog-content .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}mat-dialog-content .mat-toolbar span{color:inherit}mat-dialog-content .spacer{flex:1 1 auto;min-width:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.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"] }] }); }
+  </mat-dialog-content>`, isInline: true, styles: ["mat-dialog-content{display:flex;flex-direction:column;height:100%}mat-dialog-content .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}mat-dialog-content .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}mat-dialog-content .mat-toolbar span{color:inherit}mat-dialog-content .spacer{flex:1 1 auto;min-width:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogEmbedChildComponent, decorators: [{
             type: Component,
@@ -1231,7 +1231,7 @@ class C3FileDisplayCardComponent {
         return file ? this.displayFn()(file) : '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayCardComponent, isStandalone: true, selector: "c3-file-display-card", inputs: { fileObjectUrl: { classPropertyName: "fileObjectUrl", publicName: "fileObjectUrl", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<button\n  class=\"file-card border\"\n  [class.size-16]=\"size() === '16'\"\n  [class.size-32]=\"size() === '32'\"\n  [class.size-64]=\"size() === '64'\"\n  [class.size-128]=\"size() === '128'\"\n  [class.size-256]=\"size() === '256'\"\n>\n  @if(deletable()) {\n    <div class=\"actions\">\n      <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  } @if(fileObjectUrl()) {\n    @switch (getFileType()) { @case ('image') {\n      <img\n        class=\"h-full w-full object-cover\"\n        [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n        [alt]=\"getFileName()\"\n      />\n      } @case ('application') {\n      <mat-icon> file-pdf-box </mat-icon>\n      } @case ('video') {\n      <mat-icon> video </mat-icon>\n      }\n    }\n\n    <div class=\"informations flex justify-between items-center\">\n      <span class=\"text-xs text-white\">\n        {{ getDisplayName() }}\n      </span>\n    </div>\n  }\n</button>\n", styles: [":host{display:block}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:auto}: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}\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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayCardComponent, isStandalone: true, selector: "c3-file-display-card", inputs: { fileObjectUrl: { classPropertyName: "fileObjectUrl", publicName: "fileObjectUrl", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<button\n  class=\"file-card border\"\n  [class.size-16]=\"size() === '16'\"\n  [class.size-32]=\"size() === '32'\"\n  [class.size-64]=\"size() === '64'\"\n  [class.size-128]=\"size() === '128'\"\n  [class.size-256]=\"size() === '256'\"\n>\n  @if(deletable()) {\n    <div class=\"actions\">\n      <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  } @if(fileObjectUrl()) {\n    @switch (getFileType()) { @case ('image') {\n      <img\n        class=\"h-full w-full object-cover\"\n        [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n        [alt]=\"getFileName()\"\n      />\n      } @case ('application') {\n      <mat-icon> file-pdf-box </mat-icon>\n      } @case ('video') {\n      <mat-icon> video </mat-icon>\n      }\n    }\n\n    <div class=\"informations flex justify-between items-center\">\n      <span class=\"text-xs text-white\">\n        {{ getDisplayName() }}\n      </span>\n    </div>\n  }\n</button>\n", styles: [":host{display:block}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:auto}: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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayCardComponent, decorators: [{
             type: Component,
@@ -1317,7 +1317,7 @@ class C3FileDisplayIconComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.1", type: C3FileDisplayIconComponent, isStandalone: true, selector: "c3-file-display-icon", inputs: { fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-icon [ngClass]=\"color()\">{{ displayedIcon() }}</mat-icon>\n", styles: [":host{display:block}:host .text-primary{color:var(--primary-color)}:host .text-secondary{color:var(--secondary-color)}:host .text-success{color:var(--success-color)}:host .text-gray{color:var(--gray-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.1", type: C3FileDisplayIconComponent, isStandalone: true, selector: "c3-file-display-icon", inputs: { fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-icon [ngClass]=\"color()\">{{ displayedIcon() }}</mat-icon>\n", styles: [":host{display:block}:host .text-primary{color:var(--primary-color)}:host .text-secondary{color:var(--secondary-color)}:host .text-success{color:var(--success-color)}:host .text-gray{color:var(--gray-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayIconComponent, decorators: [{
             type: Component,
@@ -1353,7 +1353,7 @@ class C3FileDisplayListComponent {
         this.dialog()?.openDialog();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayListComponent, isStandalone: true, selector: "c3-file-display-list", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- header -->\n<div class=\"header\">\n  <div class=\"title full\">\n    <span>Nom</span>\n  </div>\n  <div class=\"title\">\n    <span>Date d'ajout</span>\n  </div>\n  <div class=\"icon\">\n    <mat-icon>more_vert</mat-icon>\n  </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"file-display-list\">\n    @for (file of files(); track $index) {\n    <button>\n      <div class=\"icon\">\n        <c3-file-display-icon [fileType]=\"file.type\" />\n      </div>\n      <div class=\"name\">\n        <span>{{ displayFn()(file) }}</span>\n      </div>\n      <div class=\"date-label\">\n        <span>{{\n          file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n        }}</span>\n      </div>\n      <button mat-icon-button>\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"openDialog($event, $index)\">\n          Ouvrir\n        </button>\n        @if (deletable()) {\n        <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n        }\n      </mat-menu>\n    </button>\n    }\n  </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}:host .file-display-list{display:flex;flex-direction:column}:host .file-display-list>button{display:flex;flex-direction:row;height:3rem;align-items:center;border-bottom:1px solid var(--mat-divider-color);background-color:var(--mdc-protected-button-container-color);text-align:start;padding:0 .5rem}:host .file-display-list>button:hover{background-color:var(--background-hover)}:host .file-display-list>button .icon{flex-basis:56px;width:56px}:host .file-display-list>button .name{flex:auto;flex-basis:304px;width:304px}:host .file-display-list>button .date-label{flex-basis:304px;width:304px}\n"], dependencies: [{ kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }, { kind: "component", type: C3FileDisplayIconComponent, selector: "c3-file-display-icon", inputs: ["fileType"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayListComponent, isStandalone: true, selector: "c3-file-display-list", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- header -->\n<div class=\"header\">\n  <div class=\"title full\">\n    <span>Nom</span>\n  </div>\n  <div class=\"title\">\n    <span>Date d'ajout</span>\n  </div>\n  <div class=\"icon\">\n    <mat-icon>more_vert</mat-icon>\n  </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"file-display-list\">\n    @for (file of files(); track $index) {\n    <button>\n      <div class=\"icon\">\n        <c3-file-display-icon [fileType]=\"file.type\" />\n      </div>\n      <div class=\"name\">\n        <span>{{ displayFn()(file) }}</span>\n      </div>\n      <div class=\"date-label\">\n        <span>{{\n          file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n        }}</span>\n      </div>\n      <button mat-icon-button>\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"openDialog($event, $index)\">\n          Ouvrir\n        </button>\n        @if (deletable()) {\n        <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n        }\n      </mat-menu>\n    </button>\n    }\n  </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}:host .file-display-list{display:flex;flex-direction:column}:host .file-display-list>button{display:flex;flex-direction:row;height:3rem;align-items:center;border-bottom:1px solid var(--mat-divider-color);background-color:var(--mdc-protected-button-container-color);text-align:start;padding:0 .5rem}:host .file-display-list>button:hover{background-color:var(--background-hover)}:host .file-display-list>button .icon{flex-basis:56px;width:56px}:host .file-display-list>button .name{flex:auto;flex-basis:304px;width:304px}:host .file-display-list>button .date-label{flex-basis:304px;width:304px}\n"], dependencies: [{ kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }, { kind: "component", type: C3FileDisplayIconComponent, selector: "c3-file-display-icon", inputs: ["fileType"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
             type: Component,
@@ -1407,17 +1407,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
 class C3ExpansionHeaderComponent {
     constructor() {
         this.title = input();
-        this.c3Expansion = input();
+        this.isExpanded = input(false);
+        this.toggleExpand = output();
     }
     get hostClass() {
         return 'c3-expansion-header';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.1", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, c3Expansion: { classPropertyName: "c3Expansion", publicName: "c3Expansion", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<ng-content>\n  <h4 class=\"text-lg\" *ngIf=\"title()\">\n    {{ title() }}\n  </h4>\n  <button\n    *ngIf=\"c3Expansion()\"\n    mat-icon-button\n    (click)=\"c3Expansion()?.toggleExpand()\"\n    [matTooltip]=\"c3Expansion()?.isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n  >\n    <mat-icon>{{\n      c3Expansion()?.isExpanded() ? \"expand_less\" : \"expand_more\"\n    }}</mat-icon>\n  </button>\n</ng-content>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<ng-content>\n  @if(title()) {\n    <h4 class=\"text-lg\">\n      {{ title() }}\n    </h4>\n  }\n  <button\n    mat-icon-button\n    (click)=\"toggleExpand.emit()\"\n    [matTooltip]=\"isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n  >\n    <mat-icon>{{\n      isExpanded() ? \"expand_less\" : \"expand_more\"\n    }}</mat-icon>\n  </button>\n</ng-content>\n", dependencies: [{ kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-expansion-header', encapsulation: ViewEncapsulation.None, template: "<ng-content>\n  <h4 class=\"text-lg\" *ngIf=\"title()\">\n    {{ title() }}\n  </h4>\n  <button\n    *ngIf=\"c3Expansion()\"\n    mat-icon-button\n    (click)=\"c3Expansion()?.toggleExpand()\"\n    [matTooltip]=\"c3Expansion()?.isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n  >\n    <mat-icon>{{\n      c3Expansion()?.isExpanded() ? \"expand_less\" : \"expand_more\"\n    }}</mat-icon>\n  </button>\n</ng-content>\n" }]
+            args: [{ selector: 'c3-expansion-header', encapsulation: ViewEncapsulation.None, template: "<ng-content>\n  @if(title()) {\n    <h4 class=\"text-lg\">\n      {{ title() }}\n    </h4>\n  }\n  <button\n    mat-icon-button\n    (click)=\"toggleExpand.emit()\"\n    [matTooltip]=\"isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n  >\n    <mat-icon>{{\n      isExpanded() ? \"expand_less\" : \"expand_more\"\n    }}</mat-icon>\n  </button>\n</ng-content>\n" }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -1447,16 +1448,24 @@ class C3ExpansionComponent {
     get hostClass() {
         return 'c3-expansion';
     }
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+    constructor() {
         this.headerClass = input('c3-expansion-header');
         this.isExpanded = model(false);
+        this._elementRef = inject(ElementRef);
+        this.header = contentChild(C3ExpansionHeaderComponent);
+        effect(() => {
+            this.expandSubsciption?.unsubscribe();
+            this.header()?.toggleExpand.subscribe(() => this.toggleExpand());
+        });
+    }
+    ngOnDestroy() {
+        this.expandSubsciption?.unsubscribe();
     }
     toggleExpand() {
         this.isExpanded.set(!this.isExpanded());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.1", type: C3ExpansionComponent, selector: "c3-expansion", inputs: { headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { properties: { "class": "this.hostClass" } }, hostDirectives: [{ directive: C3AutoAnimateDirective, inputs: ["options", "options"] }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n  <ng-content select=\"c3-expansion-header\">\n    <c3-expansion-header [c3Expansion]=\"this\" />\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", "c3Expansion"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.1", type: C3ExpansionComponent, selector: "c3-expansion", inputs: { headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "header", first: true, predicate: C3ExpansionHeaderComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: C3AutoAnimateDirective, inputs: ["options", "options"] }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n  <ng-content select=\"c3-expansion-header\">\n    <c3-expansion-header />\n  </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: ["title", "isExpanded"], outputs: ["toggleExpand"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, decorators: [{
             type: Component,
@@ -1465,8 +1474,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                             directive: C3AutoAnimateDirective,
                             inputs: ['options'],
                         },
-                    ], template: "<div [class]=\"headerClass()\">\n  <ng-content select=\"c3-expansion-header\">\n    <c3-expansion-header [c3Expansion]=\"this\" />\n  </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n  <ng-content></ng-content>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hostClass: [{
+                    ], template: "<div [class]=\"headerClass()\">\n  <ng-content select=\"c3-expansion-header\">\n    <c3-expansion-header />\n  </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -1571,7 +1580,7 @@ class C3TreeComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3TreeComponent, isStandalone: true, selector: "c3-tree", inputs: { treeData: { classPropertyName: "treeData", publicName: "treeData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeData: "treeDataChange", isLoading: "isLoadingChange", treeDataSelected: "treeDataSelected" }, ngImport: i0, template: "@if(isLoading()) {\r\n<div class=\"c3-tree-loader\">\r\n  <mat-spinner diameter=\"50\"></mat-spinner>\r\n</div>\r\n}\r\n\r\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n  <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding class=\"children\">\r\n    <button mat-ripple (click)=\"treeDataSelected.emit(node)\">\r\n      {{ node.name }}\r\n    </button>\r\n  </mat-tree-node>\r\n  <mat-tree-node\r\n    *matTreeNodeDef=\"let node; when: hasChild\"\r\n    matTreeNodePadding\r\n    class=\"has-children\"\r\n  >\r\n    <button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n      <mat-icon class=\"mat-icon-rtl-mirror\">\r\n        {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n      </mat-icon>\r\n    </button>\r\n    <div class=\"mat-tree-node-content\">\r\n      <ng-content>\r\n        <span>{{ node.name }}</span>\r\n      </ng-content>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n", styles: [":host{display:block;width:100%;position:relative;min-height:100%;padding:4px 0}.c3-tree-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}mat-tree{width:100%;height:100%;background-color:transparent;border:1px solid var(--mat-divider-color);border-radius:4px;overflow:auto}mat-tree mat-tree-node{display:flex;align-items:center;justify-content:start;gap:1rem}mat-tree mat-tree-node.has-children>button{height:32px;width:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:1px solid transparent;margin:.5rem}mat-tree mat-tree-node.has-children>button:hover{border-color:var(--mat-divider-color)}mat-tree mat-tree-node.has-children:hover{background-color:var(--background-hover)}mat-tree mat-tree-node.has-children .mat-tree-node-content{padding-right:.25rem;display:flex;justify-content:space-between;align-items:center;width:100%}mat-tree mat-tree-node.children button{width:100%;border-radius:.25rem;padding:0 1rem;height:2rem;text-align:left}mat-tree mat-tree-node.children button:hover{background-color:var(--background-hover)}mat-tree mat-tree-node:hover{background-color:var(--background-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$5.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$5.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$5.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$5.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$5.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3TreeComponent, isStandalone: true, selector: "c3-tree", inputs: { treeData: { classPropertyName: "treeData", publicName: "treeData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeData: "treeDataChange", isLoading: "isLoadingChange", treeDataSelected: "treeDataSelected" }, ngImport: i0, template: "@if(isLoading()) {\r\n<div class=\"c3-tree-loader\">\r\n  <mat-spinner diameter=\"50\"></mat-spinner>\r\n</div>\r\n}\r\n\r\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n  <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding class=\"children\">\r\n    <button mat-ripple (click)=\"treeDataSelected.emit(node)\">\r\n      {{ node.name }}\r\n    </button>\r\n  </mat-tree-node>\r\n  <mat-tree-node\r\n    *matTreeNodeDef=\"let node; when: hasChild\"\r\n    matTreeNodePadding\r\n    class=\"has-children\"\r\n  >\r\n    <button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n      <mat-icon class=\"mat-icon-rtl-mirror\">\r\n        {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n      </mat-icon>\r\n    </button>\r\n    <div class=\"mat-tree-node-content\">\r\n      <ng-content>\r\n        <span>{{ node.name }}</span>\r\n      </ng-content>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n", styles: [":host{display:block;width:100%;position:relative;min-height:100%;padding:4px 0}.c3-tree-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}mat-tree{width:100%;height:100%;background-color:transparent;border:1px solid var(--mat-divider-color);border-radius:4px;overflow:auto}mat-tree mat-tree-node{display:flex;align-items:center;justify-content:start;gap:1rem}mat-tree mat-tree-node.has-children>button{height:32px;width:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:1px solid transparent;margin:.5rem}mat-tree mat-tree-node.has-children>button:hover{border-color:var(--mat-divider-color)}mat-tree mat-tree-node.has-children:hover{background-color:var(--background-hover)}mat-tree mat-tree-node.has-children .mat-tree-node-content{padding-right:.25rem;display:flex;justify-content:space-between;align-items:center;width:100%}mat-tree mat-tree-node.children button{width:100%;border-radius:.25rem;padding:0 1rem;height:2rem;text-align:left}mat-tree mat-tree-node.children button:hover{background-color:var(--background-hover)}mat-tree mat-tree-node:hover{background-color:var(--background-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$5.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$5.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$5.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$5.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$5.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TreeComponent, decorators: [{
             type: Component,
@@ -1584,6 +1593,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                     ], 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: () => [] });
 
+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: "18.2.1", ngImport: i0, type: C3FlowingMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.1", type: C3FlowingMenuItemComponent, selector: "c3-flowing-menu-item", viewQueries: [{ propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #menuTpl>\n  <ng-content select=\"[menu-title]\"></ng-content>\n</ng-template>\n<ng-template #contentTpl>\n  <ng-content select=\"c3-flowing-menu-item-content\"></ng-content>\n</ng-template>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-flowing-menu-item', template: "<ng-template #menuTpl>\n  <ng-content select=\"[menu-title]\"></ng-content>\n</ng-template>\n<ng-template #contentTpl>\n  <ng-content select=\"c3-flowing-menu-item-content\"></ng-content>\n</ng-template>\n" }]
+        }] });
+
+class C3FlowingMenuComponent {
+    constructor() {
+        this.c3FlowingMenu = contentChildren(C3FlowingMenuItemComponent);
+        this.targetContentRef = viewChild('targetContent', {
+            read: ViewContainerRef,
+        });
+        this.selectedIndex = signal(0);
+        effect(() => {
+            if (this.targetContentRef()) {
+                this.updateView();
+            }
+        });
+    }
+    selectMenu(index) {
+        this.selectedIndex.set(index);
+        this.updateView();
+    }
+    updateView() {
+        if (!this.targetContentRef())
+            return;
+        this.targetContentRef().clear();
+        const selectedMenu = this.c3FlowingMenu()[this.selectedIndex()];
+        if (selectedMenu) {
+            this.targetContentRef().createEmbeddedView(selectedMenu.contentTpl());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FlowingMenuComponent, selector: "c3-flowing-menu", host: { attributes: { "ngSkipHydration": "true" }, classAttribute: "c3-flowing-menu" }, queries: [{ propertyName: "c3FlowingMenu", predicate: C3FlowingMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "targetContentRef", first: true, predicate: ["targetContent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<aside class=\"menu\">\n  @for(menu of c3FlowingMenu(); track menu; let i = $index) {\n    @if(menu.menuTpl()) {\n      <button (click)=\"selectMenu(i)\" [class.active]=\"i === selectedIndex()\">\n        <ng-container *ngTemplateOutlet=\"menu.menuTpl()!\"></ng-container>\n      </button>\n    }\n  }\n</aside>\n\n<section class=\"contenu\">\n  <ng-container #targetContent></ng-container>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-flowing-menu', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'c3-flowing-menu',
+                        ngSkipHydration: 'true',
+                    }, template: "<aside class=\"menu\">\n  @for(menu of c3FlowingMenu(); track menu; let i = $index) {\n    @if(menu.menuTpl()) {\n      <button (click)=\"selectMenu(i)\" [class.active]=\"i === selectedIndex()\">\n        <ng-container *ngTemplateOutlet=\"menu.menuTpl()!\"></ng-container>\n      </button>\n    }\n  }\n</aside>\n\n<section class=\"contenu\">\n  <ng-container #targetContent></ng-container>\n</section>\n" }]
+        }], ctorParameters: () => [] });
+
+class C3FlowingMenuItemContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3FlowingMenuItemContentComponent, selector: "c3-flowing-menu-item-content", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuItemContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-flowing-menu-item-content', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+class C3FlowingMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuModule, declarations: [C3FlowingMenuComponent,
+            C3FlowingMenuItemComponent,
+            C3FlowingMenuItemContentComponent], imports: [CommonModule], exports: [C3FlowingMenuComponent,
+            C3FlowingMenuItemComponent,
+            C3FlowingMenuItemContentComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        C3FlowingMenuComponent,
+                        C3FlowingMenuItemComponent,
+                        C3FlowingMenuItemContentComponent,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        C3FlowingMenuComponent,
+                        C3FlowingMenuItemComponent,
+                        C3FlowingMenuItemContentComponent,
+                    ],
+                }]
+        }] });
+
 /*
  * Public API Surface of c3-components
  */
@@ -1592,5 +1691,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListComponent, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, C3TreeComponent, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal };
+export { C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListComponent, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3FlowingMenuComponent, C3FlowingMenuItemComponent, C3FlowingMenuItemContentComponent, C3FlowingMenuModule, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, C3TreeComponent, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal };
 //# sourceMappingURL=c3-components.mjs.map