c3-components 0.9.3 → 0.10.0

package/fesm2022/c3-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, inject, Injector, effect, Injectable, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, input, output, computed, viewChild, HostBinding, model, ElementRef, contentChild, contentChildren } from '@angular/core';
+import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, viewChild, inject, Injector, effect, Injectable, input, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, output, 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';
@@ -217,6 +217,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 }]
         }] });
 
+class C3AlertDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3AlertDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3AlertDialogComponent, isStandalone: false, selector: "AlertDialogComponent", ngImport: i0, template: `
+    <mat-dialog-content>
+      <div [innerHtml]="data.text"></div>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-button [mat-dialog-close]="true">
+        {{ 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]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3AlertDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'AlertDialogComponent',
+                    template: `
+    <mat-dialog-content>
+      <div [innerHtml]="data.text"></div>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-button [mat-dialog-close]="true">
+        {{ data.acceptText || 'ok' }}
+      </button>
+    </mat-dialog-actions>
+  `,
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
 class ConfirmDialogComponent {
     constructor(dialogRef, data) {
         this.dialogRef = dialogRef;
@@ -354,185 +395,234 @@ class C3DialogEmbedChildComponent {
         this.dialogRef = dialogRef;
         this.data = data;
         this._cdr = _cdr;
+        // On utilise un signal pour stocker la référence du composant créé
         this.createdComponent = signal(null);
     }
     ngAfterViewInit() {
-        this.createdComponent.set(this.target.createComponent(this.data.component));
-        // detect the inputs of the component
-        if (!this.createdComponent)
+        // 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);
+            this.createdComponent.set(compRef);
+            // Injecter les inputs dans le composant
+            if (this.data.inputs) {
+                this._setInputs(this.data.component, this.data.inputs, compRef);
+            }
+        }
+        // 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="...">
+        else if (this.data.templateRef) {
+            this.createdComponent.set(null);
+        }
+        // Si on n’a rien, on ferme le dialog
+        else {
             this.dialogRef.close(false);
-        if (this.data.inputs)
-            this._setInputs(this.data.component, this.data.inputs, this.createdComponent());
+        }
+        // Déclenche manuellement le cycle de détection pour actualiser l'affichage
         this._cdr.detectChanges();
     }
+    /**
+     * Retourne la référence du composant créé (s’il y en a un),
+     * utile pour le service ou l’appelant.
+     */
+    createdComponentInstance() {
+        return this.createdComponent();
+    }
+    // Récupère la liste des @Input déclarés sur le composant
     _getInputProperties(component) {
         const inputs = [];
         const declaredInputs = component.prototype?.constructor['ɵcmp']?.declaredInputs;
-        for (const input of Object.keys(declaredInputs))
+        for (const input of Object.keys(declaredInputs)) {
             inputs.push(input);
+        }
         return inputs;
     }
+    // Assigne les inputs passés en configuration au composant dynamique
     _setInputs(component, inputs, componentRef) {
         const inputProperties = this._getInputProperties(component);
         for (const key of inputProperties) {
-            if (inputs[key]) {
+            if (inputs[key] !== undefined) {
                 componentRef.setInput(key, inputs[key]);
             }
         }
-        return component;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogEmbedChildComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: C3DialogEmbedChildComponent, isStandalone: false, selector: "C3DialogEmbedChildComponent", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `<div [class]="'dialog-content-container ' + (data.classContainer || '')">
-    @if(data.toolbar) {
-      <mat-toolbar
-        [color]="data.toolbar.color || 'default'"
-        class="py-1"
-      >
-        <span>{{ data.toolbar.title }}</span>
-        <span class="spacer"></span>
-        <button
-          *ngIf="data.toolbar.closeBtn"
-          mat-icon-button
-          mat-dialog-close
-          color="{{ data.toolbar.closeColor }}"
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: C3DialogEmbedChildComponent, isStandalone: false, selector: "C3DialogEmbedChildComponent", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
+    <div [class]="'dialog-content-container ' + (data.classContainer || '')">
+      @if (data.toolbar) {
+        <mat-toolbar
+          [color]="data.toolbar.color || 'default'"
+          class="py-1"
         >
-          <mat-icon>close</mat-icon>
-        </button>
-      </mat-toolbar>
-    }
-    <div [class]="'dialog-content '+ (data.classContent || '')">
-      <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()"
-              >
-                {{ action.label }}
-              </button>
-            }
-            @case ('raised') {
-              <button
-                mat-raised-button
-                [class]="action.class"
-                (click)="action.action()"
-              >
-                {{ action.label }}
-              </button>
-            }
-            @case ('stroked') {
-              <button
-                mat-stroked-button
-                [class]="action.class"
-                (click)="action.action()"
-              >
-                {{ action.label }}
-              </button>
-            }
-            @case ('flat') {
-              <button
-                mat-flat-button
-                [class]="action.class"
-                (click)="action.action()"
-              >
-                {{ action.label }}
-              </button>
-            }
-            @default {
-              <button
-                mat-button
-                [class]="action.class"
-                (click)="action.action()"
-              >
-                {{ action.label }}
-              </button>
-            }
-          }
+          <span>{{ data.toolbar.title }}</span>
+          <span class="spacer"></span>
+          <button
+            *ngIf="data.toolbar.closeBtn"
+            mat-icon-button
+            mat-dialog-close
+            color="{{ data.toolbar.closeColor }}"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-toolbar>
+      }
+
+      <div [class]="'dialog-content ' + (data.classContent || '')">
+        <!-- Si templateRef est présent, on l'affiche directement,
+             sinon on laisse la place au composant dynamique -->
+        @if (data.templateRef) {
+          <ng-container
+            *ngTemplateOutlet="data.templateRef"
+          ></ng-container>
+        }
+        @else {
+          <ng-template #target></ng-template>
         }
       </div>
-    }
-  </div>`, isInline: true, styles: [".dialog-content-container{display:flex;flex-direction:column;height:100%;padding:1rem;overflow:auto}.dialog-content-container .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}.dialog-content-container .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}.dialog-content-container .mat-toolbar span{color:inherit}.dialog-content-container .spacer{flex:1 1 auto;min-width:16px}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
+
+      @if (data.actions && data.actions.length > 0) {
+        <div [class]="'dialog-actions ' + (data.classActions || '')">
+          @for (action of data.actions; track action.label) {
+            @switch (action.apperance) {
+              @case ('basic') {
+                <button
+                  [class]="action.class"
+                  (click)="action.action()"
+                >
+                  {{ action.label }}
+                </button>
+              }
+              @case ('raised') {
+                <button
+                  mat-raised-button
+                  [class]="action.class"
+                  (click)="action.action()"
+                >
+                  {{ action.label }}
+                </button>
+              }
+              @case ('stroked') {
+                <button
+                  mat-stroked-button
+                  [class]="action.class"
+                  (click)="action.action()"
+                >
+                  {{ action.label }}
+                </button>
+              }
+              @case ('flat') {
+                <button
+                  mat-flat-button
+                  [class]="action.class"
+                  (click)="action.action()"
+                >
+                  {{ action.label }}
+                </button>
+              }
+              @default {
+                <button
+                  mat-button
+                  [class]="action.class"
+                  (click)="action.action()"
+                >
+                  {{ action.label }}
+                </button>
+              }
+            }
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".dialog-content-container{display:flex;flex-direction:column;height:100%;padding:1rem;overflow:auto}.dialog-content-container .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}.dialog-content-container .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}.dialog-content-container .mat-toolbar span{color:inherit}.dialog-content-container .spacer{flex:1 1 auto;min-width:16px}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", 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"
-      >
-        <span>{{ data.toolbar.title }}</span>
-        <span class="spacer"></span>
-        <button
-          *ngIf="data.toolbar.closeBtn"
-          mat-icon-button
-          mat-dialog-close
-          color="{{ data.toolbar.closeColor }}"
+            args: [{ selector: 'C3DialogEmbedChildComponent', template: `
+    <div [class]="'dialog-content-container ' + (data.classContainer || '')">
+      @if (data.toolbar) {
+        <mat-toolbar
+          [color]="data.toolbar.color || 'default'"
+          class="py-1"
         >
-          <mat-icon>close</mat-icon>
-        </button>
-      </mat-toolbar>
-    }
-    <div [class]="'dialog-content '+ (data.classContent || '')">
-      <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()"
-              >
-                {{ action.label }}
-              </button>
-            }
-            @case ('raised') {
-              <button
-                mat-raised-button
-                [class]="action.class"
-                (click)="action.action()"
-              >
-                {{ action.label }}
-              </button>
-            }
-            @case ('stroked') {
-              <button
-                mat-stroked-button
-                [class]="action.class"
-                (click)="action.action()"
-              >
-                {{ action.label }}
-              </button>
-            }
-            @case ('flat') {
-              <button
-                mat-flat-button
-                [class]="action.class"
-                (click)="action.action()"
-              >
-                {{ action.label }}
-              </button>
-            }
-            @default {
-              <button
-                mat-button
-                [class]="action.class"
-                (click)="action.action()"
-              >
-                {{ action.label }}
-              </button>
-            }
-          }
+          <span>{{ data.toolbar.title }}</span>
+          <span class="spacer"></span>
+          <button
+            *ngIf="data.toolbar.closeBtn"
+            mat-icon-button
+            mat-dialog-close
+            color="{{ data.toolbar.closeColor }}"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-toolbar>
+      }
+
+      <div [class]="'dialog-content ' + (data.classContent || '')">
+        <!-- Si templateRef est présent, on l'affiche directement,
+             sinon on laisse la place au composant dynamique -->
+        @if (data.templateRef) {
+          <ng-container
+            *ngTemplateOutlet="data.templateRef"
+          ></ng-container>
+        }
+        @else {
+          <ng-template #target></ng-template>
         }
       </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"] }]
+
+      @if (data.actions && data.actions.length > 0) {
+        <div [class]="'dialog-actions ' + (data.classActions || '')">
+          @for (action of data.actions; track action.label) {
+            @switch (action.apperance) {
+              @case ('basic') {
+                <button
+                  [class]="action.class"
+                  (click)="action.action()"
+                >
+                  {{ action.label }}
+                </button>
+              }
+              @case ('raised') {
+                <button
+                  mat-raised-button
+                  [class]="action.class"
+                  (click)="action.action()"
+                >
+                  {{ action.label }}
+                </button>
+              }
+              @case ('stroked') {
+                <button
+                  mat-stroked-button
+                  [class]="action.class"
+                  (click)="action.action()"
+                >
+                  {{ action.label }}
+                </button>
+              }
+              @case ('flat') {
+                <button
+                  mat-flat-button
+                  [class]="action.class"
+                  (click)="action.action()"
+                >
+                  {{ action.label }}
+                </button>
+              }
+              @default {
+                <button
+                  mat-button
+                  [class]="action.class"
+                  (click)="action.action()"
+                >
+                  {{ action.label }}
+                </button>
+              }
+            }
+          }
+        </div>
+      }
+    </div>
+  `, standalone: false, styles: [".dialog-content-container{display:flex;flex-direction:column;height:100%;padding:1rem;overflow:auto}.dialog-content-container .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}.dialog-content-container .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}.dialog-content-container .mat-toolbar span{color:inherit}.dialog-content-container .spacer{flex:1 1 auto;min-width:16px}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -541,46 +631,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 args: ['target', { read: ViewContainerRef }]
             }] } });
 
-class C3AlertDialogComponent {
-    constructor(dialogRef, data) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-    }
-    onNoClick() {
-        this.dialogRef.close();
+class C3DialogTemplateComponent {
+    constructor() {
+        this.templateRef = viewChild('internalTemplate', {
+            read: TemplateRef,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3AlertDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: C3AlertDialogComponent, isStandalone: false, selector: "AlertDialogComponent", ngImport: i0, template: `
-    <mat-dialog-content>
-      <div [innerHtml]="data.text"></div>
-    </mat-dialog-content>
-    <mat-dialog-actions>
-      <button mat-button [mat-dialog-close]="true">
-        {{ 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]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", 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.0.4", ngImport: i0, type: C3AlertDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogTemplateComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'AlertDialogComponent',
-                    template: `
-    <mat-dialog-content>
-      <div [innerHtml]="data.text"></div>
-    </mat-dialog-content>
-    <mat-dialog-actions>
-      <button mat-button [mat-dialog-close]="true">
-        {{ data.acceptText || 'ok' }}
-      </button>
-    </mat-dialog-actions>
-  `,
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
+            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"] }]
+        }] });
 
 class C3DialogService {
     constructor() {
@@ -681,6 +744,23 @@ class C3DialogService {
         });
         return this.createC3DialogResult(dialog);
     }
+    /**
+       * Ouvre un dialog à partir d'un TemplateRef.
+       * @param templateRef Le TemplateRef à afficher dans la boîte de dialogue.
+       * @param config (optionnel) Configuration pour le MatDialog (dimensions, position, etc.).
+       */
+    createDialogFromTemplate(templateRef, config) {
+        // On ouvre le même composant hôte (C3DialogEmbedChildComponent)
+        // mais on lui passe un paramètre templateRef plutôt qu'un component.
+        const dialogRef = this.#dialog.open((C3DialogEmbedChildComponent), {
+            ...config,
+            data: {
+                templateRef,
+            },
+        });
+        // On réutilise la méthode générique pour envelopper le MatDialogRef
+        return this.createC3DialogResult(dialogRef);
+    }
     alert(text, data) {
         const dialogRef = this.#dialog.open(C3AlertDialogComponent, {
             data: {
@@ -735,12 +815,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 }]
         }] });
 
+class C3OpenDialogDirective {
+    constructor() {
+        this.template = input(undefined, {
+            alias: 'c3-dialog'
+        });
+        this._dialog = inject(C3DialogService);
+    }
+    openDialog($event) {
+        if (!this.template()?.templateRef())
+            return;
+        this._dialog.createDialogFromTemplate(this.template().templateRef());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3OpenDialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.4", type: C3OpenDialogDirective, isStandalone: false, selector: "[c3-dialog]", inputs: { template: { classPropertyName: "template", publicName: "c3-dialog", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "openDialog($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3OpenDialogDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[c3-dialog]',
+                    standalone: false,
+                    host: {
+                        '(click)': 'openDialog($event)'
+                    }
+                }]
+        }] });
+
 class C3DialogModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: C3DialogModule, declarations: [C3AlertDialogComponent,
             ConfirmDialogComponent,
             C3PromptDialogComponent,
-            C3DialogEmbedChildComponent], imports: [CommonModule,
+            C3DialogEmbedChildComponent,
+            C3DialogTemplateComponent,
+            C3OpenDialogDirective], imports: [CommonModule,
             FormsModule,
             MatButtonModule,
             MatDialogModule,
@@ -748,7 +856,8 @@ class C3DialogModule {
             MatIconModule,
             MatInputModule,
             MatToolbarModule,
-            ReactiveFormsModule] }); }
+            ReactiveFormsModule], exports: [C3DialogTemplateComponent,
+            C3OpenDialogDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: C3DialogModule, providers: [C3DialogService], imports: [CommonModule,
             FormsModule,
             MatButtonModule,
@@ -767,6 +876,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         ConfirmDialogComponent,
                         C3PromptDialogComponent,
                         C3DialogEmbedChildComponent,
+                        C3DialogTemplateComponent,
+                        C3OpenDialogDirective,
                     ],
                     imports: [
                         CommonModule,
@@ -779,6 +890,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         MatToolbarModule,
                         ReactiveFormsModule,
                     ],
+                    exports: [
+                        C3DialogTemplateComponent,
+                        C3OpenDialogDirective
+                    ],
                     providers: [C3DialogService],
                 }]
         }] });
@@ -2064,5 +2179,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListComponent, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3FlowingMenuComponent, C3FlowingMenuItemComponent, C3FlowingMenuItemContentComponent, C3FlowingMenuModule, C3PreventClickDirective, C3PreventKeyboardEventDirective, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, C3StopPropagationDirective, C3TraceCardAlignLeftDirective, C3TraceCardAlignRightDirective, C3TraceCardComponent, C3TraceCardContentComponent, C3TraceCardModule, C3TraceCardTitleComponent, C3TreeComponent, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal };
+export { C3AlertDialogComponent, C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DialogTemplateComponent, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListComponent, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3FlowingMenuComponent, C3FlowingMenuItemComponent, C3FlowingMenuItemContentComponent, C3FlowingMenuModule, C3OpenDialogDirective, C3PreventClickDirective, C3PreventKeyboardEventDirective, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, C3StopPropagationDirective, C3TraceCardAlignLeftDirective, C3TraceCardAlignRightDirective, C3TraceCardComponent, C3TraceCardContentComponent, C3TraceCardModule, C3TraceCardTitleComponent, C3TreeComponent, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal };
 //# sourceMappingURL=c3-components.mjs.map