c3-components 0.14.2 → 0.15.1

package/fesm2022/c3-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 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 { input, signal, viewChild, TemplateRef, inject, ChangeDetectorRef, effect, Component, forwardRef, model, HostListener, Directive, NgModule, Inject, ViewContainerRef, Injector, Injectable, Pipe, output, ViewEncapsulation, Optional, computed, InjectionToken, contentChild, contentChildren, HostBinding, ElementRef, DestroyRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -380,14 +380,21 @@ class C3DialogEmbedChildComponent {
         this.dialogRef = dialogRef;
         this.data = data;
         this._cdr = _cdr;
-        this.target = viewChild.required('target');
+        this.target = viewChild('target', ...(ngDevMode ? [{ debugName: "target", read: ViewContainerRef }] : [{
+                read: ViewContainerRef,
+            }]));
         // On utilise un signal pour stocker la référence du composant créé
         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 targetRef = this.target();
+            if (!targetRef) {
+                console.error('ViewContainerRef not found');
+                return;
+            }
+            const compRef = targetRef.createComponent(this.data.component);
             this.createdComponent.set(compRef);
             // Injecter les inputs dans le composant
             if (this.data.inputs) {
@@ -432,7 +439,7 @@ class C3DialogEmbedChildComponent {
         }
     }
     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: `
+    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, read: ViewContainerRef, 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">
@@ -445,17 +452,17 @@ class C3DialogEmbedChildComponent {
           }
         </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>
+          <ng-container #target></ng-container>
         }
       </div>
-    
+
       @if (data.actions && data.actions.length > 0) {
         <div [class]="'dialog-actions ' + (data.classActions || '')">
           @for (action of data.actions; track action.label) {
@@ -490,7 +497,7 @@ 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.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"] }] }); }
+  `, 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: "20.3.14", ngImport: i0, type: C3DialogEmbedChildComponent, decorators: [{
             type: Component,
@@ -507,17 +514,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
           }
         </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>
+          <ng-container #target></ng-container>
         }
       </div>
-    
+
       @if (data.actions && data.actions.length > 0) {
         <div [class]="'dialog-actions ' + (data.classActions || '')">
           @for (action of data.actions; track action.label) {
@@ -552,11 +559,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         </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: i0.ViewChild, args: ['target', { isSignal: true }] }] } });
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { target: [{ type: i0.ViewChild, args: ['target', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }] } });
 
 class C3DialogTemplateComponent {
     constructor() {
@@ -1243,12 +1252,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',
         });
     }
@@ -1395,7 +1455,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) => {