chrv-components 1.12.215 → 1.12.216

package/fesm2022/chrv-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, Component, computed, InjectionToken, model, ElementRef, Renderer2, Directive, Injectable, output, signal, viewChild, viewChildren, effect, ApplicationRef, EnvironmentInjector, Injector, afterNextRender, HostListener, LOCALE_ID, ViewContainerRef, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, ContentChildren, ChangeDetectorRef, PLATFORM_ID, DestroyRef, TemplateRef, contentChild, contentChildren, Input, Inject, createComponent, createEnvironmentInjector, ContentChild, ViewEncapsulation } from '@angular/core';
+import { inject, input, Component, computed, InjectionToken, model, ElementRef, Renderer2, Directive, Injectable, output, signal, viewChild, viewChildren, effect, ApplicationRef, EnvironmentInjector, Injector, afterNextRender, HostListener, LOCALE_ID, ViewContainerRef, ViewChild, EventEmitter, Output, ContentChildren, ChangeDetectorRef, PLATFORM_ID, DestroyRef, TemplateRef, contentChild, contentChildren, ChangeDetectionStrategy, Input, Inject, createComponent, createEnvironmentInjector, ContentChild, ViewEncapsulation } from '@angular/core';
 import * as i2$4 from '@angular/router';
 import { Router, RouterModule } from '@angular/router';
 import { MatButton, MatButtonModule } from '@angular/material/button';
@@ -772,39 +772,26 @@ function maxFileSize(maxSize) {
     return (control) => {
         const value = control.value;
         const sizeInBytes = maxSize * 1024 * 1024;
-        let isSizeCompliant = true;
-        const errors = {};
-        let fileSize = null;
-        if (value === null)
+        const files = Array.isArray(value) ? value : [value];
+        if (!value)
             return null;
-        if (Array.isArray(value)) {
-            for (let i = 0; i < value.length; i++) {
-                if (!value[i].file)
-                    continue;
-                if (value[i].file.size > sizeInBytes) {
-                    errors[i] = true;
-                    isSizeCompliant = false;
-                    fileSize = value[i].file.size;
-                }
-            }
-        }
-        else {
-            if (!value?.file)
-                return null;
-            fileSize =
-                (value instanceof File ? value.size : value.file?.size) ?? null;
-            isSizeCompliant = fileSize !== null && fileSize < sizeInBytes;
+        const errors = {};
+        for (let i = 0; i < files.length; i++) {
+            const fileSize = files[i].file?.size;
+            if (fileSize === undefined)
+                continue;
+            if (fileSize > sizeInBytes)
+                errors[i] = +(fileSize / 1024 / 1024).toFixed(2);
         }
-        return !isSizeCompliant
-            ? {
-                maxfilesize: {
-                    maxfilesize: maxSize + 'mb',
-                    actual: ((fileSize || 0) / 1024 / 1024).toFixed(2) + 'mb',
-                    indexes: errors,
-                },
+        if (Object.keys(errors).length <= 0)
+            return null;
+        return {
+            maxFileSize: {
+                maxFileSize: maxSize,
                 indexes: errors,
-            }
-            : null;
+            },
+            indexes: errors,
+        };
     };
 }
 
@@ -848,39 +835,57 @@ function minFileSize(minSize) {
     return (control) => {
         const value = control.value;
         const sizeInBytes = minSize * 1024 * 1024;
-        let isSizeCompliant = true;
-        const errors = {};
-        let fileSize = null;
-        //console.log(value);
-        if (value === null)
+        const files = Array.isArray(value) ? value : [value];
+        if (!value)
             return null;
-        if (Array.isArray(value)) {
-            for (let i = 0; i < value.length; i++) {
-                if (!value[i].file)
-                    continue;
-                if (value[i].file.size <= sizeInBytes) {
-                    errors[i] = true;
-                    isSizeCompliant = false;
-                }
-            }
-        }
-        else {
-            if (!value?.file)
-                return null;
-            fileSize =
-                (value instanceof File ? value.size : value.file?.size) ?? null;
-            isSizeCompliant = fileSize !== null && fileSize >= sizeInBytes;
+        const errors = {};
+        for (let i = 0; i < files.length; i++) {
+            const fileSize = files[i].file?.size;
+            if (fileSize === undefined)
+                continue;
+            if (fileSize < sizeInBytes)
+                errors[i] = +(fileSize / 1024 / 1024).toFixed(2);
         }
-        return !isSizeCompliant
-            ? {
-                minfilesize: {
-                    minfilesize: minSize + 'mb',
-                    actual: ((fileSize || 0) / 1024 / 1024).toFixed(2) + 'mb',
-                    indexes: errors,
-                },
+        if (Object.keys(errors).length <= 0)
+            return null;
+        return {
+            minFileSize: {
+                minFileSize: minSize,
                 indexes: errors,
-            }
-            : null;
+            },
+            indexes: errors,
+        };
+        // const value: IFile | IFile[] = control.value;
+        // const sizeInBytes = minSize * 1024 * 1024;
+        // let isSizeCompliant = true;
+        // const errors: { [index: number]: boolean } = {};
+        // let fileSize: number | null = null;
+        // //console.log(value);
+        // if (value === null) return null;
+        // if (Array.isArray(value)) {
+        //   for (let i = 0; i < value.length; i++) {
+        //     if (!value[i].file) continue;
+        //     if (value[i].file!.size <= sizeInBytes) {
+        //       errors[i] = true;
+        //       isSizeCompliant = false;
+        //     }
+        //   }
+        // } else {
+        //   if (!value?.file) return null;
+        //   fileSize =
+        //     (value instanceof File ? value.size : value.file?.size) ?? null;
+        //   isSizeCompliant = fileSize !== null && fileSize >= sizeInBytes;
+        // }
+        // return !isSizeCompliant
+        //   ? ({
+        //       minfilesize: {
+        //         minfilesize: minSize + 'mb',
+        //         actual: ((fileSize || 0) / 1024 / 1024).toFixed(2) + 'mb',
+        //         indexes: errors,
+        //       },
+        //       indexes: errors,
+        //     } as ValidationErrors)
+        //   : null;
     };
 }
 
@@ -994,15 +999,14 @@ function minLength(treshold) {
 
 class MaxFileNameLengthValidator {
     constructor() {
-        this.max = input(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.max = input(0, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), alias: 'appMaxFileNameLength' });
     }
     validate(control) {
         const max = this.max();
         return max ? maxFileNameLength(max)(control) : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaxFileNameLengthValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: MaxFileNameLengthValidator, isStandalone: true, selector: "[app-max-file-size]", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: MaxFileNameLengthValidator, isStandalone: true, selector: "[appMaxFileNameLength]", inputs: { max: { classPropertyName: "max", publicName: "appMaxFileNameLength", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: MaxFileNameLengthValidator,
@@ -1017,7 +1021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }, {
             type: Directive,
             args: [{
-                    selector: '[app-max-file-size]',
+                    selector: '[appMaxFileNameLength]',
                     providers: [
                         {
                             provide: NG_VALIDATORS,
@@ -1027,41 +1031,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     ],
                     standalone: true,
                 }]
-        }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+        }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "appMaxFileNameLength", required: false }] }] } });
 function maxFileNameLength(maxLength) {
     return (control) => {
         const value = control.value;
-        const errors = {};
-        let isSizeCompliant = true;
-        let fileSize = null;
-        if (value === null)
+        const files = Array.isArray(value) ? value : [value];
+        if (!value)
             return null;
-        if (Array.isArray(value)) {
-            for (let i = 0; i < value.length; i++) {
-                const fileNameLength = value[i].name?.length;
-                if (fileNameLength === undefined)
-                    continue;
-                if (fileNameLength >= maxLength) {
-                    errors[i] = true;
-                    isSizeCompliant = false;
-                    fileSize = value[i].name.length;
-                }
-            }
-        }
-        else {
-            isSizeCompliant =
-                value?.name?.length === undefined || value.name.length <= maxLength;
+        const errors = {};
+        for (let i = 0; i < files.length; i++) {
+            const fileNameLength = files[i].name?.length;
+            if (fileNameLength === undefined)
+                continue;
+            if (fileNameLength > maxLength)
+                errors[i] = fileNameLength;
         }
-        return isSizeCompliant == false
-            ? {
-                maxFileNameLength: {
-                    maxFileNameLength: maxLength,
-                    actual: fileSize,
-                    indexes: errors,
-                },
+        if (Object.keys(errors).length <= 0)
+            return null;
+        return {
+            maxFileNameLength: {
+                maxFileNameLength: maxLength,
                 indexes: errors,
-            }
-            : null;
+            },
+            indexes: errors,
+        };
     };
 }
 
@@ -2875,11 +2868,11 @@ class ToastContainer {
         return ref;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ToastContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ToastContainer, isStandalone: true, selector: "chr-toast-container", viewQueries: [{ propertyName: "contentTemplateRef", first: true, predicate: ["contentTemplate"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"toast-container\" [style.flexDirection]=\"direction\">\r\n    <!-- @for (toast of toasts(); track $index) {\r\n    <app-toast [title]=\"toast.title || null\" [message]=\"toast.message\" [type]=\"toast.type\"\r\n        [duration]=\"toast.duration\"></app-toast>\r\n    } -->\r\n    <ng-container #contentTemplate></ng-container>\r\n</div>", styles: [".toast-container{position:relative;display:flex;gap:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ToastContainer, isStandalone: true, selector: "chr-toast-container", viewQueries: [{ propertyName: "contentTemplateRef", first: true, predicate: ["contentTemplate"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"toast-container\" [style.flexDirection]=\"direction\">\r\n    <!-- @for (toast of toasts(); track $index) {\r\n    <app-toast [title]=\"toast.title || null\" [message]=\"toast.message\" [type]=\"toast.type\"\r\n        [duration]=\"toast.duration\"></app-toast>\r\n    } -->\r\n    <ng-container #contentTemplate></ng-container>\r\n</div>", styles: [".toast-container{position:relative;display:flex;gap:1rem}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ToastContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'chr-toast-container', imports: [], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"toast-container\" [style.flexDirection]=\"direction\">\r\n    <!-- @for (toast of toasts(); track $index) {\r\n    <app-toast [title]=\"toast.title || null\" [message]=\"toast.message\" [type]=\"toast.type\"\r\n        [duration]=\"toast.duration\"></app-toast>\r\n    } -->\r\n    <ng-container #contentTemplate></ng-container>\r\n</div>", styles: [".toast-container{position:relative;display:flex;gap:1rem}\n"] }]
+            args: [{ selector: 'chr-toast-container', imports: [], template: "<div class=\"toast-container\" [style.flexDirection]=\"direction\">\r\n    <!-- @for (toast of toasts(); track $index) {\r\n    <app-toast [title]=\"toast.title || null\" [message]=\"toast.message\" [type]=\"toast.type\"\r\n        [duration]=\"toast.duration\"></app-toast>\r\n    } -->\r\n    <ng-container #contentTemplate></ng-container>\r\n</div>", styles: [".toast-container{position:relative;display:flex;gap:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentTemplateRef: [{
                 type: ViewChild,
                 args: ['contentTemplate', { read: ViewContainerRef, static: true }]
@@ -4643,99 +4636,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }] });
 
 /**
- * Custom File Input. Support multiple files, base64 encoding and per-file validation.
- * Disclaimer: this is an AI created input.
+ * Custom file input.
+ * Supports multiple files, drag & drop, base64 encoding and per-file validation.
  */
 class ChrFileInputComponent extends ChrInputComponent {
     constructor() {
         super();
         this.fileService = inject(FileService);
         this.nextFileId = 0;
-        /**
-         * Types de fichiers autorisés (ex: "image/*,.pdf")
-         */
+        /** Types de fichiers autorisés (ex: "image/*,.pdf"). */
         this.accept = input('*', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
-        /**
-         * Autoriser la sélection de plusieurs fichiers
-         */
+        /** Autoriser la sélection de plusieurs fichiers. */
         this.multiple = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
-        /**
-         * Convert selected files to data URLs before updating the form value
-         */
+        /** Convertir les fichiers sélectionnés en base64 avant de mettre à jour la valeur du formulaire. */
         this.base64 = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "base64" }] : /* istanbul ignore next */ []));
         this.type = input('file', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        /**
-         * Wether or not the user can update the file's name directly from the file item
-         */
+        /** Autoriser la modification du nom du fichier depuis la liste. */
         this.allowChangingFileName = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "allowChangingFileName" }] : /* istanbul ignore next */ []));
-        /**
-         * Référence de l'input HTML type="file" masqué
-         */
-        // @ViewChild('fileNativeInput');
+        /** Référence de l'input HTML type="file" masqué. */
         this.fileNativeInput = viewChild('fileNativeInput', { ...(ngDevMode ? { debugName: "fileNativeInput" } : /* istanbul ignore next */ {}), read: (ElementRef) });
         /**
-         * Template Ref to the <ng-template #data let-file></ng-template> allowed to be passed for the parent.
-         * This template will be set next to the regular file data and allow the parent to customize display.
+         * Template Ref <ng-template #data let-file></ng-template>
+         * permettant au parent de personnaliser l'affichage des données du fichier.
          */
         this.dataTemplateRef = contentChild('data', { ...(ngDevMode ? { debugName: "dataTemplateRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.dataTemplateControls = contentChildren(NgControl, { ...(ngDevMode ? { debugName: "dataTemplateControls" } : /* istanbul ignore next */ {}), descendants: true });
-        /**
-         * État du glisser-déposer (Drag & Drop)
-         */
+        /** État du drag & drop. */
         this.isDragging = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
-        this.fileEntries = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fileEntries" }] : /* istanbul ignore next */ []));
-        /**
-         * Signal calculé pour garantir la manipulation d'un tableau de fichiers
-         */
-        this.files = computed(() => this.fileEntries(), /* @ts-ignore */
+        /** Liste des fichiers exposée au template. */
+        this.files = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+        this.fileValidationErrors = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fileValidationErrors" }] : /* istanbul ignore next */ []));
         this.dataTemplateControls$ = toObservable(this.dataTemplateControls);
+        toObservable(this.files)
+            .pipe(startWith([]), distinctUntilChanged())
+            .subscribe((f) => {
+            this.onChange(f.length > 0 ? (this.multiple() ? f.map((f) => f.file) : f[0]) : null);
+        });
     }
     ngOnInit() {
         super.ngOnInit();
+        this.ngControl()
+            ?.statusChanges?.pipe()
+            .subscribe((s) => {
+            this.fileValidationErrors.set(this.files().map((_, index) => this.getFileValidationError(index)));
+        });
     }
     ngAfterContentInit() {
         this.dataTemplateControls$
-            .pipe(distinctUntilChanged(), filter((list) => list.length > 0), switchMap((controlsList) => {
-            if (!controlsList.length)
-                return of(null);
-            const valueChanges$ = controlsList
-                .filter((c) => !!c.valueChanges)
-                .map((c) => c.valueChanges);
-            return merge(...valueChanges$);
+            .pipe(distinctUntilChanged(), filter((controls) => controls.length > 0), switchMap((controls) => {
+            const valueChanges = controls
+                .filter((control) => !!control.valueChanges)
+                .map((control) => control.valueChanges);
+            return valueChanges.length > 0 ? merge(...valueChanges) : of(null);
         }))
             .subscribe(() => {
             this.onChange(this.value());
         });
     }
-    /**
-     * Ouvre la fenêtre native de sélection de fichiers
-     */
+    /** Ouvre la fenêtre native de sélection de fichiers. */
     triggerFileSelect() {
         if (!this.isDisabled()) {
             this.fileNativeInput()?.nativeElement.click();
         }
     }
-    /**
-     * Gestion du changement sur l'input natif
-     */
+    /** Gestion du changement sur l'input natif. */
     onFileSelected(event) {
-        const inputEl = event.target;
-        if (inputEl.files && inputEl.files.length > 0) {
-            this.addFiles(Array.from(inputEl.files));
-            inputEl.value = ''; // Réinitialiser pour permettre la ré-sélection du même fichier
+        const inputElement = event.target;
+        if (inputElement.files?.length) {
+            this.addFiles(Array.from(inputElement.files));
+            inputElement.value = '';
         }
     }
-    /**
-     * Gestion du Drag & Drop
-     */
+    /** Gestion du drag & drop. */
     onDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -4752,103 +4732,75 @@ class ChrFileInputComponent extends ChrInputComponent {
         event.preventDefault();
         event.stopPropagation();
         this.isDragging.set(false);
-        if (this.isDisabled())
+        if (this.isDisabled()) {
             return;
+        }
         const droppedFiles = event.dataTransfer?.files;
-        if (droppedFiles && droppedFiles.length > 0) {
+        if (droppedFiles?.length) {
             this.addFiles(Array.from(droppedFiles));
         }
         this.blur.emit();
     }
-    /**
-     * Ajoute les fichiers et met à jour le Form Value
-     */
+    /** Ajoute les fichiers et met à jour la valeur du formulaire. */
     addFiles(newFiles) {
-        const currentEntries = this.files();
-        const filteredNewFiles = this.multiple()
-            ? newFiles.filter((newFile) => !currentEntries.some((entry) => entry.file.file?.name === newFile.name &&
-                entry.file.file?.size === newFile.size))
-            : newFiles.slice(0, 1);
-        const newEntries = filteredNewFiles.map((file) => ({
-            id: this.nextFileId++,
-            file: new ChrFile({ file, url: URL.createObjectURL(file) }),
-            progress: this.isAcceptedFile(file) && this.base64() ? 0 : 100,
-            error: this.isAcceptedFile(file)
-                ? undefined
-                : 'Type de fichier non autorisé',
-        }));
-        const updatedEntries = this.multiple()
-            ? [...currentEntries, ...newEntries]
-            : newEntries;
-        this.fileEntries.set(updatedEntries);
-        const filesToConvert = newEntries.filter((entry) => !entry.error);
-        if (!this.base64() || filesToConvert.length === 0) {
-            this.updateValue(updatedEntries);
+        const newEntries = newFiles.map((file) => {
+            const accepted = this.isAcceptedFile(file);
+            return {
+                id: this.nextFileId++,
+                file: new ChrFile({
+                    file,
+                    url: URL.createObjectURL(file),
+                }),
+                progress: accepted && this.base64() ? 0 : 100,
+                error: accepted ? undefined : 'Type de fichier non autorisé',
+            };
+        });
+        const entriesToConvert = newEntries.filter((entry) => !entry.error);
+        if (!this.base64() || entriesToConvert.length === 0) {
+            this.files.set([...this.files(), ...newEntries]);
             return;
         }
-        let completedConversions = 0;
-        let conversionFailed = false;
-        for (const entry of filesToConvert) {
+        let completed = 0;
+        let hasError = false;
+        for (const entry of entriesToConvert) {
             this.fileService.toBase64WithProgress(entry.file).subscribe({
                 next: (result) => {
-                    const updatedEntries = this.files().map((currentEntry) => currentEntry.id === entry.id
+                    this.files.update((entries) => entries.map((current) => current.id === entry.id
                         ? {
-                            ...currentEntry,
-                            file: result.file ?? currentEntry.file,
+                            ...current,
+                            file: result.file ?? current.file,
                             progress: result.progress,
                         }
-                        : currentEntry);
-                    this.fileEntries.set(updatedEntries);
+                        : current));
                 },
                 error: () => {
-                    conversionFailed = true;
-                    this.fileEntries.update((entries) => entries.map((currentEntry) => currentEntry.id === entry.id
+                    hasError = true;
+                    this.files.update((entries) => entries.map((current) => current.id === entry.id
                         ? {
-                            ...currentEntry,
+                            ...current,
                             progress: 0,
                             error: 'La conversion du fichier a échoué',
                         }
-                        : currentEntry));
-                    completedConversions++;
-                    if (completedConversions === filesToConvert.length &&
-                        !conversionFailed) {
-                        this.updateValue(this.files());
-                    }
+                        : current));
                 },
                 complete: () => {
-                    completedConversions++;
-                    if (completedConversions === filesToConvert.length &&
-                        !conversionFailed) {
-                        this.updateValue(this.files());
+                    completed++;
+                    if (completed === entriesToConvert.length && !hasError) {
+                        this.files.set([...this.files()]);
                     }
                 },
             });
         }
     }
-    /**
-     * Suppression d'un fichier sélectionné
-     */
+    /** Suppression d'un fichier sélectionné. */
     removeFile(index, event) {
         event?.stopPropagation();
         if (this.multiple()) {
-            const updatedList = [...this.files()];
-            updatedList.splice(index, 1);
-            this.fileEntries.set(updatedList);
-            this.updateValue(updatedList);
-        }
-        else {
-            this.fileEntries.set([]);
-            // this.value.set(null);
-            this.onChange(null);
+            const updatedEntries = this.files().filter((_, i) => i !== index);
+            this.files.set(updatedEntries);
+            return;
         }
-    }
-    updateValue(entries) {
-        const value = entries
-            .filter((entry) => !entry.error)
-            .map((entry) => entry.file);
-        const nextValue = this.multiple() ? value : (value[0] ?? null);
-        // this.value.set(nextValue);
-        this.onChange(nextValue);
+        this.files.set([]);
     }
     isAcceptedFile(file) {
         const acceptedTypes = this.accept()
@@ -4865,59 +4817,60 @@ class ChrFileInputComponent extends ChrInputComponent {
                 return fileName.endsWith(acceptedType);
             }
             if (acceptedType.endsWith('/*')) {
-                return fileType.startsWith(`${acceptedType.slice(0, -1)}`);
+                return fileType.startsWith(acceptedType.slice(0, -1));
             }
             return fileType === acceptedType;
         });
     }
+    /**
+     * Retourne l'erreur de validation correspondant au fichier à l'index donné.
+     *
+     * Pour un tableau, le validator retourne :
+     * {
+     *   indexes: {
+     *     [index]: true
+     *   }
+     * }
+     *
+     * On ne cherche donc jamais à faire correspondre l'erreur avec `FileEntry.id`.
+     */
     getFileValidationError(index) {
         const errors = this.ngControl()?.control?.errors;
-        const errorDisplays = BaseErrorDisplays;
-        if (!errors)
-            return null;
-        // console.log('Remaining errors:', errors);
-        const indexedErrors = errors['indexes'];
-        const isSingleFile = !this.multiple() && index === 0;
-        if (!isSingleFile && !indexedErrors?.[index])
+        if (!errors) {
             return null;
-        const firstError = Object.keys(errors)?.[0];
-        const errorDisplay = errorDisplays[firstError.toLowerCase()];
-        const error = errors[firstError];
-        const lowerLimit = error[firstError];
-        const actual = error.actual;
-        if (firstError !== undefined) {
-            if (typeof lowerLimit == 'boolean' && typeof actual == 'boolean')
-                return errorDisplay;
-            else
-                return errorDisplay
-                    ? this.trimmedErrorDisplay(error, lowerLimit, actual)
-                    : errors[0];
         }
-        return null;
+        const errorKey = Object.keys(errors).find((key) => key !== 'indexes');
+        if (!errorKey)
+            return null;
+        const indexedErrors = errors[errorKey]['indexes'];
+        if (!indexedErrors)
+            return null;
+        const limit = errors[errorKey][errorKey];
+        const actual = indexedErrors[index];
+        const display = BaseErrorDisplays[errorKey.toLowerCase()];
+        return this.trimmedErrorDisplay(display, limit, actual) ?? null;
     }
-    /**
-     * Utilitaire pour afficher la taille en Ko/Mo
-     */
+    /** Formatage d'une taille en octets. */
     formatFileSize(bytes) {
-        if (bytes === 0)
+        if (bytes === 0) {
             return '0 B';
+        }
         const k = 1024;
         const sizes = ['B', 'KB', 'MB', 'GB'];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-    }
-    getRandom() {
-        return crypto.randomUUID();
+        return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrFileInputComponent, isStandalone: true, selector: "chr-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, base64: { classPropertyName: "base64", publicName: "base64", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, allowChangingFileName: { classPropertyName: "allowChangingFileName", publicName: "allowChangingFileName", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "dataTemplateRef", first: true, predicate: ["data"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "dataTemplateControls", predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileNativeInput", first: true, predicate: ["fileNativeInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n    <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n        (click)=\"triggerFileSelect();blur.emit();\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\">\n\n        <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n            (change)=\"onFileSelected($event)\" />\n\n        <div class=\"drop-zone-content\">\n            <span class=\"material-symbols upload-icon\">cloud_upload</span>\n            <div class=\"drop-zone-text\">\n                <span class=\"primary-text\">\n                    @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n                </span>\n                <span class=\"secondary-text\">\n                    {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n                </span>\n                @if(isTouched()){\n                @let error = getLastError();\n                @if(error != null){\n                <span class=\"error-text error\">\n                    {{getLastError() ?? null}}\n                </span>\n                }\n                }\n            </div>\n        </div>\n    </div>\n\n    <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n    @if (files().length > 0) {\n    <div class=\"file-list\">\n        @for (entry of files(); track entry.id) {\n        <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n            <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n                'description' }}</span>\n            <div class=\"file-info\">\n                <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n                    <div class=\"file-name\">\n                        @if(allowChangingFileName()){\n                        <chr-input [value]=\"entry.file.name\"\n                            (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n                            type=\"text\"></chr-input>\n                        }@else {\n                        <span class=\"file-name\">{{\n                            entry.file.name }}\n                        </span>\n                        }\n                        <span>.{{entry.file.extension}}</span>\n                    </div>\n                    <div class=\"file-name\">\n                        <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n                        <span class=\"file-content\">|</span>\n                        <span class=\"file-content\">{{ entry.file.contentType }}</span>\n                    </div>\n                </div>\n                @if(dataTemplateRef()){\n                <div class=\"file-data\">\n                    <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n                    </ng-container>\n                </div>\n                }\n                <div class=\"file-data full-width\">\n                    @if (entry.error) {\n                    <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n                    } @else if (getFileValidationError($index); as validationError) {\n                    <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n                    }\n                </div>\n            </div>\n            <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n                [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n                <span class=\"material-symbols\">close</span>\n            </button>\n            <div class=\"file-progress\" [class.error]=\"entry.error || getFileValidationError($index)\" role=\"progressbar\"\n                [attr.aria-label]=\"entry.error || getFileValidationError($index) || 'Progression de la conversion'\"\n                [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n                <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n            </div>\n        </div>\n        }\n        @if(multiple()){\n        <button class=\"file-item fixed-size file-add-btn\" (click)=\"triggerFileSelect()\">\n            <span class=\"material-symbols\">add</span>\n        </button>\n        }\n    </div>\n    }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper{display:flex;flex-direction:column;gap:.75rem;height:auto;max-height:none;width:100%;border-bottom:none}.native-file-input{display:none}.drop-zone{border:2px dashed var(--chr-input-current-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column;text-align:center}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.error-text{font-size:.75rem;font-weight:500;color:var(--error-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-add-btn{color:var(--text-neutral-color);cursor:pointer}.file-add-btn:hover{color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%)}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "placeholder", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrFileInputComponent, isStandalone: true, selector: "chr-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, base64: { classPropertyName: "base64", publicName: "base64", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, allowChangingFileName: { classPropertyName: "allowChangingFileName", publicName: "allowChangingFileName", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "dataTemplateRef", first: true, predicate: ["data"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "dataTemplateControls", predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileNativeInput", first: true, predicate: ["fileNativeInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n    <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n        (click)=\"triggerFileSelect();blur.emit();\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\">\n\n        <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n            (change)=\"onFileSelected($event)\" />\n\n        <div class=\"drop-zone-content\">\n            <span class=\"material-symbols upload-icon\">cloud_upload</span>\n            <div class=\"drop-zone-text\">\n                <span class=\"primary-text\">\n                    @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n                </span>\n                <span class=\"secondary-text\">\n                    {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n                </span>\n                @if(isTouched()){\n                @let error = getLastError();\n                @if(error != null){\n                <span class=\"error-text error\">\n                    {{getLastError() ?? null}}\n                </span>\n                }\n                }\n            </div>\n        </div>\n    </div>\n\n    <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n    @if (files().length > 0) {\n    <div class=\"file-list\">\n        @for (entry of files(); track entry.id) {\n        @let error = fileValidationErrors()[$index];\n        <div class=\"file-item\" [class.error]=\"entry.error || error\">\n            <span class=\"material-symbols file-icon\">{{ entry.error || error ? 'error' :\n                'description' }}</span>\n            <div class=\"file-info\">\n                <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n                    <div class=\"file-name\">\n                        @if(allowChangingFileName()){\n                        <chr-input [value]=\"entry.file.name\"\n                            (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n                            type=\"text\"></chr-input>\n                        }@else {\n                        <span class=\"file-name\">{{\n                            entry.file.name }}\n                        </span>\n                        }\n                        <span>.{{entry.file.extension}}</span>\n                    </div>\n                    <div class=\"file-name\">\n                        <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n                        <span class=\"file-content\">|</span>\n                        <span class=\"file-content\">{{ entry.file.contentType }}</span>\n                    </div>\n                </div>\n                @if(dataTemplateRef()){\n                <div class=\"file-data\">\n                    <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n                    </ng-container>\n                </div>\n                }\n                <div class=\"file-data full-width\">\n                    @if (entry.error) {\n                    <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n                    } @else if (error; as validationError) {\n                    <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n                    }\n                </div>\n            </div>\n            <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n                [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n                <span class=\"material-symbols\">close</span>\n            </button>\n            <div class=\"file-progress\" [class.error]=\"entry.error ||error\" role=\"progressbar\"\n                [attr.aria-label]=\"entry.error || error || 'Progression de la conversion'\"\n                [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n                <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n            </div>\n        </div>\n        }\n        @if(multiple()){\n        <button class=\"file-item fixed-size file-add-btn\" (click)=\"triggerFileSelect()\">\n            <span class=\"material-symbols\">add</span>\n        </button>\n        }\n    </div>\n    }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper{display:flex;flex-direction:column;gap:.75rem;height:auto;max-height:none;width:100%;border-bottom:none}.native-file-input{display:none}.drop-zone{border:2px dashed var(--chr-input-current-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column;text-align:center}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.error-text{font-size:.75rem;font-weight:500;color:var(--error-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-add-btn{color:var(--text-neutral-color);cursor:pointer}.file-add-btn:hover{color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%)}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "placeholder", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chr-file-input', imports: [ReactiveFormsModule, NgTemplateOutlet, ChrInputComponent], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n    <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n        (click)=\"triggerFileSelect();blur.emit();\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\">\n\n        <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n            (change)=\"onFileSelected($event)\" />\n\n        <div class=\"drop-zone-content\">\n            <span class=\"material-symbols upload-icon\">cloud_upload</span>\n            <div class=\"drop-zone-text\">\n                <span class=\"primary-text\">\n                    @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n                </span>\n                <span class=\"secondary-text\">\n                    {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n                </span>\n                @if(isTouched()){\n                @let error = getLastError();\n                @if(error != null){\n                <span class=\"error-text error\">\n                    {{getLastError() ?? null}}\n                </span>\n                }\n                }\n            </div>\n        </div>\n    </div>\n\n    <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n    @if (files().length > 0) {\n    <div class=\"file-list\">\n        @for (entry of files(); track entry.id) {\n        <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n            <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n                'description' }}</span>\n            <div class=\"file-info\">\n                <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n                    <div class=\"file-name\">\n                        @if(allowChangingFileName()){\n                        <chr-input [value]=\"entry.file.name\"\n                            (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n                            type=\"text\"></chr-input>\n                        }@else {\n                        <span class=\"file-name\">{{\n                            entry.file.name }}\n                        </span>\n                        }\n                        <span>.{{entry.file.extension}}</span>\n                    </div>\n                    <div class=\"file-name\">\n                        <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n                        <span class=\"file-content\">|</span>\n                        <span class=\"file-content\">{{ entry.file.contentType }}</span>\n                    </div>\n                </div>\n                @if(dataTemplateRef()){\n                <div class=\"file-data\">\n                    <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n                    </ng-container>\n                </div>\n                }\n                <div class=\"file-data full-width\">\n                    @if (entry.error) {\n                    <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n                    } @else if (getFileValidationError($index); as validationError) {\n                    <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n                    }\n                </div>\n            </div>\n            <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n                [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n                <span class=\"material-symbols\">close</span>\n            </button>\n            <div class=\"file-progress\" [class.error]=\"entry.error || getFileValidationError($index)\" role=\"progressbar\"\n                [attr.aria-label]=\"entry.error || getFileValidationError($index) || 'Progression de la conversion'\"\n                [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n                <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n            </div>\n        </div>\n        }\n        @if(multiple()){\n        <button class=\"file-item fixed-size file-add-btn\" (click)=\"triggerFileSelect()\">\n            <span class=\"material-symbols\">add</span>\n        </button>\n        }\n    </div>\n    }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper{display:flex;flex-direction:column;gap:.75rem;height:auto;max-height:none;width:100%;border-bottom:none}.native-file-input{display:none}.drop-zone{border:2px dashed var(--chr-input-current-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column;text-align:center}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.error-text{font-size:.75rem;font-weight:500;color:var(--error-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-add-btn{color:var(--text-neutral-color);cursor:pointer}.file-add-btn:hover{color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%)}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}\n"] }]
+            args: [{ selector: 'chr-file-input', imports: [ReactiveFormsModule, NgTemplateOutlet, ChrInputComponent], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n    <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n        (click)=\"triggerFileSelect();blur.emit();\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\">\n\n        <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n            (change)=\"onFileSelected($event)\" />\n\n        <div class=\"drop-zone-content\">\n            <span class=\"material-symbols upload-icon\">cloud_upload</span>\n            <div class=\"drop-zone-text\">\n                <span class=\"primary-text\">\n                    @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n                </span>\n                <span class=\"secondary-text\">\n                    {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n                </span>\n                @if(isTouched()){\n                @let error = getLastError();\n                @if(error != null){\n                <span class=\"error-text error\">\n                    {{getLastError() ?? null}}\n                </span>\n                }\n                }\n            </div>\n        </div>\n    </div>\n\n    <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n    @if (files().length > 0) {\n    <div class=\"file-list\">\n        @for (entry of files(); track entry.id) {\n        @let error = fileValidationErrors()[$index];\n        <div class=\"file-item\" [class.error]=\"entry.error || error\">\n            <span class=\"material-symbols file-icon\">{{ entry.error || error ? 'error' :\n                'description' }}</span>\n            <div class=\"file-info\">\n                <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n                    <div class=\"file-name\">\n                        @if(allowChangingFileName()){\n                        <chr-input [value]=\"entry.file.name\"\n                            (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n                            type=\"text\"></chr-input>\n                        }@else {\n                        <span class=\"file-name\">{{\n                            entry.file.name }}\n                        </span>\n                        }\n                        <span>.{{entry.file.extension}}</span>\n                    </div>\n                    <div class=\"file-name\">\n                        <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n                        <span class=\"file-content\">|</span>\n                        <span class=\"file-content\">{{ entry.file.contentType }}</span>\n                    </div>\n                </div>\n                @if(dataTemplateRef()){\n                <div class=\"file-data\">\n                    <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n                    </ng-container>\n                </div>\n                }\n                <div class=\"file-data full-width\">\n                    @if (entry.error) {\n                    <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n                    } @else if (error; as validationError) {\n                    <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n                    }\n                </div>\n            </div>\n            <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n                [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n                <span class=\"material-symbols\">close</span>\n            </button>\n            <div class=\"file-progress\" [class.error]=\"entry.error ||error\" role=\"progressbar\"\n                [attr.aria-label]=\"entry.error || error || 'Progression de la conversion'\"\n                [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n                <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n            </div>\n        </div>\n        }\n        @if(multiple()){\n        <button class=\"file-item fixed-size file-add-btn\" (click)=\"triggerFileSelect()\">\n            <span class=\"material-symbols\">add</span>\n        </button>\n        }\n    </div>\n    }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper{display:flex;flex-direction:column;gap:.75rem;height:auto;max-height:none;width:100%;border-bottom:none}.native-file-input{display:none}.drop-zone{border:2px dashed var(--chr-input-current-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column;text-align:center}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.error-text{font-size:.75rem;font-weight:500;color:var(--error-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-add-btn{color:var(--text-neutral-color);cursor:pointer}.file-add-btn:hover{color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%)}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], base64: [{ type: i0.Input, args: [{ isSignal: true, alias: "base64", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], allowChangingFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowChangingFileName", required: false }] }], fileNativeInput: [{ type: i0.ViewChild, args: ['fileNativeInput', { ...{
                             read: (ElementRef),
-                        }, isSignal: true }] }], dataTemplateRef: [{ type: i0.ContentChild, args: ['data', { ...{ read: TemplateRef }, isSignal: true }] }], dataTemplateControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgControl), { ...{
+                        }, isSignal: true }] }], dataTemplateRef: [{ type: i0.ContentChild, args: ['data', { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }], dataTemplateControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgControl), { ...{
                             descendants: true,
                         }, isSignal: true }] }] } });
 
@@ -8967,7 +8920,7 @@ class MinFileNameLengthValidator {
         return max ? minFileNameLength(max)(control) : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MinFileNameLengthValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: MinFileNameLengthValidator, isStandalone: true, selector: "[app-max-file-size]", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: MinFileNameLengthValidator, isStandalone: true, selector: "[app-min-file-name-length]", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: MinFileNameLengthValidator,
@@ -8982,7 +8935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }, {
             type: Directive,
             args: [{
-                    selector: '[app-max-file-size]',
+                    selector: '[app-min-file-name-length]',
                     providers: [
                         {
                             provide: NG_VALIDATORS,
@@ -8993,40 +8946,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     standalone: true,
                 }]
         }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
-function minFileNameLength(maxLength) {
+function minFileNameLength(minLength) {
     return (control) => {
         const value = control.value;
-        const errors = {};
-        let isSizeCompliant = true;
-        let fileSize = null;
-        if (value === null)
+        const files = Array.isArray(value) ? value : [value];
+        if (!value)
             return null;
-        if (Array.isArray(value)) {
-            for (let i = 0; i < value.length; i++) {
-                const fileNameLength = value[i].name?.length;
-                if (fileNameLength === undefined)
-                    continue;
-                if (fileNameLength <= maxLength) {
-                    errors[i] = true;
-                    isSizeCompliant = false;
-                    fileSize = value[i].name.length;
-                }
-            }
-        }
-        else {
-            isSizeCompliant =
-                value?.name?.length === undefined || value.name.length >= maxLength;
+        const errors = {};
+        for (let i = 0; i < files.length; i++) {
+            const fileNameLength = files[i].name?.length;
+            if (fileNameLength === undefined)
+                continue;
+            if (fileNameLength < minLength)
+                errors[i] = fileNameLength;
         }
-        return isSizeCompliant == false
-            ? {
-                minFileNameLength: {
-                    maxFileNameLength: maxLength,
-                    actual: fileSize,
-                    indexes: errors,
-                },
+        if (Object.keys(errors).length <= 0)
+            return null;
+        return {
+            minFileNameLength: {
+                minFileNameLength: minLength,
                 indexes: errors,
-            }
-            : null;
+            },
+            indexes: errors,
+        };
     };
 }