cilog-lib 1.10.20 → 1.11.0

package/fesm2022/cilog-lib.mjs

@@ -1,58 +1,69 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, NgModule, EventEmitter, forwardRef, HostListener, ViewChild, Output, Input, Pipe, LOCALE_ID } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import * as i3 from '@angular/common';
-import { CommonModule, registerLocaleData } from '@angular/common';
-import * as i3$1 from 'primeng/dialog';
+import { Component, Injectable, Pipe, EventEmitter, HostListener, ViewChild, Output, Input } from '@angular/core';
+import * as i2 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
+import { BehaviorSubject } from 'rxjs';
 import * as i1 from 'primeng/api';
-import { ConfirmationService } from 'primeng/api';
-import * as i4 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import * as i5 from 'primeng/table';
+import * as i6 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i2 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
-import * as i7 from 'primeng/selectbutton';
-import { SelectButtonModule } from 'primeng/selectbutton';
-import * as i8 from 'primeng/dropdown';
-import { DropdownModule } from 'primeng/dropdown';
-import * as i9 from 'primeng/inputnumber';
+import * as i7 from 'primeng/contextmenu';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import * as i15 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import * as i10 from 'primeng/multiselect';
-import { MultiSelectModule } from 'primeng/multiselect';
-import * as i11 from 'primeng/calendar';
-import { CalendarModule } from 'primeng/calendar';
-import * as i14 from 'primeng/tag';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
-import * as i13 from 'primeng/tooltip';
+import * as i8 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i15 from 'primeng/inputswitch';
-import { InputSwitchModule } from 'primeng/inputswitch';
-import { SkeletonModule } from 'primeng/skeleton';
-import * as i1$1 from 'primeng/editor';
-import { EditorModule } from 'primeng/editor';
-import * as i12 from 'primeng/contextmenu';
-import { ContextMenuModule } from 'primeng/contextmenu';
-import * as i6 from 'primeng/tabview';
-import { TabViewModule } from 'primeng/tabview';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as i4 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i9 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import * as i10 from 'primeng/datepicker';
+import { DatePickerModule } from 'primeng/datepicker';
+import * as i11 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
+import * as i12 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import * as i13 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i14 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
 import * as Excel from 'exceljs';
 import * as FileSaver from 'file-saver';
-import * as i16 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import localeFr from '@angular/common/locales/fr';
-import * as i1$2 from '@angular/common/http';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
-import * as i2$1 from '@angular/router';
-import * as i8$1 from 'ngx-markdown';
-import { MarkdownModule } from 'ngx-markdown';
-import * as i9$1 from 'primeng/progressspinner';
+import * as i5$1 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import * as i6$1 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
+import { EditorModule } from 'primeng/editor';
+import { MarkdownComponent } from 'ngx-markdown';
+import * as i1$1 from '@angular/common/http';
+import * as i2$1 from '@angular/router';
+
+class CilogLibComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CilogLibComponent, isStandalone: false, selector: "lib-cilog-lib", ngImport: i0, template: `
+    <p>
+      cilog-lib works!
+    </p>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogLibComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-cilog-lib', template: `
+    <p>
+      cilog-lib works!
+    </p>
+  `, standalone: false }]
+        }], ctorParameters: () => [] });
 
 class CilogMessageService {
+    display;
+    message;
     constructor() {
         this.message = new BehaviorSubject(null);
         this.display = new BehaviorSubject(null);
@@ -69,10 +80,10 @@ class CilogMessageService {
     closeDialog() {
         this.display.next(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogMessageService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogMessageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogMessageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogMessageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -80,6 +91,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }], ctorParameters: () => [] });
 
 class CilogMessageComponent {
+    messageService;
+    display;
+    message;
     constructor(messageService) {
         this.messageService = messageService;
     }
@@ -141,100 +155,16 @@ class CilogMessageComponent {
     refreshPage() {
         window.location.reload();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogMessageComponent, deps: [{ token: CilogMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CilogMessageComponent, selector: "cilog-message", ngImport: i0, template: "<p-dialog [styleClass]=\"classBySeverity()\"\r\n          [(visible)]=\"display\"\r\n          [modal]=\"true\"\r\n          [baseZIndex]=\"10000\"\r\n          [closable]=\"false\"\r\n          [resizable]=\"false\"\r\n          [draggable]=\"false\">\r\n\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\">\r\n        <i class=\"pi {{ iconBySeverity() }} header_icon\"></i>\r\n        <span class=\"header_text\">{{ headerBySeverity() }}</span>\r\n    </ng-template>\r\n\r\n    <!-- Content -->\r\n    <p class=\"content mb-3\"\r\n       [innerHTML]=\"message?.content\">\r\n    </p>\r\n\r\n    <!-- Boutons -->\r\n    <button pButton\r\n            *ngIf=\"message?.closable == true && message?.refresh == false\"\r\n            icon=\"pi pi-check\"\r\n            (click)=\"display=false\"\r\n            label=\"Ok\"\r\n            style=\"float:right;\"\r\n            class=\"p-button-text\">\r\n    </button>\r\n    <button pButton\r\n            *ngIf=\"message?.refresh == true\"\r\n            icon=\"pi pi-refresh\"\r\n            (click)=\"refreshPage()\"\r\n            label=\"Rafra\u00EEchir\"\r\n            style=\"float:right;\"\r\n            class=\"p-button-text\">\r\n    </button>\r\n\r\n</p-dialog>\r\n", styles: [":host ::ng-deep .message_success>div{background-color:#b7fdc0}:host ::ng-deep .message_error>div{background-color:#fdb8b7}:host ::ng-deep .message_warn>div{background-color:#fff5ba}:host ::ng-deep .message_info>div{background-color:#b7eefd}:host ::ng-deep .p-dialog-content,:host ::ng-deep .p-dialog-footer,:host ::ng-deep .p-dialog-header{padding:10px}:host ::ng-deep .content{margin:4px;white-space:pre}:host ::ng-deep .p-button-text{padding-top:0;padding-bottom:3px}:host ::ng-deep .header_text{font-weight:500;font-size:1.25rem;margin-left:10px}:host ::ng-deep .header_icon{font-size:1.5rem}:host ::ng-deep .p-dialog-header{justify-content:inherit}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogMessageComponent, deps: [{ token: CilogMessageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CilogMessageComponent, isStandalone: true, selector: "cilog-message", ngImport: i0, template: "<p-dialog [styleClass]=\"classBySeverity()\"\n  [(visible)]=\"display\"\n  [modal]=\"true\"\n  [baseZIndex]=\"10000\"\n  [closable]=\"false\"\n  [resizable]=\"false\"\n  [draggable]=\"false\">\n\n  <!-- Header -->\n  <ng-template pTemplate=\"header\">\n    <i class=\"pi {{ iconBySeverity() }} header_icon\"></i>\n    <span class=\"header_text\">{{ headerBySeverity() }}</span>\n  </ng-template>\n\n  <!-- Content -->\n  <p class=\"content mb-3\"\n    [innerHTML]=\"message?.content\">\n  </p>\n\n  <!-- Boutons -->\n  @if (message?.closable == true && message?.refresh == false) {\n    <button pButton\n      icon=\"pi pi-check\"\n      (click)=\"display=false\"\n      label=\"Ok\"\n      style=\"float:right;\"\n      class=\"p-button-text\">\n    </button>\n  }\n  @if (message?.refresh == true) {\n    <button pButton\n      icon=\"pi pi-refresh\"\n      (click)=\"refreshPage()\"\n      label=\"Rafra\u00EEchir\"\n      style=\"float:right;\"\n      class=\"p-button-text\">\n    </button>\n  }\n\n</p-dialog>\n", styles: [":host ::ng-deep .message_success>div{background-color:#b7fdc0}:host ::ng-deep .message_error>div{background-color:#fdb8b7}:host ::ng-deep .message_warn>div{background-color:#fff5ba}:host ::ng-deep .message_info>div{background-color:#b7eefd}:host ::ng-deep .p-dialog-content,:host ::ng-deep .p-dialog-footer,:host ::ng-deep .p-dialog-header{padding:10px}:host ::ng-deep .content{margin:4px;white-space:pre}:host ::ng-deep .p-button-text{padding-top:0;padding-bottom:3px}:host ::ng-deep .header_text{font-weight:500;font-size:1.25rem;margin-left:10px}:host ::ng-deep .header_icon{font-size:1.5rem}:host ::ng-deep .p-dialog-header{justify-content:inherit}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cilog-message', template: "<p-dialog [styleClass]=\"classBySeverity()\"\r\n          [(visible)]=\"display\"\r\n          [modal]=\"true\"\r\n          [baseZIndex]=\"10000\"\r\n          [closable]=\"false\"\r\n          [resizable]=\"false\"\r\n          [draggable]=\"false\">\r\n\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\">\r\n        <i class=\"pi {{ iconBySeverity() }} header_icon\"></i>\r\n        <span class=\"header_text\">{{ headerBySeverity() }}</span>\r\n    </ng-template>\r\n\r\n    <!-- Content -->\r\n    <p class=\"content mb-3\"\r\n       [innerHTML]=\"message?.content\">\r\n    </p>\r\n\r\n    <!-- Boutons -->\r\n    <button pButton\r\n            *ngIf=\"message?.closable == true && message?.refresh == false\"\r\n            icon=\"pi pi-check\"\r\n            (click)=\"display=false\"\r\n            label=\"Ok\"\r\n            style=\"float:right;\"\r\n            class=\"p-button-text\">\r\n    </button>\r\n    <button pButton\r\n            *ngIf=\"message?.refresh == true\"\r\n            icon=\"pi pi-refresh\"\r\n            (click)=\"refreshPage()\"\r\n            label=\"Rafra\u00EEchir\"\r\n            style=\"float:right;\"\r\n            class=\"p-button-text\">\r\n    </button>\r\n\r\n</p-dialog>\r\n", styles: [":host ::ng-deep .message_success>div{background-color:#b7fdc0}:host ::ng-deep .message_error>div{background-color:#fdb8b7}:host ::ng-deep .message_warn>div{background-color:#fff5ba}:host ::ng-deep .message_info>div{background-color:#b7eefd}:host ::ng-deep .p-dialog-content,:host ::ng-deep .p-dialog-footer,:host ::ng-deep .p-dialog-header{padding:10px}:host ::ng-deep .content{margin:4px;white-space:pre}:host ::ng-deep .p-button-text{padding-top:0;padding-bottom:3px}:host ::ng-deep .header_text{font-weight:500;font-size:1.25rem;margin-left:10px}:host ::ng-deep .header_icon{font-size:1.5rem}:host ::ng-deep .p-dialog-header{justify-content:inherit}\n"] }]
+            args: [{ selector: 'cilog-message', imports: [
+                        DialogModule
+                    ], template: "<p-dialog [styleClass]=\"classBySeverity()\"\n  [(visible)]=\"display\"\n  [modal]=\"true\"\n  [baseZIndex]=\"10000\"\n  [closable]=\"false\"\n  [resizable]=\"false\"\n  [draggable]=\"false\">\n\n  <!-- Header -->\n  <ng-template pTemplate=\"header\">\n    <i class=\"pi {{ iconBySeverity() }} header_icon\"></i>\n    <span class=\"header_text\">{{ headerBySeverity() }}</span>\n  </ng-template>\n\n  <!-- Content -->\n  <p class=\"content mb-3\"\n    [innerHTML]=\"message?.content\">\n  </p>\n\n  <!-- Boutons -->\n  @if (message?.closable == true && message?.refresh == false) {\n    <button pButton\n      icon=\"pi pi-check\"\n      (click)=\"display=false\"\n      label=\"Ok\"\n      style=\"float:right;\"\n      class=\"p-button-text\">\n    </button>\n  }\n  @if (message?.refresh == true) {\n    <button pButton\n      icon=\"pi pi-refresh\"\n      (click)=\"refreshPage()\"\n      label=\"Rafra\u00EEchir\"\n      style=\"float:right;\"\n      class=\"p-button-text\">\n    </button>\n  }\n\n</p-dialog>\n", styles: [":host ::ng-deep .message_success>div{background-color:#b7fdc0}:host ::ng-deep .message_error>div{background-color:#fdb8b7}:host ::ng-deep .message_warn>div{background-color:#fff5ba}:host ::ng-deep .message_info>div{background-color:#b7eefd}:host ::ng-deep .p-dialog-content,:host ::ng-deep .p-dialog-footer,:host ::ng-deep .p-dialog-header{padding:10px}:host ::ng-deep .content{margin:4px;white-space:pre}:host ::ng-deep .p-button-text{padding-top:0;padding-bottom:3px}:host ::ng-deep .header_text{font-weight:500;font-size:1.25rem;margin-left:10px}:host ::ng-deep .header_icon{font-size:1.5rem}:host ::ng-deep .p-dialog-header{justify-content:inherit}\n"] }]
         }], ctorParameters: () => [{ type: CilogMessageService }] });
 
-class CilogLibComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CilogLibComponent, selector: "lib-cilog-lib", ngImport: i0, template: `
-    <p>
-      cilog-lib works!
-    </p>
-  `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogLibComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-cilog-lib', template: `
-    <p>
-      cilog-lib works!
-    </p>
-  ` }]
-        }], ctorParameters: () => [] });
-
-class PrimengModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PrimengModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: PrimengModule, imports: [CommonModule], exports: [DialogModule,
-            ButtonModule,
-            TableModule,
-            InputTextModule,
-            SelectButtonModule,
-            DropdownModule,
-            InputNumberModule,
-            ConfirmDialogModule,
-            MultiSelectModule,
-            CalendarModule,
-            ContextMenuModule,
-            TagModule,
-            TooltipModule,
-            InputSwitchModule,
-            SkeletonModule,
-            EditorModule,
-            TabViewModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PrimengModule, imports: [CommonModule, DialogModule,
-            ButtonModule,
-            TableModule,
-            InputTextModule,
-            SelectButtonModule,
-            DropdownModule,
-            InputNumberModule,
-            ConfirmDialogModule,
-            MultiSelectModule,
-            CalendarModule,
-            ContextMenuModule,
-            TagModule,
-            TooltipModule,
-            InputSwitchModule,
-            SkeletonModule,
-            EditorModule,
-            TabViewModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PrimengModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    exports: [
-                        DialogModule,
-                        ButtonModule,
-                        TableModule,
-                        InputTextModule,
-                        SelectButtonModule,
-                        DropdownModule,
-                        InputNumberModule,
-                        ConfirmDialogModule,
-                        MultiSelectModule,
-                        CalendarModule,
-                        ContextMenuModule,
-                        TagModule,
-                        TooltipModule,
-                        InputSwitchModule,
-                        SkeletonModule,
-                        EditorModule,
-                        TabViewModule
-                    ],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
-        }] });
-
 var Position;
 (function (Position) {
     Position["Right"] = "right";
@@ -286,194 +216,54 @@ var ModeCalendar;
     ModeCalendar["DateHour"] = "datehour";
 })(ModeCalendar || (ModeCalendar = {}));
 
-class ExportService {
-    constructor() { }
-    exportExcel(values, columns, byFiltre, withColors) {
-        // Workbook
-        let wb = new Excel.Workbook();
-        // Worksheet
-        let ws = wb.addWorksheet('Export', {
-            properties: { defaultColWidth: 20 },
-        });
-        // Colonnes
-        let cols = [];
-        columns = columns.filter(col => !col.invisible);
-        columns.forEach(col => {
-            if (!byFiltre || col.exportable == true) {
-                let colExcel = {
-                    header: col.libelle,
-                    key: col.id,
-                    style: this.getStyleByType(col.type)
-                };
-                if (col.width != null && col.width.includes('px')) {
-                    const px = parseInt(col.width.replace('px', '').trim(), 10);
-                    const excelWidth = px / 7;
-                    colExcel.width = parseFloat(excelWidth.toFixed(2));
-                }
-                cols.push(colExcel);
-            }
-        });
-        ws.columns = cols;
-        // Lignes
-        values.forEach(row => {
-            if (!byFiltre || row.exportable == true) {
-                let rowExcel = {};
-                columns.filter(obj => !byFiltre || obj.exportable == true).forEach(col => {
-                    if (row[col.id].excelSubstitution != null) {
-                        rowExcel[col.id] = row[col.id].excelSubstitution;
-                    }
-                    else {
-                        rowExcel[col.id] = this.getValueByType(row[col.id], col);
-                    }
-                });
-                // Application du style de chaque cellule
-                let result = ws.addRow(rowExcel);
-                columns.filter(obj => !byFiltre || obj.exportable == true).forEach((col, index) => {
-                    const cell = result.getCell(index + 1);
-                    if (row[col.id].bold) {
-                        cell.font = { bold: true };
-                    }
-                    if (withColors) {
-                        if ((row.color != null && row.color != '') || (row[col.id].color != null && row[col.id].color != '')) {
-                            cell.style.fill = {
-                                type: "pattern",
-                                pattern: "solid",
-                                fgColor: {
-                                    argb: row[col.id].color != null ? this.getHexaColor(row[col.id].color) : this.getHexaColor(row.color)
-                                },
-                                bgColor: {
-                                    argb: row[col.id].color != null ? this.getHexaColor(row[col.id].color) : this.getHexaColor(row.color)
-                                }
-                            };
-                        }
-                    }
-                });
-            }
-        });
-        // Style
-        this.setStyleGlobalGrille(ws);
-        // Sauvegarde
-        wb.xlsx.writeBuffer().then(function (buffer) {
-            const data = new Blob([buffer], {
-                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-            });
-            FileSaver.saveAs(data, "Export Excel.xlsx");
-        });
-    }
-    getHexaColor(color) {
-        var ctx = document.createElement('canvas').getContext('2d');
-        ctx.fillStyle = color;
-        return ctx.fillStyle.replace('#', '');
-    }
-    setStyleGlobalGrille(ws) {
-        ws.views = [
-            { state: 'frozen', ySplit: 1 }
-        ];
-        ws.eachRow((row, rowNumber) => {
-            row.eachCell({ includeEmpty: true }, (cell, number) => {
-                if (rowNumber == 1) {
-                    cell.fill = {
-                        pattern: 'solid',
-                        type: 'pattern',
-                        fgColor: {
-                            argb: '2fab49',
-                        },
-                    };
-                    cell.alignment = { horizontal: 'center' };
-                    cell.alignment.vertical = 'middle';
-                    cell.font = {
-                        name: 'Arial',
-                        size: 10,
-                        bold: true
-                    };
-                    cell.border = {
-                        bottom: { style: 'thin' },
-                        top: { style: 'thin' },
-                        left: { style: 'thin' },
-                        right: { style: 'thin' },
-                    };
-                }
-                else {
-                    cell.border = {
-                        bottom: { style: 'thin' },
-                        top: { style: 'thin' },
-                        left: { style: 'thin' },
-                        right: { style: 'thin' },
-                    };
-                }
-            });
-        });
-        ws.autoFilter = {
-            from: 'A1',
-            to: this.columnIndexToColumnLetter(ws.columnCount).toString() + '1',
-        };
-    }
-    columnIndexToColumnLetter(column) {
-        var temp, letter = '';
-        while (column > 0) {
-            temp = (column - 1) % 26;
-            letter = String.fromCharCode(temp + 65) + letter;
-            column = (column - temp - 1) / 26;
-        }
-        return letter;
-    }
-    getValueByType(cell, col) {
-        switch (col.type) {
-            case ColType.MultiSelect:
-                let optionLabelMulti = cell.options != null && cell.options.optionLabel != null ? cell.options.optionLabel : col.options.optionLabel;
-                return cell.value.map(val => val[optionLabelMulti]).join(', ');
-            case ColType.SelectButton:
-            case ColType.Dropdown:
-            case ColType.State:
-                let optionLabel = cell.options != null && cell.options.optionLabel != null ? cell.options.optionLabel : col.options.optionLabel;
-                return cell.value != null ? cell.value[optionLabel] : null;
-            case ColType.Image:
-            case ColType.Button:
-                return null;
-            case ColType.Switch:
-                return cell.value == true ? 'Oui' : 'Non';
-            case ColType.Date:
-                if (cell.value != null) {
-                    let dateStr = cell.value.getFullYear() + '-' + ((cell.value.getMonth() + 1 < 10) ? '0' + (cell.value.getMonth() + 1) : (cell.value.getMonth() + 1)) + '-' + (cell.value.getDate() < 10 ? '0' + cell.value.getDate() : cell.value.getDate()) + 'T00:00:00.000Z';
-                    return new Date(dateStr);
-                }
-                else {
-                    return null;
-                }
-            default:
-                return cell.value;
+class ValuePipe {
+    transform(obj, ...args) {
+        if (typeof obj === 'number') {
+            if (isNaN(obj))
+                return '0';
+            if (!isFinite(obj))
+                return '0';
+            if (obj != null)
+                return obj.toLocaleString('fr-FR', { maximumFractionDigits: 2 });
+            return "";
         }
-    }
-    getStyleByType(type) {
-        switch (type) {
-            case ColType.Date:
-                return { numFmt: 'dd/mm/yyyy' };
-            case ColType.CilogNumber:
-            case ColType.Number:
-                return { numFmt: '#,##0.00' };
-            default:
-                return null;
+        else {
+            return obj;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExportService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ValuePipe, isStandalone: true, name: "value" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExportService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ValuePipe, decorators: [{
+            type: Pipe,
             args: [{
-                    providedIn: 'root'
+                    name: 'value'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class CilogInputNumberComponent {
-    constructor() {
-        this.onInput = new EventEmitter();
-        this.onChange = new EventEmitter();
-        this.onFocus = new EventEmitter();
-        this.onBlur = new EventEmitter();
-        this.valueStr = '';
-        this.specialKeys = ['Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight'];
-    }
+    value;
+    min;
+    max;
+    maxDecimals;
+    prefixe;
+    suffixe;
+    inputStyleClass;
+    disabled;
+    readonly;
+    textColor;
+    bold;
+    italic;
+    floatLabel;
+    onInput = new EventEmitter();
+    onChange = new EventEmitter();
+    onFocus = new EventEmitter();
+    onBlur = new EventEmitter();
+    valueStr = '';
+    cilogInputNumber;
+    regex;
+    specialKeys = ['Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight'];
+    constructor() { }
     ngOnInit() {
         this.regex = new RegExp(`^-?\\d{1,3}(?:\\d{3})*(?:[\\.,]\\d{0,${this.maxDecimals || Number.MAX_SAFE_INTEGER}})?$`);
     }
@@ -653,24 +443,14 @@ class CilogInputNumberComponent {
     registerOnTouched(fn) {
         this.onTouchedInput = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CilogInputNumberComponent, selector: "cilog-input-number", inputs: { min: "min", max: "max", maxDecimals: "maxDecimals", prefixe: "prefixe", suffixe: "suffixe", inputStyleClass: "inputStyleClass", disabled: "disabled", readonly: "readonly", textColor: "textColor", bold: "bold", italic: "italic", floatLabel: "floatLabel" }, outputs: { onInput: "onInput", onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, host: { listeners: { "keydown": "onKeyDownEvent($event)" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CilogInputNumberComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "cilogInputNumber", first: true, predicate: ["cilogInputNumber"], descendants: true }], ngImport: i0, template: "<div class=\"input-group w-full\">\r\n\r\n    <span class=\"input-group-addon prefixe\"\r\n          *ngIf=\"prefixe != null\">\r\n        {{ prefixe }}\r\n    </span>\r\n\r\n    <div [ngClass]=\"{ 'p-float-label' : floatLabel != null }\">\r\n        <input #cilogInputNumber\r\n               pInputText\r\n               type=\"text\"\r\n               [disabled]=\"disabled\"\r\n               [readonly]=\"readonly\"\r\n               [value]=\"valueStr\"\r\n               (focus)=\"onFocusEvent($event)\"\r\n               (blur)=\"onBlurEvent($event)\"\r\n               [class]=\"'w-full z-1' + (inputStyleClass == null ? '' : ' ' + inputStyleClass)\"\r\n               [ngClass]=\"suffixe != null && prefixe != null ? 'border-noround' : prefixe != null ? 'border-noround-left' : suffixe != null ? 'border-noround-right' : null\"\r\n               [ngStyle]=\"{ 'color' : textColor ? textColor : null }\" />\r\n\r\n        <label *ngIf=\"floatLabel != null\">{{ floatLabel }}</label>\r\n    </div>\r\n\r\n    <span class=\"input-group-addon suffixe\"\r\n          *ngIf=\"suffixe != null\">\r\n        {{ suffixe }}\r\n    </span>\r\n\r\n</div>\r\n", styles: [":host ::ng-deep .input-group{display:flex!important}:host ::ng-deep .input-group-addon{background-color:#fff!important;border:1px solid #ccc!important;padding:0 12px!important;max-width:5rem!important;overflow:hidden!important;font-weight:700!important}:host ::ng-deep .prefixe{border-radius:4px 0 0 4px!important;border-right:none!important;display:flex;align-items:center}:host ::ng-deep .suffixe{border-radius:0 4px 4px 0!important;border-left:none!important;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["variant"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CilogInputNumberComponent, isStandalone: true, selector: "cilog-input-number", inputs: { min: "min", max: "max", maxDecimals: "maxDecimals", prefixe: "prefixe", suffixe: "suffixe", inputStyleClass: "inputStyleClass", disabled: "disabled", readonly: "readonly", textColor: "textColor", bold: "bold", italic: "italic", floatLabel: "floatLabel" }, outputs: { onInput: "onInput", onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, host: { listeners: { "keydown": "onKeyDownEvent($event)" } }, viewQueries: [{ propertyName: "cilogInputNumber", first: true, predicate: ["cilogInputNumber"], descendants: true }], ngImport: i0, template: "<div class=\"input-group w-full\">\n\n    @if (prefixe != null) {\n    <span class=\"input-group-addon prefixe\">\n        {{ prefixe }}\n    </span>\n    }\n\n    <div [ngClass]=\"{ 'p-float-label' : floatLabel != null }\">\n        <input #cilogInputNumber\n               pInputText\n               type=\"text\"\n               [disabled]=\"disabled\"\n               [readonly]=\"readonly\"\n               [value]=\"valueStr\"\n               (focus)=\"onFocusEvent($event)\"\n               (blur)=\"onBlurEvent($event)\"\n               [class]=\"'w-full z-1' + (inputStyleClass == null ? '' : ' ' + inputStyleClass)\"\n               [ngClass]=\"suffixe != null && prefixe != null ? 'border-noround' : prefixe != null ? 'border-noround-left' : suffixe != null ? 'border-noround-right' : null\"\n               [ngStyle]=\"{ 'color' : textColor ? textColor : null }\" />\n\n        @if (floatLabel != null) {\n        <label>{{ floatLabel }}</label>\n        }\n    </div>\n\n    @if (suffixe != null) {\n    <span class=\"input-group-addon suffixe\">\n        {{ suffixe }}\n    </span>\n    }\n\n</div>\n", styles: [":host ::ng-deep .input-group{display:flex!important}:host ::ng-deep .input-group-addon{background-color:#fff!important;border:1px solid #ccc!important;padding:0 12px!important;max-width:5rem!important;overflow:hidden!important;font-weight:700!important}:host ::ng-deep .prefixe{border-radius:4px 0 0 4px!important;border-right:none!important;display:flex;align-items:center}:host ::ng-deep .suffixe{border-radius:0 4px 4px 0!important;border-left:none!important;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogInputNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogInputNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cilog-input-number', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CilogInputNumberComponent),
-                            multi: true
-                        }
-                    ], template: "<div class=\"input-group w-full\">\r\n\r\n    <span class=\"input-group-addon prefixe\"\r\n          *ngIf=\"prefixe != null\">\r\n        {{ prefixe }}\r\n    </span>\r\n\r\n    <div [ngClass]=\"{ 'p-float-label' : floatLabel != null }\">\r\n        <input #cilogInputNumber\r\n               pInputText\r\n               type=\"text\"\r\n               [disabled]=\"disabled\"\r\n               [readonly]=\"readonly\"\r\n               [value]=\"valueStr\"\r\n               (focus)=\"onFocusEvent($event)\"\r\n               (blur)=\"onBlurEvent($event)\"\r\n               [class]=\"'w-full z-1' + (inputStyleClass == null ? '' : ' ' + inputStyleClass)\"\r\n               [ngClass]=\"suffixe != null && prefixe != null ? 'border-noround' : prefixe != null ? 'border-noround-left' : suffixe != null ? 'border-noround-right' : null\"\r\n               [ngStyle]=\"{ 'color' : textColor ? textColor : null }\" />\r\n\r\n        <label *ngIf=\"floatLabel != null\">{{ floatLabel }}</label>\r\n    </div>\r\n\r\n    <span class=\"input-group-addon suffixe\"\r\n          *ngIf=\"suffixe != null\">\r\n        {{ suffixe }}\r\n    </span>\r\n\r\n</div>\r\n", styles: [":host ::ng-deep .input-group{display:flex!important}:host ::ng-deep .input-group-addon{background-color:#fff!important;border:1px solid #ccc!important;padding:0 12px!important;max-width:5rem!important;overflow:hidden!important;font-weight:700!important}:host ::ng-deep .prefixe{border-radius:4px 0 0 4px!important;border-right:none!important;display:flex;align-items:center}:host ::ng-deep .suffixe{border-radius:0 4px 4px 0!important;border-left:none!important;display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'cilog-input-number', imports: [
+                        CommonModule
+                    ], template: "<div class=\"input-group w-full\">\n\n    @if (prefixe != null) {\n    <span class=\"input-group-addon prefixe\">\n        {{ prefixe }}\n    </span>\n    }\n\n    <div [ngClass]=\"{ 'p-float-label' : floatLabel != null }\">\n        <input #cilogInputNumber\n               pInputText\n               type=\"text\"\n               [disabled]=\"disabled\"\n               [readonly]=\"readonly\"\n               [value]=\"valueStr\"\n               (focus)=\"onFocusEvent($event)\"\n               (blur)=\"onBlurEvent($event)\"\n               [class]=\"'w-full z-1' + (inputStyleClass == null ? '' : ' ' + inputStyleClass)\"\n               [ngClass]=\"suffixe != null && prefixe != null ? 'border-noround' : prefixe != null ? 'border-noround-left' : suffixe != null ? 'border-noround-right' : null\"\n               [ngStyle]=\"{ 'color' : textColor ? textColor : null }\" />\n\n        @if (floatLabel != null) {\n        <label>{{ floatLabel }}</label>\n        }\n    </div>\n\n    @if (suffixe != null) {\n    <span class=\"input-group-addon suffixe\">\n        {{ suffixe }}\n    </span>\n    }\n\n</div>\n", styles: [":host ::ng-deep .input-group{display:flex!important}:host ::ng-deep .input-group-addon{background-color:#fff!important;border:1px solid #ccc!important;padding:0 12px!important;max-width:5rem!important;overflow:hidden!important;font-weight:700!important}:host ::ng-deep .prefixe{border-radius:4px 0 0 4px!important;border-right:none!important;display:flex;align-items:center}:host ::ng-deep .suffixe{border-radius:0 4px 4px 0!important;border-left:none!important;display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -711,50 +491,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['keydown', ['$event']]
             }] } });
 
-class ValuePipe {
-    transform(obj, ...args) {
-        if (typeof obj === 'number') {
-            if (isNaN(obj))
-                return '0';
-            if (!isFinite(obj))
-                return '0';
-            if (obj != null)
-                return obj.toLocaleString('fr-FR', { maximumFractionDigits: 2 });
-            return "";
+class ExportService {
+    constructor() { }
+    exportExcel(values, columns, byFiltre, withColors) {
+        // Workbook
+        let wb = new Excel.Workbook();
+        // Worksheet
+        let ws = wb.addWorksheet('Export', {
+            properties: { defaultColWidth: 20 },
+        });
+        // Colonnes
+        let cols = [];
+        columns = columns.filter(col => !col.invisible);
+        columns.forEach(col => {
+            if (!byFiltre || col.exportable == true) {
+                let colExcel = {
+                    header: col.libelle,
+                    key: col.id,
+                    style: this.getStyleByType(col.type)
+                };
+                if (col.width != null && col.width.includes('px')) {
+                    const px = parseInt(col.width.replace('px', '').trim(), 10);
+                    const excelWidth = px / 7;
+                    colExcel.width = parseFloat(excelWidth.toFixed(2));
+                }
+                cols.push(colExcel);
+            }
+        });
+        ws.columns = cols;
+        // Lignes
+        values.forEach(row => {
+            if (!byFiltre || row.exportable == true) {
+                let rowExcel = {};
+                columns.filter(obj => !byFiltre || obj.exportable == true).forEach(col => {
+                    if (row[col.id].excelSubstitution != null) {
+                        rowExcel[col.id] = row[col.id].excelSubstitution;
+                    }
+                    else {
+                        rowExcel[col.id] = this.getValueByType(row[col.id], col);
+                    }
+                });
+                // Application du style de chaque cellule
+                let result = ws.addRow(rowExcel);
+                columns.filter(obj => !byFiltre || obj.exportable == true).forEach((col, index) => {
+                    const cell = result.getCell(index + 1);
+                    if (row[col.id].bold) {
+                        cell.font = { bold: true };
+                    }
+                    if (withColors) {
+                        if ((row.color != null && row.color != '') || (row[col.id].color != null && row[col.id].color != '')) {
+                            cell.style.fill = {
+                                type: "pattern",
+                                pattern: "solid",
+                                fgColor: {
+                                    argb: row[col.id].color != null ? this.getHexaColor(row[col.id].color) : this.getHexaColor(row.color)
+                                },
+                                bgColor: {
+                                    argb: row[col.id].color != null ? this.getHexaColor(row[col.id].color) : this.getHexaColor(row.color)
+                                }
+                            };
+                        }
+                    }
+                });
+            }
+        });
+        // Style
+        this.setStyleGlobalGrille(ws);
+        // Sauvegarde
+        wb.xlsx.writeBuffer().then(function (buffer) {
+            const data = new Blob([buffer], {
+                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            });
+            FileSaver.saveAs(data, "Export Excel.xlsx");
+        });
+    }
+    getHexaColor(color) {
+        var ctx = document.createElement('canvas').getContext('2d');
+        ctx.fillStyle = color;
+        return ctx.fillStyle.replace('#', '');
+    }
+    setStyleGlobalGrille(ws) {
+        ws.views = [
+            { state: 'frozen', ySplit: 1 }
+        ];
+        ws.eachRow((row, rowNumber) => {
+            row.eachCell({ includeEmpty: true }, (cell, number) => {
+                if (rowNumber == 1) {
+                    cell.fill = {
+                        pattern: 'solid',
+                        type: 'pattern',
+                        fgColor: {
+                            argb: '2fab49',
+                        },
+                    };
+                    cell.alignment = { horizontal: 'center' };
+                    cell.alignment.vertical = 'middle';
+                    cell.font = {
+                        name: 'Arial',
+                        size: 10,
+                        bold: true
+                    };
+                    cell.border = {
+                        bottom: { style: 'thin' },
+                        top: { style: 'thin' },
+                        left: { style: 'thin' },
+                        right: { style: 'thin' },
+                    };
+                }
+                else {
+                    cell.border = {
+                        bottom: { style: 'thin' },
+                        top: { style: 'thin' },
+                        left: { style: 'thin' },
+                        right: { style: 'thin' },
+                    };
+                }
+            });
+        });
+        ws.autoFilter = {
+            from: 'A1',
+            to: this.columnIndexToColumnLetter(ws.columnCount).toString() + '1',
+        };
+    }
+    columnIndexToColumnLetter(column) {
+        var temp, letter = '';
+        while (column > 0) {
+            temp = (column - 1) % 26;
+            letter = String.fromCharCode(temp + 65) + letter;
+            column = (column - temp - 1) / 26;
         }
-        else {
-            return obj;
+        return letter;
+    }
+    getValueByType(cell, col) {
+        switch (col.type) {
+            case ColType.MultiSelect:
+                let optionLabelMulti = cell.options != null && cell.options.optionLabel != null ? cell.options.optionLabel : col.options.optionLabel;
+                return cell.value.map(val => val[optionLabelMulti]).join(', ');
+            case ColType.SelectButton:
+            case ColType.Dropdown:
+            case ColType.State:
+                let optionLabel = cell.options != null && cell.options.optionLabel != null ? cell.options.optionLabel : col.options.optionLabel;
+                return cell.value != null ? cell.value[optionLabel] : null;
+            case ColType.Image:
+            case ColType.Button:
+                return null;
+            case ColType.Switch:
+                return cell.value == true ? 'Oui' : 'Non';
+            case ColType.Date:
+                if (cell.value != null) {
+                    let dateStr = cell.value.getFullYear() + '-' + ((cell.value.getMonth() + 1 < 10) ? '0' + (cell.value.getMonth() + 1) : (cell.value.getMonth() + 1)) + '-' + (cell.value.getDate() < 10 ? '0' + cell.value.getDate() : cell.value.getDate()) + 'T00:00:00.000Z';
+                    return new Date(dateStr);
+                }
+                else {
+                    return null;
+                }
+            default:
+                return cell.value;
+        }
+    }
+    getStyleByType(type) {
+        switch (type) {
+            case ColType.Date:
+                return { numFmt: 'dd/mm/yyyy' };
+            case ColType.CilogNumber:
+            case ColType.Number:
+                return { numFmt: '#,##0.00' };
+            default:
+                return null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ValuePipe, name: "value" }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExportService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePipe, decorators: [{
-            type: Pipe,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExportService, decorators: [{
+            type: Injectable,
             args: [{
-                    name: 'value'
+                    providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class CilogTableComponent {
+    confirmationService;
+    filterService;
+    cdRef;
+    exportService;
+    initFilter = true;
+    columns;
+    columnsChange = new EventEmitter();
+    values;
+    valuesChange = new EventEmitter();
+    options;
+    loading;
+    onEdit = new EventEmitter();
+    onEditInit = new EventEmitter();
+    onDelete = new EventEmitter();
+    onSelect = new EventEmitter();
+    onUnselect = new EventEmitter();
+    onFilter = new EventEmitter();
+    onFilterInit = new EventEmitter();
+    onSort = new EventEmitter();
+    onPage = new EventEmitter();
+    onRowDoubleClick = new EventEmitter();
+    selectedRows;
+    filterDatesRange;
+    optionsSwitch;
+    contextMenuSelectedItem;
+    table;
+    cm;
+    inputNumber;
     constructor(confirmationService, filterService, cdRef, exportService) {
         this.confirmationService = confirmationService;
         this.filterService = filterService;
         this.cdRef = cdRef;
         this.exportService = exportService;
-        this.initFilter = true;
-        this.columnsChange = new EventEmitter();
-        this.valuesChange = new EventEmitter();
-        this.onEdit = new EventEmitter();
-        this.onEditInit = new EventEmitter();
-        this.onDelete = new EventEmitter();
-        this.onSelect = new EventEmitter();
-        this.onUnselect = new EventEmitter();
-        this.onFilter = new EventEmitter();
-        this.onFilterInit = new EventEmitter();
-        this.onSort = new EventEmitter();
-        this.onPage = new EventEmitter();
-        this.onRowDoubleClick = new EventEmitter();
     }
     ngOnInit() {
         this.optionsSwitch = [
@@ -1340,12 +1289,28 @@ class CilogTableComponent {
             this.inputNumber.input.nativeElement.focus();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogTableComponent, deps: [{ token: i1.ConfirmationService }, { token: i1.FilterService }, { token: i0.ChangeDetectorRef }, { token: ExportService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CilogTableComponent, selector: "cilog-table", inputs: { columns: "columns", values: "values", options: "options", loading: "loading" }, outputs: { columnsChange: "columnsChange", valuesChange: "valuesChange", onEdit: "onEdit", onEditInit: "onEditInit", onDelete: "onDelete", onSelect: "onSelect", onUnselect: "onUnselect", onFilter: "onFilter", onFilterInit: "onFilterInit", onSort: "onSort", onPage: "onPage", onRowDoubleClick: "onRowDoubleClick" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "cm", first: true, predicate: ["cm"], descendants: true }, { propertyName: "inputNumber", first: true, predicate: ["inputNumber"], descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{ 'height': options.scrollHeight != null ? options.scrollHeight : '100%' }\">\r\n\r\n    <button pButton\r\n            *ngIf=\"options.exportExcel\"\r\n            icon=\"pi pi-file-excel\"\r\n            class=\"p-button-success absolute z-5 w-2rem h-2rem border-round-right border-noround-top\"\r\n            pTooltip=\"Exporter le contenu de la grille au format Excel\"\r\n            (click)=\"exportExcel(options.exportExcelByFiltre, !options.exportExcelNoColors)\">\r\n    </button>\r\n\r\n    <p-contextMenu #cm [model]=\"options.contextMenuItems\" />\r\n\r\n    <p-table #table\r\n             [columns]=\"columns\"\r\n             [value]=\"values\"\r\n             dataKey=\"id\"\r\n             [selectionMode]=\"getModeSelection()\"\r\n             [metaKeySelection]=\"isModeMetakeySelection()\"\r\n             [(selection)]=\"selectedRows\"\r\n             (onRowSelect)=\"onSelectRow($event)\"\r\n             (onRowUnselect)=\"onUnselectRow($event)\"\r\n             (onHeaderCheckboxToggle)=\"onSelectAll($event)\"\r\n             (sortFunction)=\"sortGrille($event)\"\r\n             [customSort]=\"options.grouping == null ? true : false\"\r\n             [scrollable]=\"true\"\r\n             [loading]=\"loading\"\r\n             [scrollHeight]=\"'flex'\"\r\n             [rowGroupMode]=\"options.grouping != null ? 'subheader' : null\"\r\n             [groupRowsBy]=\"options.grouping != null ? options.grouping.obj + '.' + options.grouping.id : null\"\r\n             [groupRowsByOrder]=\"0\"\r\n             [virtualScroll]=\"options.virtualScroll == true && options.scrollHeight != null ? true : false\"\r\n             [virtualScrollItemSize]=\"options.virtualScrollItemSize != null ? options.virtualScrollItemSize : 35\"\r\n             [paginator]=\"options.paginator == null ? false : true\"\r\n             [rows]=\"options.paginatorRows\"\r\n             (onPage)=\"onPageTable($event)\"\r\n             [tableStyleClass]=\"!options.themeGrille ? 'grid_grey' : options.themeGrille\"\r\n             [lazy]=\"options.lazy == true ? true : false\"\r\n             (onFilter)=\"onFilterTable($event)\"\r\n             [rowTrackBy]=\"trackByFunction\"\r\n             [(contextMenuSelection)]=\"contextMenuSelectedItem\"\r\n             [contextMenu]=\"cm\">\r\n\r\n        <!-- HEADER -->\r\n        <ng-template pTemplate=\"header\" let-columns>\r\n\r\n            <!-- HEADERS -->\r\n            <tr class=\"rowHeader\">\r\n                <th class=\"cellDelete\"\r\n                    *ngIf=\"isModeCheckboxSelection()\"\r\n                    pFrozenColumn>\r\n                    <p-tableHeaderCheckbox *ngIf=\"!options.filterable && options.toggleAll\"></p-tableHeaderCheckbox>\r\n                </th>\r\n                <ng-container *ngFor=\"let col of columns\">\r\n                    <th *ngIf=\"!col.invisible\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': col.backgroundColor ? col.backgroundColor : null }\"\r\n                        [ngClass]=\"{ 'text-center' : options.centerHeaders, 'headerAffichageSimple': !options.headersAffichageEntier, 'headerAffichageEntier': options.headersAffichageEntier }\"\r\n                        [pSortableColumn]=\"col.id\"\r\n                        [pSortableColumnDisabled]=\"!options.sortable || options.grouping != null || col.libelle == null || col.libelle == ''\"\r\n                        id=\"{{ col.id }}\"\r\n                        (click)=\"refreshData()\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\"\r\n                        [pTooltip]=\"col.libelle\"\r\n                        [tooltipDisabled]=\"!col.tooltipHeader\"\r\n                        tooltipPosition=\"bottom\">\r\n                        <div [ngStyle]=\"{ 'color': col.textColor ? col.textColor : null }\">\r\n                            {{ col.libelle }}\r\n                        </div>\r\n                        <p-sortIcon *ngIf=\"options.sortable && options.grouping == null && col.libelle != null && col.libelle != ''\"\r\n                                    [field]=\"col.id\">\r\n                        </p-sortIcon>\r\n                    </th>\r\n                </ng-container>\r\n                <th class=\"cellDelete\" *ngIf=\"options.rowsDeletable\"></th>\r\n            </tr>\r\n\r\n            <!-- FILTRES -->\r\n            <tr *ngIf=\"options.filterable\" class=\"rowFilter\">\r\n\r\n                <th class=\"cellDelete\"\r\n                    *ngIf=\"isModeCheckboxSelection()\"\r\n                    pFrozenColumn>\r\n                    <p-tableHeaderCheckbox *ngIf=\"options.toggleAll\"></p-tableHeaderCheckbox>\r\n                </th>\r\n\r\n                <ng-container *ngFor=\"let col of columns\">\r\n                    <!-- Text -->\r\n                    <th *ngIf=\"!col.invisible && ((checkType('Dropdown', col) && col.options.filterText)\r\n                        || (checkType('MultiSelect', col) && col.options.filterText)\r\n                        || checkType('Text', col)\r\n                        || checkType('File', col)\r\n                        || (checkType('Button', col) && col.options.filterCol))\r\n                        || checkType('Number', col)\r\n                        || checkType('CilogNumber', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <input *ngIf=\"!col.disableFilter\"\r\n                               pInputText\r\n                               type=\"text\"\r\n                               (input)=\"onFilterCol($event, col)\"\r\n                               [(ngModel)]=\"col.options.defaultFilters\">\r\n                    </th>\r\n\r\n                    <!-- Date -->\r\n                    <th *ngIf=\"!col.invisible && checkType('Date', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <p-calendar *ngIf=\"!col.disableFilter\"\r\n                                    [view]=\"getOption(col, rowData, 'mode') == null ? 'date' : getOption(col, rowData, 'mode')\"\r\n                                    [dateFormat]=\"getOption(col, rowData, 'mode') == 'year' ? 'yy' : getOption(col, rowData, 'mode') == 'month' ? 'mm/yy' : 'dd/mm/yy'\"\r\n                                    [inputId]=\"col.id + '_filter'\"\r\n                                    firstDayOfWeek=\"1\"\r\n                                    [readonlyInput]=\"true\"\r\n                                    appendTo=\"body\"\r\n                                    selectionMode=\"range\"\r\n                                    (onSelect)=\"onFilterCol($event, col)\"\r\n                                    showButtonBar=\"true\"\r\n                                    (onClearClick)=\"onFilterCol($event, col)\"\r\n                                    [(ngModel)]=\"col.options.defaultFilters\">\r\n                        </p-calendar>\r\n                    </th>\r\n\r\n                    <!-- Liste -->\r\n                    <th *ngIf=\"!col.invisible && ((checkType('Dropdown', col) && !col.options.filterText) || (checkType('MultiSelect', col) && !col.options.filterText) || checkType('SelectButton', col) || checkType('State', col))\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <p-multiSelect *ngIf=\"!col.disableFilter\"\r\n                                       [options]=\"col.options?.options\"\r\n                                       [filter]=\"true\"\r\n                                       dataKey=\"ID\"\r\n                                       [optionLabel]=\"col.options?.optionLabel\"\r\n                                       appendTo=\"body\"\r\n                                       emptyFilterMessage=\"Aucun r\u00E9sultat\"\r\n                                       emptyMessage=\"Aucun r\u00E9sultat\"\r\n                                       [virtualScroll]=\"true\"\r\n                                       [virtualScrollItemSize]=\"35\"\r\n                                       selectedItemsLabel=\"{0} selectionn\u00E9s\"\r\n                                       (onChange)=\"onFilterCol($event, col)\"\r\n                                       [(ngModel)]=\"col.options.defaultFilters\"\r\n                                       [group]=\"col.options.optionGroupChildren != null ? true : false\"\r\n                                       [optionGroupLabel]=\"col.options.optionGroupLabel\"\r\n                                       [optionGroupChildren]=\"col.options.optionGroupChildren\"\r\n                                       [showToggleAll]=\"false\"\r\n                                       [showClear]=\"true\"\r\n                                       (onClear)=\"onFilterCol(null, col)\">\r\n                            <ng-template let-group pTemplate=\"group\">\r\n                                <div>{{group[col.options.optionGroupLabel]}}</div>\r\n                            </ng-template>\r\n                        </p-multiSelect>\r\n                    </th>\r\n\r\n                    <!-- Switch -->\r\n                    <th *ngIf=\"!col.invisible && checkType('Switch', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <p-multiSelect *ngIf=\"!col.disableFilter\"\r\n                                       [options]=\"optionsSwitch\"\r\n                                       [showHeader]=\"false\"\r\n                                       optionLabel=\"label\"\r\n                                       optionValue=\"value\"\r\n                                       appendTo=\"body\"\r\n                                       emptyFilterMessage=\"Aucun r\u00E9sultat\"\r\n                                       emptyMessage=\"Aucun r\u00E9sultat\"\r\n                                       [virtualScrollItemSize]=\"30\"\r\n                                       selectedItemsLabel=\"{0} selectionn\u00E9s\"\r\n                                       (onChange)=\"onFilterCol($event, col)\"\r\n                                       [(ngModel)]=\"col.options.defaultFilters\">\r\n                        </p-multiSelect>\r\n                    </th>\r\n\r\n                    <!-- Non filtrable -->\r\n                    <th *ngIf=\"!col.invisible && (checkType('Image', col) || (checkType('Button', col) && !col.options.filterCol))\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                    </th>\r\n                </ng-container>\r\n                <th class=\"cellDelete\" *ngIf=\"options.rowsDeletable\"></th>\r\n            </tr>\r\n\r\n            <!-- TOTAL -->\r\n            <tr *ngIf=\"options.rowTotal\"\r\n                class=\"rowTotal\">\r\n                <th class=\"cellDelete\"\r\n                    *ngIf=\"isModeCheckboxSelection()\"\r\n                    pFrozenColumn>\r\n                </th>\r\n                <ng-container *ngFor=\"let col of columns\">\r\n                    <th *ngIf=\"!col.invisible\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        [ngClass]=\"{ 'text-center' : true }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div>{{ getTotalStr(col) }}</div>\r\n                    </th>\r\n                </ng-container>\r\n                <th class=\"cellDelete\" *ngIf=\"options.rowsDeletable\"></th>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!--Groupheader-->\r\n        <ng-template pTemplate=\"groupheader\" let-rowData>\r\n            <tr pRowGroupHeader class=\"rowGrouping\">\r\n                <td [attr.colspan]=\"columns.length\">\r\n                    <div class=\"text_bold\">{{ rowData[options.grouping.obj][options.grouping.libelle] }}</div>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- Body -->\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\r\n            <tr id=\"{{ rowData.id }}\"\r\n                [ngStyle]=\"{ 'background-color': rowData.color ? rowData.color : null }\"\r\n                [pSelectableRow]=\"rowData\"\r\n                [pSelectableRowDisabled]=\"!options.selectable || isModeCheckboxSelection() || isModeCellSelection()\"\r\n                (dblclick)=\"onRowDoubleClickEvent(rowData)\"\r\n                [pContextMenuRow]=\"rowData\"\r\n                [pContextMenuRowDisabled]=\"options.contextMenuItems == null\">\r\n\r\n                <td *ngIf=\"isModeCheckboxSelection()\"\r\n                    class=\"cellDelete\"\r\n                    pFrozenColumn>\r\n                    <p-tableCheckbox [value]=\"rowData\" [disabled]=\"rowData.readonly\"></p-tableCheckbox>\r\n                </td>\r\n\r\n                <ng-container *ngFor=\"let col of columns\">\r\n\r\n                    <!-- Text -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Text', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pEditableColumn]=\"rowData\"\r\n                        [pEditableColumnField]=\"col.id\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [frozen]=\"col.frozen\"\r\n                        [ngClass]=\"{\r\n                             'text-left': col.position == 'left' || col.position == null,\r\n                             'text-right': col.position == 'right',\r\n                             'text-center': col.position == 'center',\r\n                             'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                             'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                             'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-cellEditor>\r\n                            <ng-template pTemplate=\"input\">\r\n                                <input pInputText\r\n                                       type=\"text\"\r\n                                       [(ngModel)]=\"rowData[col.id].value\"\r\n                                       (blur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                       (keydown.enter)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                       (keydown.tab)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                       (click)=\"onEditInitCell(rowData, col, rowData[col.id].value)\"\r\n                                       [ngClass]=\"{\r\n                                            'text-left': col.position == 'left' || col.position == null,\r\n                                            'text-right': col.position == 'right',\r\n                                            'text-center': col.position == 'center',\r\n                                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                            'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                       }\" />\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"output\">\r\n                                <div *ngIf=\"rowData[col.id]\"\r\n                                     style=\"white-space: pre;\">\r\n                                    {{ getFormattedText(col, rowData) }}\r\n                                </div>\r\n                            </ng-template>\r\n                        </p-cellEditor>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('Text', col) && (!isModeEdition() || rowData.readonly || rowData[col.id]?.readonly)\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color' : rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">\r\n                            {{ col.libelle }} :\r\n                        </div>\r\n                        <div *ngIf=\"rowData[col.id]\"\r\n                             style=\"white-space: pre;\">\r\n                            {{ getFormattedText(col, rowData) }}\r\n                        </div>\r\n                    </td>\r\n\r\n                    <!-- Dropdown -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Dropdown', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        [ngClass]=\"{\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\"\r\n                        class=\"paddingCell\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-dropdown *ngIf=\"rowData[col.id] != null\"\r\n                                    dataKey=\"ID\"\r\n                                    [options]=\"getOption(col, rowData, 'options')\"\r\n                                    [filter]=\"getOption(col, rowData, 'filter')\"\r\n                                    [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\r\n                                    [(ngModel)]=\"rowData[col.id].value\"\r\n                                    [autoDisplayFirst]=\"false\"\r\n                                    appendTo=\"body\"\r\n                                    [showClear]=\"getOption(col, rowData, 'deletable')\"\r\n                                    emptyFilterMessage=\"Aucun r\u00E9sultat\"\r\n                                    emptyMessage=\"Aucun r\u00E9sultat\"\r\n                                    [baseZIndex]=\"getOption(col, rowData, 'baseZIndex')\"\r\n                                    [virtualScroll]=\"getOption(col, rowData, 'virtualScroll')\"\r\n                                    [readonly]=\"rowData.readonly || rowData[col.id]?.readonly\"\r\n                                    [virtualScrollItemSize]=\"30\"\r\n                                    (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                    (onClear)=\"onEditCell(rowData, col, rowData[col.id].value)\">\r\n                            <ng-template let-data pTemplate=\"selectedItem\">\r\n                                <span *ngIf=\"data != null\"\r\n                                      [ngClass]=\"{\r\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                    }\">\r\n                                    {{ data[getOption(col, rowData, 'optionLabel')] }}\r\n                                </span>\r\n                                <span *ngIf=\"data == null\"></span>\r\n                            </ng-template>\r\n                        </p-dropdown>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('Dropdown', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : '' }}</div>\r\n                    </td>\r\n\r\n                    <!-- Cilog Number -->\r\n                    <td *ngIf=\"!col.invisible && checkType('CilogNumber', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <cilog-input-number *ngIf=\"rowData[col.id] && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                                            (onInput)=\"onInputNumber($event)\"\r\n                                            [(ngModel)]=\"rowData[col.id].value\"\r\n                                            [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\r\n                                            [textColor]=\"rowData[col.id].textColor\"\r\n                                            [bold]=\"rowData.bold == true || rowData[col.id].bold == true\"\r\n                                            [italic]=\"rowData.italic == true || rowData[col.id].italic == true\"\r\n                                            [suffixe]=\"getOption(col, rowData, 'suffix')\"\r\n                                            [prefixe]=\"getOption(col, rowData, 'prefix') != null ? getOption(col, rowData, 'prefix') + ' ' : null\"\r\n                                            [min]=\"getOption(col, rowData, 'min')\"\r\n                                            [max]=\"getOption(col, rowData, 'max')\"\r\n                                            [disabled]=\"rowData.readonly || rowData[col.id]?.readonly\"\r\n                                            [maxDecimals]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'maxDecimales') != null ? getOption(col, rowData, 'maxDecimales') : 2 \"\r\n                                            (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                            (onFocus)=\"onEditInitCell(rowData, col, rowData[col.id].value)\">\r\n                        </cilog-input-number>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('CilogNumber', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ getFormattedNumber(col, rowData, rowData[col.id].value) }}</div>\r\n                    </td>\r\n\r\n                    <!-- Number -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Number', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left',\r\n                            'text-right': col.position == 'right' || col.position == null,\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\"\r\n                        (click)=\"onClickCellNumber(rowData, col)\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id] && !rowData[col.id].focus\">\r\n                            {{ getFormattedNumber(col, rowData, rowData[col.id].value) }}\r\n                        </div>\r\n                        <p-inputNumber #inputNumber\r\n                                       *ngIf=\"rowData[col.id] && !rowData.readonly && !rowData[col.id]?.readonly && rowData[col.id].focus == true\"\r\n                                       locale=\"fr-FR\"\r\n                                       (onInput)=\"onInputNumber($event)\"\r\n                                       [(ngModel)]=\"rowData[col.id].value\"\r\n                                       [showButtons]=\"getOption(col, rowData, 'showButtons')\"\r\n                                       [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\r\n                                       [inputStyle]=\"{ 'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null, 'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null }\"\r\n                                       [suffix]=\"getOption(col, rowData, 'suffix')\"\r\n                                       [prefix]=\"getOption(col, rowData, 'prefix') != null ? getOption(col, rowData, 'prefix') + ' ' : null\"\r\n                                       [min]=\"getOption(col, rowData, 'min')\"\r\n                                       [max]=\"getOption(col, rowData, 'max')\"\r\n                                       [minFractionDigits]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'minDecimales') != null ? getOption(col, rowData, 'minDecimales') : 0\"\r\n                                       [maxFractionDigits]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'maxDecimales') != null ? getOption(col, rowData, 'maxDecimales') : 2 \"\r\n                                       (onBlur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                       (onKeyDown)=\"onKeyDown($event, rowData, col, rowData[col.id].value)\"\r\n                                       (onFocus)=\"onEditInitCell(rowData, col, rowData[col.id].value)\">\r\n                        </p-inputNumber>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('Number', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left',\r\n                            'text-right': col.position == 'right' || col.position == null,\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ getFormattedNumber(col, rowData, rowData[col.id].value) }}</div>\r\n                    </td>\r\n\r\n                    <!-- Date -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Date', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getOption(col, rowData, 'mode') == 'year' ? (rowData[col.id].value | date: 'yyyy') : getOption(col, rowData, 'mode') == 'month' ? (rowData[col.id].value | date: 'MM/yy') : getOption(col, rowData, 'mode') == 'hour' ? (rowData[col.id].value | date: 'HH:mm') : getOption(col, rowData, 'mode') == 'datehour' ? (rowData[col.id].value | date: 'dd/MM/yy HH:mm') : (rowData[col.id].value | date: 'dd/MM/yyyy')\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-calendar [(ngModel)]=\"rowData[col.id].value\"\r\n                                    [view]=\"getOption(col, rowData, 'mode') == null || getOption(col, rowData, 'mode') == 'date' || getOption(col, rowData, 'mode') == 'hour' ? 'date' : getOption(col, rowData, 'mode') == 'datehour' ? 'date' : getOption(col, rowData, 'mode')\"\r\n                                    [dateFormat]=\"getOption(col, rowData, 'mode') == 'year' ? 'yy' : getOption(col, rowData, 'mode') == 'month' ? 'mm/yy' : getOption(col, rowData, 'mode') == 'hour' || getOption(col, rowData, 'mode') == 'datehour' ? 'dd/mm/yy' : 'dd/mm/yy'\"\r\n                                    [showTime]=\"getOption(col, rowData, 'mode') == 'datehour'\"\r\n                                    [timeOnly]=\"getOption(col, rowData, 'mode') == 'hour'\"\r\n                                    [hourFormat]=\"24\"\r\n                                    firstDayOfWeek=\"1\"\r\n                                    (onSelect)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                    (onBlur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                    (onClear)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                    [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\r\n                                    [inputStyle]=\"{ 'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null, 'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null }\"\r\n                                    [showClear]=\"getOption(col, rowData, 'clear')\"\r\n                                    [minDate]=\"getOption(col, rowData, 'minDate')\"\r\n                                    [maxDate]=\"getOption(col, rowData, 'maxDate')\"\r\n                                    [defaultDate]=\"getOption(col, rowData, 'defaultDate')\"\r\n                                    appendTo=\"body\">\r\n                        </p-calendar>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('Date', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'min-width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | date: 'dd/MM/yyyy'\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value | date: (getOption(col, rowData, 'mode') == 'year' ? 'yyyy' : getOption(col, rowData, 'mode') == 'month' ? 'MM/yyyy' : 'dd/MM/yyyy') }}</div>\r\n                    </td>\r\n\r\n                    <!-- MultiSelect -->\r\n                    <td *ngIf=\"!col.invisible && checkType('MultiSelect', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\"\r\n                        class=\"paddingCell\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-multiSelect *ngIf=\"rowData[col.id] != null\"\r\n                                       [options]=\"getOption(col, rowData, 'options')\"\r\n                                       [filter]=\"getOption(col, rowData, 'filter')\"\r\n                                       [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\r\n                                       [(ngModel)]=\"rowData[col.id].value\"\r\n                                       appendTo=\"body\"\r\n                                       dataKey=\"ID\"\r\n                                       emptyFilterMessage=\"Aucun r\u00E9sultat\"\r\n                                       emptyMessage=\"Aucun r\u00E9sultat\"\r\n                                       [baseZIndex]=\"getOption(col, rowData, 'baseZIndex')\"\r\n                                       [virtualScroll]=\"getOption(col, rowData, 'virtualScroll')\"\r\n                                       [readonly]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\"\r\n                                       [virtualScrollItemSize]=\"30\"\r\n                                       selectedItemsLabel=\"{0} selectionn\u00E9s\"\r\n                                       (onChange)=\"editMultiselect(rowData, col, $event)\"\r\n                                       [showToggleAll]=\"false\"\r\n                                       [showHeader]=\"getOption(col, rowData, 'filter')\"\r\n                                       [group]=\"getOption(col, rowData, 'optionGroupChildren') != null ? true : false\"\r\n                                       [optionGroupLabel]=\"getOption(col, rowData, 'optionGroupLabel')\"\r\n                                       [optionGroupChildren]=\"getOption(col, rowData, 'optionGroupChildren')\"\r\n                                       ngDefaultControl>\r\n                            <ng-template let-data pTemplate=\"selectedItems\">\r\n                                <span *ngFor=\"let option of data, let i = index\"\r\n                                      [ngClass]=\"{\r\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                     }\">\r\n                                    {{ option[getOption(col, rowData, 'optionLabel')] + (i != data.length - 1 ? ',' : '') }}\r\n                                </span>\r\n                            </ng-template>\r\n                            <ng-template let-group pTemplate=\"group\">\r\n                                <div>{{group[col.options.optionGroupLabel]}}</div>\r\n                            </ng-template>\r\n                        </p-multiSelect>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('MultiSelect', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel')) }}</div>\r\n                    </td>\r\n\r\n                    <!-- Image -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Image', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        class=\"text-center\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <img *ngIf=\"rowData[col.id]\" style=\"vertical-align: middle; width: 40px;\" src=\"{{ rowData[col.id].value }}\" />\r\n                    </td>\r\n\r\n                    <!-- Button -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Button', col)\"\r\n                        class=\"paddingCell text-center\"\r\n                        [ngClass]=\"{\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <button pButton\r\n                                *ngIf=\"rowData[col.id].value != null && isValueButtonByType(rowData[col.id].value, 'function')\"\r\n                                [disabled]=\"rowData.readonly || rowData[col.id]?.readonly\"\r\n                                [label]=\"getOption(col, rowData, 'label')\"\r\n                                [icon]=\"getOption(col, rowData, 'icon')\"\r\n                                (click)=\"rowData[col.id].value()\"\r\n                                [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getOption(col, rowData, 'label')\"\r\n                                [tooltipDisabled]=\"!col.tooltip\"\r\n                                [class]=\"'p-button-' + getOption(col, rowData, 'severity')\"\r\n                                [ngClass]=\"{\r\n                                    'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                    'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                }\">\r\n                        </button>\r\n                        <div *ngIf=\"isValueButtonByType(rowData[col.id].value, 'string')\"\r\n                             [ngClass]=\"{\r\n                                'paddingCell': rowData[col.id] != null,\r\n                                'text-left': col.position == 'left' || col.position == null,\r\n                                'text-right': col.position == 'right',\r\n                                'text-center': col.position == 'center',\r\n                                'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                            }\"\r\n                             [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\r\n                             [tooltipDisabled]=\"!col.tooltip\">\r\n                            {{ rowData[col.id].value }}\r\n                        </div>\r\n                    </td>\r\n\r\n                    <!-- SelectButton -->\r\n                    <td *ngIf=\"!col.invisible && checkType('SelectButton', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-selectButton *ngIf=\"rowData[col.id] != null\"\r\n                                        [options]=\"getOption(col, rowData, 'options')\"\r\n                                        [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\r\n                                        [optionValue]=\"getOption(col, rowData, 'optionValue') != null ? getOption(col, rowData, 'optionValue') : 'value'\"\r\n                                        [(ngModel)]=\"rowData[col.id].value\"\r\n                                        [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\"\r\n                                        (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\">\r\n                            <ng-template let-item pTemplate=\"item\">\r\n                                <span class=\"text-center w-full\"\r\n                                      [ngClass]=\"{\r\n                                    'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                    'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                }\">\r\n                                    {{ item.label }}\r\n                                </span>\r\n                            </ng-template>\r\n                        </p-selectButton>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('SelectButton', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\"\r\n                        class=\"text-center\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ getSelectLibelleByValue(rowData, col) }}</div>\r\n                    </td>\r\n\r\n                    <!-- Switch -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Switch', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        class=\"text-center\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-inputSwitch *ngIf=\"rowData[col.id] != null\"\r\n                                       [(ngModel)]=\"rowData[col.id].value\"\r\n                                       [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || (getOption(col, rowData, 'action') == null && !isModeEdition())\"\r\n                                       (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                       ngDefaultControl>\r\n                        </p-inputSwitch>\r\n                    </td>\r\n\r\n                    <!-- File -->\r\n                    <td *ngIf=\"!col.invisible && checkType('File', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div class=\"p-inputgroup\" *ngIf=\"rowData[col.id] != null\">\r\n                            <button type=\"button\"\r\n                                    pButton\r\n                                    pRipple\r\n                                    icon=\"pi pi-upload\"\r\n                                    (click)=\"clickById('input_' + rowData[col.id].id)\"\r\n                                    [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\">\r\n                            </button>\r\n                            <input id=\"{{'output_' + rowData[col.id].id}}\"\r\n                                   pInputText\r\n                                   type=\"text\"\r\n                                   [ngClass]=\"{\r\n                                        'text-left': col.position == 'left' || col.position == null,\r\n                                        'text-right': col.position == 'right',\r\n                                        'text-center': col.position == 'center',\r\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                   }\"\r\n                                   value=\"{{ rowData[col.id].value != null ? rowData[col.id].value : '' }}\"\r\n                                   readonly\r\n                                   [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value ? rowData[col.id].value : ''\"\r\n                                   [tooltipDisabled]=\"!col.tooltip\">\r\n                            <button *ngIf=\"getOption(col, rowData, 'downloadPath') && rowData[col.id].value != null\"\r\n                                    type=\"button\"\r\n                                    pButton\r\n                                    pRipple\r\n                                    icon=\"pi pi-download\"\r\n                                    (click)=\"downloadFile(rowData[col.id])\"\r\n                                    [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\">\r\n                            </button>\r\n                        </div>\r\n                        <input *ngIf=\"rowData[col.id]\" id=\"{{'input_' + rowData[col.id].id}}\" #inputFile pInputText type=\"file\" hidden (change)=\"rowData[col.id].value = inputFile.files[0].name; onEditCell(rowData, col, inputFile.files[0])\">\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('File', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value ? rowData[col.id].value : ''\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value ? rowData[col.id].value : '' }}</div>\r\n                    </td>\r\n\r\n                    <!-- State -->\r\n                    <td *ngIf=\"!col.invisible && checkType('State', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        class=\"text-center\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-tag *ngIf=\"rowData[col.id].value != null\"\r\n                               [value]=\"rowData[col.id].value[getOption(col, rowData, 'optionLabel')]\"\r\n                               [severity]=\"rowData[col.id].value.severity\"\r\n                               [icon]=\"rowData[col.id].value.icon\"\r\n                               [style]=\"{\r\n                                    'background-color': rowData[col.id].value.backgroundColor,\r\n                                    'color': rowData[col.id].value.textColor,\r\n                                    'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null,\r\n                                    'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null\r\n                               }\">\r\n                        </p-tag>\r\n                    </td>\r\n\r\n                </ng-container>\r\n\r\n                <!-- Deletion -->\r\n                <td *ngIf=\"options.rowsDeletable\"\r\n                    class=\"cellDelete\"\r\n                    [ngClass]=\"rowData.deletable ? 'paddingCell' : null\">\r\n                    <button *ngIf=\"rowData.deletable\"\r\n                            pButton\r\n                            type=\"button\"\r\n                            icon=\"pi pi-times\"\r\n                            class=\"p-button-danger buttonDelete p-button-text\"\r\n                            [disabled]=\"rowData.readonly\"\r\n                            (click)=\"onDeleteLine(rowData)\">\r\n                    </button>\r\n                </td>\r\n\r\n            </tr>\r\n        </ng-template>\r\n    </p-table>\r\n</div>\r\n", styles: ["::ng-deep .p-tooltip .p-tooltip-text{overflow-wrap:break-word!important}:host ::ng-deep .grid_brown .rowHeader>th{background-color:#795548}:host ::ng-deep .grid_brown .rowHeader>th div{color:#fff}:host ::ng-deep .grid_brown .rowHeader>th i{color:#fff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column:hover{background-color:#a47767}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column:hover i{color:#fff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column.p-highlight div{color:#76c7ff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column.p-highlight .p-sortable-column-icon{color:#76c7ff}:host ::ng-deep .grid_brown .rowFilter th{background-color:#795548}:host ::ng-deep .grid_grey .rowHeader>th{background-color:#dedddd}:host ::ng-deep .grid_grey .rowHeader>th div{color:#495057}:host ::ng-deep .grid_grey .rowHeader>th i{color:#495057}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column:hover{background-color:#e7e7e7}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column:hover i{color:#495057}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column.p-highlight div{color:#008bff}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column.p-highlight .p-sortable-column-icon{color:#008bff}:host ::ng-deep .grid_grey .rowFilter th{background-color:#dedddd}:host ::ng-deep .selectable_cell:hover{background:#dcdcdc!important;cursor:pointer!important}:host ::ng-deep .p-frozen-column{z-index:2!important}:host ::ng-deep .p-datatable-thead{z-index:3!important}:host ::ng-deep .p-checkbox{border-radius:inherit!important}:host ::ng-deep p-inputnumber{width:100%}:host ::ng-deep .p-calendar,:host ::ng-deep .p-inputtext,:host ::ng-deep .p-inputnumber,:host ::ng-deep .p-inputnumber-input,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .suffixe,:host ::ng-deep .prefixe{height:25px;padding-top:1px!important}:host ::ng-deep .p-multiselect-label-container,:host ::ng-deep .p-dropdown-label{width:1px!important}:host ::ng-deep .p-scroller-content{min-height:50%}:host ::ng-deep .rowTotal>th{background-color:#edcbaa!important}:host ::ng-deep .rowGrouping{background:#faeada!important}:host ::ng-deep .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{background:#30e130}:host ::ng-deep .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider{background:#2bd12b}:host ::ng-deep .p-datatable-table{table-layout:fixed}:host ::ng-deep .p-datatable-thead>tr>th{border:1px solid rgba(0,0,0,.12)!important;padding:8px;font-weight:600;height:40px}:host ::ng-deep .headerAffichageSimple div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .headerAffichageEntier{word-wrap:break-word}:host ::ng-deep .p-datatable-tbody>tr>td{border:1px solid rgba(0,0,0,.12)!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-datatable-tbody>tr>td div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-tag{max-width:100%}:host ::ng-deep .p-tag .p-tag-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-button{padding:5px;max-width:100%}:host ::ng-deep .p-button .p-button-label{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}:host ::ng-deep .text_bold{font-weight:700!important}:host ::ng-deep .cellDelete{flex:0 0 50px!important;width:50px;text-align:center!important;padding:0!important}:host ::ng-deep .p-tooltip .p-tooltip-text{background-color:red!important}:host ::ng-deep .p-skeleton{background-color:#dee2e6;border-radius:6px;padding:0}:host ::ng-deep .p-datatable-tbody>tr{height:35px}:host ::ng-deep .p-inputtext{height:25px!important;padding:4px 5px!important}:host ::ng-deep .p-inputnumber{height:25px;padding:0!important}:host ::ng-deep .p-inputnumber-input{padding:0 5px!important}:host ::ng-deep .p-inputgroup .p-inputtext{height:25px;padding:4px 5px!important}:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{vertical-align:middle}:host ::ng-deep .p-dropdown-label{padding-top:2px;padding-bottom:2px}:host ::ng-deep .p-multiselect-label{padding-top:2px;padding-bottom:2px}:host ::ng-deep .p-editable-column{padding:3px 10px!important}:host ::ng-deep .paddingCell{padding:3px 10px!important}:host ::ng-deep .p-selectbutton>.p-button{width:50%;height:25px}:host ::ng-deep .p-inputgroup>.p-button{height:25px}:host ::ng-deep .buttonDelete{width:100%;height:20px}:host ::ng-deep .p-column-title{display:none}:host ::ng-deep .p-datatable-loading-icon{color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i5.RowGroupHeader, selector: "[pRowGroupHeader]" }, { kind: "directive", type: i5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i5.ContextMenuRow, selector: "[pContextMenuRow]", inputs: ["pContextMenuRow", "pContextMenuRowIndex", "pContextMenuRowDisabled"] }, { kind: "directive", type: i5.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i5.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i7.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i8.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i11.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i12.ContextMenu, selector: "p-contextMenu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "id", "ariaLabel", "ariaLabelledBy", "pressDelay"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i13.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i14.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i15.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: i16.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CilogInputNumberComponent, selector: "cilog-input-number", inputs: ["min", "max", "maxDecimals", "prefixe", "suffixe", "inputStyleClass", "disabled", "readonly", "textColor", "bold", "italic", "floatLabel"], outputs: ["onInput", "onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: ValuePipe, name: "value" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogTableComponent, deps: [{ token: i1.ConfirmationService }, { token: i1.FilterService }, { token: i0.ChangeDetectorRef }, { token: ExportService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CilogTableComponent, isStandalone: true, selector: "cilog-table", inputs: { columns: "columns", values: "values", options: "options", loading: "loading" }, outputs: { columnsChange: "columnsChange", valuesChange: "valuesChange", onEdit: "onEdit", onEditInit: "onEditInit", onDelete: "onDelete", onSelect: "onSelect", onUnselect: "onUnselect", onFilter: "onFilter", onFilterInit: "onFilterInit", onSort: "onSort", onPage: "onPage", onRowDoubleClick: "onRowDoubleClick" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "cm", first: true, predicate: ["cm"], descendants: true }, { propertyName: "inputNumber", first: true, predicate: ["inputNumber"], descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{ 'height': options.scrollHeight != null ? options.scrollHeight : '100%' }\">\n\n    @if (options.exportExcel) {\n    <button pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-success absolute z-5 w-2rem h-2rem border-round-right border-noround-top\"\n            pTooltip=\"Exporter le contenu de la grille au format Excel\"\n            tooltipPosition=\"right\"\n            (click)=\"exportExcel(options.exportExcelByFiltre, !options.exportExcelNoColors)\">\n    </button>\n    }\n\n    <p-contextMenu #cm [model]=\"options.contextMenuItems\" />\n\n    <p-table #table\n             [columns]=\"columns\"\n             [value]=\"values\"\n             dataKey=\"id\"\n             [selectionMode]=\"getModeSelection()\"\n             [metaKeySelection]=\"isModeMetakeySelection()\"\n             [(selection)]=\"selectedRows\"\n             (onRowSelect)=\"onSelectRow($event)\"\n             (onRowUnselect)=\"onUnselectRow($event)\"\n             (onHeaderCheckboxToggle)=\"onSelectAll($event)\"\n             (sortFunction)=\"sortGrille($event)\"\n             [customSort]=\"options.grouping == null ? true : false\"\n             [scrollable]=\"true\"\n             [loading]=\"loading\"\n             [scrollHeight]=\"'flex'\"\n             [rowGroupMode]=\"options.grouping != null ? 'subheader' : null\"\n             [groupRowsBy]=\"options.grouping != null ? options.grouping.obj + '.' + options.grouping.id : null\"\n             [groupRowsByOrder]=\"0\"\n             [virtualScroll]=\"options.virtualScroll == true && options.scrollHeight != null ? true : false\"\n             [virtualScrollItemSize]=\"options.virtualScrollItemSize != null ? options.virtualScrollItemSize : 35\"\n             [paginator]=\"options.paginator == null ? false : true\"\n             [rows]=\"options.paginatorRows\"\n             (onPage)=\"onPageTable($event)\"\n             [tableStyleClass]=\"!options.themeGrille ? 'grid_grey' : options.themeGrille\"\n             [lazy]=\"options.lazy == true ? true : false\"\n             (onFilter)=\"onFilterTable($event)\"\n             [rowTrackBy]=\"trackByFunction\"\n             [(contextMenuSelection)]=\"contextMenuSelectedItem\"\n             [contextMenu]=\"cm\">\n\n        <!-- HEADER -->\n        <ng-template pTemplate=\"header\" let-columns>\n\n            <!-- HEADERS -->\n            <tr class=\"rowHeader\">\n                @if (isModeCheckboxSelection()) {\n                <th class=\"cellDelete\"\n                    pFrozenColumn>\n                    @if (!options.filterable && options.toggleAll) {\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                    }\n                </th>\n                }\n                @for (col of columns; track col) {\n                @if (!col.invisible) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': col.backgroundColor ? col.backgroundColor : null }\"\n                    [ngClass]=\"{ 'text-center' : options.centerHeaders, 'headerAffichageSimple': !options.headersAffichageEntier, 'headerAffichageEntier': options.headersAffichageEntier }\"\n                    [pSortableColumn]=\"col.id\"\n                    [pSortableColumnDisabled]=\"!options.sortable || options.grouping != null || col.libelle == null || col.libelle == ''\"\n                    id=\"{{ col.id }}\"\n                    (click)=\"refreshData()\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\"\n                    [pTooltip]=\"col.libelle\"\n                    [tooltipDisabled]=\"!col.tooltipHeader\"\n                    tooltipPosition=\"bottom\">\n                    <div [ngStyle]=\"{ 'color': col.textColor ? col.textColor : null }\">\n                        {{ col.libelle }}\n                    </div>\n                    @if (options.sortable && options.grouping == null && col.libelle != null && col.libelle != '') {\n                    <p-sortIcon [field]=\"col.id\">\n                    </p-sortIcon>\n                    }\n                </th>\n                }\n                }\n                @if (options.rowsDeletable) {\n                <th class=\"cellDelete\"></th>\n                }\n            </tr>\n\n            <!-- FILTRES -->\n            @if (options.filterable) {\n            <tr class=\"rowFilter\">\n                @if (isModeCheckboxSelection()) {\n                <th class=\"cellDelete\"\n                    pFrozenColumn>\n                    @if (options.toggleAll) {\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                    }\n                </th>\n                }\n                @for (col of columns; track col) {\n                <!-- Text -->\n                @if (!col.invisible && ((checkType('Dropdown', col) && col.options.filterText)\n                || (checkType('MultiSelect', col) && col.options.filterText)\n                || checkType('Text', col)\n                || checkType('File', col)\n                || (checkType('Button', col) && col.options.filterCol))\n                || checkType('Number', col)\n                || checkType('CilogNumber', col)) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    @if (!col.disableFilter) {\n                    <input pInputText\n                           type=\"text\"\n                           (input)=\"onFilterCol($event, col)\"\n                           name=\"filterText\"\n                           [(ngModel)]=\"col.options.defaultFilters\">\n                    }\n                </th>\n                }\n                <!-- Date -->\n                @if (!col.invisible && checkType('Date', col)) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    @if (!col.disableFilter) {\n                    <p-datepicker [view]=\"col.options.mode == null ? 'date' : col.options.mode\"\n                                  [dateFormat]=\"col.options.mode == 'year' ? 'yy' : col.options.mode == 'month' ? 'mm/yy' : 'dd/mm/yy'\"\n                                  [inputId]=\"col.id + '_filter'\"\n                                  [firstDayOfWeek]=\"1\"\n                                  [readonlyInput]=\"true\"\n                                  appendTo=\"body\"\n                                  selectionMode=\"range\"\n                                  (onSelect)=\"onFilterCol($event, col)\"\n                                  showButtonBar=\"true\"\n                                  (onClearClick)=\"onFilterCol($event, col)\"\n                                  name=\"filterDate\"\n                                  [(ngModel)]=\"col.options.defaultFilters\">\n                    </p-datepicker>\n                    }\n                </th>\n                }\n                <!-- Liste -->\n                @if (!col.invisible && ((checkType('Dropdown', col) && !col.options.filterText) || (checkType('MultiSelect', col) && !col.options.filterText) || checkType('SelectButton', col) || checkType('State', col))) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    @if (!col.disableFilter) {\n                    <p-multiSelect [options]=\"col.options?.options\"\n                                   [filter]=\"true\"\n                                   dataKey=\"ID\"\n                                   [optionLabel]=\"col.options?.optionLabel\"\n                                   appendTo=\"body\"\n                                   emptyFilterMessage=\"Aucun r\u00E9sultat\"\n                                   emptyMessage=\"Aucun r\u00E9sultat\"\n                                   [virtualScroll]=\"true\"\n                                   [virtualScrollItemSize]=\"35\"\n                                   selectedItemsLabel=\"{0} selectionn\u00E9s\"\n                                   (onChange)=\"onFilterCol($event, col)\"\n                                   name=\"filterChoix\"\n                                   [(ngModel)]=\"col.options.defaultFilters\"\n                                   [group]=\"col.options.optionGroupChildren != null ? true : false\"\n                                   [optionGroupLabel]=\"col.options.optionGroupLabel\"\n                                   [optionGroupChildren]=\"col.options.optionGroupChildren\"\n                                   [showToggleAll]=\"false\"\n                                   [showClear]=\"true\"\n                                   (onClear)=\"onFilterCol(null, col)\">\n                        <ng-template let-group pTemplate=\"group\">\n                            <div>{{group[col.options.optionGroupLabel]}}</div>\n                        </ng-template>\n                    </p-multiSelect>\n                    }\n                </th>\n                }\n                <!-- Switch -->\n                @if (!col.invisible && checkType('Switch', col)) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    @if (!col.disableFilter) {\n                    <p-multiSelect [options]=\"optionsSwitch\"\n                                   [showHeader]=\"false\"\n                                   optionLabel=\"label\"\n                                   optionValue=\"value\"\n                                   appendTo=\"body\"\n                                   emptyFilterMessage=\"Aucun r\u00E9sultat\"\n                                   emptyMessage=\"Aucun r\u00E9sultat\"\n                                   [virtualScrollItemSize]=\"30\"\n                                   selectedItemsLabel=\"{0} selectionn\u00E9s\"\n                                   (onChange)=\"onFilterCol($event, col)\"\n                                   name=\"filterChoix2\"\n                                   [(ngModel)]=\"col.options.defaultFilters\">\n                    </p-multiSelect>\n                    }\n                </th>\n                }\n                <!-- Non filtrable -->\n                @if (!col.invisible && (checkType('Image', col) || (checkType('Button', col) && !col.options.filterCol))) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                </th>\n                }\n                }\n                @if (options.rowsDeletable) {\n                <th class=\"cellDelete\"></th>\n                }\n            </tr>\n            }\n\n            <!-- TOTAL -->\n            @if (options.rowTotal) {\n            <tr class=\"rowTotal\">\n                @if (isModeCheckboxSelection()) {\n                <th class=\"cellDelete\"\n                    pFrozenColumn>\n                </th>\n                }\n                @for (col of columns; track col) {\n                @if (!col.invisible) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    [ngClass]=\"{ 'text-center' : true }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div>{{ getTotalStr(col) }}</div>\n                </th>\n                }\n                }\n                @if (options.rowsDeletable) {\n                <th class=\"cellDelete\"></th>\n                }\n            </tr>\n            }\n        </ng-template>\n\n        <!--Groupheader-->\n        <ng-template pTemplate=\"groupheader\" let-rowData>\n            <tr pRowGroupHeader class=\"rowGrouping\">\n                <td [attr.colspan]=\"columns.length\">\n                    <div class=\"text_bold\">{{ rowData[options.grouping.obj][options.grouping.libelle] }}</div>\n                </td>\n            </tr>\n        </ng-template>\n\n        <!-- Body -->\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\n            <tr id=\"{{ rowData.id }}\"\n                [ngStyle]=\"{ 'background-color': rowData.color ? rowData.color : null }\"\n                [pSelectableRow]=\"rowData\"\n                [pSelectableRowDisabled]=\"!options.selectable || isModeCheckboxSelection() || isModeCellSelection()\"\n                (dblclick)=\"onRowDoubleClickEvent(rowData)\"\n                [pContextMenuRow]=\"rowData\"\n                [pContextMenuRowDisabled]=\"options.contextMenuItems == null\">\n\n                @if (isModeCheckboxSelection()) {\n                <td class=\"cellDelete\"\n                    pFrozenColumn>\n                    <p-tableCheckbox [value]=\"rowData\" [disabled]=\"rowData.readonly\"></p-tableCheckbox>\n                </td>\n                }\n\n                @for (col of columns; track col) {\n                <!-- Text -->\n                @if (!col.invisible && checkType('Text', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pEditableColumn]=\"rowData\"\n                    [pEditableColumnField]=\"col.id\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [frozen]=\"col.frozen\"\n                    [ngClass]=\"{\n                             'text-left': col.position == 'left' || col.position == null,\n                             'text-right': col.position == 'right',\n                             'text-center': col.position == 'center',\n                             'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                             'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                             'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                            <input pInputText\n                                   type=\"text\"\n                                   [(ngModel)]=\"rowData[col.id].value\"\n                                   name=\"text\"\n                                   (blur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                   (keydown.enter)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                   (keydown.tab)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                   (click)=\"onEditInitCell(rowData, col, rowData[col.id].value)\"\n                                   [ngClass]=\"{\n                                            'text-left': col.position == 'left' || col.position == null,\n                                            'text-right': col.position == 'right',\n                                            'text-center': col.position == 'center',\n                                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                            'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                       }\" />\n                        </ng-template>\n                        <ng-template pTemplate=\"output\">\n                            @if (rowData[col.id]) {\n                            <div style=\"white-space: pre;\">\n                                {{ getFormattedText(col, rowData) }}\n                            </div>\n                            }\n                        </ng-template>\n                    </p-cellEditor>\n                </td>\n                }\n                @if (!col.invisible && checkType('Text', col) && (!isModeEdition() || rowData.readonly || rowData[col.id]?.readonly)) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color' : rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">\n                        {{ col.libelle }} :\n                    </div>\n                    @if (rowData[col.id]) {\n                    <div style=\"white-space: pre;\">\n                        {{ getFormattedText(col, rowData) }}\n                    </div>\n                    }\n                </td>\n                }\n                <!-- Dropdown -->\n                @if (!col.invisible && checkType('Dropdown', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    [ngClass]=\"{\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\"\n                    class=\"paddingCell\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] != null) {\n                    <p-select dataKey=\"ID\"\n                              [options]=\"getOption(col, rowData, 'options')\"\n                              [filter]=\"getOption(col, rowData, 'filter')\"\n                              [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\n                              [(ngModel)]=\"rowData[col.id].value\"\n                              name=\"select\"\n                              appendTo=\"body\"\n                              [showClear]=\"getOption(col, rowData, 'deletable')\"\n                              emptyFilterMessage=\"Aucun r\u00E9sultat\"\n                              emptyMessage=\"Aucun r\u00E9sultat\"\n                              [virtualScroll]=\"getOption(col, rowData, 'virtualScroll')\"\n                              [readonly]=\"rowData.readonly || rowData[col.id]?.readonly\"\n                              [virtualScrollItemSize]=\"30\"\n                              (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                              (onClear)=\"onEditCell(rowData, col, rowData[col.id].value)\">\n                        <ng-template let-data pTemplate=\"selectedItem\">\n                            @if (data != null) {\n                            <span [ngClass]=\"{\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                    }\">\n                                {{ data[getOption(col, rowData, 'optionLabel')] }}\n                            </span>\n                            }\n                            @if (data == null) {\n                            <span></span>\n                            }\n                        </ng-template>\n                    </p-select>\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('Dropdown', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : '' }}</div>\n                    }\n                </td>\n                }\n                <!-- Cilog Number -->\n                @if (!col.invisible && checkType('CilogNumber', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] && !rowData.readonly && !rowData[col.id]?.readonly) {\n                    <cilog-input-number (onInput)=\"onInputNumber($event)\"\n                                        [(ngModel)]=\"rowData[col.id].value\"\n                                        name=\"cilog-number\"\n                                        ngDefaultControl\n                                        [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\n                                        [textColor]=\"rowData[col.id].textColor\"\n                                        [bold]=\"rowData.bold == true || rowData[col.id].bold == true\"\n                                        [italic]=\"rowData.italic == true || rowData[col.id].italic == true\"\n                                        [suffixe]=\"getOption(col, rowData, 'suffix')\"\n                                        [prefixe]=\"getOption(col, rowData, 'prefix') != null ? getOption(col, rowData, 'prefix') + ' ' : null\"\n                                        [min]=\"getOption(col, rowData, 'min')\"\n                                        [max]=\"getOption(col, rowData, 'max')\"\n                                        [disabled]=\"rowData.readonly || rowData[col.id]?.readonly\"\n                                        [maxDecimals]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'maxDecimales') != null ? getOption(col, rowData, 'maxDecimales') : 2 \"\n                                        (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                        (onFocus)=\"onEditInitCell(rowData, col, rowData[col.id].value)\">\n                    </cilog-input-number>\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('CilogNumber', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ getFormattedNumber(col, rowData, rowData[col.id].value) }}</div>\n                    }\n                </td>\n                }\n                <!-- Number -->\n                @if (!col.invisible && checkType('Number', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left',\n                            'text-right': col.position == 'right' || col.position == null,\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\"\n                    (click)=\"onClickCellNumber(rowData, col)\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] && !rowData[col.id].focus) {\n                    <div>\n                        {{ getFormattedNumber(col, rowData, rowData[col.id].value) }}\n                    </div>\n                    }\n                    @if (rowData[col.id] && !rowData.readonly && !rowData[col.id]?.readonly && rowData[col.id].focus == true) {\n                    <p-inputNumber #inputNumber\n                                   locale=\"fr-FR\"\n                                   (onInput)=\"onInputNumber($event)\"\n                                   [(ngModel)]=\"rowData[col.id].value\"\n                                   name=\"input-number\"\n                                   [showButtons]=\"getOption(col, rowData, 'showButtons')\"\n                                   [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\n                                   [inputStyle]=\"{ 'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null, 'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null }\"\n                                   [suffix]=\"getOption(col, rowData, 'suffix')\"\n                                   [prefix]=\"getOption(col, rowData, 'prefix') != null ? getOption(col, rowData, 'prefix') + ' ' : null\"\n                                   [min]=\"getOption(col, rowData, 'min')\"\n                                   [max]=\"getOption(col, rowData, 'max')\"\n                                   [minFractionDigits]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'minDecimales') != null ? getOption(col, rowData, 'minDecimales') : 0\"\n                                   [maxFractionDigits]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'maxDecimales') != null ? getOption(col, rowData, 'maxDecimales') : 2 \"\n                                   (onBlur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                   (onKeyDown)=\"onKeyDown($event, rowData, col, rowData[col.id].value)\"\n                                   (onFocus)=\"onEditInitCell(rowData, col, rowData[col.id].value)\">\n                    </p-inputNumber>\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('Number', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left',\n                            'text-right': col.position == 'right' || col.position == null,\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ getFormattedNumber(col, rowData, rowData[col.id].value) }}</div>\n                    }\n                </td>\n                }\n                <!-- Date -->\n                @if (!col.invisible && checkType('Date', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getOption(col, rowData, 'mode') == 'year' ? (rowData[col.id].value | date: 'yyyy') : getOption(col, rowData, 'mode') == 'month' ? (rowData[col.id].value | date: 'MM/yy') : getOption(col, rowData, 'mode') == 'hour' ? (rowData[col.id].value | date: 'HH:mm') : getOption(col, rowData, 'mode') == 'datehour' ? (rowData[col.id].value | date: 'dd/MM/yy HH:mm') : (rowData[col.id].value | date: 'dd/MM/yyyy')\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    <p-datepicker [(ngModel)]=\"rowData[col.id].value\"\n                                  name=\"date-picker\"\n                                  [view]=\"getOption(col, rowData, 'mode') == null || getOption(col, rowData, 'mode') == 'date' || getOption(col, rowData, 'mode') == 'hour' ? 'date' : getOption(col, rowData, 'mode') == 'datehour' ? 'date' : getOption(col, rowData, 'mode')\"\n                                  [dateFormat]=\"getOption(col, rowData, 'mode') == 'year' ? 'yy' : getOption(col, rowData, 'mode') == 'month' ? 'mm/yy' : getOption(col, rowData, 'mode') == 'hour' || getOption(col, rowData, 'mode') == 'datehour' ? 'dd/mm/yy' : 'dd/mm/yy'\"\n                                  [showTime]=\"getOption(col, rowData, 'mode') == 'datehour'\"\n                                  [timeOnly]=\"getOption(col, rowData, 'mode') == 'hour'\"\n                                  [hourFormat]=\"'24'\"\n                                  [firstDayOfWeek]=\"1\"\n                                  (onSelect)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                  (onBlur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                  (onClear)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                  [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\n                                  [inputStyle]=\"{ 'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null, 'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null }\"\n                                  [showClear]=\"getOption(col, rowData, 'clear')\"\n                                  [minDate]=\"getOption(col, rowData, 'minDate')\"\n                                  [maxDate]=\"getOption(col, rowData, 'maxDate')\"\n                                  [defaultDate]=\"getOption(col, rowData, 'defaultDate')\"\n                                  appendTo=\"body\">\n                    </p-datepicker>\n                </td>\n                }\n                @if (!col.invisible && checkType('Date', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'min-width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | date: 'dd/MM/yyyy'\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ rowData[col.id].value | date: (getOption(col, rowData, 'mode') == 'year' ? 'yyyy' : getOption(col, rowData, 'mode') == 'month' ? 'MM/yyyy' : 'dd/MM/yyyy') }}</div>\n                    }\n                </td>\n                }\n                <!-- MultiSelect -->\n                @if (!col.invisible && checkType('MultiSelect', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\"\n                    class=\"paddingCell\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] != null) {\n                    <p-multiSelect [options]=\"getOption(col, rowData, 'options')\"\n                                   [filter]=\"getOption(col, rowData, 'filter')\"\n                                   [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\n                                   [(ngModel)]=\"rowData[col.id].value\"\n                                   name=\"multiselect\"\n                                   appendTo=\"body\"\n                                   dataKey=\"ID\"\n                                   emptyFilterMessage=\"Aucun r\u00E9sultat\"\n                                   emptyMessage=\"Aucun r\u00E9sultat\"\n                                   [virtualScroll]=\"getOption(col, rowData, 'virtualScroll')\"\n                                   [readonly]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\"\n                                   [virtualScrollItemSize]=\"30\"\n                                   selectedItemsLabel=\"{0} selectionn\u00E9s\"\n                                   (onChange)=\"editMultiselect(rowData, col, $event)\"\n                                   [showToggleAll]=\"false\"\n                                   [showHeader]=\"getOption(col, rowData, 'filter')\"\n                                   [group]=\"getOption(col, rowData, 'optionGroupChildren') != null ? true : false\"\n                                   [optionGroupLabel]=\"getOption(col, rowData, 'optionGroupLabel')\"\n                                   [optionGroupChildren]=\"getOption(col, rowData, 'optionGroupChildren')\"\n                                   ngDefaultControl>\n                        <ng-template let-data pTemplate=\"selectedItems\">\n                            @for (option of data; track option; let i = $index) {\n                            <span [ngClass]=\"{\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                     }\">\n                                {{ option[getOption(col, rowData, 'optionLabel')] + (i != data.length - 1 ? ',' : '') }}\n                            </span>\n                            }\n                        </ng-template>\n                        <ng-template let-group pTemplate=\"group\">\n                            <div>{{group[col.options.optionGroupLabel]}}</div>\n                        </ng-template>\n                    </p-multiSelect>\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('MultiSelect', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel')) }}</div>\n                    }\n                </td>\n                }\n                <!-- Image -->\n                @if (!col.invisible && checkType('Image', col)) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    class=\"text-center\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <img style=\"vertical-align: middle; width: 40px;\" src=\"{{ rowData[col.id].value }}\" />\n                    }\n                </td>\n                }\n                <!-- Button -->\n                @if (!col.invisible && checkType('Button', col)) {\n                <td class=\"paddingCell text-center\"\n                    [ngClass]=\"{\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id].value != null && isValueButtonByType(rowData[col.id].value, 'function')) {\n                    <button pButton\n                            [disabled]=\"rowData.readonly || rowData[col.id]?.readonly\"\n                            [label]=\"getOption(col, rowData, 'label')\"\n                            [icon]=\"getOption(col, rowData, 'icon')\"\n                            (click)=\"rowData[col.id].value()\"\n                            [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getOption(col, rowData, 'label')\"\n                            [tooltipDisabled]=\"!col.tooltip\"\n                            [class]=\"'p-button-' + getOption(col, rowData, 'severity')\"\n                            [ngClass]=\"{\n                                    'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                    'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                }\">\n                    </button>\n                    }\n                    @if (isValueButtonByType(rowData[col.id].value, 'string')) {\n                    <div [ngClass]=\"{\n                                'paddingCell': rowData[col.id] != null,\n                                'text-left': col.position == 'left' || col.position == null,\n                                'text-right': col.position == 'right',\n                                'text-center': col.position == 'center',\n                                'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                            }\"\n                         [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\n                         [tooltipDisabled]=\"!col.tooltip\">\n                        {{ rowData[col.id].value }}\n                    </div>\n                    }\n                </td>\n                }\n                <!-- SelectButton -->\n                @if (!col.invisible && checkType('SelectButton', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] != null) {\n                    <p-selectButton [options]=\"getOption(col, rowData, 'options')\"\n                                    [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\n                                    [optionValue]=\"getOption(col, rowData, 'optionValue') != null ? getOption(col, rowData, 'optionValue') : 'value'\"\n                                    [(ngModel)]=\"rowData[col.id].value\"\n                                    name=\"select-button\"\n                                    [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\"\n                                    (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\">\n                        <ng-template let-item pTemplate=\"item\">\n                            <span class=\"text-center w-full\"\n                                  [ngClass]=\"{\n                                    'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                    'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                }\">\n                                {{ item.label }}\n                            </span>\n                        </ng-template>\n                    </p-selectButton>\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('SelectButton', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\"\n                    class=\"text-center\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ getSelectLibelleByValue(rowData, col) }}</div>\n                    }\n                </td>\n                }\n                <!-- Switch -->\n                @if (!col.invisible && checkType('Switch', col)) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    class=\"text-center\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] != null) {\n                    <p-toggleswitch [(ngModel)]=\"rowData[col.id].value\"\n                                    name=\"toggle-switch\"\n                                    [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || (getOption(col, rowData, 'action') == null && !isModeEdition())\"\n                                    (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                    ngDefaultControl>\n                    </p-toggleswitch>\n                    }\n                </td>\n                }\n                <!-- File -->\n                @if (!col.invisible && checkType('File', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] != null) {\n                    <div class=\"p-inputgroup\">\n                        <button type=\"button\"\n                                pButton\n                                pRipple\n                                icon=\"pi pi-upload\"\n                                (click)=\"clickById('input_' + rowData[col.id].id)\"\n                                [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\">\n                        </button>\n                        <input id=\"{{'output_' + rowData[col.id].id}}\"\n                               pInputText\n                               type=\"text\"\n                               [ngClass]=\"{\n                                        'text-left': col.position == 'left' || col.position == null,\n                                        'text-right': col.position == 'right',\n                                        'text-center': col.position == 'center',\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                   }\"\n                               value=\"{{ rowData[col.id].value != null ? rowData[col.id].value : '' }}\"\n                               readonly\n                               [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value ? rowData[col.id].value : ''\"\n                               [tooltipDisabled]=\"!col.tooltip\">\n                        @if (getOption(col, rowData, 'downloadPath') && rowData[col.id].value != null) {\n                        <button type=\"button\"\n                                pButton\n                                pRipple\n                                icon=\"pi pi-download\"\n                                (click)=\"downloadFile(rowData[col.id])\"\n                                [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\">\n                        </button>\n                        }\n                    </div>\n                    }\n                    @if (rowData[col.id]) {\n                    <input id=\"{{'input_' + rowData[col.id].id}}\" #inputFile pInputText type=\"file\" hidden (change)=\"rowData[col.id].value = inputFile.files[0].name; onEditCell(rowData, col, inputFile.files[0])\">\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('File', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value ? rowData[col.id].value : ''\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ rowData[col.id].value ? rowData[col.id].value : '' }}</div>\n                    }\n                </td>\n                }\n                <!-- State -->\n                @if (!col.invisible && checkType('State', col)) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    class=\"text-center\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id].value != null) {\n                    <p-tag [value]=\"rowData[col.id].value[getOption(col, rowData, 'optionLabel')]\"\n                           [severity]=\"rowData[col.id].value.severity\"\n                           [icon]=\"rowData[col.id].value.icon\"\n                           [style]=\"{\n                                    'background-color': rowData[col.id].value.backgroundColor,\n                                    'color': rowData[col.id].value.textColor,\n                                    'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null,\n                                    'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null\n                               }\">\n                    </p-tag>\n                    }\n                </td>\n                }\n                }\n\n                <!-- Deletion -->\n                @if (options.rowsDeletable) {\n                <td class=\"cellDelete\"\n                    [ngClass]=\"rowData.deletable ? 'paddingCell' : null\">\n                    @if (rowData.deletable) {\n                    <button pButton\n                            type=\"button\"\n                            icon=\"pi pi-times\"\n                            class=\"p-button-danger buttonDelete p-button-text\"\n                            [disabled]=\"rowData.readonly\"\n                            (click)=\"onDeleteLine(rowData)\">\n                    </button>\n                    }\n                </td>\n                }\n\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n", styles: ["::ng-deep .p-tooltip .p-tooltip-text{overflow-wrap:break-word!important}:host ::ng-deep .grid_brown .rowHeader>th{background-color:#795548}:host ::ng-deep .grid_brown .rowHeader>th div{color:#fff}:host ::ng-deep .grid_brown .rowHeader>th i{color:#fff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column:hover{background-color:#a47767}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column:hover i{color:#fff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column.p-highlight div{color:#76c7ff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column.p-highlight .p-sortable-column-icon{color:#76c7ff}:host ::ng-deep .grid_brown .rowFilter th{background-color:#795548}:host ::ng-deep .grid_grey .rowHeader>th{background-color:#dedddd}:host ::ng-deep .grid_grey .rowHeader>th div{color:#495057}:host ::ng-deep .grid_grey .rowHeader>th i{color:#495057}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column:hover{background-color:#e7e7e7}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column:hover i{color:#495057}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column.p-highlight div{color:#008bff}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column.p-highlight .p-sortable-column-icon{color:#008bff}:host ::ng-deep .grid_grey .rowFilter th{background-color:#dedddd}:host ::ng-deep .selectable_cell:hover{background:#dcdcdc!important;cursor:pointer!important}:host ::ng-deep .p-frozen-column{z-index:2!important}:host ::ng-deep .p-datatable-thead{z-index:3!important}:host ::ng-deep .p-checkbox{border-radius:inherit!important}:host ::ng-deep p-inputnumber{width:100%}:host ::ng-deep .p-calendar,:host ::ng-deep .p-inputtext,:host ::ng-deep .p-inputnumber,:host ::ng-deep .p-inputnumber-input,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .suffixe,:host ::ng-deep .prefixe{height:25px;padding-top:1px!important}:host ::ng-deep .p-multiselect-label-container,:host ::ng-deep .p-dropdown-label{width:1px!important}:host ::ng-deep .p-scroller-content{min-height:50%}:host ::ng-deep .rowTotal>th{background-color:#edcbaa!important}:host ::ng-deep .rowGrouping{background:#faeada!important}:host ::ng-deep .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{background:#30e130}:host ::ng-deep .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider{background:#2bd12b}:host ::ng-deep .p-datatable-table{table-layout:fixed}:host ::ng-deep .p-datatable-thead>tr>th{border:1px solid rgba(0,0,0,.12)!important;padding:8px;font-weight:600;height:40px}:host ::ng-deep .headerAffichageSimple div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .headerAffichageEntier{word-wrap:break-word}:host ::ng-deep .p-datatable-tbody>tr>td{border:1px solid rgba(0,0,0,.12)!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-datatable-tbody>tr>td div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-tag{max-width:100%}:host ::ng-deep .p-tag .p-tag-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-button{padding:5px;max-width:100%}:host ::ng-deep .p-button .p-button-label{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}:host ::ng-deep .text_bold{font-weight:700!important}:host ::ng-deep .cellDelete{flex:0 0 50px!important;width:50px;text-align:center!important;padding:0!important}:host ::ng-deep .p-tooltip .p-tooltip-text{background-color:red!important}:host ::ng-deep .p-skeleton{background-color:#dee2e6;border-radius:6px;padding:0}:host ::ng-deep .p-datatable-tbody>tr{height:35px}:host ::ng-deep .p-inputtext{height:25px!important;padding:4px 5px!important}:host ::ng-deep .p-inputnumber{height:25px;padding:0!important}:host ::ng-deep .p-inputnumber-input{padding:0 5px!important}:host ::ng-deep .p-inputgroup .p-inputtext{height:25px;padding:4px 5px!important}:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{vertical-align:middle}:host ::ng-deep .p-dropdown-label{padding-top:2px;padding-bottom:2px}:host ::ng-deep .p-multiselect-label{padding-top:2px;padding-bottom:2px}:host ::ng-deep .p-editable-column{padding:3px 10px!important}:host ::ng-deep .paddingCell{padding:3px 10px!important}:host ::ng-deep .p-selectbutton>.p-button{width:50%;height:25px}:host ::ng-deep .p-inputgroup>.p-button{height:25px}:host ::ng-deep .buttonDelete{width:100%;height:20px}:host ::ng-deep .p-column-title{display:none}:host ::ng-deep .p-datatable-loading-icon{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i6.RowGroupHeader, selector: "[pRowGroupHeader]" }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i6.ContextMenuRow, selector: "[pContextMenuRow]", inputs: ["pContextMenuRow", "pContextMenuRowIndex", "pContextMenuRowDisabled"] }, { kind: "directive", type: i6.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i6.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i9.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i10.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i11.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: CilogInputNumberComponent, selector: "cilog-input-number", inputs: ["min", "max", "maxDecimals", "prefixe", "suffixe", "inputStyleClass", "disabled", "readonly", "textColor", "bold", "italic", "floatLabel"], outputs: ["onInput", "onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i12.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i13.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i14.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i15.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: ValuePipe, name: "value" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cilog-table', template: "<div [ngStyle]=\"{ 'height': options.scrollHeight != null ? options.scrollHeight : '100%' }\">\r\n\r\n    <button pButton\r\n            *ngIf=\"options.exportExcel\"\r\n            icon=\"pi pi-file-excel\"\r\n            class=\"p-button-success absolute z-5 w-2rem h-2rem border-round-right border-noround-top\"\r\n            pTooltip=\"Exporter le contenu de la grille au format Excel\"\r\n            (click)=\"exportExcel(options.exportExcelByFiltre, !options.exportExcelNoColors)\">\r\n    </button>\r\n\r\n    <p-contextMenu #cm [model]=\"options.contextMenuItems\" />\r\n\r\n    <p-table #table\r\n             [columns]=\"columns\"\r\n             [value]=\"values\"\r\n             dataKey=\"id\"\r\n             [selectionMode]=\"getModeSelection()\"\r\n             [metaKeySelection]=\"isModeMetakeySelection()\"\r\n             [(selection)]=\"selectedRows\"\r\n             (onRowSelect)=\"onSelectRow($event)\"\r\n             (onRowUnselect)=\"onUnselectRow($event)\"\r\n             (onHeaderCheckboxToggle)=\"onSelectAll($event)\"\r\n             (sortFunction)=\"sortGrille($event)\"\r\n             [customSort]=\"options.grouping == null ? true : false\"\r\n             [scrollable]=\"true\"\r\n             [loading]=\"loading\"\r\n             [scrollHeight]=\"'flex'\"\r\n             [rowGroupMode]=\"options.grouping != null ? 'subheader' : null\"\r\n             [groupRowsBy]=\"options.grouping != null ? options.grouping.obj + '.' + options.grouping.id : null\"\r\n             [groupRowsByOrder]=\"0\"\r\n             [virtualScroll]=\"options.virtualScroll == true && options.scrollHeight != null ? true : false\"\r\n             [virtualScrollItemSize]=\"options.virtualScrollItemSize != null ? options.virtualScrollItemSize : 35\"\r\n             [paginator]=\"options.paginator == null ? false : true\"\r\n             [rows]=\"options.paginatorRows\"\r\n             (onPage)=\"onPageTable($event)\"\r\n             [tableStyleClass]=\"!options.themeGrille ? 'grid_grey' : options.themeGrille\"\r\n             [lazy]=\"options.lazy == true ? true : false\"\r\n             (onFilter)=\"onFilterTable($event)\"\r\n             [rowTrackBy]=\"trackByFunction\"\r\n             [(contextMenuSelection)]=\"contextMenuSelectedItem\"\r\n             [contextMenu]=\"cm\">\r\n\r\n        <!-- HEADER -->\r\n        <ng-template pTemplate=\"header\" let-columns>\r\n\r\n            <!-- HEADERS -->\r\n            <tr class=\"rowHeader\">\r\n                <th class=\"cellDelete\"\r\n                    *ngIf=\"isModeCheckboxSelection()\"\r\n                    pFrozenColumn>\r\n                    <p-tableHeaderCheckbox *ngIf=\"!options.filterable && options.toggleAll\"></p-tableHeaderCheckbox>\r\n                </th>\r\n                <ng-container *ngFor=\"let col of columns\">\r\n                    <th *ngIf=\"!col.invisible\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': col.backgroundColor ? col.backgroundColor : null }\"\r\n                        [ngClass]=\"{ 'text-center' : options.centerHeaders, 'headerAffichageSimple': !options.headersAffichageEntier, 'headerAffichageEntier': options.headersAffichageEntier }\"\r\n                        [pSortableColumn]=\"col.id\"\r\n                        [pSortableColumnDisabled]=\"!options.sortable || options.grouping != null || col.libelle == null || col.libelle == ''\"\r\n                        id=\"{{ col.id }}\"\r\n                        (click)=\"refreshData()\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\"\r\n                        [pTooltip]=\"col.libelle\"\r\n                        [tooltipDisabled]=\"!col.tooltipHeader\"\r\n                        tooltipPosition=\"bottom\">\r\n                        <div [ngStyle]=\"{ 'color': col.textColor ? col.textColor : null }\">\r\n                            {{ col.libelle }}\r\n                        </div>\r\n                        <p-sortIcon *ngIf=\"options.sortable && options.grouping == null && col.libelle != null && col.libelle != ''\"\r\n                                    [field]=\"col.id\">\r\n                        </p-sortIcon>\r\n                    </th>\r\n                </ng-container>\r\n                <th class=\"cellDelete\" *ngIf=\"options.rowsDeletable\"></th>\r\n            </tr>\r\n\r\n            <!-- FILTRES -->\r\n            <tr *ngIf=\"options.filterable\" class=\"rowFilter\">\r\n\r\n                <th class=\"cellDelete\"\r\n                    *ngIf=\"isModeCheckboxSelection()\"\r\n                    pFrozenColumn>\r\n                    <p-tableHeaderCheckbox *ngIf=\"options.toggleAll\"></p-tableHeaderCheckbox>\r\n                </th>\r\n\r\n                <ng-container *ngFor=\"let col of columns\">\r\n                    <!-- Text -->\r\n                    <th *ngIf=\"!col.invisible && ((checkType('Dropdown', col) && col.options.filterText)\r\n                        || (checkType('MultiSelect', col) && col.options.filterText)\r\n                        || checkType('Text', col)\r\n                        || checkType('File', col)\r\n                        || (checkType('Button', col) && col.options.filterCol))\r\n                        || checkType('Number', col)\r\n                        || checkType('CilogNumber', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <input *ngIf=\"!col.disableFilter\"\r\n                               pInputText\r\n                               type=\"text\"\r\n                               (input)=\"onFilterCol($event, col)\"\r\n                               [(ngModel)]=\"col.options.defaultFilters\">\r\n                    </th>\r\n\r\n                    <!-- Date -->\r\n                    <th *ngIf=\"!col.invisible && checkType('Date', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <p-calendar *ngIf=\"!col.disableFilter\"\r\n                                    [view]=\"getOption(col, rowData, 'mode') == null ? 'date' : getOption(col, rowData, 'mode')\"\r\n                                    [dateFormat]=\"getOption(col, rowData, 'mode') == 'year' ? 'yy' : getOption(col, rowData, 'mode') == 'month' ? 'mm/yy' : 'dd/mm/yy'\"\r\n                                    [inputId]=\"col.id + '_filter'\"\r\n                                    firstDayOfWeek=\"1\"\r\n                                    [readonlyInput]=\"true\"\r\n                                    appendTo=\"body\"\r\n                                    selectionMode=\"range\"\r\n                                    (onSelect)=\"onFilterCol($event, col)\"\r\n                                    showButtonBar=\"true\"\r\n                                    (onClearClick)=\"onFilterCol($event, col)\"\r\n                                    [(ngModel)]=\"col.options.defaultFilters\">\r\n                        </p-calendar>\r\n                    </th>\r\n\r\n                    <!-- Liste -->\r\n                    <th *ngIf=\"!col.invisible && ((checkType('Dropdown', col) && !col.options.filterText) || (checkType('MultiSelect', col) && !col.options.filterText) || checkType('SelectButton', col) || checkType('State', col))\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <p-multiSelect *ngIf=\"!col.disableFilter\"\r\n                                       [options]=\"col.options?.options\"\r\n                                       [filter]=\"true\"\r\n                                       dataKey=\"ID\"\r\n                                       [optionLabel]=\"col.options?.optionLabel\"\r\n                                       appendTo=\"body\"\r\n                                       emptyFilterMessage=\"Aucun r\u00E9sultat\"\r\n                                       emptyMessage=\"Aucun r\u00E9sultat\"\r\n                                       [virtualScroll]=\"true\"\r\n                                       [virtualScrollItemSize]=\"35\"\r\n                                       selectedItemsLabel=\"{0} selectionn\u00E9s\"\r\n                                       (onChange)=\"onFilterCol($event, col)\"\r\n                                       [(ngModel)]=\"col.options.defaultFilters\"\r\n                                       [group]=\"col.options.optionGroupChildren != null ? true : false\"\r\n                                       [optionGroupLabel]=\"col.options.optionGroupLabel\"\r\n                                       [optionGroupChildren]=\"col.options.optionGroupChildren\"\r\n                                       [showToggleAll]=\"false\"\r\n                                       [showClear]=\"true\"\r\n                                       (onClear)=\"onFilterCol(null, col)\">\r\n                            <ng-template let-group pTemplate=\"group\">\r\n                                <div>{{group[col.options.optionGroupLabel]}}</div>\r\n                            </ng-template>\r\n                        </p-multiSelect>\r\n                    </th>\r\n\r\n                    <!-- Switch -->\r\n                    <th *ngIf=\"!col.invisible && checkType('Switch', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <p-multiSelect *ngIf=\"!col.disableFilter\"\r\n                                       [options]=\"optionsSwitch\"\r\n                                       [showHeader]=\"false\"\r\n                                       optionLabel=\"label\"\r\n                                       optionValue=\"value\"\r\n                                       appendTo=\"body\"\r\n                                       emptyFilterMessage=\"Aucun r\u00E9sultat\"\r\n                                       emptyMessage=\"Aucun r\u00E9sultat\"\r\n                                       [virtualScrollItemSize]=\"30\"\r\n                                       selectedItemsLabel=\"{0} selectionn\u00E9s\"\r\n                                       (onChange)=\"onFilterCol($event, col)\"\r\n                                       [(ngModel)]=\"col.options.defaultFilters\">\r\n                        </p-multiSelect>\r\n                    </th>\r\n\r\n                    <!-- Non filtrable -->\r\n                    <th *ngIf=\"!col.invisible && (checkType('Image', col) || (checkType('Button', col) && !col.options.filterCol))\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                    </th>\r\n                </ng-container>\r\n                <th class=\"cellDelete\" *ngIf=\"options.rowsDeletable\"></th>\r\n            </tr>\r\n\r\n            <!-- TOTAL -->\r\n            <tr *ngIf=\"options.rowTotal\"\r\n                class=\"rowTotal\">\r\n                <th class=\"cellDelete\"\r\n                    *ngIf=\"isModeCheckboxSelection()\"\r\n                    pFrozenColumn>\r\n                </th>\r\n                <ng-container *ngFor=\"let col of columns\">\r\n                    <th *ngIf=\"!col.invisible\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                        [ngClass]=\"{ 'text-center' : true }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div>{{ getTotalStr(col) }}</div>\r\n                    </th>\r\n                </ng-container>\r\n                <th class=\"cellDelete\" *ngIf=\"options.rowsDeletable\"></th>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!--Groupheader-->\r\n        <ng-template pTemplate=\"groupheader\" let-rowData>\r\n            <tr pRowGroupHeader class=\"rowGrouping\">\r\n                <td [attr.colspan]=\"columns.length\">\r\n                    <div class=\"text_bold\">{{ rowData[options.grouping.obj][options.grouping.libelle] }}</div>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- Body -->\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\r\n            <tr id=\"{{ rowData.id }}\"\r\n                [ngStyle]=\"{ 'background-color': rowData.color ? rowData.color : null }\"\r\n                [pSelectableRow]=\"rowData\"\r\n                [pSelectableRowDisabled]=\"!options.selectable || isModeCheckboxSelection() || isModeCellSelection()\"\r\n                (dblclick)=\"onRowDoubleClickEvent(rowData)\"\r\n                [pContextMenuRow]=\"rowData\"\r\n                [pContextMenuRowDisabled]=\"options.contextMenuItems == null\">\r\n\r\n                <td *ngIf=\"isModeCheckboxSelection()\"\r\n                    class=\"cellDelete\"\r\n                    pFrozenColumn>\r\n                    <p-tableCheckbox [value]=\"rowData\" [disabled]=\"rowData.readonly\"></p-tableCheckbox>\r\n                </td>\r\n\r\n                <ng-container *ngFor=\"let col of columns\">\r\n\r\n                    <!-- Text -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Text', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pEditableColumn]=\"rowData\"\r\n                        [pEditableColumnField]=\"col.id\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [frozen]=\"col.frozen\"\r\n                        [ngClass]=\"{\r\n                             'text-left': col.position == 'left' || col.position == null,\r\n                             'text-right': col.position == 'right',\r\n                             'text-center': col.position == 'center',\r\n                             'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                             'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                             'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-cellEditor>\r\n                            <ng-template pTemplate=\"input\">\r\n                                <input pInputText\r\n                                       type=\"text\"\r\n                                       [(ngModel)]=\"rowData[col.id].value\"\r\n                                       (blur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                       (keydown.enter)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                       (keydown.tab)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                       (click)=\"onEditInitCell(rowData, col, rowData[col.id].value)\"\r\n                                       [ngClass]=\"{\r\n                                            'text-left': col.position == 'left' || col.position == null,\r\n                                            'text-right': col.position == 'right',\r\n                                            'text-center': col.position == 'center',\r\n                                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                            'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                       }\" />\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"output\">\r\n                                <div *ngIf=\"rowData[col.id]\"\r\n                                     style=\"white-space: pre;\">\r\n                                    {{ getFormattedText(col, rowData) }}\r\n                                </div>\r\n                            </ng-template>\r\n                        </p-cellEditor>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('Text', col) && (!isModeEdition() || rowData.readonly || rowData[col.id]?.readonly)\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color' : rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">\r\n                            {{ col.libelle }} :\r\n                        </div>\r\n                        <div *ngIf=\"rowData[col.id]\"\r\n                             style=\"white-space: pre;\">\r\n                            {{ getFormattedText(col, rowData) }}\r\n                        </div>\r\n                    </td>\r\n\r\n                    <!-- Dropdown -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Dropdown', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        [ngClass]=\"{\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\"\r\n                        class=\"paddingCell\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-dropdown *ngIf=\"rowData[col.id] != null\"\r\n                                    dataKey=\"ID\"\r\n                                    [options]=\"getOption(col, rowData, 'options')\"\r\n                                    [filter]=\"getOption(col, rowData, 'filter')\"\r\n                                    [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\r\n                                    [(ngModel)]=\"rowData[col.id].value\"\r\n                                    [autoDisplayFirst]=\"false\"\r\n                                    appendTo=\"body\"\r\n                                    [showClear]=\"getOption(col, rowData, 'deletable')\"\r\n                                    emptyFilterMessage=\"Aucun r\u00E9sultat\"\r\n                                    emptyMessage=\"Aucun r\u00E9sultat\"\r\n                                    [baseZIndex]=\"getOption(col, rowData, 'baseZIndex')\"\r\n                                    [virtualScroll]=\"getOption(col, rowData, 'virtualScroll')\"\r\n                                    [readonly]=\"rowData.readonly || rowData[col.id]?.readonly\"\r\n                                    [virtualScrollItemSize]=\"30\"\r\n                                    (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                    (onClear)=\"onEditCell(rowData, col, rowData[col.id].value)\">\r\n                            <ng-template let-data pTemplate=\"selectedItem\">\r\n                                <span *ngIf=\"data != null\"\r\n                                      [ngClass]=\"{\r\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                    }\">\r\n                                    {{ data[getOption(col, rowData, 'optionLabel')] }}\r\n                                </span>\r\n                                <span *ngIf=\"data == null\"></span>\r\n                            </ng-template>\r\n                        </p-dropdown>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('Dropdown', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : '' }}</div>\r\n                    </td>\r\n\r\n                    <!-- Cilog Number -->\r\n                    <td *ngIf=\"!col.invisible && checkType('CilogNumber', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <cilog-input-number *ngIf=\"rowData[col.id] && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                                            (onInput)=\"onInputNumber($event)\"\r\n                                            [(ngModel)]=\"rowData[col.id].value\"\r\n                                            [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\r\n                                            [textColor]=\"rowData[col.id].textColor\"\r\n                                            [bold]=\"rowData.bold == true || rowData[col.id].bold == true\"\r\n                                            [italic]=\"rowData.italic == true || rowData[col.id].italic == true\"\r\n                                            [suffixe]=\"getOption(col, rowData, 'suffix')\"\r\n                                            [prefixe]=\"getOption(col, rowData, 'prefix') != null ? getOption(col, rowData, 'prefix') + ' ' : null\"\r\n                                            [min]=\"getOption(col, rowData, 'min')\"\r\n                                            [max]=\"getOption(col, rowData, 'max')\"\r\n                                            [disabled]=\"rowData.readonly || rowData[col.id]?.readonly\"\r\n                                            [maxDecimals]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'maxDecimales') != null ? getOption(col, rowData, 'maxDecimales') : 2 \"\r\n                                            (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                            (onFocus)=\"onEditInitCell(rowData, col, rowData[col.id].value)\">\r\n                        </cilog-input-number>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('CilogNumber', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ getFormattedNumber(col, rowData, rowData[col.id].value) }}</div>\r\n                    </td>\r\n\r\n                    <!-- Number -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Number', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left',\r\n                            'text-right': col.position == 'right' || col.position == null,\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\"\r\n                        (click)=\"onClickCellNumber(rowData, col)\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id] && !rowData[col.id].focus\">\r\n                            {{ getFormattedNumber(col, rowData, rowData[col.id].value) }}\r\n                        </div>\r\n                        <p-inputNumber #inputNumber\r\n                                       *ngIf=\"rowData[col.id] && !rowData.readonly && !rowData[col.id]?.readonly && rowData[col.id].focus == true\"\r\n                                       locale=\"fr-FR\"\r\n                                       (onInput)=\"onInputNumber($event)\"\r\n                                       [(ngModel)]=\"rowData[col.id].value\"\r\n                                       [showButtons]=\"getOption(col, rowData, 'showButtons')\"\r\n                                       [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\r\n                                       [inputStyle]=\"{ 'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null, 'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null }\"\r\n                                       [suffix]=\"getOption(col, rowData, 'suffix')\"\r\n                                       [prefix]=\"getOption(col, rowData, 'prefix') != null ? getOption(col, rowData, 'prefix') + ' ' : null\"\r\n                                       [min]=\"getOption(col, rowData, 'min')\"\r\n                                       [max]=\"getOption(col, rowData, 'max')\"\r\n                                       [minFractionDigits]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'minDecimales') != null ? getOption(col, rowData, 'minDecimales') : 0\"\r\n                                       [maxFractionDigits]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'maxDecimales') != null ? getOption(col, rowData, 'maxDecimales') : 2 \"\r\n                                       (onBlur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                       (onKeyDown)=\"onKeyDown($event, rowData, col, rowData[col.id].value)\"\r\n                                       (onFocus)=\"onEditInitCell(rowData, col, rowData[col.id].value)\">\r\n                        </p-inputNumber>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('Number', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left',\r\n                            'text-right': col.position == 'right' || col.position == null,\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ getFormattedNumber(col, rowData, rowData[col.id].value) }}</div>\r\n                    </td>\r\n\r\n                    <!-- Date -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Date', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getOption(col, rowData, 'mode') == 'year' ? (rowData[col.id].value | date: 'yyyy') : getOption(col, rowData, 'mode') == 'month' ? (rowData[col.id].value | date: 'MM/yy') : getOption(col, rowData, 'mode') == 'hour' ? (rowData[col.id].value | date: 'HH:mm') : getOption(col, rowData, 'mode') == 'datehour' ? (rowData[col.id].value | date: 'dd/MM/yy HH:mm') : (rowData[col.id].value | date: 'dd/MM/yyyy')\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-calendar [(ngModel)]=\"rowData[col.id].value\"\r\n                                    [view]=\"getOption(col, rowData, 'mode') == null || getOption(col, rowData, 'mode') == 'date' || getOption(col, rowData, 'mode') == 'hour' ? 'date' : getOption(col, rowData, 'mode') == 'datehour' ? 'date' : getOption(col, rowData, 'mode')\"\r\n                                    [dateFormat]=\"getOption(col, rowData, 'mode') == 'year' ? 'yy' : getOption(col, rowData, 'mode') == 'month' ? 'mm/yy' : getOption(col, rowData, 'mode') == 'hour' || getOption(col, rowData, 'mode') == 'datehour' ? 'dd/mm/yy' : 'dd/mm/yy'\"\r\n                                    [showTime]=\"getOption(col, rowData, 'mode') == 'datehour'\"\r\n                                    [timeOnly]=\"getOption(col, rowData, 'mode') == 'hour'\"\r\n                                    [hourFormat]=\"24\"\r\n                                    firstDayOfWeek=\"1\"\r\n                                    (onSelect)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                    (onBlur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                    (onClear)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                    [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\r\n                                    [inputStyle]=\"{ 'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null, 'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null }\"\r\n                                    [showClear]=\"getOption(col, rowData, 'clear')\"\r\n                                    [minDate]=\"getOption(col, rowData, 'minDate')\"\r\n                                    [maxDate]=\"getOption(col, rowData, 'maxDate')\"\r\n                                    [defaultDate]=\"getOption(col, rowData, 'defaultDate')\"\r\n                                    appendTo=\"body\">\r\n                        </p-calendar>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('Date', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'min-width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | date: 'dd/MM/yyyy'\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value | date: (getOption(col, rowData, 'mode') == 'year' ? 'yyyy' : getOption(col, rowData, 'mode') == 'month' ? 'MM/yyyy' : 'dd/MM/yyyy') }}</div>\r\n                    </td>\r\n\r\n                    <!-- MultiSelect -->\r\n                    <td *ngIf=\"!col.invisible && checkType('MultiSelect', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\"\r\n                        class=\"paddingCell\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-multiSelect *ngIf=\"rowData[col.id] != null\"\r\n                                       [options]=\"getOption(col, rowData, 'options')\"\r\n                                       [filter]=\"getOption(col, rowData, 'filter')\"\r\n                                       [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\r\n                                       [(ngModel)]=\"rowData[col.id].value\"\r\n                                       appendTo=\"body\"\r\n                                       dataKey=\"ID\"\r\n                                       emptyFilterMessage=\"Aucun r\u00E9sultat\"\r\n                                       emptyMessage=\"Aucun r\u00E9sultat\"\r\n                                       [baseZIndex]=\"getOption(col, rowData, 'baseZIndex')\"\r\n                                       [virtualScroll]=\"getOption(col, rowData, 'virtualScroll')\"\r\n                                       [readonly]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\"\r\n                                       [virtualScrollItemSize]=\"30\"\r\n                                       selectedItemsLabel=\"{0} selectionn\u00E9s\"\r\n                                       (onChange)=\"editMultiselect(rowData, col, $event)\"\r\n                                       [showToggleAll]=\"false\"\r\n                                       [showHeader]=\"getOption(col, rowData, 'filter')\"\r\n                                       [group]=\"getOption(col, rowData, 'optionGroupChildren') != null ? true : false\"\r\n                                       [optionGroupLabel]=\"getOption(col, rowData, 'optionGroupLabel')\"\r\n                                       [optionGroupChildren]=\"getOption(col, rowData, 'optionGroupChildren')\"\r\n                                       ngDefaultControl>\r\n                            <ng-template let-data pTemplate=\"selectedItems\">\r\n                                <span *ngFor=\"let option of data, let i = index\"\r\n                                      [ngClass]=\"{\r\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                     }\">\r\n                                    {{ option[getOption(col, rowData, 'optionLabel')] + (i != data.length - 1 ? ',' : '') }}\r\n                                </span>\r\n                            </ng-template>\r\n                            <ng-template let-group pTemplate=\"group\">\r\n                                <div>{{group[col.options.optionGroupLabel]}}</div>\r\n                            </ng-template>\r\n                        </p-multiSelect>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('MultiSelect', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel')) }}</div>\r\n                    </td>\r\n\r\n                    <!-- Image -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Image', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        class=\"text-center\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <img *ngIf=\"rowData[col.id]\" style=\"vertical-align: middle; width: 40px;\" src=\"{{ rowData[col.id].value }}\" />\r\n                    </td>\r\n\r\n                    <!-- Button -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Button', col)\"\r\n                        class=\"paddingCell text-center\"\r\n                        [ngClass]=\"{\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <button pButton\r\n                                *ngIf=\"rowData[col.id].value != null && isValueButtonByType(rowData[col.id].value, 'function')\"\r\n                                [disabled]=\"rowData.readonly || rowData[col.id]?.readonly\"\r\n                                [label]=\"getOption(col, rowData, 'label')\"\r\n                                [icon]=\"getOption(col, rowData, 'icon')\"\r\n                                (click)=\"rowData[col.id].value()\"\r\n                                [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getOption(col, rowData, 'label')\"\r\n                                [tooltipDisabled]=\"!col.tooltip\"\r\n                                [class]=\"'p-button-' + getOption(col, rowData, 'severity')\"\r\n                                [ngClass]=\"{\r\n                                    'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                    'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                }\">\r\n                        </button>\r\n                        <div *ngIf=\"isValueButtonByType(rowData[col.id].value, 'string')\"\r\n                             [ngClass]=\"{\r\n                                'paddingCell': rowData[col.id] != null,\r\n                                'text-left': col.position == 'left' || col.position == null,\r\n                                'text-right': col.position == 'right',\r\n                                'text-center': col.position == 'center',\r\n                                'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                            }\"\r\n                             [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\r\n                             [tooltipDisabled]=\"!col.tooltip\">\r\n                            {{ rowData[col.id].value }}\r\n                        </div>\r\n                    </td>\r\n\r\n                    <!-- SelectButton -->\r\n                    <td *ngIf=\"!col.invisible && checkType('SelectButton', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-selectButton *ngIf=\"rowData[col.id] != null\"\r\n                                        [options]=\"getOption(col, rowData, 'options')\"\r\n                                        [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\r\n                                        [optionValue]=\"getOption(col, rowData, 'optionValue') != null ? getOption(col, rowData, 'optionValue') : 'value'\"\r\n                                        [(ngModel)]=\"rowData[col.id].value\"\r\n                                        [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\"\r\n                                        (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\">\r\n                            <ng-template let-item pTemplate=\"item\">\r\n                                <span class=\"text-center w-full\"\r\n                                      [ngClass]=\"{\r\n                                    'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                    'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                }\">\r\n                                    {{ item.label }}\r\n                                </span>\r\n                            </ng-template>\r\n                        </p-selectButton>\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('SelectButton', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\"\r\n                        class=\"text-center\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ getSelectLibelleByValue(rowData, col) }}</div>\r\n                    </td>\r\n\r\n                    <!-- Switch -->\r\n                    <td *ngIf=\"!col.invisible && checkType('Switch', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        class=\"text-center\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-inputSwitch *ngIf=\"rowData[col.id] != null\"\r\n                                       [(ngModel)]=\"rowData[col.id].value\"\r\n                                       [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || (getOption(col, rowData, 'action') == null && !isModeEdition())\"\r\n                                       (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                       ngDefaultControl>\r\n                        </p-inputSwitch>\r\n                    </td>\r\n\r\n                    <!-- File -->\r\n                    <td *ngIf=\"!col.invisible && checkType('File', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div class=\"p-inputgroup\" *ngIf=\"rowData[col.id] != null\">\r\n                            <button type=\"button\"\r\n                                    pButton\r\n                                    pRipple\r\n                                    icon=\"pi pi-upload\"\r\n                                    (click)=\"clickById('input_' + rowData[col.id].id)\"\r\n                                    [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\">\r\n                            </button>\r\n                            <input id=\"{{'output_' + rowData[col.id].id}}\"\r\n                                   pInputText\r\n                                   type=\"text\"\r\n                                   [ngClass]=\"{\r\n                                        'text-left': col.position == 'left' || col.position == null,\r\n                                        'text-right': col.position == 'right',\r\n                                        'text-center': col.position == 'center',\r\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\r\n                                   }\"\r\n                                   value=\"{{ rowData[col.id].value != null ? rowData[col.id].value : '' }}\"\r\n                                   readonly\r\n                                   [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value ? rowData[col.id].value : ''\"\r\n                                   [tooltipDisabled]=\"!col.tooltip\">\r\n                            <button *ngIf=\"getOption(col, rowData, 'downloadPath') && rowData[col.id].value != null\"\r\n                                    type=\"button\"\r\n                                    pButton\r\n                                    pRipple\r\n                                    icon=\"pi pi-download\"\r\n                                    (click)=\"downloadFile(rowData[col.id])\"\r\n                                    [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\">\r\n                            </button>\r\n                        </div>\r\n                        <input *ngIf=\"rowData[col.id]\" id=\"{{'input_' + rowData[col.id].id}}\" #inputFile pInputText type=\"file\" hidden (change)=\"rowData[col.id].value = inputFile.files[0].name; onEditCell(rowData, col, inputFile.files[0])\">\r\n                    </td>\r\n                    <td *ngIf=\"!col.invisible && checkType('File', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                        [ngStyle]=\"{\r\n                            'width' : col.width ? col.width : null,\r\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\r\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value ? rowData[col.id].value : ''\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'text-left': col.position == 'left' || col.position == null,\r\n                            'text-right': col.position == 'right',\r\n                            'text-center': col.position == 'center',\r\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\r\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        [tooltipDisabled]=\"!col.tooltip\"\r\n                        tooltipPosition=\"bottom\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <div *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value ? rowData[col.id].value : '' }}</div>\r\n                    </td>\r\n\r\n                    <!-- State -->\r\n                    <td *ngIf=\"!col.invisible && checkType('State', col)\"\r\n                        [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\r\n                        id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                        [ngClass]=\"{\r\n                            'paddingCell': rowData[col.id] != null,\r\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\r\n                        }\"\r\n                        (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\r\n                        class=\"text-center\"\r\n                        pFrozenColumn\r\n                        [frozen]=\"col.frozen\">\r\n                        <div class=\"p-column-title\">{{ col.libelle }} : </div>\r\n                        <p-tag *ngIf=\"rowData[col.id].value != null\"\r\n                               [value]=\"rowData[col.id].value[getOption(col, rowData, 'optionLabel')]\"\r\n                               [severity]=\"rowData[col.id].value.severity\"\r\n                               [icon]=\"rowData[col.id].value.icon\"\r\n                               [style]=\"{\r\n                                    'background-color': rowData[col.id].value.backgroundColor,\r\n                                    'color': rowData[col.id].value.textColor,\r\n                                    'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null,\r\n                                    'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null\r\n                               }\">\r\n                        </p-tag>\r\n                    </td>\r\n\r\n                </ng-container>\r\n\r\n                <!-- Deletion -->\r\n                <td *ngIf=\"options.rowsDeletable\"\r\n                    class=\"cellDelete\"\r\n                    [ngClass]=\"rowData.deletable ? 'paddingCell' : null\">\r\n                    <button *ngIf=\"rowData.deletable\"\r\n                            pButton\r\n                            type=\"button\"\r\n                            icon=\"pi pi-times\"\r\n                            class=\"p-button-danger buttonDelete p-button-text\"\r\n                            [disabled]=\"rowData.readonly\"\r\n                            (click)=\"onDeleteLine(rowData)\">\r\n                    </button>\r\n                </td>\r\n\r\n            </tr>\r\n        </ng-template>\r\n    </p-table>\r\n</div>\r\n", styles: ["::ng-deep .p-tooltip .p-tooltip-text{overflow-wrap:break-word!important}:host ::ng-deep .grid_brown .rowHeader>th{background-color:#795548}:host ::ng-deep .grid_brown .rowHeader>th div{color:#fff}:host ::ng-deep .grid_brown .rowHeader>th i{color:#fff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column:hover{background-color:#a47767}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column:hover i{color:#fff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column.p-highlight div{color:#76c7ff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column.p-highlight .p-sortable-column-icon{color:#76c7ff}:host ::ng-deep .grid_brown .rowFilter th{background-color:#795548}:host ::ng-deep .grid_grey .rowHeader>th{background-color:#dedddd}:host ::ng-deep .grid_grey .rowHeader>th div{color:#495057}:host ::ng-deep .grid_grey .rowHeader>th i{color:#495057}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column:hover{background-color:#e7e7e7}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column:hover i{color:#495057}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column.p-highlight div{color:#008bff}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column.p-highlight .p-sortable-column-icon{color:#008bff}:host ::ng-deep .grid_grey .rowFilter th{background-color:#dedddd}:host ::ng-deep .selectable_cell:hover{background:#dcdcdc!important;cursor:pointer!important}:host ::ng-deep .p-frozen-column{z-index:2!important}:host ::ng-deep .p-datatable-thead{z-index:3!important}:host ::ng-deep .p-checkbox{border-radius:inherit!important}:host ::ng-deep p-inputnumber{width:100%}:host ::ng-deep .p-calendar,:host ::ng-deep .p-inputtext,:host ::ng-deep .p-inputnumber,:host ::ng-deep .p-inputnumber-input,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .suffixe,:host ::ng-deep .prefixe{height:25px;padding-top:1px!important}:host ::ng-deep .p-multiselect-label-container,:host ::ng-deep .p-dropdown-label{width:1px!important}:host ::ng-deep .p-scroller-content{min-height:50%}:host ::ng-deep .rowTotal>th{background-color:#edcbaa!important}:host ::ng-deep .rowGrouping{background:#faeada!important}:host ::ng-deep .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{background:#30e130}:host ::ng-deep .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider{background:#2bd12b}:host ::ng-deep .p-datatable-table{table-layout:fixed}:host ::ng-deep .p-datatable-thead>tr>th{border:1px solid rgba(0,0,0,.12)!important;padding:8px;font-weight:600;height:40px}:host ::ng-deep .headerAffichageSimple div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .headerAffichageEntier{word-wrap:break-word}:host ::ng-deep .p-datatable-tbody>tr>td{border:1px solid rgba(0,0,0,.12)!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-datatable-tbody>tr>td div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-tag{max-width:100%}:host ::ng-deep .p-tag .p-tag-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-button{padding:5px;max-width:100%}:host ::ng-deep .p-button .p-button-label{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}:host ::ng-deep .text_bold{font-weight:700!important}:host ::ng-deep .cellDelete{flex:0 0 50px!important;width:50px;text-align:center!important;padding:0!important}:host ::ng-deep .p-tooltip .p-tooltip-text{background-color:red!important}:host ::ng-deep .p-skeleton{background-color:#dee2e6;border-radius:6px;padding:0}:host ::ng-deep .p-datatable-tbody>tr{height:35px}:host ::ng-deep .p-inputtext{height:25px!important;padding:4px 5px!important}:host ::ng-deep .p-inputnumber{height:25px;padding:0!important}:host ::ng-deep .p-inputnumber-input{padding:0 5px!important}:host ::ng-deep .p-inputgroup .p-inputtext{height:25px;padding:4px 5px!important}:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{vertical-align:middle}:host ::ng-deep .p-dropdown-label{padding-top:2px;padding-bottom:2px}:host ::ng-deep .p-multiselect-label{padding-top:2px;padding-bottom:2px}:host ::ng-deep .p-editable-column{padding:3px 10px!important}:host ::ng-deep .paddingCell{padding:3px 10px!important}:host ::ng-deep .p-selectbutton>.p-button{width:50%;height:25px}:host ::ng-deep .p-inputgroup>.p-button{height:25px}:host ::ng-deep .buttonDelete{width:100%;height:20px}:host ::ng-deep .p-column-title{display:none}:host ::ng-deep .p-datatable-loading-icon{color:#fff}\n"] }]
+            args: [{ selector: 'cilog-table', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ValuePipe,
+                        TagModule,
+                        TableModule,
+                        ContextMenuModule,
+                        TooltipModule,
+                        MultiSelectModule,
+                        DatePickerModule,
+                        SelectModule,
+                        CilogInputNumberComponent,
+                        SelectButtonModule,
+                        ButtonModule,
+                        InputTextModule,
+                        InputNumberModule
+                    ], template: "<div [ngStyle]=\"{ 'height': options.scrollHeight != null ? options.scrollHeight : '100%' }\">\n\n    @if (options.exportExcel) {\n    <button pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-success absolute z-5 w-2rem h-2rem border-round-right border-noround-top\"\n            pTooltip=\"Exporter le contenu de la grille au format Excel\"\n            tooltipPosition=\"right\"\n            (click)=\"exportExcel(options.exportExcelByFiltre, !options.exportExcelNoColors)\">\n    </button>\n    }\n\n    <p-contextMenu #cm [model]=\"options.contextMenuItems\" />\n\n    <p-table #table\n             [columns]=\"columns\"\n             [value]=\"values\"\n             dataKey=\"id\"\n             [selectionMode]=\"getModeSelection()\"\n             [metaKeySelection]=\"isModeMetakeySelection()\"\n             [(selection)]=\"selectedRows\"\n             (onRowSelect)=\"onSelectRow($event)\"\n             (onRowUnselect)=\"onUnselectRow($event)\"\n             (onHeaderCheckboxToggle)=\"onSelectAll($event)\"\n             (sortFunction)=\"sortGrille($event)\"\n             [customSort]=\"options.grouping == null ? true : false\"\n             [scrollable]=\"true\"\n             [loading]=\"loading\"\n             [scrollHeight]=\"'flex'\"\n             [rowGroupMode]=\"options.grouping != null ? 'subheader' : null\"\n             [groupRowsBy]=\"options.grouping != null ? options.grouping.obj + '.' + options.grouping.id : null\"\n             [groupRowsByOrder]=\"0\"\n             [virtualScroll]=\"options.virtualScroll == true && options.scrollHeight != null ? true : false\"\n             [virtualScrollItemSize]=\"options.virtualScrollItemSize != null ? options.virtualScrollItemSize : 35\"\n             [paginator]=\"options.paginator == null ? false : true\"\n             [rows]=\"options.paginatorRows\"\n             (onPage)=\"onPageTable($event)\"\n             [tableStyleClass]=\"!options.themeGrille ? 'grid_grey' : options.themeGrille\"\n             [lazy]=\"options.lazy == true ? true : false\"\n             (onFilter)=\"onFilterTable($event)\"\n             [rowTrackBy]=\"trackByFunction\"\n             [(contextMenuSelection)]=\"contextMenuSelectedItem\"\n             [contextMenu]=\"cm\">\n\n        <!-- HEADER -->\n        <ng-template pTemplate=\"header\" let-columns>\n\n            <!-- HEADERS -->\n            <tr class=\"rowHeader\">\n                @if (isModeCheckboxSelection()) {\n                <th class=\"cellDelete\"\n                    pFrozenColumn>\n                    @if (!options.filterable && options.toggleAll) {\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                    }\n                </th>\n                }\n                @for (col of columns; track col) {\n                @if (!col.invisible) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': col.backgroundColor ? col.backgroundColor : null }\"\n                    [ngClass]=\"{ 'text-center' : options.centerHeaders, 'headerAffichageSimple': !options.headersAffichageEntier, 'headerAffichageEntier': options.headersAffichageEntier }\"\n                    [pSortableColumn]=\"col.id\"\n                    [pSortableColumnDisabled]=\"!options.sortable || options.grouping != null || col.libelle == null || col.libelle == ''\"\n                    id=\"{{ col.id }}\"\n                    (click)=\"refreshData()\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\"\n                    [pTooltip]=\"col.libelle\"\n                    [tooltipDisabled]=\"!col.tooltipHeader\"\n                    tooltipPosition=\"bottom\">\n                    <div [ngStyle]=\"{ 'color': col.textColor ? col.textColor : null }\">\n                        {{ col.libelle }}\n                    </div>\n                    @if (options.sortable && options.grouping == null && col.libelle != null && col.libelle != '') {\n                    <p-sortIcon [field]=\"col.id\">\n                    </p-sortIcon>\n                    }\n                </th>\n                }\n                }\n                @if (options.rowsDeletable) {\n                <th class=\"cellDelete\"></th>\n                }\n            </tr>\n\n            <!-- FILTRES -->\n            @if (options.filterable) {\n            <tr class=\"rowFilter\">\n                @if (isModeCheckboxSelection()) {\n                <th class=\"cellDelete\"\n                    pFrozenColumn>\n                    @if (options.toggleAll) {\n                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n                    }\n                </th>\n                }\n                @for (col of columns; track col) {\n                <!-- Text -->\n                @if (!col.invisible && ((checkType('Dropdown', col) && col.options.filterText)\n                || (checkType('MultiSelect', col) && col.options.filterText)\n                || checkType('Text', col)\n                || checkType('File', col)\n                || (checkType('Button', col) && col.options.filterCol))\n                || checkType('Number', col)\n                || checkType('CilogNumber', col)) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    @if (!col.disableFilter) {\n                    <input pInputText\n                           type=\"text\"\n                           (input)=\"onFilterCol($event, col)\"\n                           name=\"filterText\"\n                           [(ngModel)]=\"col.options.defaultFilters\">\n                    }\n                </th>\n                }\n                <!-- Date -->\n                @if (!col.invisible && checkType('Date', col)) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    @if (!col.disableFilter) {\n                    <p-datepicker [view]=\"col.options.mode == null ? 'date' : col.options.mode\"\n                                  [dateFormat]=\"col.options.mode == 'year' ? 'yy' : col.options.mode == 'month' ? 'mm/yy' : 'dd/mm/yy'\"\n                                  [inputId]=\"col.id + '_filter'\"\n                                  [firstDayOfWeek]=\"1\"\n                                  [readonlyInput]=\"true\"\n                                  appendTo=\"body\"\n                                  selectionMode=\"range\"\n                                  (onSelect)=\"onFilterCol($event, col)\"\n                                  showButtonBar=\"true\"\n                                  (onClearClick)=\"onFilterCol($event, col)\"\n                                  name=\"filterDate\"\n                                  [(ngModel)]=\"col.options.defaultFilters\">\n                    </p-datepicker>\n                    }\n                </th>\n                }\n                <!-- Liste -->\n                @if (!col.invisible && ((checkType('Dropdown', col) && !col.options.filterText) || (checkType('MultiSelect', col) && !col.options.filterText) || checkType('SelectButton', col) || checkType('State', col))) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    @if (!col.disableFilter) {\n                    <p-multiSelect [options]=\"col.options?.options\"\n                                   [filter]=\"true\"\n                                   dataKey=\"ID\"\n                                   [optionLabel]=\"col.options?.optionLabel\"\n                                   appendTo=\"body\"\n                                   emptyFilterMessage=\"Aucun r\u00E9sultat\"\n                                   emptyMessage=\"Aucun r\u00E9sultat\"\n                                   [virtualScroll]=\"true\"\n                                   [virtualScrollItemSize]=\"35\"\n                                   selectedItemsLabel=\"{0} selectionn\u00E9s\"\n                                   (onChange)=\"onFilterCol($event, col)\"\n                                   name=\"filterChoix\"\n                                   [(ngModel)]=\"col.options.defaultFilters\"\n                                   [group]=\"col.options.optionGroupChildren != null ? true : false\"\n                                   [optionGroupLabel]=\"col.options.optionGroupLabel\"\n                                   [optionGroupChildren]=\"col.options.optionGroupChildren\"\n                                   [showToggleAll]=\"false\"\n                                   [showClear]=\"true\"\n                                   (onClear)=\"onFilterCol(null, col)\">\n                        <ng-template let-group pTemplate=\"group\">\n                            <div>{{group[col.options.optionGroupLabel]}}</div>\n                        </ng-template>\n                    </p-multiSelect>\n                    }\n                </th>\n                }\n                <!-- Switch -->\n                @if (!col.invisible && checkType('Switch', col)) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    @if (!col.disableFilter) {\n                    <p-multiSelect [options]=\"optionsSwitch\"\n                                   [showHeader]=\"false\"\n                                   optionLabel=\"label\"\n                                   optionValue=\"value\"\n                                   appendTo=\"body\"\n                                   emptyFilterMessage=\"Aucun r\u00E9sultat\"\n                                   emptyMessage=\"Aucun r\u00E9sultat\"\n                                   [virtualScrollItemSize]=\"30\"\n                                   selectedItemsLabel=\"{0} selectionn\u00E9s\"\n                                   (onChange)=\"onFilterCol($event, col)\"\n                                   name=\"filterChoix2\"\n                                   [(ngModel)]=\"col.options.defaultFilters\">\n                    </p-multiSelect>\n                    }\n                </th>\n                }\n                <!-- Non filtrable -->\n                @if (!col.invisible && (checkType('Image', col) || (checkType('Button', col) && !col.options.filterCol))) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                </th>\n                }\n                }\n                @if (options.rowsDeletable) {\n                <th class=\"cellDelete\"></th>\n                }\n            </tr>\n            }\n\n            <!-- TOTAL -->\n            @if (options.rowTotal) {\n            <tr class=\"rowTotal\">\n                @if (isModeCheckboxSelection()) {\n                <th class=\"cellDelete\"\n                    pFrozenColumn>\n                </th>\n                }\n                @for (col of columns; track col) {\n                @if (!col.invisible) {\n                <th [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\n                    [ngClass]=\"{ 'text-center' : true }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div>{{ getTotalStr(col) }}</div>\n                </th>\n                }\n                }\n                @if (options.rowsDeletable) {\n                <th class=\"cellDelete\"></th>\n                }\n            </tr>\n            }\n        </ng-template>\n\n        <!--Groupheader-->\n        <ng-template pTemplate=\"groupheader\" let-rowData>\n            <tr pRowGroupHeader class=\"rowGrouping\">\n                <td [attr.colspan]=\"columns.length\">\n                    <div class=\"text_bold\">{{ rowData[options.grouping.obj][options.grouping.libelle] }}</div>\n                </td>\n            </tr>\n        </ng-template>\n\n        <!-- Body -->\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\n            <tr id=\"{{ rowData.id }}\"\n                [ngStyle]=\"{ 'background-color': rowData.color ? rowData.color : null }\"\n                [pSelectableRow]=\"rowData\"\n                [pSelectableRowDisabled]=\"!options.selectable || isModeCheckboxSelection() || isModeCellSelection()\"\n                (dblclick)=\"onRowDoubleClickEvent(rowData)\"\n                [pContextMenuRow]=\"rowData\"\n                [pContextMenuRowDisabled]=\"options.contextMenuItems == null\">\n\n                @if (isModeCheckboxSelection()) {\n                <td class=\"cellDelete\"\n                    pFrozenColumn>\n                    <p-tableCheckbox [value]=\"rowData\" [disabled]=\"rowData.readonly\"></p-tableCheckbox>\n                </td>\n                }\n\n                @for (col of columns; track col) {\n                <!-- Text -->\n                @if (!col.invisible && checkType('Text', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pEditableColumn]=\"rowData\"\n                    [pEditableColumnField]=\"col.id\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [frozen]=\"col.frozen\"\n                    [ngClass]=\"{\n                             'text-left': col.position == 'left' || col.position == null,\n                             'text-right': col.position == 'right',\n                             'text-center': col.position == 'center',\n                             'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                             'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                             'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                            <input pInputText\n                                   type=\"text\"\n                                   [(ngModel)]=\"rowData[col.id].value\"\n                                   name=\"text\"\n                                   (blur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                   (keydown.enter)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                   (keydown.tab)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                   (click)=\"onEditInitCell(rowData, col, rowData[col.id].value)\"\n                                   [ngClass]=\"{\n                                            'text-left': col.position == 'left' || col.position == null,\n                                            'text-right': col.position == 'right',\n                                            'text-center': col.position == 'center',\n                                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                            'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                       }\" />\n                        </ng-template>\n                        <ng-template pTemplate=\"output\">\n                            @if (rowData[col.id]) {\n                            <div style=\"white-space: pre;\">\n                                {{ getFormattedText(col, rowData) }}\n                            </div>\n                            }\n                        </ng-template>\n                    </p-cellEditor>\n                </td>\n                }\n                @if (!col.invisible && checkType('Text', col) && (!isModeEdition() || rowData.readonly || rowData[col.id]?.readonly)) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color' : rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">\n                        {{ col.libelle }} :\n                    </div>\n                    @if (rowData[col.id]) {\n                    <div style=\"white-space: pre;\">\n                        {{ getFormattedText(col, rowData) }}\n                    </div>\n                    }\n                </td>\n                }\n                <!-- Dropdown -->\n                @if (!col.invisible && checkType('Dropdown', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    [ngClass]=\"{\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\"\n                    class=\"paddingCell\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] != null) {\n                    <p-select dataKey=\"ID\"\n                              [options]=\"getOption(col, rowData, 'options')\"\n                              [filter]=\"getOption(col, rowData, 'filter')\"\n                              [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\n                              [(ngModel)]=\"rowData[col.id].value\"\n                              name=\"select\"\n                              appendTo=\"body\"\n                              [showClear]=\"getOption(col, rowData, 'deletable')\"\n                              emptyFilterMessage=\"Aucun r\u00E9sultat\"\n                              emptyMessage=\"Aucun r\u00E9sultat\"\n                              [virtualScroll]=\"getOption(col, rowData, 'virtualScroll')\"\n                              [readonly]=\"rowData.readonly || rowData[col.id]?.readonly\"\n                              [virtualScrollItemSize]=\"30\"\n                              (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                              (onClear)=\"onEditCell(rowData, col, rowData[col.id].value)\">\n                        <ng-template let-data pTemplate=\"selectedItem\">\n                            @if (data != null) {\n                            <span [ngClass]=\"{\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                    }\">\n                                {{ data[getOption(col, rowData, 'optionLabel')] }}\n                            </span>\n                            }\n                            @if (data == null) {\n                            <span></span>\n                            }\n                        </ng-template>\n                    </p-select>\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('Dropdown', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : '' }}</div>\n                    }\n                </td>\n                }\n                <!-- Cilog Number -->\n                @if (!col.invisible && checkType('CilogNumber', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] && !rowData.readonly && !rowData[col.id]?.readonly) {\n                    <cilog-input-number (onInput)=\"onInputNumber($event)\"\n                                        [(ngModel)]=\"rowData[col.id].value\"\n                                        name=\"cilog-number\"\n                                        ngDefaultControl\n                                        [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\n                                        [textColor]=\"rowData[col.id].textColor\"\n                                        [bold]=\"rowData.bold == true || rowData[col.id].bold == true\"\n                                        [italic]=\"rowData.italic == true || rowData[col.id].italic == true\"\n                                        [suffixe]=\"getOption(col, rowData, 'suffix')\"\n                                        [prefixe]=\"getOption(col, rowData, 'prefix') != null ? getOption(col, rowData, 'prefix') + ' ' : null\"\n                                        [min]=\"getOption(col, rowData, 'min')\"\n                                        [max]=\"getOption(col, rowData, 'max')\"\n                                        [disabled]=\"rowData.readonly || rowData[col.id]?.readonly\"\n                                        [maxDecimals]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'maxDecimales') != null ? getOption(col, rowData, 'maxDecimales') : 2 \"\n                                        (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                        (onFocus)=\"onEditInitCell(rowData, col, rowData[col.id].value)\">\n                    </cilog-input-number>\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('CilogNumber', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ getFormattedNumber(col, rowData, rowData[col.id].value) }}</div>\n                    }\n                </td>\n                }\n                <!-- Number -->\n                @if (!col.invisible && checkType('Number', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left',\n                            'text-right': col.position == 'right' || col.position == null,\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\"\n                    (click)=\"onClickCellNumber(rowData, col)\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] && !rowData[col.id].focus) {\n                    <div>\n                        {{ getFormattedNumber(col, rowData, rowData[col.id].value) }}\n                    </div>\n                    }\n                    @if (rowData[col.id] && !rowData.readonly && !rowData[col.id]?.readonly && rowData[col.id].focus == true) {\n                    <p-inputNumber #inputNumber\n                                   locale=\"fr-FR\"\n                                   (onInput)=\"onInputNumber($event)\"\n                                   [(ngModel)]=\"rowData[col.id].value\"\n                                   name=\"input-number\"\n                                   [showButtons]=\"getOption(col, rowData, 'showButtons')\"\n                                   [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\n                                   [inputStyle]=\"{ 'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null, 'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null }\"\n                                   [suffix]=\"getOption(col, rowData, 'suffix')\"\n                                   [prefix]=\"getOption(col, rowData, 'prefix') != null ? getOption(col, rowData, 'prefix') + ' ' : null\"\n                                   [min]=\"getOption(col, rowData, 'min')\"\n                                   [max]=\"getOption(col, rowData, 'max')\"\n                                   [minFractionDigits]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'minDecimales') != null ? getOption(col, rowData, 'minDecimales') : 0\"\n                                   [maxFractionDigits]=\"getOption(col, rowData, 'modeInteger') != null && getOption(col, rowData, 'modeInteger') == true ? 0 : getOption(col, rowData, 'maxDecimales') != null ? getOption(col, rowData, 'maxDecimales') : 2 \"\n                                   (onBlur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                   (onKeyDown)=\"onKeyDown($event, rowData, col, rowData[col.id].value)\"\n                                   (onFocus)=\"onEditInitCell(rowData, col, rowData[col.id].value)\">\n                    </p-inputNumber>\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('Number', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | value\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left',\n                            'text-right': col.position == 'right' || col.position == null,\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ getFormattedNumber(col, rowData, rowData[col.id].value) }}</div>\n                    }\n                </td>\n                }\n                <!-- Date -->\n                @if (!col.invisible && checkType('Date', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getOption(col, rowData, 'mode') == 'year' ? (rowData[col.id].value | date: 'yyyy') : getOption(col, rowData, 'mode') == 'month' ? (rowData[col.id].value | date: 'MM/yy') : getOption(col, rowData, 'mode') == 'hour' ? (rowData[col.id].value | date: 'HH:mm') : getOption(col, rowData, 'mode') == 'datehour' ? (rowData[col.id].value | date: 'dd/MM/yy HH:mm') : (rowData[col.id].value | date: 'dd/MM/yyyy')\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    <p-datepicker [(ngModel)]=\"rowData[col.id].value\"\n                                  name=\"date-picker\"\n                                  [view]=\"getOption(col, rowData, 'mode') == null || getOption(col, rowData, 'mode') == 'date' || getOption(col, rowData, 'mode') == 'hour' ? 'date' : getOption(col, rowData, 'mode') == 'datehour' ? 'date' : getOption(col, rowData, 'mode')\"\n                                  [dateFormat]=\"getOption(col, rowData, 'mode') == 'year' ? 'yy' : getOption(col, rowData, 'mode') == 'month' ? 'mm/yy' : getOption(col, rowData, 'mode') == 'hour' || getOption(col, rowData, 'mode') == 'datehour' ? 'dd/mm/yy' : 'dd/mm/yy'\"\n                                  [showTime]=\"getOption(col, rowData, 'mode') == 'datehour'\"\n                                  [timeOnly]=\"getOption(col, rowData, 'mode') == 'hour'\"\n                                  [hourFormat]=\"'24'\"\n                                  [firstDayOfWeek]=\"1\"\n                                  (onSelect)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                  (onBlur)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                  (onClear)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                  [inputStyleClass]=\"col.position == null || col.position == 'right' ? 'text-right' : col.position == 'left' ? 'text-left' : 'text-center'\"\n                                  [inputStyle]=\"{ 'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null, 'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null }\"\n                                  [showClear]=\"getOption(col, rowData, 'clear')\"\n                                  [minDate]=\"getOption(col, rowData, 'minDate')\"\n                                  [maxDate]=\"getOption(col, rowData, 'maxDate')\"\n                                  [defaultDate]=\"getOption(col, rowData, 'defaultDate')\"\n                                  appendTo=\"body\">\n                    </p-datepicker>\n                </td>\n                }\n                @if (!col.invisible && checkType('Date', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'min-width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value | date: 'dd/MM/yyyy'\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ rowData[col.id].value | date: (getOption(col, rowData, 'mode') == 'year' ? 'yyyy' : getOption(col, rowData, 'mode') == 'month' ? 'MM/yyyy' : 'dd/MM/yyyy') }}</div>\n                    }\n                </td>\n                }\n                <!-- MultiSelect -->\n                @if (!col.invisible && checkType('MultiSelect', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\"\n                    class=\"paddingCell\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] != null) {\n                    <p-multiSelect [options]=\"getOption(col, rowData, 'options')\"\n                                   [filter]=\"getOption(col, rowData, 'filter')\"\n                                   [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\n                                   [(ngModel)]=\"rowData[col.id].value\"\n                                   name=\"multiselect\"\n                                   appendTo=\"body\"\n                                   dataKey=\"ID\"\n                                   emptyFilterMessage=\"Aucun r\u00E9sultat\"\n                                   emptyMessage=\"Aucun r\u00E9sultat\"\n                                   [virtualScroll]=\"getOption(col, rowData, 'virtualScroll')\"\n                                   [readonly]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\"\n                                   [virtualScrollItemSize]=\"30\"\n                                   selectedItemsLabel=\"{0} selectionn\u00E9s\"\n                                   (onChange)=\"editMultiselect(rowData, col, $event)\"\n                                   [showToggleAll]=\"false\"\n                                   [showHeader]=\"getOption(col, rowData, 'filter')\"\n                                   [group]=\"getOption(col, rowData, 'optionGroupChildren') != null ? true : false\"\n                                   [optionGroupLabel]=\"getOption(col, rowData, 'optionGroupLabel')\"\n                                   [optionGroupChildren]=\"getOption(col, rowData, 'optionGroupChildren')\"\n                                   ngDefaultControl>\n                        <ng-template let-data pTemplate=\"selectedItems\">\n                            @for (option of data; track option; let i = $index) {\n                            <span [ngClass]=\"{\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                     }\">\n                                {{ option[getOption(col, rowData, 'optionLabel')] + (i != data.length - 1 ? ',' : '') }}\n                            </span>\n                            }\n                        </ng-template>\n                        <ng-template let-group pTemplate=\"group\">\n                            <div>{{group[col.options.optionGroupLabel]}}</div>\n                        </ng-template>\n                    </p-multiSelect>\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('MultiSelect', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel')) }}</div>\n                    }\n                </td>\n                }\n                <!-- Image -->\n                @if (!col.invisible && checkType('Image', col)) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    class=\"text-center\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <img style=\"vertical-align: middle; width: 40px;\" src=\"{{ rowData[col.id].value }}\" />\n                    }\n                </td>\n                }\n                <!-- Button -->\n                @if (!col.invisible && checkType('Button', col)) {\n                <td class=\"paddingCell text-center\"\n                    [ngClass]=\"{\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id].value != null && isValueButtonByType(rowData[col.id].value, 'function')) {\n                    <button pButton\n                            [disabled]=\"rowData.readonly || rowData[col.id]?.readonly\"\n                            [label]=\"getOption(col, rowData, 'label')\"\n                            [icon]=\"getOption(col, rowData, 'icon')\"\n                            (click)=\"rowData[col.id].value()\"\n                            [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : getOption(col, rowData, 'label')\"\n                            [tooltipDisabled]=\"!col.tooltip\"\n                            [class]=\"'p-button-' + getOption(col, rowData, 'severity')\"\n                            [ngClass]=\"{\n                                    'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                    'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                }\">\n                    </button>\n                    }\n                    @if (isValueButtonByType(rowData[col.id].value, 'string')) {\n                    <div [ngClass]=\"{\n                                'paddingCell': rowData[col.id] != null,\n                                'text-left': col.position == 'left' || col.position == null,\n                                'text-right': col.position == 'right',\n                                'text-center': col.position == 'center',\n                                'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                            }\"\n                         [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value\"\n                         [tooltipDisabled]=\"!col.tooltip\">\n                        {{ rowData[col.id].value }}\n                    </div>\n                    }\n                </td>\n                }\n                <!-- SelectButton -->\n                @if (!col.invisible && checkType('SelectButton', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] != null) {\n                    <p-selectButton [options]=\"getOption(col, rowData, 'options')\"\n                                    [optionLabel]=\"getOption(col, rowData, 'optionLabel')\"\n                                    [optionValue]=\"getOption(col, rowData, 'optionValue') != null ? getOption(col, rowData, 'optionValue') : 'value'\"\n                                    [(ngModel)]=\"rowData[col.id].value\"\n                                    name=\"select-button\"\n                                    [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\"\n                                    (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\">\n                        <ng-template let-item pTemplate=\"item\">\n                            <span class=\"text-center w-full\"\n                                  [ngClass]=\"{\n                                    'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                    'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                }\">\n                                {{ item.label }}\n                            </span>\n                        </ng-template>\n                    </p-selectButton>\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('SelectButton', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\"\n                    class=\"text-center\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ getSelectLibelleByValue(rowData, col) }}</div>\n                    }\n                </td>\n                }\n                <!-- Switch -->\n                @if (!col.invisible && checkType('Switch', col)) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    class=\"text-center\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] != null) {\n                    <p-toggleswitch [(ngModel)]=\"rowData[col.id].value\"\n                                    name=\"toggle-switch\"\n                                    [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || (getOption(col, rowData, 'action') == null && !isModeEdition())\"\n                                    (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\n                                    ngDefaultControl>\n                    </p-toggleswitch>\n                    }\n                </td>\n                }\n                <!-- File -->\n                @if (!col.invisible && checkType('File', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id] != null) {\n                    <div class=\"p-inputgroup\">\n                        <button type=\"button\"\n                                pButton\n                                pRipple\n                                icon=\"pi pi-upload\"\n                                (click)=\"clickById('input_' + rowData[col.id].id)\"\n                                [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\">\n                        </button>\n                        <input id=\"{{'output_' + rowData[col.id].id}}\"\n                               pInputText\n                               type=\"text\"\n                               [ngClass]=\"{\n                                        'text-left': col.position == 'left' || col.position == null,\n                                        'text-right': col.position == 'right',\n                                        'text-center': col.position == 'center',\n                                        'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                                        'font-italic': rowData.italic == true || rowData[col.id].italic == true\n                                   }\"\n                               value=\"{{ rowData[col.id].value != null ? rowData[col.id].value : '' }}\"\n                               readonly\n                               [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value ? rowData[col.id].value : ''\"\n                               [tooltipDisabled]=\"!col.tooltip\">\n                        @if (getOption(col, rowData, 'downloadPath') && rowData[col.id].value != null) {\n                        <button type=\"button\"\n                                pButton\n                                pRipple\n                                icon=\"pi pi-download\"\n                                (click)=\"downloadFile(rowData[col.id])\"\n                                [disabled]=\"rowData.readonly || rowData[col.id]?.readonly || !isModeEdition()\">\n                        </button>\n                        }\n                    </div>\n                    }\n                    @if (rowData[col.id]) {\n                    <input id=\"{{'input_' + rowData[col.id].id}}\" #inputFile pInputText type=\"file\" hidden (change)=\"rowData[col.id].value = inputFile.files[0].name; onEditCell(rowData, col, inputFile.files[0])\">\n                    }\n                </td>\n                }\n                @if (!col.invisible && checkType('File', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())) {\n                <td [ngStyle]=\"{\n                            'width' : col.width ? col.width : null,\n                            'background-color': rowData[col.id].color ? rowData[col.id].color : null,\n                            'color' : rowData[col.id].textColor ? rowData[col.id].textColor : null\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [pTooltip]=\"rowData[col.id].tooltip != null ? rowData[col.id].tooltip : rowData[col.id].value ? rowData[col.id].value : ''\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'text-left': col.position == 'left' || col.position == null,\n                            'text-right': col.position == 'right',\n                            'text-center': col.position == 'center',\n                            'font-bold': rowData.bold == true || rowData[col.id].bold == true,\n                            'font-italic': rowData.italic == true || rowData[col.id].italic == true,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    [tooltipDisabled]=\"!col.tooltip\"\n                    tooltipPosition=\"bottom\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id]) {\n                    <div>{{ rowData[col.id].value ? rowData[col.id].value : '' }}</div>\n                    }\n                </td>\n                }\n                <!-- State -->\n                @if (!col.invisible && checkType('State', col)) {\n                <td [ngStyle]=\"{ 'width' : col.width ? col.width : null, 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\"\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\n                    [ngClass]=\"{\n                            'paddingCell': rowData[col.id] != null,\n                            'selectable_cell' : options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection\n                        }\"\n                    (click)=\"options.selectable && isModeCellSelection() && !rowData[col.id].disableSelection && onSelectCell(rowData[col.id])\"\n                    class=\"text-center\"\n                    pFrozenColumn\n                    [frozen]=\"col.frozen\">\n                    <div class=\"p-column-title\">{{ col.libelle }} : </div>\n                    @if (rowData[col.id].value != null) {\n                    <p-tag [value]=\"rowData[col.id].value[getOption(col, rowData, 'optionLabel')]\"\n                           [severity]=\"rowData[col.id].value.severity\"\n                           [icon]=\"rowData[col.id].value.icon\"\n                           [style]=\"{\n                                    'background-color': rowData[col.id].value.backgroundColor,\n                                    'color': rowData[col.id].value.textColor,\n                                    'font-weight': rowData.bold == true || rowData[col.id].bold == true ? 'bold' : null,\n                                    'font-style': rowData.italic == true || rowData[col.id].italic == true ? 'italic' : null\n                               }\">\n                    </p-tag>\n                    }\n                </td>\n                }\n                }\n\n                <!-- Deletion -->\n                @if (options.rowsDeletable) {\n                <td class=\"cellDelete\"\n                    [ngClass]=\"rowData.deletable ? 'paddingCell' : null\">\n                    @if (rowData.deletable) {\n                    <button pButton\n                            type=\"button\"\n                            icon=\"pi pi-times\"\n                            class=\"p-button-danger buttonDelete p-button-text\"\n                            [disabled]=\"rowData.readonly\"\n                            (click)=\"onDeleteLine(rowData)\">\n                    </button>\n                    }\n                </td>\n                }\n\n            </tr>\n        </ng-template>\n    </p-table>\n</div>\n", styles: ["::ng-deep .p-tooltip .p-tooltip-text{overflow-wrap:break-word!important}:host ::ng-deep .grid_brown .rowHeader>th{background-color:#795548}:host ::ng-deep .grid_brown .rowHeader>th div{color:#fff}:host ::ng-deep .grid_brown .rowHeader>th i{color:#fff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column:hover{background-color:#a47767}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column:hover i{color:#fff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column.p-highlight div{color:#76c7ff}:host ::ng-deep .grid_brown .rowHeader .p-sortable-column.p-highlight .p-sortable-column-icon{color:#76c7ff}:host ::ng-deep .grid_brown .rowFilter th{background-color:#795548}:host ::ng-deep .grid_grey .rowHeader>th{background-color:#dedddd}:host ::ng-deep .grid_grey .rowHeader>th div{color:#495057}:host ::ng-deep .grid_grey .rowHeader>th i{color:#495057}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column:hover{background-color:#e7e7e7}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column:hover i{color:#495057}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column.p-highlight div{color:#008bff}:host ::ng-deep .grid_grey .rowHeader .p-sortable-column.p-highlight .p-sortable-column-icon{color:#008bff}:host ::ng-deep .grid_grey .rowFilter th{background-color:#dedddd}:host ::ng-deep .selectable_cell:hover{background:#dcdcdc!important;cursor:pointer!important}:host ::ng-deep .p-frozen-column{z-index:2!important}:host ::ng-deep .p-datatable-thead{z-index:3!important}:host ::ng-deep .p-checkbox{border-radius:inherit!important}:host ::ng-deep p-inputnumber{width:100%}:host ::ng-deep .p-calendar,:host ::ng-deep .p-inputtext,:host ::ng-deep .p-inputnumber,:host ::ng-deep .p-inputnumber-input,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .suffixe,:host ::ng-deep .prefixe{height:25px;padding-top:1px!important}:host ::ng-deep .p-multiselect-label-container,:host ::ng-deep .p-dropdown-label{width:1px!important}:host ::ng-deep .p-scroller-content{min-height:50%}:host ::ng-deep .rowTotal>th{background-color:#edcbaa!important}:host ::ng-deep .rowGrouping{background:#faeada!important}:host ::ng-deep .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{background:#30e130}:host ::ng-deep .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider{background:#2bd12b}:host ::ng-deep .p-datatable-table{table-layout:fixed}:host ::ng-deep .p-datatable-thead>tr>th{border:1px solid rgba(0,0,0,.12)!important;padding:8px;font-weight:600;height:40px}:host ::ng-deep .headerAffichageSimple div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .headerAffichageEntier{word-wrap:break-word}:host ::ng-deep .p-datatable-tbody>tr>td{border:1px solid rgba(0,0,0,.12)!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-datatable-tbody>tr>td div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-tag{max-width:100%}:host ::ng-deep .p-tag .p-tag-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .p-button{padding:5px;max-width:100%}:host ::ng-deep .p-button .p-button-label{overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}:host ::ng-deep .text_bold{font-weight:700!important}:host ::ng-deep .cellDelete{flex:0 0 50px!important;width:50px;text-align:center!important;padding:0!important}:host ::ng-deep .p-tooltip .p-tooltip-text{background-color:red!important}:host ::ng-deep .p-skeleton{background-color:#dee2e6;border-radius:6px;padding:0}:host ::ng-deep .p-datatable-tbody>tr{height:35px}:host ::ng-deep .p-inputtext{height:25px!important;padding:4px 5px!important}:host ::ng-deep .p-inputnumber{height:25px;padding:0!important}:host ::ng-deep .p-inputnumber-input{padding:0 5px!important}:host ::ng-deep .p-inputgroup .p-inputtext{height:25px;padding:4px 5px!important}:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{vertical-align:middle}:host ::ng-deep .p-dropdown-label{padding-top:2px;padding-bottom:2px}:host ::ng-deep .p-multiselect-label{padding-top:2px;padding-bottom:2px}:host ::ng-deep .p-editable-column{padding:3px 10px!important}:host ::ng-deep .paddingCell{padding:3px 10px!important}:host ::ng-deep .p-selectbutton>.p-button{width:50%;height:25px}:host ::ng-deep .p-inputgroup>.p-button{height:25px}:host ::ng-deep .buttonDelete{width:100%;height:20px}:host ::ng-deep .p-column-title{display:none}:host ::ng-deep .p-datatable-loading-icon{color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i1.ConfirmationService }, { type: i1.FilterService }, { type: i0.ChangeDetectorRef }, { type: ExportService }], propDecorators: { columns: [{
                 type: Input
             }], columnsChange: [{
@@ -1389,23 +1354,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['inputNumber']
             }] } });
 
-class CilogTableService {
-    constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogTableService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogTableService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 class CilogEditorComponent {
-    constructor() {
-        this.textChange = new EventEmitter();
-        this.onTextChange = new EventEmitter();
-    }
+    text;
+    textChange = new EventEmitter();
+    onTextChange = new EventEmitter();
+    editor;
+    constructor() { }
     ngOnInit() {
     }
     change(event) {
@@ -1415,12 +1369,14 @@ class CilogEditorComponent {
     onSelectionChange(event) {
         // NOTHING
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CilogEditorComponent, selector: "cilog-editor", inputs: { text: "text" }, outputs: { textChange: "textChange", onTextChange: "onTextChange" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<p-editor #editor\r\n          [(ngModel)]=\"text\"\r\n          (onTextChange)=\"change($event)\">\r\n</p-editor>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "directive", type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CilogEditorComponent, isStandalone: true, selector: "cilog-editor", inputs: { text: "text" }, outputs: { textChange: "textChange", onTextChange: "onTextChange" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<p-editor #editor\r\n          [(ngModel)]=\"text\"\r\n          (onTextChange)=\"change($event)\">\r\n</p-editor>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cilog-editor', template: "<p-editor #editor\r\n          [(ngModel)]=\"text\"\r\n          (onTextChange)=\"change($event)\">\r\n</p-editor>\r\n" }]
+            args: [{ selector: 'cilog-editor', imports: [
+                        FormsModule
+                    ], template: "<p-editor #editor\r\n          [(ngModel)]=\"text\"\r\n          (onTextChange)=\"change($event)\">\r\n</p-editor>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { text: [{
                 type: Input
             }], textChange: [{
@@ -1433,14 +1389,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class DocumentationContextuelleComponent {
+    http;
+    router;
+    config;
+    categories = [];
+    filteredCategories = [];
+    tabs = [];
+    searchQuery = '';
+    activeTabIndex = 0;
     constructor(http, router) {
         this.http = http;
         this.router = router;
-        this.categories = [];
-        this.filteredCategories = [];
-        this.tabs = [];
-        this.searchQuery = '';
-        this.activeTabIndex = 0;
     }
     ngOnInit() {
         this.http.get('assets/docs/doc-config/config.json').subscribe((config) => {
@@ -1569,94 +1528,39 @@ class DocumentationContextuelleComponent {
             .reduce((acc, cat) => acc.concat(cat.docs), [])
             .find(doc => normalizedUrl.toLowerCase().includes(doc.fileName.toLowerCase().replace('.md', '')));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentationContextuelleComponent, deps: [{ token: i1$2.HttpClient }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentationContextuelleComponent, selector: "cilog-documentation-contextuelle", ngImport: i0, template: "<div class=\"documentation-container\">\r\n  <!-- Menu sup\u00E9rieur -->\r\n  <div class=\"documentation-menu\">\r\n    <button \r\n      pButton \r\n      type=\"button\" \r\n      icon=\"pi pi-list\" \r\n      label=\"Sommaire des documentations\"\r\n      class=\"p-button-sm p-button-outlined\"\r\n      (click)=\"openDocumentationList()\"\r\n      title=\"Voir toutes les documentations disponibles\">\r\n    </button>\r\n    <button \r\n      pButton \r\n      type=\"button\" \r\n      icon=\"pi pi-home\" \r\n      label=\"Documentation courante\"\r\n      class=\"p-button-sm p-button-outlined\"\r\n      (click)=\"openCurrentPageDoc()\"\r\n      title=\"Documentation de la page actuelle\">\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Syst\u00E8me d'onglets -->\r\n  <p-tabView \r\n    [(activeIndex)]=\"activeTabIndex\"\r\n    (onClose)=\"closeTab($event)\"\r\n    styleClass=\"documentation-tabs\">\r\n    \r\n    <p-tabPanel \r\n      *ngFor=\"let tab of tabs; let i = index\" \r\n      [header]=\"tab.title\"\r\n      [closable]=\"tabs.length > 1\">\r\n      \r\n      <!-- Contenu pour onglet de liste - Version am\u00E9lior\u00E9e -->\r\n      <div *ngIf=\"tab.type === 'list'\" class=\"docs-list-container\">\r\n        <div class=\"docs-header\">\r\n          <h2>\uD83D\uDCDA Sommaire de la Documentation</h2>\r\n          <p class=\"docs-subtitle\">Explorez toutes les fonctionnalit\u00E9s disponibles dans LogeProj</p>\r\n        </div>\r\n\r\n        <!-- Barre de recherche -->\r\n        <div class=\"search-bar\">\r\n          <span class=\"p-input-icon-left\" style=\"width: 100%; max-width: 800px;\">\r\n            <i class=\"pi pi-search\"></i>\r\n            <input \r\n              type=\"text\" \r\n              pInputText \r\n              placeholder=\"Rechercher dans les documentations...\" \r\n              [(ngModel)]=\"searchQuery\"\r\n              (input)=\"filterDocumentation()\"\r\n              style=\"width: 100% !important; padding: 12px 20px 12px 40px !important; border-radius: 25px !important;\">\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Liste des cat\u00E9gories -->\r\n        <div class=\"categories-container\">\r\n          <div *ngFor=\"let category of filteredCategories\" class=\"category-section\">\r\n            <div class=\"category-header\" (click)=\"toggleCategory(category.key)\">\r\n              <i class=\"pi\" [ngClass]=\"category.expanded ? 'pi-chevron-down' : 'pi-chevron-right'\"></i>\r\n              <span class=\"category-icon\">{{ category.icon }}</span>\r\n              <h3 class=\"category-title\">{{ category.name }}</h3>\r\n              <span class=\"category-count\">({{ category.docs.length }})</span>\r\n            </div>\r\n            \r\n            <div class=\"category-content\" [ngClass]=\"{ 'expanded': category.expanded }\">\r\n              <div class=\"docs-grid\">\r\n                <div \r\n                  *ngFor=\"let doc of category.docs\" \r\n                  class=\"doc-card\"\r\n                  (click)=\"openDocumentationAndSwitch(doc)\"\r\n                  [title]=\"doc.description\">                  \r\n                  <div class=\"doc-card-content\">\r\n                    <h4 class=\"doc-name\">{{ doc.displayName }}</h4>\r\n                    <p class=\"doc-description\">{{ doc.description }}</p>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Stats en bas -->\r\n        <div class=\"docs-stats\">\r\n          <div class=\"stat-item\">\r\n            <strong>{{ getTotalDocsCount() }}</strong> documentations disponibles\r\n          </div>\r\n          <div class=\"stat-item\">\r\n            <strong>{{ getOpenTabsCount() }}</strong> onglets ouverts\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Contenu pour onglet de documentation -->\r\n      <div *ngIf=\"tab.type === 'doc'\" class=\"markdown-container\">\r\n        <!-- Breadcrumb pour navigation -->\r\n        <div class=\"doc-breadcrumb\" *ngIf=\"tab.category\">\r\n          <span class=\"breadcrumb-item\">{{ tab.category }}</span>\r\n          <i class=\"pi pi-angle-right\"></i>\r\n          <span class=\"breadcrumb-current\">{{ tab.title }}</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"tab.loading\" class=\"loading-container\">\r\n          <p-progressSpinner strokeWidth=\"4\"></p-progressSpinner>\r\n          <span>Chargement de la documentation...</span>\r\n        </div>\r\n        <markdown \r\n          *ngIf=\"!tab.loading\" \r\n          [data]=\"tab.content || 'Aucun contenu disponible'\">\r\n        </markdown>\r\n      </div>\r\n    </p-tabPanel>\r\n  </p-tabView>\r\n</div>", styles: [".documentation-container{display:flex;flex-direction:column;height:100%;width:100%}.documentation-menu{padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid #e9ecef;display:flex;gap:10px;flex-shrink:0}.documentation-menu .p-button{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff}.documentation-menu .p-button:hover{background:#ffffff4d}.docs-list-container{padding:20px;flex:1;overflow-y:auto;background:#f8f9fa}.docs-header{text-align:center;margin-bottom:30px}.docs-header h2{margin:0 0 10px;color:#2c3e50;font-size:2rem}.docs-header .docs-subtitle{color:#7f8c8d;font-size:1.1rem;margin:0}.search-bar{margin-bottom:30px;display:flex;justify-content:center}.search-bar .search-input{width:100%;padding:12px 20px 12px 40px;border-radius:25px;border:2px solid #e9ecef;font-size:1rem}.search-bar .search-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.categories-container{max-width:1200px;margin:0 auto}.category-section{margin-bottom:25px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.category-section .category-header{padding:20px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);cursor:pointer;display:flex;align-items:center;gap:15px;transition:all .3s ease}.category-section .category-header:hover{background:linear-gradient(135deg,#e8eaf6,#b39ddb)}.category-section .category-header .pi{color:#667eea;font-size:1rem;transition:transform .3s ease}.category-section .category-header .category-icon{font-size:1.5rem}.category-section .category-header .category-title{margin:0;color:#2c3e50;font-size:1.3rem;flex:1}.category-section .category-header .category-count{color:#7f8c8d;font-size:.9rem;background:#677eea1a;padding:4px 12px;border-radius:15px}.category-section .category-content{max-height:0;overflow:hidden;transition:max-height .4s ease-out}.category-section .category-content.expanded{max-height:2000px;transition:max-height .6s ease-in}.docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:25px}.doc-card{border:1px solid #e9ecef;border-radius:12px;padding:20px;cursor:pointer;transition:all .3s ease;background:#fff;position:relative;overflow:hidden}.doc-card:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.doc-card:hover{border-color:#667eea;box-shadow:0 8px 25px #667eea26;transform:translateY(-4px)}.doc-card:hover:before{transform:scaleX(1)}.doc-card .doc-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.doc-card .doc-card-header .doc-icon{font-size:2rem}.doc-card .doc-card-header .doc-badge{padding:4px 8px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}.doc-card .doc-card-header .doc-badge.doc-badge-high{background:#e8f5e8;color:#2e7d2e}.doc-card .doc-card-header .doc-badge.doc-badge-medium{background:#fff3cd;color:#856404}.doc-card .doc-card-header .doc-badge.doc-badge-low{background:#f8f9fa;color:#6c757d}.doc-card .doc-card-content .doc-name{margin:0 0 10px;color:#2c3e50;font-size:1.1rem;font-weight:600;line-height:1.3}.doc-card .doc-card-content .doc-description{color:#6c757d;font-size:.9rem;line-height:1.4;margin:0 0 10px}.doc-card .doc-card-content .doc-filename{color:#adb5bd;font-size:.8rem;font-family:Courier New,monospace}.docs-stats{display:flex;justify-content:center;gap:40px;margin-top:40px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}.docs-stats .stat-item{text-align:center;color:#6c757d}.docs-stats .stat-item strong{color:#667eea;font-size:1.2rem}.markdown-container{flex:1;overflow-y:auto;padding:20px;background:#fff}.markdown-container .doc-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:10px 0;border-bottom:1px solid #e9ecef;color:#6c757d;font-size:.9rem}.markdown-container .doc-breadcrumb .breadcrumb-current{color:#2c3e50;font-weight:600}.markdown-container markdown{display:block;line-height:1.6}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;color:#6c757d;gap:20px}.loading-container span{font-size:1.1rem}.documentation-tabs{flex:1;display:flex;flex-direction:column}.documentation-tabs ::ng-deep .p-tabview-panels{flex:1;display:flex}.documentation-tabs ::ng-deep .p-tabview-panels .p-tabview-panel{flex:1;display:flex;flex-direction:column}.documentation-tabs ::ng-deep .p-tabview-nav{background:#f8f9fa;border-bottom:2px solid #e9ecef}.documentation-tabs ::ng-deep .p-tabview-nav .p-tabview-nav-link{background:transparent;border:none;color:#6c757d;font-weight:500}.documentation-tabs ::ng-deep .p-tabview-nav .p-tabview-nav-link:not(.p-disabled):focus{box-shadow:0 0 0 2px #667eea33}.documentation-tabs ::ng-deep .p-tabview-nav .p-highlight .p-tabview-nav-link{background:#fff;color:#667eea;border-bottom:2px solid #667eea}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i6.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i6.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "directive", type: i16.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DocumentationContextuelleComponent, deps: [{ token: i1$1.HttpClient }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DocumentationContextuelleComponent, isStandalone: true, selector: "cilog-documentation-contextuelle", ngImport: i0, template: "<div class=\"documentation-container\">\n    <!-- Menu sup\u00E9rieur -->\n    <div class=\"documentation-menu\">\n        <button pButton\n                type=\"button\"\n                icon=\"pi pi-list\"\n                label=\"Sommaire des documentations\"\n                class=\"p-button-sm p-button-outlined\"\n                (click)=\"openDocumentationList()\"\n                title=\"Voir toutes les documentations disponibles\">\n        </button>\n        <button pButton\n                type=\"button\"\n                icon=\"pi pi-home\"\n                label=\"Documentation courante\"\n                class=\"p-button-sm p-button-outlined\"\n                (click)=\"openCurrentPageDoc()\"\n                title=\"Documentation de la page actuelle\">\n        </button>\n    </div>\n\n    <!-- Syst\u00E8me d'onglets -->\n    <p-tabs (onClose)=\"closeTab($event)\"\n            styleClass=\"documentation-tabs\">\n        <p-tablist>\n            @for (tab of tabs; track tab.value) {\n            <p-tab [value]=\"tab.value\">{{ tab.title }}</p-tab>\n            }\n        </p-tablist>\n        <p-tabpanels>\n            @for (tab of tabs; track tab; let i = $index) {\n            <p-tabpanel [value]=\"tab.value\">\n                <!-- Contenu pour onglet de liste - Version am\u00E9lior\u00E9e -->\n                @if (tab.type === 'list') {\n                <div class=\"docs-list-container\">\n                    <div class=\"docs-header\">\n                        <h2>\uD83D\uDCDA Sommaire de la Documentation</h2>\n                        <p class=\"docs-subtitle\">Explorez toutes les fonctionnalit\u00E9s disponibles dans LogeProj</p>\n                    </div>\n                    <!-- Barre de recherche -->\n                    <div class=\"search-bar\">\n                        <span class=\"p-input-icon-left\" style=\"width: 100%; max-width: 800px;\">\n                            <i class=\"pi pi-search\"></i>\n                            <input type=\"text\"\n                                   pInputText\n                                   placeholder=\"Rechercher dans les documentations...\"\n                                   name=\"recherche\"\n                                   [(ngModel)]=\"searchQuery\"\n                                   ngDefaultControl\n                                   (input)=\"filterDocumentation()\"\n                                   style=\"width: 100% !important; padding: 12px 20px 12px 40px !important; border-radius: 25px !important;\">\n                        </span>\n                    </div>\n                    <!-- Liste des cat\u00E9gories -->\n                    <div class=\"categories-container\">\n                        @for (category of filteredCategories; track category) {\n                        <div class=\"category-section\">\n                            <div class=\"category-header\" (click)=\"toggleCategory(category.key)\">\n                                <i class=\"pi\" [ngClass]=\"category.expanded ? 'pi-chevron-down' : 'pi-chevron-right'\"></i>\n                                <span class=\"category-icon\">{{ category.icon }}</span>\n                                <h3 class=\"category-title\">{{ category.name }}</h3>\n                                <span class=\"category-count\">({{ category.docs.length }})</span>\n                            </div>\n                            <div class=\"category-content\" [ngClass]=\"{ 'expanded': category.expanded }\">\n                                <div class=\"docs-grid\">\n                                    @for (doc of category.docs; track doc) {\n                                    <div class=\"doc-card\"\n                                         (click)=\"openDocumentationAndSwitch(doc)\"\n                                         [title]=\"doc.description\">\n                                        <div class=\"doc-card-content\">\n                                            <h4 class=\"doc-name\">{{ doc.displayName }}</h4>\n                                            <p class=\"doc-description\">{{ doc.description }}</p>\n                                        </div>\n                                    </div>\n                                    }\n                                </div>\n                            </div>\n                        </div>\n                        }\n                    </div>\n                    <!-- Stats en bas -->\n                    <div class=\"docs-stats\">\n                        <div class=\"stat-item\">\n                            <strong>{{ getTotalDocsCount() }}</strong> documentations disponibles\n                        </div>\n                        <div class=\"stat-item\">\n                            <strong>{{ getOpenTabsCount() }}</strong> onglets ouverts\n                        </div>\n                    </div>\n                </div>\n                }\n                <!-- Contenu pour onglet de documentation -->\n                @if (tab.type === 'doc') {\n                <div class=\"markdown-container\">\n                    <!-- Breadcrumb pour navigation -->\n                    @if (tab.category) {\n                    <div class=\"doc-breadcrumb\">\n                        <span class=\"breadcrumb-item\">{{ tab.category }}</span>\n                        <i class=\"pi pi-angle-right\"></i>\n                        <span class=\"breadcrumb-current\">{{ tab.title }}</span>\n                    </div>\n                    }\n                    @if (tab.loading) {\n                    <div class=\"loading-container\">\n                        <p-progressSpinner strokeWidth=\"4\"></p-progressSpinner>\n                        <span>Chargement de la documentation...</span>\n                    </div>\n                    }\n                    @if (!tab.loading) {\n                    <markdown [data]=\"tab.content || 'Aucun contenu disponible'\">\n                    </markdown>\n                    }\n                </div>\n                }\n            </p-tabpanel>\n            }\n        </p-tabpanels>\n    </p-tabs>\n</div>\n", styles: [".documentation-container{display:flex;flex-direction:column;height:100%;width:100%}.documentation-menu{padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid #e9ecef;display:flex;gap:10px;flex-shrink:0}.documentation-menu .p-button{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff}.documentation-menu .p-button:hover{background:#ffffff4d}.docs-list-container{padding:20px;flex:1;overflow-y:auto;background:#f8f9fa}.docs-header{text-align:center;margin-bottom:30px}.docs-header h2{margin:0 0 10px;color:#2c3e50;font-size:2rem}.docs-header .docs-subtitle{color:#7f8c8d;font-size:1.1rem;margin:0}.search-bar{margin-bottom:30px;display:flex;justify-content:center}.search-bar .search-input{width:100%;padding:12px 20px 12px 40px;border-radius:25px;border:2px solid #e9ecef;font-size:1rem}.search-bar .search-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.categories-container{max-width:1200px;margin:0 auto}.category-section{margin-bottom:25px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.category-section .category-header{padding:20px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);cursor:pointer;display:flex;align-items:center;gap:15px;transition:all .3s ease}.category-section .category-header:hover{background:linear-gradient(135deg,#e8eaf6,#b39ddb)}.category-section .category-header .pi{color:#667eea;font-size:1rem;transition:transform .3s ease}.category-section .category-header .category-icon{font-size:1.5rem}.category-section .category-header .category-title{margin:0;color:#2c3e50;font-size:1.3rem;flex:1}.category-section .category-header .category-count{color:#7f8c8d;font-size:.9rem;background:#677eea1a;padding:4px 12px;border-radius:15px}.category-section .category-content{max-height:0;overflow:hidden;transition:max-height .4s ease-out}.category-section .category-content.expanded{max-height:2000px;transition:max-height .6s ease-in}.docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:25px}.doc-card{border:1px solid #e9ecef;border-radius:12px;padding:20px;cursor:pointer;transition:all .3s ease;background:#fff;position:relative;overflow:hidden}.doc-card:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.doc-card:hover{border-color:#667eea;box-shadow:0 8px 25px #667eea26;transform:translateY(-4px)}.doc-card:hover:before{transform:scaleX(1)}.doc-card .doc-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.doc-card .doc-card-header .doc-icon{font-size:2rem}.doc-card .doc-card-header .doc-badge{padding:4px 8px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}.doc-card .doc-card-header .doc-badge.doc-badge-high{background:#e8f5e8;color:#2e7d2e}.doc-card .doc-card-header .doc-badge.doc-badge-medium{background:#fff3cd;color:#856404}.doc-card .doc-card-header .doc-badge.doc-badge-low{background:#f8f9fa;color:#6c757d}.doc-card .doc-card-content .doc-name{margin:0 0 10px;color:#2c3e50;font-size:1.1rem;font-weight:600;line-height:1.3}.doc-card .doc-card-content .doc-description{color:#6c757d;font-size:.9rem;line-height:1.4;margin:0 0 10px}.doc-card .doc-card-content .doc-filename{color:#adb5bd;font-size:.8rem;font-family:Courier New,monospace}.docs-stats{display:flex;justify-content:center;gap:40px;margin-top:40px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}.docs-stats .stat-item{text-align:center;color:#6c757d}.docs-stats .stat-item strong{color:#667eea;font-size:1.2rem}.markdown-container{flex:1;overflow-y:auto;padding:20px;background:#fff}.markdown-container .doc-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:10px 0;border-bottom:1px solid #e9ecef;color:#6c757d;font-size:.9rem}.markdown-container .doc-breadcrumb .breadcrumb-current{color:#2c3e50;font-weight:600}.markdown-container markdown{display:block;line-height:1.6}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;color:#6c757d;gap:20px}.loading-container span{font-size:1.1rem}.documentation-tabs{flex:1;display:flex;flex-direction:column}.documentation-tabs ::ng-deep .p-tabview-panels{flex:1;display:flex}.documentation-tabs ::ng-deep .p-tabview-panels .p-tabview-panel{flex:1;display:flex;flex-direction:column}.documentation-tabs ::ng-deep .p-tabview-nav{background:#f8f9fa;border-bottom:2px solid #e9ecef}.documentation-tabs ::ng-deep .p-tabview-nav .p-tabview-nav-link{background:transparent;border:none;color:#6c757d;font-weight:500}.documentation-tabs ::ng-deep .p-tabview-nav .p-tabview-nav-link:not(.p-disabled):focus{box-shadow:0 0 0 2px #667eea33}.documentation-tabs ::ng-deep .p-tabview-nav .p-highlight .p-tabview-nav-link{background:#fff;color:#667eea;border-bottom:2px solid #667eea}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i5$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i6$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i6$1.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i6$1.TabList, selector: "p-tablist" }, { kind: "component", type: i6$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentationContextuelleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DocumentationContextuelleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cilog-documentation-contextuelle', template: "<div class=\"documentation-container\">\r\n  <!-- Menu sup\u00E9rieur -->\r\n  <div class=\"documentation-menu\">\r\n    <button \r\n      pButton \r\n      type=\"button\" \r\n      icon=\"pi pi-list\" \r\n      label=\"Sommaire des documentations\"\r\n      class=\"p-button-sm p-button-outlined\"\r\n      (click)=\"openDocumentationList()\"\r\n      title=\"Voir toutes les documentations disponibles\">\r\n    </button>\r\n    <button \r\n      pButton \r\n      type=\"button\" \r\n      icon=\"pi pi-home\" \r\n      label=\"Documentation courante\"\r\n      class=\"p-button-sm p-button-outlined\"\r\n      (click)=\"openCurrentPageDoc()\"\r\n      title=\"Documentation de la page actuelle\">\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Syst\u00E8me d'onglets -->\r\n  <p-tabView \r\n    [(activeIndex)]=\"activeTabIndex\"\r\n    (onClose)=\"closeTab($event)\"\r\n    styleClass=\"documentation-tabs\">\r\n    \r\n    <p-tabPanel \r\n      *ngFor=\"let tab of tabs; let i = index\" \r\n      [header]=\"tab.title\"\r\n      [closable]=\"tabs.length > 1\">\r\n      \r\n      <!-- Contenu pour onglet de liste - Version am\u00E9lior\u00E9e -->\r\n      <div *ngIf=\"tab.type === 'list'\" class=\"docs-list-container\">\r\n        <div class=\"docs-header\">\r\n          <h2>\uD83D\uDCDA Sommaire de la Documentation</h2>\r\n          <p class=\"docs-subtitle\">Explorez toutes les fonctionnalit\u00E9s disponibles dans LogeProj</p>\r\n        </div>\r\n\r\n        <!-- Barre de recherche -->\r\n        <div class=\"search-bar\">\r\n          <span class=\"p-input-icon-left\" style=\"width: 100%; max-width: 800px;\">\r\n            <i class=\"pi pi-search\"></i>\r\n            <input \r\n              type=\"text\" \r\n              pInputText \r\n              placeholder=\"Rechercher dans les documentations...\" \r\n              [(ngModel)]=\"searchQuery\"\r\n              (input)=\"filterDocumentation()\"\r\n              style=\"width: 100% !important; padding: 12px 20px 12px 40px !important; border-radius: 25px !important;\">\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Liste des cat\u00E9gories -->\r\n        <div class=\"categories-container\">\r\n          <div *ngFor=\"let category of filteredCategories\" class=\"category-section\">\r\n            <div class=\"category-header\" (click)=\"toggleCategory(category.key)\">\r\n              <i class=\"pi\" [ngClass]=\"category.expanded ? 'pi-chevron-down' : 'pi-chevron-right'\"></i>\r\n              <span class=\"category-icon\">{{ category.icon }}</span>\r\n              <h3 class=\"category-title\">{{ category.name }}</h3>\r\n              <span class=\"category-count\">({{ category.docs.length }})</span>\r\n            </div>\r\n            \r\n            <div class=\"category-content\" [ngClass]=\"{ 'expanded': category.expanded }\">\r\n              <div class=\"docs-grid\">\r\n                <div \r\n                  *ngFor=\"let doc of category.docs\" \r\n                  class=\"doc-card\"\r\n                  (click)=\"openDocumentationAndSwitch(doc)\"\r\n                  [title]=\"doc.description\">                  \r\n                  <div class=\"doc-card-content\">\r\n                    <h4 class=\"doc-name\">{{ doc.displayName }}</h4>\r\n                    <p class=\"doc-description\">{{ doc.description }}</p>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Stats en bas -->\r\n        <div class=\"docs-stats\">\r\n          <div class=\"stat-item\">\r\n            <strong>{{ getTotalDocsCount() }}</strong> documentations disponibles\r\n          </div>\r\n          <div class=\"stat-item\">\r\n            <strong>{{ getOpenTabsCount() }}</strong> onglets ouverts\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Contenu pour onglet de documentation -->\r\n      <div *ngIf=\"tab.type === 'doc'\" class=\"markdown-container\">\r\n        <!-- Breadcrumb pour navigation -->\r\n        <div class=\"doc-breadcrumb\" *ngIf=\"tab.category\">\r\n          <span class=\"breadcrumb-item\">{{ tab.category }}</span>\r\n          <i class=\"pi pi-angle-right\"></i>\r\n          <span class=\"breadcrumb-current\">{{ tab.title }}</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"tab.loading\" class=\"loading-container\">\r\n          <p-progressSpinner strokeWidth=\"4\"></p-progressSpinner>\r\n          <span>Chargement de la documentation...</span>\r\n        </div>\r\n        <markdown \r\n          *ngIf=\"!tab.loading\" \r\n          [data]=\"tab.content || 'Aucun contenu disponible'\">\r\n        </markdown>\r\n      </div>\r\n    </p-tabPanel>\r\n  </p-tabView>\r\n</div>", styles: [".documentation-container{display:flex;flex-direction:column;height:100%;width:100%}.documentation-menu{padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid #e9ecef;display:flex;gap:10px;flex-shrink:0}.documentation-menu .p-button{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff}.documentation-menu .p-button:hover{background:#ffffff4d}.docs-list-container{padding:20px;flex:1;overflow-y:auto;background:#f8f9fa}.docs-header{text-align:center;margin-bottom:30px}.docs-header h2{margin:0 0 10px;color:#2c3e50;font-size:2rem}.docs-header .docs-subtitle{color:#7f8c8d;font-size:1.1rem;margin:0}.search-bar{margin-bottom:30px;display:flex;justify-content:center}.search-bar .search-input{width:100%;padding:12px 20px 12px 40px;border-radius:25px;border:2px solid #e9ecef;font-size:1rem}.search-bar .search-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.categories-container{max-width:1200px;margin:0 auto}.category-section{margin-bottom:25px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.category-section .category-header{padding:20px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);cursor:pointer;display:flex;align-items:center;gap:15px;transition:all .3s ease}.category-section .category-header:hover{background:linear-gradient(135deg,#e8eaf6,#b39ddb)}.category-section .category-header .pi{color:#667eea;font-size:1rem;transition:transform .3s ease}.category-section .category-header .category-icon{font-size:1.5rem}.category-section .category-header .category-title{margin:0;color:#2c3e50;font-size:1.3rem;flex:1}.category-section .category-header .category-count{color:#7f8c8d;font-size:.9rem;background:#677eea1a;padding:4px 12px;border-radius:15px}.category-section .category-content{max-height:0;overflow:hidden;transition:max-height .4s ease-out}.category-section .category-content.expanded{max-height:2000px;transition:max-height .6s ease-in}.docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:25px}.doc-card{border:1px solid #e9ecef;border-radius:12px;padding:20px;cursor:pointer;transition:all .3s ease;background:#fff;position:relative;overflow:hidden}.doc-card:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.doc-card:hover{border-color:#667eea;box-shadow:0 8px 25px #667eea26;transform:translateY(-4px)}.doc-card:hover:before{transform:scaleX(1)}.doc-card .doc-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.doc-card .doc-card-header .doc-icon{font-size:2rem}.doc-card .doc-card-header .doc-badge{padding:4px 8px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}.doc-card .doc-card-header .doc-badge.doc-badge-high{background:#e8f5e8;color:#2e7d2e}.doc-card .doc-card-header .doc-badge.doc-badge-medium{background:#fff3cd;color:#856404}.doc-card .doc-card-header .doc-badge.doc-badge-low{background:#f8f9fa;color:#6c757d}.doc-card .doc-card-content .doc-name{margin:0 0 10px;color:#2c3e50;font-size:1.1rem;font-weight:600;line-height:1.3}.doc-card .doc-card-content .doc-description{color:#6c757d;font-size:.9rem;line-height:1.4;margin:0 0 10px}.doc-card .doc-card-content .doc-filename{color:#adb5bd;font-size:.8rem;font-family:Courier New,monospace}.docs-stats{display:flex;justify-content:center;gap:40px;margin-top:40px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}.docs-stats .stat-item{text-align:center;color:#6c757d}.docs-stats .stat-item strong{color:#667eea;font-size:1.2rem}.markdown-container{flex:1;overflow-y:auto;padding:20px;background:#fff}.markdown-container .doc-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:10px 0;border-bottom:1px solid #e9ecef;color:#6c757d;font-size:.9rem}.markdown-container .doc-breadcrumb .breadcrumb-current{color:#2c3e50;font-weight:600}.markdown-container markdown{display:block;line-height:1.6}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;color:#6c757d;gap:20px}.loading-container span{font-size:1.1rem}.documentation-tabs{flex:1;display:flex;flex-direction:column}.documentation-tabs ::ng-deep .p-tabview-panels{flex:1;display:flex}.documentation-tabs ::ng-deep .p-tabview-panels .p-tabview-panel{flex:1;display:flex;flex-direction:column}.documentation-tabs ::ng-deep .p-tabview-nav{background:#f8f9fa;border-bottom:2px solid #e9ecef}.documentation-tabs ::ng-deep .p-tabview-nav .p-tabview-nav-link{background:transparent;border:none;color:#6c757d;font-weight:500}.documentation-tabs ::ng-deep .p-tabview-nav .p-tabview-nav-link:not(.p-disabled):focus{box-shadow:0 0 0 2px #667eea33}.documentation-tabs ::ng-deep .p-tabview-nav .p-highlight .p-tabview-nav-link{background:#fff;color:#667eea;border-bottom:2px solid #667eea}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i2$1.Router }] });
+            args: [{ selector: 'cilog-documentation-contextuelle', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ProgressSpinnerModule,
+                        TabsModule,
+                        EditorModule,
+                        MarkdownComponent
+                    ], template: "<div class=\"documentation-container\">\n    <!-- Menu sup\u00E9rieur -->\n    <div class=\"documentation-menu\">\n        <button pButton\n                type=\"button\"\n                icon=\"pi pi-list\"\n                label=\"Sommaire des documentations\"\n                class=\"p-button-sm p-button-outlined\"\n                (click)=\"openDocumentationList()\"\n                title=\"Voir toutes les documentations disponibles\">\n        </button>\n        <button pButton\n                type=\"button\"\n                icon=\"pi pi-home\"\n                label=\"Documentation courante\"\n                class=\"p-button-sm p-button-outlined\"\n                (click)=\"openCurrentPageDoc()\"\n                title=\"Documentation de la page actuelle\">\n        </button>\n    </div>\n\n    <!-- Syst\u00E8me d'onglets -->\n    <p-tabs (onClose)=\"closeTab($event)\"\n            styleClass=\"documentation-tabs\">\n        <p-tablist>\n            @for (tab of tabs; track tab.value) {\n            <p-tab [value]=\"tab.value\">{{ tab.title }}</p-tab>\n            }\n        </p-tablist>\n        <p-tabpanels>\n            @for (tab of tabs; track tab; let i = $index) {\n            <p-tabpanel [value]=\"tab.value\">\n                <!-- Contenu pour onglet de liste - Version am\u00E9lior\u00E9e -->\n                @if (tab.type === 'list') {\n                <div class=\"docs-list-container\">\n                    <div class=\"docs-header\">\n                        <h2>\uD83D\uDCDA Sommaire de la Documentation</h2>\n                        <p class=\"docs-subtitle\">Explorez toutes les fonctionnalit\u00E9s disponibles dans LogeProj</p>\n                    </div>\n                    <!-- Barre de recherche -->\n                    <div class=\"search-bar\">\n                        <span class=\"p-input-icon-left\" style=\"width: 100%; max-width: 800px;\">\n                            <i class=\"pi pi-search\"></i>\n                            <input type=\"text\"\n                                   pInputText\n                                   placeholder=\"Rechercher dans les documentations...\"\n                                   name=\"recherche\"\n                                   [(ngModel)]=\"searchQuery\"\n                                   ngDefaultControl\n                                   (input)=\"filterDocumentation()\"\n                                   style=\"width: 100% !important; padding: 12px 20px 12px 40px !important; border-radius: 25px !important;\">\n                        </span>\n                    </div>\n                    <!-- Liste des cat\u00E9gories -->\n                    <div class=\"categories-container\">\n                        @for (category of filteredCategories; track category) {\n                        <div class=\"category-section\">\n                            <div class=\"category-header\" (click)=\"toggleCategory(category.key)\">\n                                <i class=\"pi\" [ngClass]=\"category.expanded ? 'pi-chevron-down' : 'pi-chevron-right'\"></i>\n                                <span class=\"category-icon\">{{ category.icon }}</span>\n                                <h3 class=\"category-title\">{{ category.name }}</h3>\n                                <span class=\"category-count\">({{ category.docs.length }})</span>\n                            </div>\n                            <div class=\"category-content\" [ngClass]=\"{ 'expanded': category.expanded }\">\n                                <div class=\"docs-grid\">\n                                    @for (doc of category.docs; track doc) {\n                                    <div class=\"doc-card\"\n                                         (click)=\"openDocumentationAndSwitch(doc)\"\n                                         [title]=\"doc.description\">\n                                        <div class=\"doc-card-content\">\n                                            <h4 class=\"doc-name\">{{ doc.displayName }}</h4>\n                                            <p class=\"doc-description\">{{ doc.description }}</p>\n                                        </div>\n                                    </div>\n                                    }\n                                </div>\n                            </div>\n                        </div>\n                        }\n                    </div>\n                    <!-- Stats en bas -->\n                    <div class=\"docs-stats\">\n                        <div class=\"stat-item\">\n                            <strong>{{ getTotalDocsCount() }}</strong> documentations disponibles\n                        </div>\n                        <div class=\"stat-item\">\n                            <strong>{{ getOpenTabsCount() }}</strong> onglets ouverts\n                        </div>\n                    </div>\n                </div>\n                }\n                <!-- Contenu pour onglet de documentation -->\n                @if (tab.type === 'doc') {\n                <div class=\"markdown-container\">\n                    <!-- Breadcrumb pour navigation -->\n                    @if (tab.category) {\n                    <div class=\"doc-breadcrumb\">\n                        <span class=\"breadcrumb-item\">{{ tab.category }}</span>\n                        <i class=\"pi pi-angle-right\"></i>\n                        <span class=\"breadcrumb-current\">{{ tab.title }}</span>\n                    </div>\n                    }\n                    @if (tab.loading) {\n                    <div class=\"loading-container\">\n                        <p-progressSpinner strokeWidth=\"4\"></p-progressSpinner>\n                        <span>Chargement de la documentation...</span>\n                    </div>\n                    }\n                    @if (!tab.loading) {\n                    <markdown [data]=\"tab.content || 'Aucun contenu disponible'\">\n                    </markdown>\n                    }\n                </div>\n                }\n            </p-tabpanel>\n            }\n        </p-tabpanels>\n    </p-tabs>\n</div>\n", styles: [".documentation-container{display:flex;flex-direction:column;height:100%;width:100%}.documentation-menu{padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid #e9ecef;display:flex;gap:10px;flex-shrink:0}.documentation-menu .p-button{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff}.documentation-menu .p-button:hover{background:#ffffff4d}.docs-list-container{padding:20px;flex:1;overflow-y:auto;background:#f8f9fa}.docs-header{text-align:center;margin-bottom:30px}.docs-header h2{margin:0 0 10px;color:#2c3e50;font-size:2rem}.docs-header .docs-subtitle{color:#7f8c8d;font-size:1.1rem;margin:0}.search-bar{margin-bottom:30px;display:flex;justify-content:center}.search-bar .search-input{width:100%;padding:12px 20px 12px 40px;border-radius:25px;border:2px solid #e9ecef;font-size:1rem}.search-bar .search-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.categories-container{max-width:1200px;margin:0 auto}.category-section{margin-bottom:25px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.category-section .category-header{padding:20px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);cursor:pointer;display:flex;align-items:center;gap:15px;transition:all .3s ease}.category-section .category-header:hover{background:linear-gradient(135deg,#e8eaf6,#b39ddb)}.category-section .category-header .pi{color:#667eea;font-size:1rem;transition:transform .3s ease}.category-section .category-header .category-icon{font-size:1.5rem}.category-section .category-header .category-title{margin:0;color:#2c3e50;font-size:1.3rem;flex:1}.category-section .category-header .category-count{color:#7f8c8d;font-size:.9rem;background:#677eea1a;padding:4px 12px;border-radius:15px}.category-section .category-content{max-height:0;overflow:hidden;transition:max-height .4s ease-out}.category-section .category-content.expanded{max-height:2000px;transition:max-height .6s ease-in}.docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:25px}.doc-card{border:1px solid #e9ecef;border-radius:12px;padding:20px;cursor:pointer;transition:all .3s ease;background:#fff;position:relative;overflow:hidden}.doc-card:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.doc-card:hover{border-color:#667eea;box-shadow:0 8px 25px #667eea26;transform:translateY(-4px)}.doc-card:hover:before{transform:scaleX(1)}.doc-card .doc-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.doc-card .doc-card-header .doc-icon{font-size:2rem}.doc-card .doc-card-header .doc-badge{padding:4px 8px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}.doc-card .doc-card-header .doc-badge.doc-badge-high{background:#e8f5e8;color:#2e7d2e}.doc-card .doc-card-header .doc-badge.doc-badge-medium{background:#fff3cd;color:#856404}.doc-card .doc-card-header .doc-badge.doc-badge-low{background:#f8f9fa;color:#6c757d}.doc-card .doc-card-content .doc-name{margin:0 0 10px;color:#2c3e50;font-size:1.1rem;font-weight:600;line-height:1.3}.doc-card .doc-card-content .doc-description{color:#6c757d;font-size:.9rem;line-height:1.4;margin:0 0 10px}.doc-card .doc-card-content .doc-filename{color:#adb5bd;font-size:.8rem;font-family:Courier New,monospace}.docs-stats{display:flex;justify-content:center;gap:40px;margin-top:40px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}.docs-stats .stat-item{text-align:center;color:#6c757d}.docs-stats .stat-item strong{color:#667eea;font-size:1.2rem}.markdown-container{flex:1;overflow-y:auto;padding:20px;background:#fff}.markdown-container .doc-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:10px 0;border-bottom:1px solid #e9ecef;color:#6c757d;font-size:.9rem}.markdown-container .doc-breadcrumb .breadcrumb-current{color:#2c3e50;font-weight:600}.markdown-container markdown{display:block;line-height:1.6}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;color:#6c757d;gap:20px}.loading-container span{font-size:1.1rem}.documentation-tabs{flex:1;display:flex;flex-direction:column}.documentation-tabs ::ng-deep .p-tabview-panels{flex:1;display:flex}.documentation-tabs ::ng-deep .p-tabview-panels .p-tabview-panel{flex:1;display:flex;flex-direction:column}.documentation-tabs ::ng-deep .p-tabview-nav{background:#f8f9fa;border-bottom:2px solid #e9ecef}.documentation-tabs ::ng-deep .p-tabview-nav .p-tabview-nav-link{background:transparent;border:none;color:#6c757d;font-weight:500}.documentation-tabs ::ng-deep .p-tabview-nav .p-tabview-nav-link:not(.p-disabled):focus{box-shadow:0 0 0 2px #667eea33}.documentation-tabs ::ng-deep .p-tabview-nav .p-highlight .p-tabview-nav-link{background:#fff;color:#667eea;border-bottom:2px solid #667eea}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2$1.Router }] });
 
-registerLocaleData(localeFr);
-class CilogLibModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CilogLibModule, declarations: [CilogLibComponent,
-            CilogMessageComponent,
-            CilogTableComponent,
-            CilogEditorComponent,
-            CilogInputNumberComponent,
-            DocumentationContextuelleComponent,
-            ValuePipe], imports: [CommonModule,
-            PrimengModule,
-            BrowserModule,
-            BrowserAnimationsModule,
-            FormsModule,
-            ReactiveFormsModule,
-            HttpClientModule, i8$1.MarkdownModule, ProgressSpinnerModule], exports: [CilogMessageComponent,
-            CilogTableComponent,
-            CilogEditorComponent,
-            CilogInputNumberComponent,
-            DocumentationContextuelleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogLibModule, providers: [
-            CilogMessageService,
-            CilogTableService,
-            ConfirmationService,
-            { provide: LOCALE_ID, useValue: 'fr-FR' },
-        ], imports: [CommonModule,
-            PrimengModule,
-            BrowserModule,
-            BrowserAnimationsModule,
-            FormsModule,
-            ReactiveFormsModule,
-            HttpClientModule,
-            MarkdownModule.forRoot({ loader: HttpClient }),
-            ProgressSpinnerModule] }); }
+class CilogLibService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogLibService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogLibModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogLibService, decorators: [{
+            type: Injectable,
             args: [{
-                    imports: [
-                        CommonModule,
-                        PrimengModule,
-                        BrowserModule,
-                        BrowserAnimationsModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        HttpClientModule,
-                        MarkdownModule.forRoot({ loader: HttpClient }),
-                        ProgressSpinnerModule
-                    ],
-                    declarations: [
-                        CilogLibComponent,
-                        CilogMessageComponent,
-                        CilogTableComponent,
-                        CilogEditorComponent,
-                        CilogInputNumberComponent,
-                        DocumentationContextuelleComponent,
-                        ValuePipe
-                    ],
-                    exports: [
-                        CilogMessageComponent,
-                        CilogTableComponent,
-                        CilogEditorComponent,
-                        CilogInputNumberComponent,
-                        DocumentationContextuelleComponent,
-                    ],
-                    providers: [
-                        CilogMessageService,
-                        CilogTableService,
-                        ConfirmationService,
-                        { provide: LOCALE_ID, useValue: 'fr-FR' },
-                    ]
+                    providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class CilogLibService {
+class CilogTableService {
     constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogLibService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogTableService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CilogLibService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CilogTableService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1666,11 +1570,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 /*
  * Public API Surface of cilog-lib
  */
-// Modules
+// Components
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CilogEditorComponent, CilogInputNumberComponent, CilogLibComponent, CilogLibModule, CilogLibService, CilogMessageComponent, CilogMessageService, CilogTableComponent, CilogTableService, ColType, DocumentationContextuelleComponent, ExportService, ModeCalendar, ModeSelection, Position, Severity, ThemeGrille };
+export { CilogEditorComponent, CilogInputNumberComponent, CilogLibComponent, CilogLibService, CilogMessageComponent, CilogMessageService, CilogTableComponent, CilogTableService, ColType, DocumentationContextuelleComponent, ExportService, ModeCalendar, ModeSelection, Position, Severity, ThemeGrille };
 //# sourceMappingURL=cilog-lib.mjs.map