chrv-components 1.11.85 → 1.11.86

package/fesm2022/chrv-components.mjs

@@ -4740,11 +4740,11 @@ class EditableCell {
         this.valueSubjet.next(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: EditableCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: EditableCell, isStandalone: true, selector: "chr-editable-cell", inputs: { allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, columnMetadata: { classPropertyName: "columnMetadata", publicName: "columnMetadata", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "spanRef", first: true, predicate: ["spanElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div CrossCellNavigation [allowNavigation]=\"!error()\" class=\"cell-wrapper\" [title]=\"value()\"\r\n    (dblclick)=\"enableEditing()\" (navigateAway)=\"validate()\">\r\n    <!-- [attr.data-has-changed]=\"hasChanged()\" -->\r\n    @if(!isEditing()){\r\n    <span class=\"cell-value\" #spanElement tabindex=\"0\">\r\n        @let val = formattedValue();\r\n        @if(val === null || val === undefined){\r\n        <span class=\"empty-value\">(null)</span>\r\n        }@else if (val === '') {\r\n        <span class=\"empty-value\">(vide)</span>\r\n        }@else if (val?.trim() === '') {\r\n        <span class=\"empty-value\">({{val.length}} blancs)</span>\r\n        }\r\n        @else {\r\n        {{val}}\r\n        }\r\n    </span>\r\n    }\r\n    @else {\r\n    <input class=\"edit-input\" [type]=\"formatter()?.getEditInputType(columnMetadata())\" [value]=\"value() || null\"\r\n        #inputElement (focus)=\"isTouched.set(true)\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"cancel()\"\r\n        (keydown.enter)=\"validate()\" (keydown.escape)=\"cancel()\" autofocus />\r\n    }\r\n    @if(isTouched() || hasChanged()){\r\n    <div class=\"error-message\" [title]=\"error()\">\r\n        {{ error() }}\r\n    </div>\r\n    }\r\n</div>", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.cell-wrapper{display:flex;flex-direction:column;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-items:center;cursor:help}.cell-wrapper[data-has-changed=true]{color:var(--warn-color)}.cell-value{width:100%;height:100%;min-width:100%;min-height:1rem;display:inline-block;overflow:hidden;text-overflow:ellipsis}.cell-value .empty-value{font-style:italic;color:color-mix(in srgb,var(--text-color) 60%,var(--background-color) 50%);text-decoration:underline dashed}.cell-value:focus{position:relative;outline:none;border-bottom:1px solid var(--neutral-color)}.cell-value:focus:after{position:absolute;content:\"lock\";font-family:Material Icons;font-size:.75rem;right:.25rem;top:50%;transform:translateY(-50%);color:var(--warn-color)}.edit-input{width:100%;box-sizing:border-box;font-size:inherit;font-family:inherit;padding:.25rem;outline:none;border:0;background-color:inherit;border-bottom:1px solid var(--primary-color);color:var(--text-color)}.edit-input[type=number]{appearance:textfield;-moz-appearance:textfield}.edit-input[type=number]::-webkit-outer-spin-button,.edit-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.error-message{color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: CrossCellNavigationDirective, selector: "[CrossCellNavigation]", inputs: ["allowNavigation"], outputs: ["navigateNext", "navigatePrevious", "navigateAway"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: EditableCell, isStandalone: true, selector: "chr-editable-cell", inputs: { allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, columnMetadata: { classPropertyName: "columnMetadata", publicName: "columnMetadata", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "spanRef", first: true, predicate: ["spanElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div CrossCellNavigation [allowNavigation]=\"!error()\" class=\"cell-wrapper\" [title]=\"value()\"\r\n    (dblclick)=\"enableEditing()\" (navigateAway)=\"validate()\">\r\n    <!-- [attr.data-has-changed]=\"hasChanged()\" -->\r\n    @if(!isEditing()){\r\n    <span class=\"cell-value\" #spanElement tabindex=\"0\">\r\n        @let val = formattedValue();\r\n        @if(val === null || val === undefined){\r\n        <span class=\"empty-value\">(null)</span>\r\n        }@else if (val === '') {\r\n        <span class=\"empty-value\">(vide)</span>\r\n        }@else if (val?.trim() === '') {\r\n        <span class=\"empty-value\">({{val.length}} blancs)</span>\r\n        }\r\n        @else {\r\n        {{val}}\r\n        }\r\n    </span>\r\n    }\r\n    @else {\r\n    <input class=\"edit-input\" [type]=\"formatter()?.getEditInputType(columnMetadata())\" [value]=\"value() || null\"\r\n        #inputElement (focus)=\"isTouched.set(true)\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"cancel()\"\r\n        (keydown.enter)=\"validate()\" (keydown.escape)=\"cancel()\" autofocus />\r\n    }\r\n    @if(isTouched() || hasChanged()){\r\n    <div class=\"error-message\" [title]=\"error()\">\r\n        {{ error() }}\r\n    </div>\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\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.cell-wrapper{display:flex;flex-direction:column;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-items:center;cursor:help}.cell-wrapper[data-has-changed=true]{color:var(--warn-color)}.cell-value{width:100%;height:100%;min-width:100%;min-height:1rem;display:inline-block;overflow:hidden;text-overflow:ellipsis}.cell-value .empty-value{font-style:italic;color:color-mix(in srgb,var(--text-color) 60%,var(--background-color) 50%);text-decoration:underline dashed}.cell-value:focus{position:relative;outline:none;border-bottom:1px solid var(--neutral-color)}.cell-value:focus:after{position:absolute;content:\"lock\";font-family:Material Icons;font-size:.75rem;right:.25rem;top:50%;transform:translateY(-50%);color:var(--warn-color)}.edit-input{width:100%;box-sizing:border-box;font-size:inherit;font-family:inherit;padding:.25rem;outline:none;border:0;background-color:inherit;border-bottom:1px solid var(--primary-color);color:var(--text-color)}.edit-input[type=number]{appearance:textfield;-moz-appearance:textfield}.edit-input[type=number]::-webkit-outer-spin-button,.edit-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.error-message{color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: CrossCellNavigationDirective, selector: "[CrossCellNavigation]", inputs: ["allowNavigation"], outputs: ["navigateNext", "navigatePrevious", "navigateAway"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: EditableCell, decorators: [{
             type: Component,
-            args: [{ selector: 'chr-editable-cell', imports: [CrossCellNavigationDirective], template: "<div CrossCellNavigation [allowNavigation]=\"!error()\" class=\"cell-wrapper\" [title]=\"value()\"\r\n    (dblclick)=\"enableEditing()\" (navigateAway)=\"validate()\">\r\n    <!-- [attr.data-has-changed]=\"hasChanged()\" -->\r\n    @if(!isEditing()){\r\n    <span class=\"cell-value\" #spanElement tabindex=\"0\">\r\n        @let val = formattedValue();\r\n        @if(val === null || val === undefined){\r\n        <span class=\"empty-value\">(null)</span>\r\n        }@else if (val === '') {\r\n        <span class=\"empty-value\">(vide)</span>\r\n        }@else if (val?.trim() === '') {\r\n        <span class=\"empty-value\">({{val.length}} blancs)</span>\r\n        }\r\n        @else {\r\n        {{val}}\r\n        }\r\n    </span>\r\n    }\r\n    @else {\r\n    <input class=\"edit-input\" [type]=\"formatter()?.getEditInputType(columnMetadata())\" [value]=\"value() || null\"\r\n        #inputElement (focus)=\"isTouched.set(true)\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"cancel()\"\r\n        (keydown.enter)=\"validate()\" (keydown.escape)=\"cancel()\" autofocus />\r\n    }\r\n    @if(isTouched() || hasChanged()){\r\n    <div class=\"error-message\" [title]=\"error()\">\r\n        {{ error() }}\r\n    </div>\r\n    }\r\n</div>", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.cell-wrapper{display:flex;flex-direction:column;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-items:center;cursor:help}.cell-wrapper[data-has-changed=true]{color:var(--warn-color)}.cell-value{width:100%;height:100%;min-width:100%;min-height:1rem;display:inline-block;overflow:hidden;text-overflow:ellipsis}.cell-value .empty-value{font-style:italic;color:color-mix(in srgb,var(--text-color) 60%,var(--background-color) 50%);text-decoration:underline dashed}.cell-value:focus{position:relative;outline:none;border-bottom:1px solid var(--neutral-color)}.cell-value:focus:after{position:absolute;content:\"lock\";font-family:Material Icons;font-size:.75rem;right:.25rem;top:50%;transform:translateY(-50%);color:var(--warn-color)}.edit-input{width:100%;box-sizing:border-box;font-size:inherit;font-family:inherit;padding:.25rem;outline:none;border:0;background-color:inherit;border-bottom:1px solid var(--primary-color);color:var(--text-color)}.edit-input[type=number]{appearance:textfield;-moz-appearance:textfield}.edit-input[type=number]::-webkit-outer-spin-button,.edit-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.error-message{color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'chr-editable-cell', imports: [CrossCellNavigationDirective], template: "<div CrossCellNavigation [allowNavigation]=\"!error()\" class=\"cell-wrapper\" [title]=\"value()\"\r\n    (dblclick)=\"enableEditing()\" (navigateAway)=\"validate()\">\r\n    <!-- [attr.data-has-changed]=\"hasChanged()\" -->\r\n    @if(!isEditing()){\r\n    <span class=\"cell-value\" #spanElement tabindex=\"0\">\r\n        @let val = formattedValue();\r\n        @if(val === null || val === undefined){\r\n        <span class=\"empty-value\">(null)</span>\r\n        }@else if (val === '') {\r\n        <span class=\"empty-value\">(vide)</span>\r\n        }@else if (val?.trim() === '') {\r\n        <span class=\"empty-value\">({{val.length}} blancs)</span>\r\n        }\r\n        @else {\r\n        {{val}}\r\n        }\r\n    </span>\r\n    }\r\n    @else {\r\n    <input class=\"edit-input\" [type]=\"formatter()?.getEditInputType(columnMetadata())\" [value]=\"value() || null\"\r\n        #inputElement (focus)=\"isTouched.set(true)\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"cancel()\"\r\n        (keydown.enter)=\"validate()\" (keydown.escape)=\"cancel()\" autofocus />\r\n    }\r\n    @if(isTouched() || hasChanged()){\r\n    <div class=\"error-message\" [title]=\"error()\">\r\n        {{ error() }}\r\n    </div>\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\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.cell-wrapper{display:flex;flex-direction:column;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-items:center;cursor:help}.cell-wrapper[data-has-changed=true]{color:var(--warn-color)}.cell-value{width:100%;height:100%;min-width:100%;min-height:1rem;display:inline-block;overflow:hidden;text-overflow:ellipsis}.cell-value .empty-value{font-style:italic;color:color-mix(in srgb,var(--text-color) 60%,var(--background-color) 50%);text-decoration:underline dashed}.cell-value:focus{position:relative;outline:none;border-bottom:1px solid var(--neutral-color)}.cell-value:focus:after{position:absolute;content:\"lock\";font-family:Material Icons;font-size:.75rem;right:.25rem;top:50%;transform:translateY(-50%);color:var(--warn-color)}.edit-input{width:100%;box-sizing:border-box;font-size:inherit;font-family:inherit;padding:.25rem;outline:none;border:0;background-color:inherit;border-bottom:1px solid var(--primary-color);color:var(--text-color)}.edit-input[type=number]{appearance:textfield;-moz-appearance:textfield}.edit-input[type=number]::-webkit-outer-spin-button,.edit-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.error-message{color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [] });
 
 class ScrollIntoViewDirective {
@@ -4907,11 +4907,11 @@ class ColumnFilter {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColumnFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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 }, 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\">\r\n    <span class=\"mat-icon material-symbols filter-icon toggle\" [class.faded]=\"!value() && !isOpen()\"\r\n        (dblclick)=\"toggle()\">filter_list</span>\r\n    @if(isOpen()){\r\n    <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n        <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n            <option [selected]=\"mode() == FilterMode.EQUALS\" [value]=\"FilterMode.EQUALS\">\u00C9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.CONTAINS\" [value]=\"FilterMode.CONTAINS\">Contient</option>\r\n            <option [selected]=\"mode() == FilterMode.LOWER_OR_EQUAL\" [value]=\"FilterMode.LOWER_OR_EQUAL\">Plus petit ou\r\n                \u00E9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.GREATER_OR_EQUAL\" [value]=\"FilterMode.GREATER_OR_EQUAL\">Plus grand\r\n                ou \u00E9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.STARTS_WITH\" [value]=\"FilterMode.STARTS_WITH\">Commence par</option>\r\n            <option [selected]=\"mode() == FilterMode.ENDS_WITH\" [value]=\"FilterMode.ENDS_WITH\">Se termine par</option>\r\n        </select>\r\n        <div class=\"input-wrapper\">\r\n            <div class=\"input-and-error\">\r\n                <input #inputElement [type]=\"formatter()?.getEditInputType(columnMetadata())\"\r\n                    placeholder=\"Valeur du filtre\" class=\"filter-input no-input-buttons\" [value]=\"value()\"\r\n                    (input)=\"onInputChange($any($event).target.value)\" />\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 material-symbols apply-button\" title=\"Cliquez pour appliquer le filtre\"\r\n                (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: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}:host{position:relative;display:flex;width:100%;height:1.5rem}.filter-wrapper{display:flex;align-items:center}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start}.filter-wrapper .input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center}.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:min-content}.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;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"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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 }, 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\">\r\n    <span class=\"mat-icon material-symbols filter-icon toggle\" [class.faded]=\"!value() && !isOpen()\"\r\n        (dblclick)=\"toggle()\">filter_list</span>\r\n    @if(isOpen()){\r\n    <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n        <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n            <option [selected]=\"mode() == FilterMode.EQUALS\" [value]=\"FilterMode.EQUALS\">\u00C9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.CONTAINS\" [value]=\"FilterMode.CONTAINS\">Contient</option>\r\n            <option [selected]=\"mode() == FilterMode.LOWER_OR_EQUAL\" [value]=\"FilterMode.LOWER_OR_EQUAL\">Plus petit ou\r\n                \u00E9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.GREATER_OR_EQUAL\" [value]=\"FilterMode.GREATER_OR_EQUAL\">Plus grand\r\n                ou \u00E9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.STARTS_WITH\" [value]=\"FilterMode.STARTS_WITH\">Commence par</option>\r\n            <option [selected]=\"mode() == FilterMode.ENDS_WITH\" [value]=\"FilterMode.ENDS_WITH\">Se termine par</option>\r\n        </select>\r\n        <div class=\"input-wrapper\">\r\n            <div class=\"input-and-error\">\r\n                <input #inputElement [type]=\"formatter()?.getEditInputType(columnMetadata())\"\r\n                    placeholder=\"Valeur du filtre\" class=\"filter-input no-input-buttons\" [value]=\"value()\"\r\n                    (input)=\"onInputChange($any($event).target.value)\" />\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 material-symbols apply-button\" title=\"Cliquez pour appliquer le filtre\"\r\n                (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\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}:host{position:relative;display:flex;width:100%;height:1.5rem}.filter-wrapper{display:flex;align-items:center}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start}.filter-wrapper .input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center}.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:min-content}.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;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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColumnFilter, decorators: [{
             type: Component,
-            args: [{ selector: 'chr-column-filter', imports: [], template: "<div class=\"filter-wrapper\">\r\n    <span class=\"mat-icon material-symbols filter-icon toggle\" [class.faded]=\"!value() && !isOpen()\"\r\n        (dblclick)=\"toggle()\">filter_list</span>\r\n    @if(isOpen()){\r\n    <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n        <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n            <option [selected]=\"mode() == FilterMode.EQUALS\" [value]=\"FilterMode.EQUALS\">\u00C9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.CONTAINS\" [value]=\"FilterMode.CONTAINS\">Contient</option>\r\n            <option [selected]=\"mode() == FilterMode.LOWER_OR_EQUAL\" [value]=\"FilterMode.LOWER_OR_EQUAL\">Plus petit ou\r\n                \u00E9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.GREATER_OR_EQUAL\" [value]=\"FilterMode.GREATER_OR_EQUAL\">Plus grand\r\n                ou \u00E9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.STARTS_WITH\" [value]=\"FilterMode.STARTS_WITH\">Commence par</option>\r\n            <option [selected]=\"mode() == FilterMode.ENDS_WITH\" [value]=\"FilterMode.ENDS_WITH\">Se termine par</option>\r\n        </select>\r\n        <div class=\"input-wrapper\">\r\n            <div class=\"input-and-error\">\r\n                <input #inputElement [type]=\"formatter()?.getEditInputType(columnMetadata())\"\r\n                    placeholder=\"Valeur du filtre\" class=\"filter-input no-input-buttons\" [value]=\"value()\"\r\n                    (input)=\"onInputChange($any($event).target.value)\" />\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 material-symbols apply-button\" title=\"Cliquez pour appliquer le filtre\"\r\n                (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: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}:host{position:relative;display:flex;width:100%;height:1.5rem}.filter-wrapper{display:flex;align-items:center}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start}.filter-wrapper .input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center}.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:min-content}.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;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"] }]
+            args: [{ selector: 'chr-column-filter', imports: [], template: "<div class=\"filter-wrapper\">\r\n    <span class=\"mat-icon material-symbols filter-icon toggle\" [class.faded]=\"!value() && !isOpen()\"\r\n        (dblclick)=\"toggle()\">filter_list</span>\r\n    @if(isOpen()){\r\n    <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n        <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n            <option [selected]=\"mode() == FilterMode.EQUALS\" [value]=\"FilterMode.EQUALS\">\u00C9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.CONTAINS\" [value]=\"FilterMode.CONTAINS\">Contient</option>\r\n            <option [selected]=\"mode() == FilterMode.LOWER_OR_EQUAL\" [value]=\"FilterMode.LOWER_OR_EQUAL\">Plus petit ou\r\n                \u00E9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.GREATER_OR_EQUAL\" [value]=\"FilterMode.GREATER_OR_EQUAL\">Plus grand\r\n                ou \u00E9gal \u00E0</option>\r\n            <option [selected]=\"mode() == FilterMode.STARTS_WITH\" [value]=\"FilterMode.STARTS_WITH\">Commence par</option>\r\n            <option [selected]=\"mode() == FilterMode.ENDS_WITH\" [value]=\"FilterMode.ENDS_WITH\">Se termine par</option>\r\n        </select>\r\n        <div class=\"input-wrapper\">\r\n            <div class=\"input-and-error\">\r\n                <input #inputElement [type]=\"formatter()?.getEditInputType(columnMetadata())\"\r\n                    placeholder=\"Valeur du filtre\" class=\"filter-input no-input-buttons\" [value]=\"value()\"\r\n                    (input)=\"onInputChange($any($event).target.value)\" />\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 material-symbols apply-button\" title=\"Cliquez pour appliquer le filtre\"\r\n                (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\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}:host{position:relative;display:flex;width:100%;height:1.5rem}.filter-wrapper{display:flex;align-items:center}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start}.filter-wrapper .input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center}.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:min-content}.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;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: () => [] });
 
 class DataGrid {
@@ -4926,6 +4926,7 @@ class DataGrid {
         this.pageSizeChange = output();
         this.sort = model(null);
         this.filter = model({});
+        this.actions = input([]);
         this.cellChange = output();
         this.rowClick = output();
         this.allowInsert = input(false);
@@ -5012,7 +5013,16 @@ class DataGrid {
             return false;
         };
         this.getContextMenuItems = (row, rowIndex) => {
-            const items = [];
+            const items = this.actions()
+                ?.filter((action) => action.disabledCallback
+                ? !action.disabledCallback(row)
+                : !action.disabled || false)
+                .map((action) => ({
+                label: action.display,
+                icon: action.icon,
+                action: () => action.callback(row),
+                color: action.color,
+            }));
             if (this.isRowDeleted(row, rowIndex)) {
                 items.push({
                     label: 'Annuler la suppression',
@@ -5202,7 +5212,7 @@ class DataGrid {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DataGrid, isStandalone: true, selector: "chr-data-grid", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, allowInsert: { classPropertyName: "allowInsert", publicName: "allowInsert", isSignal: true, isRequired: false, transformFunction: null }, allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: true, isRequired: false, transformFunction: null }, allowSync: { classPropertyName: "allowSync", publicName: "allowSync", isSignal: true, isRequired: false, transformFunction: null }, allowRefresh: { classPropertyName: "allowRefresh", publicName: "allowRefresh", isSignal: true, isRequired: false, transformFunction: null }, allowNavigation: { classPropertyName: "allowNavigation", publicName: "allowNavigation", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, modifiedCells: { classPropertyName: "modifiedCells", publicName: "modifiedCells", isSignal: true, isRequired: false, transformFunction: null }, modifiedRows: { classPropertyName: "modifiedRows", publicName: "modifiedRows", isSignal: true, isRequired: false, transformFunction: null }, addedRows: { classPropertyName: "addedRows", publicName: "addedRows", isSignal: true, isRequired: false, transformFunction: null }, deletedRows: { classPropertyName: "deletedRows", publicName: "deletedRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sort: "sortChange", filter: "filterChange", cellChange: "cellChange", rowClick: "rowClick", onSync: "onSync", onRefresh: "onRefresh", onAddRow: "onAddRow", onDeleteRow: "onDeleteRow", onDB2Navigate: "onDB2Navigate", onNavigate: "onNavigate", modifiedCells: "modifiedCellsChange", modifiedRows: "modifiedRowsChange", addedRows: "addedRowsChange", deletedRows: "deletedRowsChange" }, providers: [PaginationService], ngImport: i0, template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n    <div class=\"data-grid-header\">\r\n        <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n        <div class=\"data-grid-info\">\r\n            <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n            @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n            <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n                title=\"Synchroniser les changements\">file_upload</span>\r\n            }\r\n            @if(allowRefresh()){\r\n            <span class=\"mat-icon material-symbols  icon-button\" (click)=\"refresh()\"\r\n                title=\"Recharger les donn\u00E9es\">refresh</span>\r\n            }\r\n            @if(allowInsert()){\r\n            <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n                title=\"Ajouter une ligne\">add</span>\r\n            }\r\n            <span>Total: {{ totalItems() }} enregistrements</span>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n        <table class=\"data-grid-table\">\r\n            <thead>\r\n                <tr>\r\n                    @for (column of columns(); track column.columnName) {\r\n                    <th [title]=\"getColumnTooltip(column)\">\r\n                        @if(allowNavigation() && isForeignKeyColumn(column)){\r\n                        <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n                        } @else {\r\n                        <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n                            }}</span>\r\n                        }\r\n                        <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n                            column.dataType }}\r\n                            {{column.length ?\r\n                            `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n                        @if(!canEdit(column)){\r\n                        <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n                        }\r\n                        @if (sort()?.column === column.columnName) {\r\n                        @if (sort()?.isAsc) {\r\n                        <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n                        } @else {\r\n                        <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n                        }\r\n                        }\r\n                        <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n                            [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n                            (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n                    </th>\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n                totalItems: currentItems()};\r\n                track getRowTrackBy(row, $index)) {\r\n                <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n                </ng-container>\r\n                }\r\n                @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n                    [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n                </ng-container>\r\n                }\r\n                @if(rows().length === 0 && addedRows().length === 0){\r\n                <tr>\r\n                    <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n                </tr>\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n\r\n    <ng-template #rowTemplate let-row let-index=\"index\">\r\n        @let isRowValid = validateRow(row);\r\n        <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n            [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n            [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n            [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n            @for (column of columns(); track column.columnName) {\r\n            <td>\r\n                <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n                    (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n                    [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n                    [columnMetadata]=\"column\"></chr-editable-cell>\r\n            </td>\r\n            }\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n    <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }, { kind: "component", type: EditableCell, selector: "chr-editable-cell", inputs: ["allowUpdate", "value", "columnMetadata"], outputs: ["valueChange"] }, { kind: "directive", type: ContextMenuDirective, selector: "[contextMenu], [chrContextMenu], [chr-right-click]", inputs: ["contextMenu"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[scrollIntoView]", inputs: ["scrollIntoView"] }, { kind: "directive", type: ControlClickDirective, selector: "[CtrlClick], [ControlClick]", inputs: ["callback"], outputs: ["ctrlClick"] }, { kind: "component", type: ColumnFilter, selector: "chr-column-filter", inputs: ["isOpen", "by", "mode", "columnMetadata", "value"], outputs: ["isOpenChange", "modeChange", "valueChange", "filterChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DataGrid, isStandalone: true, selector: "chr-data-grid", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, allowInsert: { classPropertyName: "allowInsert", publicName: "allowInsert", isSignal: true, isRequired: false, transformFunction: null }, allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: true, isRequired: false, transformFunction: null }, allowSync: { classPropertyName: "allowSync", publicName: "allowSync", isSignal: true, isRequired: false, transformFunction: null }, allowRefresh: { classPropertyName: "allowRefresh", publicName: "allowRefresh", isSignal: true, isRequired: false, transformFunction: null }, allowNavigation: { classPropertyName: "allowNavigation", publicName: "allowNavigation", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, modifiedCells: { classPropertyName: "modifiedCells", publicName: "modifiedCells", isSignal: true, isRequired: false, transformFunction: null }, modifiedRows: { classPropertyName: "modifiedRows", publicName: "modifiedRows", isSignal: true, isRequired: false, transformFunction: null }, addedRows: { classPropertyName: "addedRows", publicName: "addedRows", isSignal: true, isRequired: false, transformFunction: null }, deletedRows: { classPropertyName: "deletedRows", publicName: "deletedRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sort: "sortChange", filter: "filterChange", cellChange: "cellChange", rowClick: "rowClick", onSync: "onSync", onRefresh: "onRefresh", onAddRow: "onAddRow", onDeleteRow: "onDeleteRow", onDB2Navigate: "onDB2Navigate", onNavigate: "onNavigate", modifiedCells: "modifiedCellsChange", modifiedRows: "modifiedRowsChange", addedRows: "addedRowsChange", deletedRows: "deletedRowsChange" }, providers: [PaginationService], ngImport: i0, template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n    <div class=\"data-grid-header\">\r\n        <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n        <div class=\"data-grid-info\">\r\n            <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n            @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n            <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n                title=\"Synchroniser les changements\">file_upload</span>\r\n            }\r\n            @if(allowRefresh()){\r\n            <span class=\"mat-icon material-symbols  icon-button\" (click)=\"refresh()\"\r\n                title=\"Recharger les donn\u00E9es\">refresh</span>\r\n            }\r\n            @if(allowInsert()){\r\n            <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n                title=\"Ajouter une ligne\">add</span>\r\n            }\r\n            <span>Total: {{ totalItems() }} enregistrements</span>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n        <table class=\"data-grid-table\">\r\n            <thead>\r\n                <tr>\r\n                    @for (column of columns(); track column.columnName) {\r\n                    <th [title]=\"getColumnTooltip(column)\">\r\n                        @if(allowNavigation() && isForeignKeyColumn(column)){\r\n                        <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n                        } @else {\r\n                        <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n                            }}</span>\r\n                        }\r\n                        <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n                            column.dataType }}\r\n                            {{column.length ?\r\n                            `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n                        @if(!canEdit(column)){\r\n                        <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n                        }\r\n                        @if (sort()?.column === column.columnName) {\r\n                        @if (sort()?.isAsc) {\r\n                        <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n                        } @else {\r\n                        <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n                        }\r\n                        }\r\n                        <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n                            [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n                            (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n                    </th>\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n                totalItems: currentItems()};\r\n                track getRowTrackBy(row, $index)) {\r\n                <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n                </ng-container>\r\n                }\r\n                @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n                    [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n                </ng-container>\r\n                }\r\n                @if(rows().length === 0 && addedRows().length === 0){\r\n                <tr>\r\n                    <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n                </tr>\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n\r\n    <ng-template #rowTemplate let-row let-index=\"index\">\r\n        @let isRowValid = validateRow(row);\r\n        <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n            [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n            [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n            [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n            @for (column of columns(); track column.columnName) {\r\n            <td>\r\n                <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n                    (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n                    [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n                    [columnMetadata]=\"column\"></chr-editable-cell>\r\n            </td>\r\n            }\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n    <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", 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\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .table-responsive .mat-icon,.data-grid-container .table-responsive .material-symbols{font-weight:600}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }, { kind: "component", type: EditableCell, selector: "chr-editable-cell", inputs: ["allowUpdate", "value", "columnMetadata"], outputs: ["valueChange"] }, { kind: "directive", type: ContextMenuDirective, selector: "[contextMenu], [chrContextMenu], [chr-right-click]", inputs: ["contextMenu"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[scrollIntoView]", inputs: ["scrollIntoView"] }, { kind: "directive", type: ControlClickDirective, selector: "[CtrlClick], [ControlClick]", inputs: ["callback"], outputs: ["ctrlClick"] }, { kind: "component", type: ColumnFilter, selector: "chr-column-filter", inputs: ["isOpen", "by", "mode", "columnMetadata", "value"], outputs: ["isOpenChange", "modeChange", "valueChange", "filterChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataGrid, decorators: [{
             type: Component,
@@ -5215,7 +5225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         ScrollIntoViewDirective,
                         ControlClickDirective,
                         ColumnFilter,
-                    ], providers: [PaginationService], template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n    <div class=\"data-grid-header\">\r\n        <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n        <div class=\"data-grid-info\">\r\n            <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n            @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n            <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n                title=\"Synchroniser les changements\">file_upload</span>\r\n            }\r\n            @if(allowRefresh()){\r\n            <span class=\"mat-icon material-symbols  icon-button\" (click)=\"refresh()\"\r\n                title=\"Recharger les donn\u00E9es\">refresh</span>\r\n            }\r\n            @if(allowInsert()){\r\n            <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n                title=\"Ajouter une ligne\">add</span>\r\n            }\r\n            <span>Total: {{ totalItems() }} enregistrements</span>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n        <table class=\"data-grid-table\">\r\n            <thead>\r\n                <tr>\r\n                    @for (column of columns(); track column.columnName) {\r\n                    <th [title]=\"getColumnTooltip(column)\">\r\n                        @if(allowNavigation() && isForeignKeyColumn(column)){\r\n                        <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n                        } @else {\r\n                        <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n                            }}</span>\r\n                        }\r\n                        <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n                            column.dataType }}\r\n                            {{column.length ?\r\n                            `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n                        @if(!canEdit(column)){\r\n                        <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n                        }\r\n                        @if (sort()?.column === column.columnName) {\r\n                        @if (sort()?.isAsc) {\r\n                        <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n                        } @else {\r\n                        <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n                        }\r\n                        }\r\n                        <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n                            [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n                            (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n                    </th>\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n                totalItems: currentItems()};\r\n                track getRowTrackBy(row, $index)) {\r\n                <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n                </ng-container>\r\n                }\r\n                @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n                    [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n                </ng-container>\r\n                }\r\n                @if(rows().length === 0 && addedRows().length === 0){\r\n                <tr>\r\n                    <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n                </tr>\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n\r\n    <ng-template #rowTemplate let-row let-index=\"index\">\r\n        @let isRowValid = validateRow(row);\r\n        <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n            [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n            [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n            [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n            @for (column of columns(); track column.columnName) {\r\n            <td>\r\n                <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n                    (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n                    [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n                    [columnMetadata]=\"column\"></chr-editable-cell>\r\n            </td>\r\n            }\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n    <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"] }]
+                    ], providers: [PaginationService], template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n    <div class=\"data-grid-header\">\r\n        <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n        <div class=\"data-grid-info\">\r\n            <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n            @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n            <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n                title=\"Synchroniser les changements\">file_upload</span>\r\n            }\r\n            @if(allowRefresh()){\r\n            <span class=\"mat-icon material-symbols  icon-button\" (click)=\"refresh()\"\r\n                title=\"Recharger les donn\u00E9es\">refresh</span>\r\n            }\r\n            @if(allowInsert()){\r\n            <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n                title=\"Ajouter une ligne\">add</span>\r\n            }\r\n            <span>Total: {{ totalItems() }} enregistrements</span>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n        <table class=\"data-grid-table\">\r\n            <thead>\r\n                <tr>\r\n                    @for (column of columns(); track column.columnName) {\r\n                    <th [title]=\"getColumnTooltip(column)\">\r\n                        @if(allowNavigation() && isForeignKeyColumn(column)){\r\n                        <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n                        } @else {\r\n                        <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n                            }}</span>\r\n                        }\r\n                        <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n                            column.dataType }}\r\n                            {{column.length ?\r\n                            `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n                        @if(!canEdit(column)){\r\n                        <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n                        }\r\n                        @if (sort()?.column === column.columnName) {\r\n                        @if (sort()?.isAsc) {\r\n                        <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n                        } @else {\r\n                        <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n                        }\r\n                        }\r\n                        <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n                            [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n                            (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n                    </th>\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n                totalItems: currentItems()};\r\n                track getRowTrackBy(row, $index)) {\r\n                <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n                </ng-container>\r\n                }\r\n                @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n                    [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n                </ng-container>\r\n                }\r\n                @if(rows().length === 0 && addedRows().length === 0){\r\n                <tr>\r\n                    <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n                </tr>\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n\r\n    <ng-template #rowTemplate let-row let-index=\"index\">\r\n        @let isRowValid = validateRow(row);\r\n        <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n            [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n            [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n            [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n            @for (column of columns(); track column.columnName) {\r\n            <td>\r\n                <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n                    (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n                    [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n                    [columnMetadata]=\"column\"></chr-editable-cell>\r\n            </td>\r\n            }\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n    <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", 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\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .table-responsive .mat-icon,.data-grid-container .table-responsive .material-symbols{font-weight:600}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"] }]
         }], ctorParameters: () => [] });
 
 class MessageBanner {
@@ -5231,11 +5241,11 @@ class MessageBanner {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MessageBanner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MessageBanner, isStandalone: true, selector: "chr-message-banner", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n    <div class=\"banner-header\">\r\n        <span class=\"mat-icon material-symbols\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n        <strong class=\"banner-title\">{{title()}}</strong>\r\n    </div>\r\n    <div class=\"message-content\">\r\n        {{message()}}\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(closable()){\r\n    <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n    }\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MessageBanner, isStandalone: true, selector: "chr-message-banner", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n    <div class=\"banner-header\">\r\n        <span class=\"mat-icon material-symbols\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n        <strong class=\"banner-title\">{{title()}}</strong>\r\n    </div>\r\n    <div class=\"message-content\">\r\n        {{message()}}\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(closable()){\r\n    <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n    }\r\n</div>\r\n}", 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\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MessageBanner, decorators: [{
             type: Component,
-            args: [{ selector: 'chr-message-banner', imports: [], template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n    <div class=\"banner-header\">\r\n        <span class=\"mat-icon material-symbols\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n        <strong class=\"banner-title\">{{title()}}</strong>\r\n    </div>\r\n    <div class=\"message-content\">\r\n        {{message()}}\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(closable()){\r\n    <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n    }\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'chr-message-banner', imports: [], template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n    <div class=\"banner-header\">\r\n        <span class=\"mat-icon material-symbols\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n        <strong class=\"banner-title\">{{title()}}</strong>\r\n    </div>\r\n    <div class=\"message-content\">\r\n        {{message()}}\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(closable()){\r\n    <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n    }\r\n</div>\r\n}", 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\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }]
         }] });
 
 class TabToEnterHandlerDirective {