chrv-components 1.12.213 → 1.12.215

package/fesm2022/chrv-components.mjs

@@ -4416,7 +4416,7 @@ class ChrInputComponent {
         this.enter = output();
         this.blur = output();
         this.trimmedErrorDisplay = (error, limit, actual) => {
-            return `${error}${limit ? ` (limite: ${limit}` : ''}${actual ? ` (, saisie: ${actual}` : ')'}`;
+            return `${error}${limit ? ` (limite: ${limit}` : ''}${actual ? `, saisie: ${actual})` : ')'}`;
         };
         this.ngControl.set(inject(NgControl, { optional: true, self: true }));
         this.ensureNgControl();
@@ -4910,11 +4910,11 @@ class ChrFileInputComponent extends ChrInputComponent {
         return crypto.randomUUID();
     }
     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\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)\"\n                    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        <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"] }] }); }
 }
 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\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)\"\n                    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        <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"] }]
         }], 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), { ...{
@@ -7300,7 +7300,7 @@ class ColumnFilter {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ColumnFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ColumnFilter, isStandalone: true, selector: "chr-column-filter", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, by: { classPropertyName: "by", publicName: "by", isSignal: true, isRequired: true, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, columnMetadata: { classPropertyName: "columnMetadata", publicName: "columnMetadata", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", mode: "modeChange", value: "valueChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"filter-wrapper\" [OutsideClickAware]=\"isOpen()\" (outsideClick)=\"isOpen.set(false);apply()\">\r\n    <span class=\"mat-icon filter-icon toggle\" (dblclick)=\"toggle()\">filter_list</span>\r\n    @if(isOpen()){\r\n    <div (keyup.enter)=\"apply()\">\r\n        <div class=\"input-wrapper\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n            <chr-input #modeSelector type=\"text\" class=\"filter-input mode-selector\" [name]=\"'column-filter-mode-'+by()\"\r\n                [value]=\"mode() !== null ? getModeLabel(mode()!): ''\"\r\n                [displayValue]=\"mode() !== null ? getModeLabel(mode()!): ''\" [chrAutofocus]=\"mode() === null\"\r\n                placeholder=\"Type de filtre\" (blur)=\"inputElement.focusInput()\" />\r\n            <chr-data-list [for]=\"'column-filter-mode-'+by()\" [suggestions]=\"filterModes()\"\r\n                (optionSelected)=\"this.mode.set($event.index)\"></chr-data-list>\r\n        </div>\r\n        <div class=\"input-wrapper\">\r\n            <div class=\"input-and-error\">\r\n                @let type = formatter()?.getEditInputType(columnMetadata());\r\n                <chr-input #inputElement [type]=\"$any(type == 'number' ? 'text' : type)\"\r\n                    [name]=\"'column-filter-value-'+by()\" [attr.inputmode]=\"type === 'number' ? 'decimal' : ''\"\r\n                    placeholder=\"Valeur du filtre\" class=\"filter-input form-control no-input-buttons\" [(value)]=\"value\"\r\n                    [displayValue]=\"value()\" [step]=\"type == 'time' ? 1 : null\"\r\n                    (input)=\"onInputChange($any($event).target.value)\" [chrAutofocus]=\"mode() !== null \"></chr-input>\r\n                <chr-data-list [suggestions]=\"suggestions()\" [blurOnSelect]=\"false\"\r\n                    (optionSelected)=\"value.set($event.value)\" [for]=\"'column-filter-value-'+by()\"></chr-data-list>\r\n                <div class=\"error-message\" [title]=\"error()\" [class.hidden]=\"!error()\">\r\n                    {{ error() }}\r\n                </div>\r\n            </div>\r\n            <!-- <span class=\"mat-icon apply-button\" title=\"Cliquez pour appliquer le filtre\" (click)=\"apply()\">check</span> -->\r\n        </div>\r\n    </div>\r\n    } @else {\r\n    @let val = value();\r\n    @if(val){\r\n    <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode()!)}} {{ val ? `\"${val}\"` : '' }}</span>\r\n    }\r\n    @else {\r\n    <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un filtre</span>\r\n    }\r\n    }\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.form{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.form button{color:var(--text-color);cursor:pointer;border-radius:.25rem}.form button:hover{background-color:var(--neutral-color)}.form-inline-buttons{grid-column:span 6;display:flex;justify-items:center;align-items:center;gap:.5rem}.form-control{grid-column:span 6;display:flex;flex-direction:column}.form-control::placeholder{color:color-mix(in srgb,var(--text-color) 40%,transparent 60%);font-weight:550}.form-control.with-inline-button{display:flex;flex-direction:row;gap:.5rem;align-items:center}.form-control.with-inline-button>:nth-child(-n+1){display:flex;flex-direction:column;width:100%}.form-control.with-inline-button>:nth-child(2){display:flex;justify-content:center}.form-control.full-width,.advanced-search-dropdown{grid-column:span 12}.advanced-search-dropdown .form-control:first-child{margin-top:.25rem}.form-actions{grid-column:span 12;display:flex;gap:1rem;justify-content:space-between}.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}:host{position:relative;display:flex;width:100%;min-height:1.5rem}.filter-wrapper{display:flex;align-items:center;width:100%}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start;flex-shrink:0}.filter-wrapper .input-wrapper{position:relative;display:flex;flex-direction:column;gap:.25rem;width:100%}.filter-wrapper .input-wrapper .apply-button{position:absolute;right:0;top:50%;width:min-content;transform:translateY(-50%);cursor:pointer}.filter-wrapper .mode-selector{border:0;outline:none;width:100%}.filter-wrapper .mode-selector option{border:none;outline:none}.filter-wrapper .error-message{color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:visible;text-overflow:ellipsis}.filter-wrapper .filter-input{outline:none;border:0;border-bottom:1px solid var(--neutral-color)}.filter-wrapper .filter-input:focus{border-bottom:1px solid var(--primary-color)}.filter-wrapper .filter-input,.filter-wrapper .mode-selector{background-color:inherit;color:var(--text-color)}.filter-wrapper .input-and-error{display:flex;flex-direction:column;margin-left:.15rem}.filter-wrapper .hidden{display:none}.filter-wrapper .no-input-buttons{appearance:textfield;-moz-appearance:textfield}.filter-wrapper .no-input-buttons::-webkit-calendar-picker-indicator,.filter-wrapper .no-input-buttons::-webkit-outer-spin-button,.filter-wrapper .no-input-buttons::-webkit-inner-spin-button{display:none;-webkit-appearance:none;margin:0}.filter-wrapper .faded{color:var(--faded-text-color)}.filter-wrapper .toggle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}\n"], dependencies: [{ kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "directive", type: OutsideClickAwareDirective, selector: "[OutsideClickAware]", inputs: ["OutsideClickAware"], outputs: ["outsideClick"] }, { kind: "directive", type: AutofocusDirective, selector: "[chrAutofocus]", inputs: ["chrAutofocus"] }, { kind: "directive", type: ChrHoverTitleDirective, selector: "[chrTitle], [title]", inputs: ["chrTitle", "chrTitlePosition", "chrTitleSnap", "chrTitleDebounce"], outputs: ["chrTitleChange"] }, { 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: ColumnFilter, isStandalone: true, selector: "chr-column-filter", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, by: { classPropertyName: "by", publicName: "by", isSignal: true, isRequired: true, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, columnMetadata: { classPropertyName: "columnMetadata", publicName: "columnMetadata", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", mode: "modeChange", value: "valueChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"filter-wrapper\" [OutsideClickAware]=\"isOpen()\" (outsideClick)=\"isOpen.set(false);apply()\">\r\n    <span class=\"mat-icon filter-icon toggle\" (dblclick)=\"toggle()\">filter_list</span>\r\n    @if(isOpen()){\r\n    <div (keyup.enter)=\"apply()\" class=\"auto-flex\">\r\n        <div class=\"input-wrapper\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n            <chr-input #modeSelector type=\"text\" class=\"filter-input mode-selector\" [name]=\"'column-filter-mode-'+by()\"\r\n                [value]=\"mode() !== null ? getModeLabel(mode()!): ''\"\r\n                [displayValue]=\"mode() !== null ? getModeLabel(mode()!): ''\" [chrAutofocus]=\"mode() === null\"\r\n                placeholder=\"Type de filtre\" (blur)=\"inputElement.focusInput()\" />\r\n            <chr-data-list [for]=\"'column-filter-mode-'+by()\" [suggestions]=\"filterModes()\"\r\n                (optionSelected)=\"this.mode.set($event.index)\"></chr-data-list>\r\n        </div>\r\n        <div class=\"input-wrapper input-and-error\">\r\n            @let type = formatter()?.getEditInputType(columnMetadata());\r\n            <chr-input #inputElement [type]=\"$any(type == 'number' ? 'text' : type)\"\r\n                [name]=\"'column-filter-value-'+by()\" [attr.inputmode]=\"type === 'number' ? 'decimal' : ''\"\r\n                placeholder=\"Valeur du filtre\" class=\"filter-input form-control no-input-buttons\" [(value)]=\"value\"\r\n                [displayValue]=\"value()\" [step]=\"type == 'time' ? 1 : null\"\r\n                (input)=\"onInputChange($any($event).target.value)\" [chrAutofocus]=\"mode() !== null \"></chr-input>\r\n            <chr-data-list [suggestions]=\"suggestions()\" [blurOnSelect]=\"false\"\r\n                (optionSelected)=\"value.set($event.value)\" [for]=\"'column-filter-value-'+by()\"></chr-data-list>\r\n            <div class=\"error-message\" [title]=\"error()\" [class.hidden]=\"!error()\">\r\n                {{ error() }}\r\n            </div>\r\n        </div>\r\n        <!-- <span class=\"mat-icon apply-button\" title=\"Cliquez pour appliquer le filtre\" (click)=\"apply()\">check</span> -->\r\n    </div>\r\n    } @else {\r\n    @let val = value();\r\n    @if(val){\r\n    <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode()!)}} {{ val ? `\"${val}\"` : '' }}</span>\r\n    }\r\n    @else {\r\n    <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un filtre</span>\r\n    }\r\n    }\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.form{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.form button{color:var(--text-color);cursor:pointer;border-radius:.25rem}.form button:hover{background-color:var(--neutral-color)}.form-inline-buttons{grid-column:span 6;display:flex;justify-items:center;align-items:center;gap:.5rem}.form-control{grid-column:span 6;display:flex;flex-direction:column}.form-control::placeholder{color:color-mix(in srgb,var(--text-color) 40%,transparent 60%);font-weight:550}.form-control.with-inline-button{display:flex;flex-direction:row;gap:.5rem;align-items:center}.form-control.with-inline-button>:nth-child(-n+1){display:flex;flex-direction:column;width:100%}.form-control.with-inline-button>:nth-child(2){display:flex;justify-content:center}.form-control.full-width,.advanced-search-dropdown{grid-column:span 12}.advanced-search-dropdown .form-control:first-child{margin-top:.25rem}.form-actions{grid-column:span 12;display:flex;gap:1rem;justify-content:space-between}.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}:host{position:relative;display:flex;width:100%;min-height:1.5rem}.auto-flex{flex:1 1 auto}.filter-wrapper{display:flex;align-items:center;width:100%}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start;flex-shrink:0}.filter-wrapper .input-wrapper{position:relative;display:flex;flex-direction:column;gap:.25rem;width:100%}.filter-wrapper .input-wrapper .apply-button{position:absolute;right:0;top:50%;width:min-content;transform:translateY(-50%);cursor:pointer}.filter-wrapper .mode-selector{border:0;outline:none;width:100%}.filter-wrapper .mode-selector option{border:none;outline:none}.filter-wrapper .error-message{color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:visible;text-overflow:ellipsis}.filter-wrapper .filter-input{outline:none;border:0;border-bottom:1px solid var(--neutral-color)}.filter-wrapper .filter-input:focus{border-bottom:1px solid var(--primary-color)}.filter-wrapper .filter-input,.filter-wrapper .mode-selector{background-color:inherit;color:var(--text-color)}.filter-wrapper .input-and-error{display:flex;flex-direction:column;margin-left:.15rem}.filter-wrapper .hidden{display:none}.filter-wrapper .no-input-buttons{appearance:textfield;-moz-appearance:textfield}.filter-wrapper .no-input-buttons::-webkit-calendar-picker-indicator,.filter-wrapper .no-input-buttons::-webkit-outer-spin-button,.filter-wrapper .no-input-buttons::-webkit-inner-spin-button{display:none;-webkit-appearance:none;margin:0}.filter-wrapper .faded{color:var(--faded-text-color)}.filter-wrapper .toggle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}\n"], dependencies: [{ kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "directive", type: OutsideClickAwareDirective, selector: "[OutsideClickAware]", inputs: ["OutsideClickAware"], outputs: ["outsideClick"] }, { kind: "directive", type: AutofocusDirective, selector: "[chrAutofocus]", inputs: ["chrAutofocus"] }, { kind: "directive", type: ChrHoverTitleDirective, selector: "[chrTitle], [title]", inputs: ["chrTitle", "chrTitlePosition", "chrTitleSnap", "chrTitleDebounce"], outputs: ["chrTitleChange"] }, { 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: ColumnFilter, decorators: [{
             type: Component,
@@ -7310,7 +7310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AutofocusDirective,
                         ChrHoverTitleDirective,
                         ChrInputComponent,
-                    ], template: "<div class=\"filter-wrapper\" [OutsideClickAware]=\"isOpen()\" (outsideClick)=\"isOpen.set(false);apply()\">\r\n    <span class=\"mat-icon filter-icon toggle\" (dblclick)=\"toggle()\">filter_list</span>\r\n    @if(isOpen()){\r\n    <div (keyup.enter)=\"apply()\">\r\n        <div class=\"input-wrapper\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n            <chr-input #modeSelector type=\"text\" class=\"filter-input mode-selector\" [name]=\"'column-filter-mode-'+by()\"\r\n                [value]=\"mode() !== null ? getModeLabel(mode()!): ''\"\r\n                [displayValue]=\"mode() !== null ? getModeLabel(mode()!): ''\" [chrAutofocus]=\"mode() === null\"\r\n                placeholder=\"Type de filtre\" (blur)=\"inputElement.focusInput()\" />\r\n            <chr-data-list [for]=\"'column-filter-mode-'+by()\" [suggestions]=\"filterModes()\"\r\n                (optionSelected)=\"this.mode.set($event.index)\"></chr-data-list>\r\n        </div>\r\n        <div class=\"input-wrapper\">\r\n            <div class=\"input-and-error\">\r\n                @let type = formatter()?.getEditInputType(columnMetadata());\r\n                <chr-input #inputElement [type]=\"$any(type == 'number' ? 'text' : type)\"\r\n                    [name]=\"'column-filter-value-'+by()\" [attr.inputmode]=\"type === 'number' ? 'decimal' : ''\"\r\n                    placeholder=\"Valeur du filtre\" class=\"filter-input form-control no-input-buttons\" [(value)]=\"value\"\r\n                    [displayValue]=\"value()\" [step]=\"type == 'time' ? 1 : null\"\r\n                    (input)=\"onInputChange($any($event).target.value)\" [chrAutofocus]=\"mode() !== null \"></chr-input>\r\n                <chr-data-list [suggestions]=\"suggestions()\" [blurOnSelect]=\"false\"\r\n                    (optionSelected)=\"value.set($event.value)\" [for]=\"'column-filter-value-'+by()\"></chr-data-list>\r\n                <div class=\"error-message\" [title]=\"error()\" [class.hidden]=\"!error()\">\r\n                    {{ error() }}\r\n                </div>\r\n            </div>\r\n            <!-- <span class=\"mat-icon apply-button\" title=\"Cliquez pour appliquer le filtre\" (click)=\"apply()\">check</span> -->\r\n        </div>\r\n    </div>\r\n    } @else {\r\n    @let val = value();\r\n    @if(val){\r\n    <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode()!)}} {{ val ? `\"${val}\"` : '' }}</span>\r\n    }\r\n    @else {\r\n    <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un filtre</span>\r\n    }\r\n    }\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.form{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.form button{color:var(--text-color);cursor:pointer;border-radius:.25rem}.form button:hover{background-color:var(--neutral-color)}.form-inline-buttons{grid-column:span 6;display:flex;justify-items:center;align-items:center;gap:.5rem}.form-control{grid-column:span 6;display:flex;flex-direction:column}.form-control::placeholder{color:color-mix(in srgb,var(--text-color) 40%,transparent 60%);font-weight:550}.form-control.with-inline-button{display:flex;flex-direction:row;gap:.5rem;align-items:center}.form-control.with-inline-button>:nth-child(-n+1){display:flex;flex-direction:column;width:100%}.form-control.with-inline-button>:nth-child(2){display:flex;justify-content:center}.form-control.full-width,.advanced-search-dropdown{grid-column:span 12}.advanced-search-dropdown .form-control:first-child{margin-top:.25rem}.form-actions{grid-column:span 12;display:flex;gap:1rem;justify-content:space-between}.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}:host{position:relative;display:flex;width:100%;min-height:1.5rem}.filter-wrapper{display:flex;align-items:center;width:100%}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start;flex-shrink:0}.filter-wrapper .input-wrapper{position:relative;display:flex;flex-direction:column;gap:.25rem;width:100%}.filter-wrapper .input-wrapper .apply-button{position:absolute;right:0;top:50%;width:min-content;transform:translateY(-50%);cursor:pointer}.filter-wrapper .mode-selector{border:0;outline:none;width:100%}.filter-wrapper .mode-selector option{border:none;outline:none}.filter-wrapper .error-message{color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:visible;text-overflow:ellipsis}.filter-wrapper .filter-input{outline:none;border:0;border-bottom:1px solid var(--neutral-color)}.filter-wrapper .filter-input:focus{border-bottom:1px solid var(--primary-color)}.filter-wrapper .filter-input,.filter-wrapper .mode-selector{background-color:inherit;color:var(--text-color)}.filter-wrapper .input-and-error{display:flex;flex-direction:column;margin-left:.15rem}.filter-wrapper .hidden{display:none}.filter-wrapper .no-input-buttons{appearance:textfield;-moz-appearance:textfield}.filter-wrapper .no-input-buttons::-webkit-calendar-picker-indicator,.filter-wrapper .no-input-buttons::-webkit-outer-spin-button,.filter-wrapper .no-input-buttons::-webkit-inner-spin-button{display:none;-webkit-appearance:none;margin:0}.filter-wrapper .faded{color:var(--faded-text-color)}.filter-wrapper .toggle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}\n"] }]
+                    ], template: "<div class=\"filter-wrapper\" [OutsideClickAware]=\"isOpen()\" (outsideClick)=\"isOpen.set(false);apply()\">\r\n    <span class=\"mat-icon filter-icon toggle\" (dblclick)=\"toggle()\">filter_list</span>\r\n    @if(isOpen()){\r\n    <div (keyup.enter)=\"apply()\" class=\"auto-flex\">\r\n        <div class=\"input-wrapper\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n            <chr-input #modeSelector type=\"text\" class=\"filter-input mode-selector\" [name]=\"'column-filter-mode-'+by()\"\r\n                [value]=\"mode() !== null ? getModeLabel(mode()!): ''\"\r\n                [displayValue]=\"mode() !== null ? getModeLabel(mode()!): ''\" [chrAutofocus]=\"mode() === null\"\r\n                placeholder=\"Type de filtre\" (blur)=\"inputElement.focusInput()\" />\r\n            <chr-data-list [for]=\"'column-filter-mode-'+by()\" [suggestions]=\"filterModes()\"\r\n                (optionSelected)=\"this.mode.set($event.index)\"></chr-data-list>\r\n        </div>\r\n        <div class=\"input-wrapper input-and-error\">\r\n            @let type = formatter()?.getEditInputType(columnMetadata());\r\n            <chr-input #inputElement [type]=\"$any(type == 'number' ? 'text' : type)\"\r\n                [name]=\"'column-filter-value-'+by()\" [attr.inputmode]=\"type === 'number' ? 'decimal' : ''\"\r\n                placeholder=\"Valeur du filtre\" class=\"filter-input form-control no-input-buttons\" [(value)]=\"value\"\r\n                [displayValue]=\"value()\" [step]=\"type == 'time' ? 1 : null\"\r\n                (input)=\"onInputChange($any($event).target.value)\" [chrAutofocus]=\"mode() !== null \"></chr-input>\r\n            <chr-data-list [suggestions]=\"suggestions()\" [blurOnSelect]=\"false\"\r\n                (optionSelected)=\"value.set($event.value)\" [for]=\"'column-filter-value-'+by()\"></chr-data-list>\r\n            <div class=\"error-message\" [title]=\"error()\" [class.hidden]=\"!error()\">\r\n                {{ error() }}\r\n            </div>\r\n        </div>\r\n        <!-- <span class=\"mat-icon apply-button\" title=\"Cliquez pour appliquer le filtre\" (click)=\"apply()\">check</span> -->\r\n    </div>\r\n    } @else {\r\n    @let val = value();\r\n    @if(val){\r\n    <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode()!)}} {{ val ? `\"${val}\"` : '' }}</span>\r\n    }\r\n    @else {\r\n    <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un filtre</span>\r\n    }\r\n    }\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.form{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.form button{color:var(--text-color);cursor:pointer;border-radius:.25rem}.form button:hover{background-color:var(--neutral-color)}.form-inline-buttons{grid-column:span 6;display:flex;justify-items:center;align-items:center;gap:.5rem}.form-control{grid-column:span 6;display:flex;flex-direction:column}.form-control::placeholder{color:color-mix(in srgb,var(--text-color) 40%,transparent 60%);font-weight:550}.form-control.with-inline-button{display:flex;flex-direction:row;gap:.5rem;align-items:center}.form-control.with-inline-button>:nth-child(-n+1){display:flex;flex-direction:column;width:100%}.form-control.with-inline-button>:nth-child(2){display:flex;justify-content:center}.form-control.full-width,.advanced-search-dropdown{grid-column:span 12}.advanced-search-dropdown .form-control:first-child{margin-top:.25rem}.form-actions{grid-column:span 12;display:flex;gap:1rem;justify-content:space-between}.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}:host{position:relative;display:flex;width:100%;min-height:1.5rem}.auto-flex{flex:1 1 auto}.filter-wrapper{display:flex;align-items:center;width:100%}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start;flex-shrink:0}.filter-wrapper .input-wrapper{position:relative;display:flex;flex-direction:column;gap:.25rem;width:100%}.filter-wrapper .input-wrapper .apply-button{position:absolute;right:0;top:50%;width:min-content;transform:translateY(-50%);cursor:pointer}.filter-wrapper .mode-selector{border:0;outline:none;width:100%}.filter-wrapper .mode-selector option{border:none;outline:none}.filter-wrapper .error-message{color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:visible;text-overflow:ellipsis}.filter-wrapper .filter-input{outline:none;border:0;border-bottom:1px solid var(--neutral-color)}.filter-wrapper .filter-input:focus{border-bottom:1px solid var(--primary-color)}.filter-wrapper .filter-input,.filter-wrapper .mode-selector{background-color:inherit;color:var(--text-color)}.filter-wrapper .input-and-error{display:flex;flex-direction:column;margin-left:.15rem}.filter-wrapper .hidden{display:none}.filter-wrapper .no-input-buttons{appearance:textfield;-moz-appearance:textfield}.filter-wrapper .no-input-buttons::-webkit-calendar-picker-indicator,.filter-wrapper .no-input-buttons::-webkit-outer-spin-button,.filter-wrapper .no-input-buttons::-webkit-inner-spin-button{display:none;-webkit-appearance:none;margin:0}.filter-wrapper .faded{color:var(--faded-text-color)}.filter-wrapper .toggle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], by: [{ type: i0.Input, args: [{ isSignal: true, alias: "by", required: true }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], columnMetadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnMetadata", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }] } });
 
 var DGGroupAggregationEnum;
@@ -7391,7 +7391,7 @@ class ColumnGroup {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ColumnGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ColumnGroup, isStandalone: true, selector: "chr-column-group", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, by: { classPropertyName: "by", publicName: "by", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", mode: "modeChange", groupChange: "groupChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"filter-wrapper\" [OutsideClickAware]=\"isOpen()\" (outsideClick)=\"isOpen.set(false);apply()\">\r\n    <span class=\"mat-icon filter-icon toggle\" (dblclick)=\"toggle()\">stack</span>\r\n    @if(isOpen()){\r\n    <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le groupement\">\r\n        <!-- <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n            <option [selected]=\"mode() === null\" [value]=\"null\">Aucune aggr\u00E9gation</option>\r\n            <option [selected]=\"mode() === Aggregation.COUNT\" [value]=\"Aggregation.COUNT\">Total</option>\r\n            <option [selected]=\"mode() === Aggregation.SUM\" [value]=\"Aggregation.SUM\">Somme</option>\r\n            <option [selected]=\"mode() === Aggregation.AVERAGE\" [value]=\"Aggregation.AVERAGE\">Moyenne</option>\r\n            <option [selected]=\"mode() === Aggregation.MIN\" [value]=\"Aggregation.MIN\">Minimum</option>\r\n            <option [selected]=\"mode() === Aggregation.MAX\" [value]=\"Aggregation.MAX\">Maximum</option>\r\n        </select> -->\r\n        <input #input type=\"text\" name=\"groupBy\" [value]=\"textValue()\" (input)=\"mode.set(null)\" [chrAutofocus]=\"true\"\r\n            placeholder=\"Fonction d'agr\u00E9gation\" class=\"filter-input form-control no-input-buttons\" />\r\n        <chr-data-list [targetElement]=\"input\" [suggestions]=\"aggregations()\" [blurOnSelect]=\"false\"\r\n            (optionSelected)=\"onOptionSelected($event.value)\"></chr-data-list>\r\n        <!-- <span class=\"mat-icon apply-button\" title=\"Cliquez pour appliquer le filtre\" (click)=\"apply()\">check</span> -->\r\n    </div>\r\n    } @else {\r\n    @let val = mode();\r\n    @if(val !== null){\r\n    <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode()!)}}</span>\r\n    }@else {\r\n    <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un groupement</span>\r\n    }\r\n    }\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.form{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.form button{color:var(--text-color);cursor:pointer;border-radius:.25rem}.form button:hover{background-color:var(--neutral-color)}.form-inline-buttons{grid-column:span 6;display:flex;justify-items:center;align-items:center;gap:.5rem}.form-control{grid-column:span 6;display:flex;flex-direction:column}.form-control::placeholder{color:color-mix(in srgb,var(--text-color) 40%,transparent 60%);font-weight:550}.form-control.with-inline-button{display:flex;flex-direction:row;gap:.5rem;align-items:center}.form-control.with-inline-button>:nth-child(-n+1){display:flex;flex-direction:column;width:100%}.form-control.with-inline-button>:nth-child(2){display:flex;justify-content:center}.form-control.full-width,.advanced-search-dropdown{grid-column:span 12}.advanced-search-dropdown .form-control:first-child{margin-top:.25rem}.form-actions{grid-column:span 12;display:flex;gap:1rem;justify-content:space-between}.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}:host{position:relative;display:flex;width:100%;height:1.5rem}.filter-wrapper{display:flex;align-items:center;width:100%}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start}.filter-wrapper .input-wrapper{display:flex;flex-direction:column;width:100%}.filter-wrapper .input-wrapper .apply-button{position:absolute;right:0;top:50%;width:min-content;transform:translateY(-50%);cursor:pointer;font-size:1rem}.filter-wrapper .mode-selector{border:0;outline:none;width:min-content;appearance:none}.filter-wrapper .mode-selector option{border:none;outline:none}.filter-wrapper .error-message{height:0px;color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:visible;text-overflow:ellipsis}.filter-wrapper .filter-input{outline:none;border:0;width:100%;border-bottom:1px solid var(--neutral-color)}.filter-wrapper .filter-input:focus{border-bottom:1px solid var(--primary-color)}.filter-wrapper .filter-input,.filter-wrapper .mode-selector{background-color:inherit;color:var(--text-color)}.filter-wrapper .input-and-error{display:flex;flex-direction:column;margin-left:.5rem}.filter-wrapper .hidden{display:none}.filter-wrapper .no-input-buttons{appearance:textfield;-moz-appearance:textfield}.filter-wrapper .no-input-buttons::-webkit-calendar-picker-indicator,.filter-wrapper .no-input-buttons::-webkit-outer-spin-button,.filter-wrapper .no-input-buttons::-webkit-inner-spin-button{display:none;-webkit-appearance:none;margin:0}.filter-wrapper .faded{color:var(--faded-text-color)}\n"], dependencies: [{ kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "directive", type: OutsideClickAwareDirective, selector: "[OutsideClickAware]", inputs: ["OutsideClickAware"], outputs: ["outsideClick"] }, { kind: "directive", type: AutofocusDirective, selector: "[chrAutofocus]", inputs: ["chrAutofocus"] }, { kind: "directive", type: ChrHoverTitleDirective, selector: "[chrTitle], [title]", inputs: ["chrTitle", "chrTitlePosition", "chrTitleSnap", "chrTitleDebounce"], outputs: ["chrTitleChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ColumnGroup, isStandalone: true, selector: "chr-column-group", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, by: { classPropertyName: "by", publicName: "by", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", mode: "modeChange", groupChange: "groupChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"filter-wrapper\" [OutsideClickAware]=\"isOpen()\" (outsideClick)=\"isOpen.set(false);apply()\">\r\n    <span class=\"mat-icon filter-icon toggle\" (dblclick)=\"toggle()\">stack</span>\r\n    @if(isOpen()){\r\n    <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le groupement\">\r\n        <!-- <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n            <option [selected]=\"mode() === null\" [value]=\"null\">Aucune aggr\u00E9gation</option>\r\n            <option [selected]=\"mode() === Aggregation.COUNT\" [value]=\"Aggregation.COUNT\">Total</option>\r\n            <option [selected]=\"mode() === Aggregation.SUM\" [value]=\"Aggregation.SUM\">Somme</option>\r\n            <option [selected]=\"mode() === Aggregation.AVERAGE\" [value]=\"Aggregation.AVERAGE\">Moyenne</option>\r\n            <option [selected]=\"mode() === Aggregation.MIN\" [value]=\"Aggregation.MIN\">Minimum</option>\r\n            <option [selected]=\"mode() === Aggregation.MAX\" [value]=\"Aggregation.MAX\">Maximum</option>\r\n        </select> -->\r\n        <chr-input #input [name]=\"'column-group-value-'+by()\" type=\"text\" name=\"groupBy\" [value]=\"textValue()\"\r\n            [displayValue]=\"textValue()\" (input)=\"mode.set(null)\" [chrAutofocus]=\"true\"\r\n            placeholder=\"Fonction d'agr\u00E9gation\" class=\"filter-input form-control no-input-buttons\" />\r\n        <chr-data-list [for]=\"'column-group-value-'+by()\" [suggestions]=\"aggregations()\" [blurOnSelect]=\"false\"\r\n            (optionSelected)=\"onOptionSelected($event.value)\"></chr-data-list>\r\n        <!-- <span class=\"mat-icon apply-button\" title=\"Cliquez pour appliquer le filtre\" (click)=\"apply()\">check</span> -->\r\n    </div>\r\n    } @else {\r\n    @let val = mode();\r\n    @if(val !== null){\r\n    <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode()!)}}</span>\r\n    }@else {\r\n    <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un groupement</span>\r\n    }\r\n    }\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.form{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.form button{color:var(--text-color);cursor:pointer;border-radius:.25rem}.form button:hover{background-color:var(--neutral-color)}.form-inline-buttons{grid-column:span 6;display:flex;justify-items:center;align-items:center;gap:.5rem}.form-control{grid-column:span 6;display:flex;flex-direction:column}.form-control::placeholder{color:color-mix(in srgb,var(--text-color) 40%,transparent 60%);font-weight:550}.form-control.with-inline-button{display:flex;flex-direction:row;gap:.5rem;align-items:center}.form-control.with-inline-button>:nth-child(-n+1){display:flex;flex-direction:column;width:100%}.form-control.with-inline-button>:nth-child(2){display:flex;justify-content:center}.form-control.full-width,.advanced-search-dropdown{grid-column:span 12}.advanced-search-dropdown .form-control:first-child{margin-top:.25rem}.form-actions{grid-column:span 12;display:flex;gap:1rem;justify-content:space-between}.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}:host{position:relative;display:flex;width:100%;height:1.5rem}.filter-wrapper{display:flex;align-items:center;width:100%}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start}.filter-wrapper .input-wrapper{display:flex;flex-direction:column;width:100%}.filter-wrapper .input-wrapper .apply-button{position:absolute;right:0;top:50%;width:min-content;transform:translateY(-50%);cursor:pointer;font-size:1rem}.filter-wrapper .mode-selector{border:0;outline:none;width:min-content;appearance:none}.filter-wrapper .mode-selector option{border:none;outline:none}.filter-wrapper .error-message{height:0px;color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:visible;text-overflow:ellipsis}.filter-wrapper .filter-input{outline:none;border:0;width:100%;border-bottom:1px solid var(--neutral-color)}.filter-wrapper .filter-input:focus{border-bottom:1px solid var(--primary-color)}.filter-wrapper .filter-input,.filter-wrapper .mode-selector{background-color:inherit;color:var(--text-color)}.filter-wrapper .input-and-error{display:flex;flex-direction:column;margin-left:.5rem}.filter-wrapper .hidden{display:none}.filter-wrapper .no-input-buttons{appearance:textfield;-moz-appearance:textfield}.filter-wrapper .no-input-buttons::-webkit-calendar-picker-indicator,.filter-wrapper .no-input-buttons::-webkit-outer-spin-button,.filter-wrapper .no-input-buttons::-webkit-inner-spin-button{display:none;-webkit-appearance:none;margin:0}.filter-wrapper .faded{color:var(--faded-text-color)}\n"], dependencies: [{ kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "directive", type: OutsideClickAwareDirective, selector: "[OutsideClickAware]", inputs: ["OutsideClickAware"], outputs: ["outsideClick"] }, { kind: "directive", type: AutofocusDirective, selector: "[chrAutofocus]", inputs: ["chrAutofocus"] }, { kind: "directive", type: ChrHoverTitleDirective, selector: "[chrTitle], [title]", inputs: ["chrTitle", "chrTitlePosition", "chrTitleSnap", "chrTitleDebounce"], outputs: ["chrTitleChange"] }, { 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: ColumnGroup, decorators: [{
             type: Component,
@@ -7400,7 +7400,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         OutsideClickAwareDirective,
                         AutofocusDirective,
                         ChrHoverTitleDirective,
-                    ], template: "<div class=\"filter-wrapper\" [OutsideClickAware]=\"isOpen()\" (outsideClick)=\"isOpen.set(false);apply()\">\r\n    <span class=\"mat-icon filter-icon toggle\" (dblclick)=\"toggle()\">stack</span>\r\n    @if(isOpen()){\r\n    <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le groupement\">\r\n        <!-- <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n            <option [selected]=\"mode() === null\" [value]=\"null\">Aucune aggr\u00E9gation</option>\r\n            <option [selected]=\"mode() === Aggregation.COUNT\" [value]=\"Aggregation.COUNT\">Total</option>\r\n            <option [selected]=\"mode() === Aggregation.SUM\" [value]=\"Aggregation.SUM\">Somme</option>\r\n            <option [selected]=\"mode() === Aggregation.AVERAGE\" [value]=\"Aggregation.AVERAGE\">Moyenne</option>\r\n            <option [selected]=\"mode() === Aggregation.MIN\" [value]=\"Aggregation.MIN\">Minimum</option>\r\n            <option [selected]=\"mode() === Aggregation.MAX\" [value]=\"Aggregation.MAX\">Maximum</option>\r\n        </select> -->\r\n        <input #input type=\"text\" name=\"groupBy\" [value]=\"textValue()\" (input)=\"mode.set(null)\" [chrAutofocus]=\"true\"\r\n            placeholder=\"Fonction d'agr\u00E9gation\" class=\"filter-input form-control no-input-buttons\" />\r\n        <chr-data-list [targetElement]=\"input\" [suggestions]=\"aggregations()\" [blurOnSelect]=\"false\"\r\n            (optionSelected)=\"onOptionSelected($event.value)\"></chr-data-list>\r\n        <!-- <span class=\"mat-icon apply-button\" title=\"Cliquez pour appliquer le filtre\" (click)=\"apply()\">check</span> -->\r\n    </div>\r\n    } @else {\r\n    @let val = mode();\r\n    @if(val !== null){\r\n    <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode()!)}}</span>\r\n    }@else {\r\n    <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un groupement</span>\r\n    }\r\n    }\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.form{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.form button{color:var(--text-color);cursor:pointer;border-radius:.25rem}.form button:hover{background-color:var(--neutral-color)}.form-inline-buttons{grid-column:span 6;display:flex;justify-items:center;align-items:center;gap:.5rem}.form-control{grid-column:span 6;display:flex;flex-direction:column}.form-control::placeholder{color:color-mix(in srgb,var(--text-color) 40%,transparent 60%);font-weight:550}.form-control.with-inline-button{display:flex;flex-direction:row;gap:.5rem;align-items:center}.form-control.with-inline-button>:nth-child(-n+1){display:flex;flex-direction:column;width:100%}.form-control.with-inline-button>:nth-child(2){display:flex;justify-content:center}.form-control.full-width,.advanced-search-dropdown{grid-column:span 12}.advanced-search-dropdown .form-control:first-child{margin-top:.25rem}.form-actions{grid-column:span 12;display:flex;gap:1rem;justify-content:space-between}.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}:host{position:relative;display:flex;width:100%;height:1.5rem}.filter-wrapper{display:flex;align-items:center;width:100%}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start}.filter-wrapper .input-wrapper{display:flex;flex-direction:column;width:100%}.filter-wrapper .input-wrapper .apply-button{position:absolute;right:0;top:50%;width:min-content;transform:translateY(-50%);cursor:pointer;font-size:1rem}.filter-wrapper .mode-selector{border:0;outline:none;width:min-content;appearance:none}.filter-wrapper .mode-selector option{border:none;outline:none}.filter-wrapper .error-message{height:0px;color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:visible;text-overflow:ellipsis}.filter-wrapper .filter-input{outline:none;border:0;width:100%;border-bottom:1px solid var(--neutral-color)}.filter-wrapper .filter-input:focus{border-bottom:1px solid var(--primary-color)}.filter-wrapper .filter-input,.filter-wrapper .mode-selector{background-color:inherit;color:var(--text-color)}.filter-wrapper .input-and-error{display:flex;flex-direction:column;margin-left:.5rem}.filter-wrapper .hidden{display:none}.filter-wrapper .no-input-buttons{appearance:textfield;-moz-appearance:textfield}.filter-wrapper .no-input-buttons::-webkit-calendar-picker-indicator,.filter-wrapper .no-input-buttons::-webkit-outer-spin-button,.filter-wrapper .no-input-buttons::-webkit-inner-spin-button{display:none;-webkit-appearance:none;margin:0}.filter-wrapper .faded{color:var(--faded-text-color)}\n"] }]
+                        ChrInputComponent,
+                    ], template: "<div class=\"filter-wrapper\" [OutsideClickAware]=\"isOpen()\" (outsideClick)=\"isOpen.set(false);apply()\">\r\n    <span class=\"mat-icon filter-icon toggle\" (dblclick)=\"toggle()\">stack</span>\r\n    @if(isOpen()){\r\n    <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le groupement\">\r\n        <!-- <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n            <option [selected]=\"mode() === null\" [value]=\"null\">Aucune aggr\u00E9gation</option>\r\n            <option [selected]=\"mode() === Aggregation.COUNT\" [value]=\"Aggregation.COUNT\">Total</option>\r\n            <option [selected]=\"mode() === Aggregation.SUM\" [value]=\"Aggregation.SUM\">Somme</option>\r\n            <option [selected]=\"mode() === Aggregation.AVERAGE\" [value]=\"Aggregation.AVERAGE\">Moyenne</option>\r\n            <option [selected]=\"mode() === Aggregation.MIN\" [value]=\"Aggregation.MIN\">Minimum</option>\r\n            <option [selected]=\"mode() === Aggregation.MAX\" [value]=\"Aggregation.MAX\">Maximum</option>\r\n        </select> -->\r\n        <chr-input #input [name]=\"'column-group-value-'+by()\" type=\"text\" name=\"groupBy\" [value]=\"textValue()\"\r\n            [displayValue]=\"textValue()\" (input)=\"mode.set(null)\" [chrAutofocus]=\"true\"\r\n            placeholder=\"Fonction d'agr\u00E9gation\" class=\"filter-input form-control no-input-buttons\" />\r\n        <chr-data-list [for]=\"'column-group-value-'+by()\" [suggestions]=\"aggregations()\" [blurOnSelect]=\"false\"\r\n            (optionSelected)=\"onOptionSelected($event.value)\"></chr-data-list>\r\n        <!-- <span class=\"mat-icon apply-button\" title=\"Cliquez pour appliquer le filtre\" (click)=\"apply()\">check</span> -->\r\n    </div>\r\n    } @else {\r\n    @let val = mode();\r\n    @if(val !== null){\r\n    <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode()!)}}</span>\r\n    }@else {\r\n    <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un groupement</span>\r\n    }\r\n    }\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.form{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.form button{color:var(--text-color);cursor:pointer;border-radius:.25rem}.form button:hover{background-color:var(--neutral-color)}.form-inline-buttons{grid-column:span 6;display:flex;justify-items:center;align-items:center;gap:.5rem}.form-control{grid-column:span 6;display:flex;flex-direction:column}.form-control::placeholder{color:color-mix(in srgb,var(--text-color) 40%,transparent 60%);font-weight:550}.form-control.with-inline-button{display:flex;flex-direction:row;gap:.5rem;align-items:center}.form-control.with-inline-button>:nth-child(-n+1){display:flex;flex-direction:column;width:100%}.form-control.with-inline-button>:nth-child(2){display:flex;justify-content:center}.form-control.full-width,.advanced-search-dropdown{grid-column:span 12}.advanced-search-dropdown .form-control:first-child{margin-top:.25rem}.form-actions{grid-column:span 12;display:flex;gap:1rem;justify-content:space-between}.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}:host{position:relative;display:flex;width:100%;height:1.5rem}.filter-wrapper{display:flex;align-items:center;width:100%}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start}.filter-wrapper .input-wrapper{display:flex;flex-direction:column;width:100%}.filter-wrapper .input-wrapper .apply-button{position:absolute;right:0;top:50%;width:min-content;transform:translateY(-50%);cursor:pointer;font-size:1rem}.filter-wrapper .mode-selector{border:0;outline:none;width:min-content;appearance:none}.filter-wrapper .mode-selector option{border:none;outline:none}.filter-wrapper .error-message{height:0px;color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:visible;text-overflow:ellipsis}.filter-wrapper .filter-input{outline:none;border:0;width:100%;border-bottom:1px solid var(--neutral-color)}.filter-wrapper .filter-input:focus{border-bottom:1px solid var(--primary-color)}.filter-wrapper .filter-input,.filter-wrapper .mode-selector{background-color:inherit;color:var(--text-color)}.filter-wrapper .input-and-error{display:flex;flex-direction:column;margin-left:.5rem}.filter-wrapper .hidden{display:none}.filter-wrapper .no-input-buttons{appearance:textfield;-moz-appearance:textfield}.filter-wrapper .no-input-buttons::-webkit-calendar-picker-indicator,.filter-wrapper .no-input-buttons::-webkit-outer-spin-button,.filter-wrapper .no-input-buttons::-webkit-inner-spin-button{display:none;-webkit-appearance:none;margin:0}.filter-wrapper .faded{color:var(--faded-text-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], by: [{ type: i0.Input, args: [{ isSignal: true, alias: "by", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], groupChange: [{ type: i0.Output, args: ["groupChange"] }] } });
 
 class ScrollIntoViewDirective {