chrv-components 1.12.234 → 1.12.236

package/fesm2022/chrv-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, Component, computed, InjectionToken, model, ElementRef, Renderer2, Directive, Injectable, output, signal, viewChild, viewChildren, effect, ApplicationRef, EnvironmentInjector, Injector, afterNextRender, HostListener, LOCALE_ID, ViewContainerRef, ViewChild, EventEmitter, Output, ContentChildren, ChangeDetectorRef, PLATFORM_ID, DestroyRef, TemplateRef, contentChild, contentChildren, ChangeDetectionStrategy, Input, Inject, createComponent, createEnvironmentInjector, ContentChild, ViewEncapsulation } from '@angular/core';
+import { inject, input, Component, computed, InjectionToken, model, ElementRef, Renderer2, Directive, Injectable, output, signal, viewChild, viewChildren, effect, ApplicationRef, EnvironmentInjector, Injector, afterNextRender, HostListener, LOCALE_ID, ViewContainerRef, ViewChild, EventEmitter, Output, ContentChildren, ChangeDetectorRef, PLATFORM_ID, DestroyRef, TemplateRef, contentChild, contentChildren, ChangeDetectionStrategy, Input, Inject, createComponent, createEnvironmentInjector, ViewEncapsulation } from '@angular/core';
 import * as i2$4 from '@angular/router';
 import { Router, RouterModule } from '@angular/router';
 import { MatButton, MatButtonModule } from '@angular/material/button';
@@ -7387,7 +7387,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()\" 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", "target", "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}.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", "target", "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,
@@ -7397,7 +7397,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()\" 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"] }]
+                    ], 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}.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;
@@ -7864,6 +7864,7 @@ class AutoDataTable extends BaseTable {
 class AutoDataSource {
     constructor(config) {
         this._subscriptions = [];
+        this.destroyRef = inject(DestroyRef);
         // Signaux internes
         this._datagrid = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_datagrid" }] : /* istanbul ignore next */ []));
@@ -7962,11 +7963,17 @@ class AutoDataSource {
         //   //   );
         // }),
         datagrid.sort.subscribe((sort) => {
-            this._subscriptions.push(this.handleSortChange(sort).subscribe());
+            this._subscriptions.push(this.handleSortChange(sort)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe());
         }), datagrid.filter.subscribe((filter) => {
-            this._subscriptions.push(this.handleFilterChange(filter).subscribe());
+            this._subscriptions.push(this.handleFilterChange(filter)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe());
         }), datagrid.groupBy.subscribe((group) => {
-            this._subscriptions.push(this.handleGroupChange(group).subscribe());
+            this._subscriptions.push(this.handleGroupChange(group)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe());
         }));
     }
     // Méthodes publiques pour gérer les événements de la datagrid
@@ -8566,9 +8573,9 @@ class DataGrid {
             if (this.autoDataSource) {
                 this.autoDataSource.setData(new AutoDataTable(this.name() ?? '', this.primaryKey(), this.metadatas() ?? []));
                 this.autoDataSource.registerDataGrid(this);
-                toObservable(this.data)
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe((data) => this.autoDataSource?.setRows(data ?? []));
+                // toObservable(this.data)
+                //   .pipe(takeUntilDestroyed(this.destroyRef))
+                //   .subscribe((data) => this.autoDataSource?.setRows(data ?? []));
             }
         }
         this.onInit.emit();
@@ -8813,23 +8820,30 @@ class ChrSimpleTableComponent {
         ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
         this.pageSize = model(10, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+        this.captionTemplate = contentChild('caption', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "captionTemplate" }] : /* istanbul ignore next */ []));
+        this.headerTemplate = contentChild('header', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+        this.rowTemplate = contentChild('row', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowTemplate" }] : /* istanbul ignore next */ []));
+        this.actionsTemplate = contentChild('actions', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsTemplate" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSimpleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrSimpleTableComponent, isStandalone: true, selector: "chr-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, queries: [{ propertyName: "captionTemplate", first: true, predicate: ["caption"], descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, read: TemplateRef }, { propertyName: "rowTemplate", first: true, predicate: ["row"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<table class=\"chr-table\" [attr.data-layout]=\"layout()\">\n    @if (captionTemplate) {\n    <caption>\n        <ng-container [ngTemplateOutlet]=\"captionTemplate\"></ng-container>\n    </caption>\n    }\n    @if (headerTemplate) {\n    <thead>\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n    </thead>\n    }\n    @if (rowTemplate) {\n    <tbody>\n        @for (entry of data() | paginate: { id: id(), itemsPerPage: pageSize(), currentPage: page() }; track $index) {\n        <ng-container [ngTemplateOutlet]=\"rowTemplate\" [ngTemplateOutletContext]=\"{ $implicit: entry }\">\n        </ng-container>\n        } @empty {\n        <tr>\n            <td>Aucune donn\u00E9e disponible</td>\n        </tr>\n        }\n    </tbody>\n    }\n</table>\n<chr-paginator [id]=\"id()\" [(page)]=\"page\" [(pageSize)]=\"pageSize\"></chr-paginator>", styles: [":host{display:block}.chr-table{table-layout:auto;width:100%;border-collapse:collapse;border-radius:.5rem;overflow:hidden;box-shadow:0 .125rem .5rem #00000012}.chr-table[data-layout=fixed]{table-layout:fixed}.chr-table thead th{text-align:left}.chr-table thead th:last-child:not(:first-child){text-align:right}.chr-table tbody th{text-align:center}.chr-table tbody td{text-align:left}.chr-table tbody td:last-child:not(:first-child){text-align:right}.chr-table th,.chr-table td{padding:.75rem;text-align:left}.chr-table td{padding:.25rem .75rem}.chr-table caption{padding:.75rem;text-align:left;width:100%}.chr-table th,.chr-table caption{background-color:var(--primary-color);color:var(--primary-contrast-color);font-weight:600}.chr-table tr:nth-child(2n){background-color:var(--neutral-color)}.chr-table tr:hover{box-shadow:inset 0 0 0 .125rem color-mix(in srgb,var(--primary-color) 30%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrSimpleTableComponent, isStandalone: true, selector: "chr-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, queries: [{ propertyName: "captionTemplate", first: true, predicate: ["caption"], descendants: true, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "rowTemplate", first: true, predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actions"], descendants: true, isSignal: true }], ngImport: i0, template: "<table class=\"chr-table\" [attr.data-layout]=\"layout()\">\n    @if (captionTemplate()) {\n    <caption>\n        <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n    </caption>\n    }\n    @if (headerTemplate()) {\n    <thead>\n        <ng-container [ngTemplateOutlet]=\"headerTemplate()\">\n            @if(actionsTemplate() !== undefined){\n            <th>Actions</th>\n            }\n        </ng-container>\n    </thead>\n    }\n    @if (rowTemplate) {\n    <tbody>\n        @for (entry of data() | paginate: { id: id(), itemsPerPage: pageSize(), currentPage: page() }; track $index) {\n        <ng-container [ngTemplateOutlet]=\"rowTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: entry }\">\n            <ng-container [ngTemplateOutlet]=\"actionsTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: entry }\"></ng-container>\n        </ng-container>\n        } @empty {\n        <tr>\n            <td>Aucune donn\u00E9e disponible</td>\n        </tr>\n        }\n    </tbody>\n    }\n</table>\n<chr-paginator [id]=\"id()\" [(page)]=\"page\" [(pageSize)]=\"pageSize\"></chr-paginator>", styles: [":host{display:block}.chr-table{table-layout:auto;width:100%;border-collapse:collapse;border-radius:.5rem;overflow:hidden;box-shadow:0 .125rem .5rem #00000012}.chr-table[data-layout=fixed]{table-layout:fixed}.chr-table thead th{text-align:left}.chr-table thead th:last-child:not(:first-child){text-align:right}.chr-table tbody th{text-align:center}.chr-table tbody td{text-align:left}.chr-table tbody td:last-child:not(:first-child){text-align:right}.chr-table th,.chr-table td{padding:.75rem;text-align:left}.chr-table td{padding:.25rem .75rem}.chr-table caption{padding:.75rem;text-align:left;width:100%}.chr-table th,.chr-table caption{background-color:var(--primary-color);color:var(--primary-contrast-color);font-weight:600}.chr-table tr:nth-child(2n){background-color:var(--neutral-color)}.chr-table tr:hover{box-shadow:inset 0 0 0 .125rem color-mix(in srgb,var(--primary-color) 20%,transparent)}.chr-table tr:has(>td){position:relative}.chr-table tr:has(>td):hover>td:before{content:\" \";position:absolute;top:0;bottom:0;left:0rem;width:.325rem;background-color:var(--primary-color);border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSimpleTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chr-table', imports: [CommonModule, NgxPaginationModule, ChrPaginatorComponent], encapsulation: ViewEncapsulation.None, template: "<table class=\"chr-table\" [attr.data-layout]=\"layout()\">\n    @if (captionTemplate) {\n    <caption>\n        <ng-container [ngTemplateOutlet]=\"captionTemplate\"></ng-container>\n    </caption>\n    }\n    @if (headerTemplate) {\n    <thead>\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n    </thead>\n    }\n    @if (rowTemplate) {\n    <tbody>\n        @for (entry of data() | paginate: { id: id(), itemsPerPage: pageSize(), currentPage: page() }; track $index) {\n        <ng-container [ngTemplateOutlet]=\"rowTemplate\" [ngTemplateOutletContext]=\"{ $implicit: entry }\">\n        </ng-container>\n        } @empty {\n        <tr>\n            <td>Aucune donn\u00E9e disponible</td>\n        </tr>\n        }\n    </tbody>\n    }\n</table>\n<chr-paginator [id]=\"id()\" [(page)]=\"page\" [(pageSize)]=\"pageSize\"></chr-paginator>", styles: [":host{display:block}.chr-table{table-layout:auto;width:100%;border-collapse:collapse;border-radius:.5rem;overflow:hidden;box-shadow:0 .125rem .5rem #00000012}.chr-table[data-layout=fixed]{table-layout:fixed}.chr-table thead th{text-align:left}.chr-table thead th:last-child:not(:first-child){text-align:right}.chr-table tbody th{text-align:center}.chr-table tbody td{text-align:left}.chr-table tbody td:last-child:not(:first-child){text-align:right}.chr-table th,.chr-table td{padding:.75rem;text-align:left}.chr-table td{padding:.25rem .75rem}.chr-table caption{padding:.75rem;text-align:left;width:100%}.chr-table th,.chr-table caption{background-color:var(--primary-color);color:var(--primary-contrast-color);font-weight:600}.chr-table tr:nth-child(2n){background-color:var(--neutral-color)}.chr-table tr:hover{box-shadow:inset 0 0 0 .125rem color-mix(in srgb,var(--primary-color) 30%,transparent)}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], captionTemplate: [{
-                type: ContentChild,
-                args: ['caption', { read: TemplateRef }]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: ['header', { read: TemplateRef }]
-            }], rowTemplate: [{
-                type: ContentChild,
-                args: ['row', { read: TemplateRef }]
-            }] } });
+            args: [{ selector: 'chr-table', imports: [CommonModule, NgxPaginationModule, ChrPaginatorComponent], encapsulation: ViewEncapsulation.None, template: "<table class=\"chr-table\" [attr.data-layout]=\"layout()\">\n    @if (captionTemplate()) {\n    <caption>\n        <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n    </caption>\n    }\n    @if (headerTemplate()) {\n    <thead>\n        <ng-container [ngTemplateOutlet]=\"headerTemplate()\">\n            @if(actionsTemplate() !== undefined){\n            <th>Actions</th>\n            }\n        </ng-container>\n    </thead>\n    }\n    @if (rowTemplate) {\n    <tbody>\n        @for (entry of data() | paginate: { id: id(), itemsPerPage: pageSize(), currentPage: page() }; track $index) {\n        <ng-container [ngTemplateOutlet]=\"rowTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: entry }\">\n            <ng-container [ngTemplateOutlet]=\"actionsTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: entry }\"></ng-container>\n        </ng-container>\n        } @empty {\n        <tr>\n            <td>Aucune donn\u00E9e disponible</td>\n        </tr>\n        }\n    </tbody>\n    }\n</table>\n<chr-paginator [id]=\"id()\" [(page)]=\"page\" [(pageSize)]=\"pageSize\"></chr-paginator>", styles: [":host{display:block}.chr-table{table-layout:auto;width:100%;border-collapse:collapse;border-radius:.5rem;overflow:hidden;box-shadow:0 .125rem .5rem #00000012}.chr-table[data-layout=fixed]{table-layout:fixed}.chr-table thead th{text-align:left}.chr-table thead th:last-child:not(:first-child){text-align:right}.chr-table tbody th{text-align:center}.chr-table tbody td{text-align:left}.chr-table tbody td:last-child:not(:first-child){text-align:right}.chr-table th,.chr-table td{padding:.75rem;text-align:left}.chr-table td{padding:.25rem .75rem}.chr-table caption{padding:.75rem;text-align:left;width:100%}.chr-table th,.chr-table caption{background-color:var(--primary-color);color:var(--primary-contrast-color);font-weight:600}.chr-table tr:nth-child(2n){background-color:var(--neutral-color)}.chr-table tr:hover{box-shadow:inset 0 0 0 .125rem color-mix(in srgb,var(--primary-color) 20%,transparent)}.chr-table tr:has(>td){position:relative}.chr-table tr:has(>td):hover>td:before{content:\" \";position:absolute;top:0;bottom:0;left:0rem;width:.325rem;background-color:var(--primary-color);border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], captionTemplate: [{ type: i0.ContentChild, args: ['caption', { isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], rowTemplate: [{ type: i0.ContentChild, args: ['row', { isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: ['actions', { isSignal: true }] }] } });
+class ChrSimpleTableActions {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSimpleTableActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ChrSimpleTableActions, isStandalone: true, selector: "chr-table-actions", ngImport: i0, template: ``, isInline: true, styles: [":host{display:flex;flex-direction:row;justify-content:end;gap:.25rem;align-items:center}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSimpleTableActions, decorators: [{
+            type: Component,
+            args: [{ selector: 'chr-table-actions', imports: [], template: ``, encapsulation: ViewEncapsulation.None, styles: [":host{display:flex;flex-direction:row;justify-content:end;gap:.25rem;align-items:center}\n"] }]
+        }] });
 
 class TabToEnterHandlerDirective {
     constructor() {
@@ -9620,5 +9634,5 @@ const provideDebounceEventPlugin = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { Aligments, AnonymousTable, AutoDataSource, AutoDataTable, AutofocusDirective, BaseErrorDisplays, BaseTable, BreadcrumbComponent, ButtonComponent, CHR_DEACTIVATION_MODAL, CHR_DEBOUNCE_DEFAULTS, CHR_MODAL_DATA, CHR_MODAL_REF, CacheService, CachingInterceptor, CarouselComponent, ChrBaseInputComponent, ChrButtonComponent, ChrButtonLegacyComponent, ChrCellDefDirective, ChrCheckboxComponent, ChrColorInputComponent, ChrContextMenuComponent, ChrDataTable, ChrDateInputComponent, ChrDatetimeInputComponent, ChrDeactivationGuard, ChrDebounceDirective, ChrDefaultModalComponent, ChrDeleteModalComponent, ChrDropdownComponent, ChrFile, ChrFileInputComponent, ChrFormComponent, ChrHoverDirective, ChrHoverTitleComponent, ChrHoverTitleDirective, ChrInputComponent, ChrInputData, ChrInputDataOverlay, ChrInputIndicators, ChrLegacyFileInputComponent, ChrModalComponent, ChrNiceFileInputComponent, ChrPaginatorComponent, ChrPasswordInputComponent, ChrPopoverDirective, ChrPreventReloadDirective, ChrSearchSelectComponent, ChrSearchSelectInputComponent, ChrSearchbarComponent, ChrSeparatorComponent, ChrSimpleTableComponent, ChrSpinnerComponent, ChrTableComponent, ChrTableHeaderCellComponent, ChrTagSelectComponent, ChrTagSelectInputComponent, ChrTextAreaInputComponent, ChrTextareaInputComponent, ChrToastComponent, ChrToggleInputComponent, Colors, ColorsVariables, ColumnFilter, ColumnGroup, ColumnMetadata, ContextMenuDirective, ControlClickDirective, CookiesService, CrossCellNavigationDirective, DEFAULTLIVEUPDATEMESSAGE, DEFAULT_TOAST_CONFIG, DGFilterMode, DGGroupAggregationEnum, DataExporterService, DataFormatterService, DataGrid, DataListComponent, DataService, DebounceDefaults, DebounceEventPlugin, DecimalValidatorDirective, DefaultLiveUpdateMessage, DropdownContent, DropdownTitle, ENABLE_CACHE, ENABLE_PROGRESS, EditableCell, FileService, HUBURL, INVALIDATE_CACHE, InlineSvgComponent, LegacyToastService, LiveUpdateService, LiveUpdateStatus, LoaderService, MaxDateValidatorDirective, MaxFileNameLengthValidator, MaxFileSizeValidator, MaxLengthValidatorDirective, MessageBanner, MinFileNameLengthValidator, MinFileSizeValidator, MinLengthValidatorDirective, ModalRef, ModalService, OldSpinnerInterceptor, OutsideClickAwareDirective, ProgressInterceptor, ProgressService, RequiredValidatorDirective, SHOW_SPINNER, SKIP_SPINNER, ScrollIntoViewDirective, Spinner, SpinnerInterceptor, SpinnerService, SyncValidatorToAsync, TabComponent, TabGroupComponent, TabToEnterHandlerDirective, TabToInputHandlerDirective, TableConstraint, TableConstraintColumn, TableConstraintReference, ToastComponent, ToastDefaults, ToastRef, ToastService, TypeValidatorDirective, WaitAndStoreXsrfToken, XSRFCOOKIENAME, XSRFHEADERNAME, XsrfInterceptor, decimal, getAsyncValidators, getBackgroundColor, getBorderColor, getContrastBackgroundColor, getContrastBorderColor, getContrastTextColor, getSyncValidators, getTextColor, getValidators, getVariableColor, getVariableContrastColor, maxDate, maxFileNameLength, maxFileSize, maxLength, minFileNameLength, minFileSize, minLength, provideDebounceEventPlugin, provideXsrfHttpClient, required, type };
+export { Aligments, AnonymousTable, AutoDataSource, AutoDataTable, AutofocusDirective, BaseErrorDisplays, BaseTable, BreadcrumbComponent, ButtonComponent, CHR_DEACTIVATION_MODAL, CHR_DEBOUNCE_DEFAULTS, CHR_MODAL_DATA, CHR_MODAL_REF, CacheService, CachingInterceptor, CarouselComponent, ChrBaseInputComponent, ChrButtonComponent, ChrButtonLegacyComponent, ChrCellDefDirective, ChrCheckboxComponent, ChrColorInputComponent, ChrContextMenuComponent, ChrDataTable, ChrDateInputComponent, ChrDatetimeInputComponent, ChrDeactivationGuard, ChrDebounceDirective, ChrDefaultModalComponent, ChrDeleteModalComponent, ChrDropdownComponent, ChrFile, ChrFileInputComponent, ChrFormComponent, ChrHoverDirective, ChrHoverTitleComponent, ChrHoverTitleDirective, ChrInputComponent, ChrInputData, ChrInputDataOverlay, ChrInputIndicators, ChrLegacyFileInputComponent, ChrModalComponent, ChrNiceFileInputComponent, ChrPaginatorComponent, ChrPasswordInputComponent, ChrPopoverDirective, ChrPreventReloadDirective, ChrSearchSelectComponent, ChrSearchSelectInputComponent, ChrSearchbarComponent, ChrSeparatorComponent, ChrSimpleTableActions, ChrSimpleTableComponent, ChrSpinnerComponent, ChrTableComponent, ChrTableHeaderCellComponent, ChrTagSelectComponent, ChrTagSelectInputComponent, ChrTextAreaInputComponent, ChrTextareaInputComponent, ChrToastComponent, ChrToggleInputComponent, Colors, ColorsVariables, ColumnFilter, ColumnGroup, ColumnMetadata, ContextMenuDirective, ControlClickDirective, CookiesService, CrossCellNavigationDirective, DEFAULTLIVEUPDATEMESSAGE, DEFAULT_TOAST_CONFIG, DGFilterMode, DGGroupAggregationEnum, DataExporterService, DataFormatterService, DataGrid, DataListComponent, DataService, DebounceDefaults, DebounceEventPlugin, DecimalValidatorDirective, DefaultLiveUpdateMessage, DropdownContent, DropdownTitle, ENABLE_CACHE, ENABLE_PROGRESS, EditableCell, FileService, HUBURL, INVALIDATE_CACHE, InlineSvgComponent, LegacyToastService, LiveUpdateService, LiveUpdateStatus, LoaderService, MaxDateValidatorDirective, MaxFileNameLengthValidator, MaxFileSizeValidator, MaxLengthValidatorDirective, MessageBanner, MinFileNameLengthValidator, MinFileSizeValidator, MinLengthValidatorDirective, ModalRef, ModalService, OldSpinnerInterceptor, OutsideClickAwareDirective, ProgressInterceptor, ProgressService, RequiredValidatorDirective, SHOW_SPINNER, SKIP_SPINNER, ScrollIntoViewDirective, Spinner, SpinnerInterceptor, SpinnerService, SyncValidatorToAsync, TabComponent, TabGroupComponent, TabToEnterHandlerDirective, TabToInputHandlerDirective, TableConstraint, TableConstraintColumn, TableConstraintReference, ToastComponent, ToastDefaults, ToastRef, ToastService, TypeValidatorDirective, WaitAndStoreXsrfToken, XSRFCOOKIENAME, XSRFHEADERNAME, XsrfInterceptor, decimal, getAsyncValidators, getBackgroundColor, getBorderColor, getContrastBackgroundColor, getContrastBorderColor, getContrastTextColor, getSyncValidators, getTextColor, getValidators, getVariableColor, getVariableContrastColor, maxDate, maxFileNameLength, maxFileSize, maxLength, minFileNameLength, minFileSize, minLength, provideDebounceEventPlugin, provideXsrfHttpClient, required, type };
 //# sourceMappingURL=chrv-components.mjs.map