cilog-lib 0.2.11 → 0.3.3

package/README.md

@@ -1,147 +1,147 @@
-# Cilog Table
-
-## Options de la grille :
-```typescript
-export interface IOptionsGrille {
-	editable?: boolean;
-	filterable?: boolean;
-	sortable?: boolean;
-	selectable?: boolean;
-	rowsDeletable?: boolean;
-	centerHeaders?: boolean;
-}
-```
-
-|Option|Description|
-|--|--|
-|editable|Permet de rendre la grille éditable|
-|filterable|Affiche des filtres spécifiques pour chaque colonne|
-|sortable|Permet un tri spécifique pour chaque colonne|
-|selectable|Rend les lignes sélectionnables (**Attention** : Ne fonctionne pas si l'option "editable" est activée)|
-|rowsDeletable|Ajoute un bouton de suppression pour chaque ligne|
-|centerHeaders|Centre les headers de la grille|
-
-## Propriétés des lignes :
-```typescript
-export interface IRow {
-    id: any;
-    obj?: any;
-    deletable: boolean;
-    readonly?: boolean;
-    [key: string]: any;
-}
-```
-
-|Propriété|Description|
-|--|--|
-|id|Identifiant de la ligne|
-|obj|Objet correspondant à la ligne|
-|deletable|Autorise la suppression pour la ligne|
-|readonly|Empêche l'édition de la ligne|
-|[key: string]|Permet d'ajouter une propriété correspondante à l'id d'une colonne|
-
-## Propriétés des colonnes:
-```typescript
-export interface IColumn {
-    id: any;
-    type: ColType;
-    libelle: string;
-    champBase?: string;
-    width?: string;
-    options?: IOptions;
-}
-```
-
-|Propriété|Description|
-|--|--|
-|id|Identifiant de la ligne|
-|type|Type de la colonne|
-|libelle|Libellé de la colonne|
-|champBase|Correspond au nom du champ de BDD en lien avec la colonne|
-|options|Permet d'ajouter des options en fonction du type de la colonne|
-
-## Propriétés des cellules:
-```typescript
-export interface ICell {
-    id: any;
-    obj?: any;
-    value: any;
-    tooltip?: string;
-    readonly?: boolean;
-    options?: IOptions;
-}
-```
-
-|Propriété|Description|
-|--|--|
-|id|Identifiant de la ligne|
-|obj|Objet correspondant à la ligne|
-|value|Valeur de la cellule (**Attention** : le type de la value doit correspondre au type de la colonne)|
-|tooltip|Tooltip de la cellule|
-|options|Permet d'ajouter des options sur une cellule spécifique|
-
-## Exemple de code :
-
-Côté HTML :
-```html
-<cilog-table [columns]="columnsTable"
-             [values]="valuesTable"
-             [options]="optionsTable"
-             (onEdit)="onEditTable($event)"
-             (onDelete)="onDeleteTable($event)"
-             (onSelect)="onSelectRow($event)">
-</cilog-table>
-```
-Côté TS :
-```typescript
-// Déclaration des variables
-columnsTable: IColumn[];
-valuesTable: IRow[];
-optionsTable: IOptions;
-
-// Configuration des options
-this.optionsTable = {
-    editable: true,
-    filterable: true,
-    sortable: true,
-    rowsDeletable: true,
-    centerHeaders: true,
-    selectable: true,
-    deletable: true
-}
-
- // Création des colonnes
- this.columnsTable = [];
- let column1: IColumn = { id: 'column1', type: ColType.Date, libelle: 'Date' };
- let column2: IColumn = { id: 'column2', type: ColType.Text, libelle: 'Text' };
- let column3: IColumn = { id: 'column3', type: ColType.State, libelle: 'State', options: { options: optionsState, optionLabel: 'label' } as IOptionsState };
- let column4: IColumn = { id: 'column4', type: ColType.File, libelle: 'File' };
- let column5: IColumn = { id: 'column5', type: ColType.Button, libelle: 'Button', options: { severity: Severity.Warning, label: 'Bouton Test 123', icon: 'pi pi-check' } as IOptionsButton };
- this.columnsTable.push(column1, column2, column3, column4, column5);
-
- // Création des lignes
- this.valuesTable = [];
- let cell1: ICell = { id: 'cell1', value: new Date(2020, 1, 2) };
- let cell2: ICell = { id: 'cell2', value: 'test1' };
- let cell3: ICell = { id: 'cell3', value: optionsState[0] };
- let cell4: ICell = { id: 'cell4', value: null };
- let cell5: ICell = { id: 'cell5', value: () => this.clickButton('test1') };
- let row: IRow = { id: 'row1', column1: cell1, column2: cell2, column3: cell3, column4: cell4, column5: cell5, deletable: true };
- this.valuesTable.push(row);
- 
-// Méthode édition
-onEditTable(event: IEdition) {
-    console.log(event);
-}
-
-// Méthode Suppression
-onDeleteTable(event: ISuppression) {
-    console.log(event);
-}
-
-// Méthode Selection
-onSelectRow(event: ISelection) {
-    console.log(event);
-}
-```
-
+# Cilog Table
+
+## Options de la grille :
+```typescript
+export interface IOptionsGrille {
+	editable?: boolean;
+	filterable?: boolean;
+	sortable?: boolean;
+	selectable?: boolean;
+	rowsDeletable?: boolean;
+	centerHeaders?: boolean;
+}
+```
+
+|Option|Description|
+|--|--|
+|editable|Permet de rendre la grille éditable|
+|filterable|Affiche des filtres spécifiques pour chaque colonne|
+|sortable|Permet un tri spécifique pour chaque colonne|
+|selectable|Rend les lignes sélectionnables (**Attention** : Ne fonctionne pas si l'option "editable" est activée)|
+|rowsDeletable|Ajoute un bouton de suppression pour chaque ligne|
+|centerHeaders|Centre les headers de la grille|
+
+## Propriétés des lignes :
+```typescript
+export interface IRow {
+    id: any;
+    obj?: any;
+    deletable: boolean;
+    readonly?: boolean;
+    [key: string]: any;
+}
+```
+
+|Propriété|Description|
+|--|--|
+|id|Identifiant de la ligne|
+|obj|Objet correspondant à la ligne|
+|deletable|Autorise la suppression pour la ligne|
+|readonly|Empêche l'édition de la ligne|
+|[key: string]|Permet d'ajouter une propriété correspondante à l'id d'une colonne|
+
+## Propriétés des colonnes:
+```typescript
+export interface IColumn {
+    id: any;
+    type: ColType;
+    libelle: string;
+    champBase?: string;
+    width?: string;
+    options?: IOptions;
+}
+```
+
+|Propriété|Description|
+|--|--|
+|id|Identifiant de la ligne|
+|type|Type de la colonne|
+|libelle|Libellé de la colonne|
+|champBase|Correspond au nom du champ de BDD en lien avec la colonne|
+|options|Permet d'ajouter des options en fonction du type de la colonne|
+
+## Propriétés des cellules:
+```typescript
+export interface ICell {
+    id: any;
+    obj?: any;
+    value: any;
+    tooltip?: string;
+    readonly?: boolean;
+    options?: IOptions;
+}
+```
+
+|Propriété|Description|
+|--|--|
+|id|Identifiant de la ligne|
+|obj|Objet correspondant à la ligne|
+|value|Valeur de la cellule (**Attention** : le type de la value doit correspondre au type de la colonne)|
+|tooltip|Tooltip de la cellule|
+|options|Permet d'ajouter des options sur une cellule spécifique|
+
+## Exemple de code :
+
+Côté HTML :
+```html
+<cilog-table [columns]="columnsTable"
+             [values]="valuesTable"
+             [options]="optionsTable"
+             (onEdit)="onEditTable($event)"
+             (onDelete)="onDeleteTable($event)"
+             (onSelect)="onSelectRow($event)">
+</cilog-table>
+```
+Côté TS :
+```typescript
+// Déclaration des variables
+columnsTable: IColumn[];
+valuesTable: IRow[];
+optionsTable: IOptions;
+
+// Configuration des options
+this.optionsTable = {
+    editable: true,
+    filterable: true,
+    sortable: true,
+    rowsDeletable: true,
+    centerHeaders: true,
+    selectable: true,
+    deletable: true
+}
+
+ // Création des colonnes
+ this.columnsTable = [];
+ let column1: IColumn = { id: 'column1', type: ColType.Date, libelle: 'Date' };
+ let column2: IColumn = { id: 'column2', type: ColType.Text, libelle: 'Text' };
+ let column3: IColumn = { id: 'column3', type: ColType.State, libelle: 'State', options: { options: optionsState, optionLabel: 'label' } as IOptionsState };
+ let column4: IColumn = { id: 'column4', type: ColType.File, libelle: 'File' };
+ let column5: IColumn = { id: 'column5', type: ColType.Button, libelle: 'Button', options: { severity: Severity.Warning, label: 'Bouton Test 123', icon: 'pi pi-check' } as IOptionsButton };
+ this.columnsTable.push(column1, column2, column3, column4, column5);
+
+ // Création des lignes
+ this.valuesTable = [];
+ let cell1: ICell = { id: 'cell1', value: new Date(2020, 1, 2) };
+ let cell2: ICell = { id: 'cell2', value: 'test1' };
+ let cell3: ICell = { id: 'cell3', value: optionsState[0] };
+ let cell4: ICell = { id: 'cell4', value: null };
+ let cell5: ICell = { id: 'cell5', value: () => this.clickButton('test1') };
+ let row: IRow = { id: 'row1', column1: cell1, column2: cell2, column3: cell3, column4: cell4, column5: cell5, deletable: true };
+ this.valuesTable.push(row);
+ 
+// Méthode édition
+onEditTable(event: IEdition) {
+    console.log(event);
+}
+
+// Méthode Suppression
+onDeleteTable(event: ISuppression) {
+    console.log(event);
+}
+
+// Méthode Selection
+onSelectRow(event: ISelection) {
+    console.log(event);
+}
+```
+

package/bundles/cilog-lib.umd.js

@@ -571,7 +571,6 @@
         // Sort
         CilogTableComponent.prototype.customSort = function (event) {
             var _this = this;
-            console.log(event);
             var col = this.columns.find(function (col) { return col.id == event.field; });
             this.onSort.emit({ column: col, order: event.order });
             var typeCol = col.type;
@@ -606,10 +605,6 @@
         CilogTableComponent.prototype.clickById = function (id) {
             document.getElementById(id).click();
         };
-        CilogTableComponent.prototype.onEditText = function (event) {
-            var col = this.columns.find(function (col) { return col.id == event.field; });
-            this.onEditCell(event.data, col, event.data[event.field].value);
-        };
         CilogTableComponent.prototype.onEditCell = function (row, column, value) {
             this.onEdit.emit({ row: row, column: column, value: value });
         };
@@ -625,19 +620,14 @@
                 key: 'confirm',
                 message: 'Êtes-vous sûr de vouloir supprimer cette ligne ?',
                 accept: function () {
-                    console.log(_this.values.indexOf(row));
                     _this.values.splice(_this.values.indexOf(row), 1);
                     _this.values = __spreadArray([], __read(_this.values));
                     _this.onDelete.emit({ row: row });
                 }
             });
         };
-        CilogTableComponent.prototype.onFocusNumber = function (rowData, col) {
-            this.onEditInitCell({ field: col.id, data: rowData });
-        };
-        CilogTableComponent.prototype.onEditInitCell = function (event) {
-            var col = this.columns.find(function (col) { return col.id == event.field; });
-            this.onEditInit.emit({ row: event.data, column: col, value: event.data[event.field].value });
+        CilogTableComponent.prototype.onEditInitCell = function (row, column, value) {
+            this.onEditInit.emit({ row: row, column: column, value: value });
         };
         CilogTableComponent.prototype.isModeEdition = function () {
             return this.options.editable;
@@ -735,8 +725,8 @@
     CilogTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'cilog-table',
-                    template: "<p-table #table\r\n         [columns]=\"columns\"\r\n         [value]=\"values\"\r\n         (onEditComplete)=\"onEditText($event)\"\r\n         (onEditInit)=\"onEditInitCell($event)\"\r\n         dataKey=\"id\"\r\n         [selectionMode]=\"options.selectable && !isModeEdition() ? 'single' : null\"\r\n         [(selection)]=\"selectedRow\"\r\n         (onRowSelect)=\"onSelectRow($event)\"\r\n         (onRowUnselect)=\"onUnselectRow($event)\"\r\n         (sortFunction)=\"customSort($event)\"\r\n         [customSort]=\"options.grouping == null ? true : false\"\r\n         [scrollable]=\"true\"\r\n         [loading]=\"loading\"\r\n         [scrollHeight]=\"options.scrollHeight != null ? options.scrollHeight : null\"\r\n         [rowGroupMode]=\"options.grouping != null ? 'subheader' : null\"\r\n         [groupRowsBy]=\"options.grouping != null ? options.grouping.obj + '.' + options.grouping.id : null\"\r\n         [virtualScroll]=\"options.virtualScroll != null && options.scrollHeight != null ? true : false\"\r\n         [virtualRowHeight]=\"35\">\r\n\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\"\r\n                [ngClass]=\"{ 'centerText' : options.centerHeaders }\"\r\n                [pSortableColumn]=\"col.id\"\r\n                [pSortableColumnDisabled]=\"options.grouping != null || !options.sortable\"\r\n                id=\"{{ col.id }}\">\r\n                <span>{{ col.libelle }}</span>\r\n                <p-sortIcon *ngIf=\"options.sortable && options.grouping == null\" [field]=\"col.id\"></p-sortIcon>\r\n            </th>\r\n            <th class=\"cellDelete\" *ngIf=\"options.rowsDeletable\"></th>\r\n        </tr>\r\n        <!-- FILTRES -->\r\n        <tr *ngIf=\"options.filterable\">\r\n            <ng-container *ngFor=\"let col of columns\">\r\n                <!-- Text -->\r\n                <th *ngIf=\"checkType('Text', col) || checkType('File', col)\">\r\n                    <input pInputText\r\n                           type=\"text\"\r\n                           (input)=\"onFilterCol($event, col)\">\r\n                </th>\r\n\r\n                <!-- Date -->\r\n                <th *ngIf=\"checkType('Date', col)\">\r\n                    <p-calendar dateFormat=\"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                <!-- Number -->\r\n                <th *ngIf=\"checkType('Number', col)\">\r\n                    <p-inputNumber mode=\"decimal\"\r\n                                   locale=\"fr-FR\"\r\n                                   [minFractionDigits]=\"2\"\r\n                                   [showButtons]=\"true\"\r\n                                   (onInput)=\"onFilterCol($event, col)\"\r\n                                   [(ngModel)]=\"col.options.defaultFilters\">\r\n                    </p-inputNumber>\r\n                </th>\r\n\r\n                <!-- Liste -->\r\n                <th *ngIf=\"checkType('Dropdown', col) || checkType('MultiSelect', col) || checkType('SelectButton', col) || checkType('State', col)\">\r\n                    <p-multiSelect [options]=\"col.options?.options\"\r\n                                   [filter]=\"true\"\r\n                                   [optionLabel]=\"col.options?.optionLabel\"\r\n                                   appendTo=\"body\"\r\n                                   emptyFilterMessage=\"Aucun r\u00E9sultat\"\r\n                                   itemSize=\"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=\"checkType('Button', col) || checkType('Image', col)\">\r\n\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=\"row_grouping\">\r\n            <td [attr.colspan]=\"columns.length + 1\">\r\n                <span class=\"text_bold\">{{ rowData[options.grouping.obj][options.grouping.libelle] }}</span>\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 || isModeEdition()\">\r\n            <ng-container *ngFor=\"let col of columns\">\r\n\r\n                <!-- Text -->\r\n                <td *ngIf=\"checkType('Text', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : 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].value\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <p-cellEditor *ngIf=\"rowData[col.id] != null\">\r\n                        <ng-template pTemplate=\"input\">\r\n                            <input pInputText type=\"text\" [(ngModel)]=\"rowData[col.id].value\">\r\n                        </ng-template>\r\n                        <ng-template pTemplate=\"output\">\r\n                            {{ rowData[col.id].value }}\r\n                        </ng-template>\r\n                    </p-cellEditor>\r\n                </td>\r\n                <td *ngIf=\"checkType('Text', col) && (!isModeEdition() || rowData.readonly || rowData[col.id]?.readonly)\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"{ 'paddingCell': rowData[col.id] != null }\"\r\n                    [pTooltip]=\"rowData[col.id].value\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value }}</span>\r\n                </td>\r\n\r\n                <!-- Dropdown -->\r\n                <td *ngIf=\"checkType('Dropdown', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <p-dropdown *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                                [autoDisplayFirst]=\"false\"\r\n                                appendTo=\"body\"\r\n                                emptyFilterMessage=\"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                                itemSize=\"30\"\r\n                                (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\">\r\n                    </p-dropdown>\r\n                </td>\r\n                <td *ngIf=\"checkType('Dropdown', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : '' }}</span>\r\n                </td>\r\n\r\n                <!-- Number -->\r\n                <td *ngIf=\"checkType('Number', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value | number\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <p-inputNumber *ngIf=\"rowData[col.id] && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                                   mode=\"decimal\"\r\n                                   locale=\"fr-FR\"\r\n                                   [(ngModel)]=\"rowData[col.id].value\"\r\n                                   [showButtons]=\"getOption(col, rowData, 'showButtons')\"\r\n                                   [suffix]=\"getOption(col, rowData, 'suffix')\"\r\n                                   [prefix]=\"getOption(col, rowData, 'prefix') != null ? getOption(col, rowData, 'prefix') + ' ' : null\"\r\n                                   [minFractionDigits]=\"2\"\r\n                                   [maxFractionDigits]=\"getOption(col, rowData, 'maxDecimales') != null ? getOption(col, rowData, 'maxDecimales') : 2 \"\r\n                                   (ngModelChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                   (onFocus)=\"onFocusNumber(rowData, col)\">\r\n                    </p-inputNumber>\r\n                </td>\r\n                <td *ngIf=\"checkType('Number', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value | number\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value | number }}</span>\r\n                </td>\r\n\r\n                <!-- Date -->\r\n                <td *ngIf=\"checkType('Date', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value | date: 'dd/MM/yyyy'\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <p-calendar [(ngModel)]=\"rowData[col.id].value\"\r\n                                dateFormat=\"dd/mm/yy\"\r\n                                firstDayOfWeek=\"1\"\r\n                                (onSelect)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                [readonlyInput]=\"true\"\r\n                                appendTo=\"body\">\r\n                    </p-calendar>\r\n                </td>\r\n                <td *ngIf=\"checkType('Date', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value | date: 'dd/MM/yyyy'\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value | date: 'dd/MM/yyyy' }}</span>\r\n                </td>\r\n\r\n                <!-- MultiSelect -->\r\n                <td *ngIf=\"checkType('MultiSelect', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\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                                   emptyFilterMessage=\"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                                   itemSize=\"30\"\r\n                                   selectedItemsLabel=\"{0} utilisateurs selectionn\u00E9s\"\r\n                                   (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                   ngDefaultControl>\r\n                    </p-multiSelect>\r\n                </td>\r\n                <td *ngIf=\"checkType('MultiSelect', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel')) }}</span>\r\n                </td>\r\n\r\n                <!-- Image -->\r\n                <td *ngIf=\"checkType('Image', col)\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    class=\"centerText\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\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=\"checkType('Button', col)\"\r\n                    class=\"paddingCell centerText\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <button pButton\r\n                            [disabled]=\"rowData.readonly || rowData[col.id]?.readonly\"\r\n                            [ngClass]=\"'p-button-' + getOption(col, rowData, 'severity')\"\r\n                            [label]=\"getOption(col, rowData, 'label')\"\r\n                            [icon]=\"getOption(col, rowData, 'icon')\"\r\n                            (click)=\"rowData[col.id].value()\"\r\n                            [pTooltip]=\"getOption(col, rowData, 'label')\"\r\n                            [tooltipDisabled]=\"!col.tooltip\">\r\n                    </button>\r\n                </td>\r\n\r\n                <!-- SelectButton -->\r\n                <td *ngIf=\"checkType('SelectButton', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\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                    </p-selectButton>\r\n                </td>\r\n                <td *ngIf=\"checkType('SelectButton', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ getSelectLibelleByValue(rowData, col) }}</span>\r\n                </td>\r\n\r\n                <!-- File -->\r\n                <td *ngIf=\"checkType('File', col) && isModeEdition() && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value ? rowData[col.id].value : ''\"\r\n                    [tooltipDisabled]=\"!col.tooltip\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\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}}\" pInputText type=\"text\" value=\"{{ rowData[col.id].value != null ? rowData[col.id].value : '' }}\" readonly>\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=\"checkType('File', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value ? rowData[col.id].value : ''\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value ? rowData[col.id].value : '' }}</span>\r\n                </td>\r\n\r\n                <!-- State -->\r\n                <td *ngIf=\"checkType('State', col)\"\r\n                    [ngStyle]=\"{ 'width' : col.width ? col.width : null }\"\r\n                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    class=\"centerText\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <p-tag [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                    </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",
-                    styles: ["::ng-deep .p-tooltip .p-tooltip-text{overflow-wrap:break-word!important}:host ::ng-deep .p-datatable-table{width:100%!important}:host ::ng-deep .p-datatable-tbody>tr>td>span,:host ::ng-deep .p-datatable-thead>tr>th>span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}:host ::ng-deep .row_grouping{background:#faeada!important}:host ::ng-deep .text_bold{font-weight:700!important}:host ::ng-deep .cellDelete{flex:0 0 50px!important}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight,:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:#2196f3!important}:host ::ng-deep .p-tooltip .p-tooltip-text{background-color:red!important}:host ::ng-deep .p-datatable-thead>tr>th{background:#dedddd!important;border:1px solid rgba(0,0,0,.12)!important;color:#495057!important;font-weight:600!important;overflow:hidden!important;padding-bottom:8px!important;padding-top:8px!important;text-overflow:ellipsis!important;white-space:nowrap!important}:host ::ng-deep .p-datatable-tbody>tr{height:35px!important}:host ::ng-deep .p-datatable-tbody>tr>td{border:1px solid rgba(0,0,0,.12)!important;min-width:0!important}:host ::ng-deep .centerText{justify-content:center!important}:host ::ng-deep .p-button{padding-bottom:1px;padding-top:1px}:host ::ng-deep .p-button-label{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}:host ::ng-deep .p-calendar,:host ::ng-deep p-calendar,:host ::ng-deep p-dropdown,:host ::ng-deep p-inputNumber,:host ::ng-deep p-multiselect,:host ::ng-deep p-selectButton{width:100%!important}:host ::ng-deep .p-inputtext{height:25px!important;padding:4px 5px!important;width:100%!important}:host ::ng-deep .p-inputnumber{height:25px;padding:0!important;width:100%}:host ::ng-deep .p-inputnumber-input{padding:0 5px!important;width:100%}:host ::ng-deep .p-inputgroup .p-inputtext{height:25px;padding:4px 5px!important;width:100%}:host ::ng-deep .p-dropdown{vertical-align:middle;width:100%}:host ::ng-deep .p-dropdown-label{padding-bottom:2px;padding-top:2px}:host ::ng-deep .p-multiselect{vertical-align:middle;width:100%}:host ::ng-deep .p-multiselect-label{padding-bottom:2px;padding-top:2px}:host ::ng-deep .p-editable-column,:host ::ng-deep .paddingCell{padding:3px 10px!important}:host ::ng-deep .p-selectbutton>.p-button{height:25px;width:50%}:host ::ng-deep .p-inputgroup>.p-button{height:25px}:host ::ng-deep .buttonDelete{height:20px;width:100%}:host ::ng-deep .p-column-title{display:none}:host ::ng-deep .p-datatable-loading-icon{color:#fff}@media screen and (max-width:650px){:host ::ng-deep .p-datatable-tfoot>tr>td,:host ::ng-deep .p-datatable-thead>tr>th{display:none!important;width:inherit!important}:host ::ng-deep .p-datatable-tbody>tr{border:2px solid rgba(0,0,0,.12);flex-direction:column;height:inherit!important;padding-top:12px!important}:host ::ng-deep .p-datatable-tbody>tr>td{border:0!important;flex-basis:auto!important;width:100%!important}:host ::ng-deep td .p-column-title{display:inline-block!important;font-weight:700;margin:-.4rem 1rem -.4rem -.4rem;min-width:35%;padding:.4rem}:host ::ng-deep .centerText{justify-content:inherit!important}}"]
+                    template: "<p-table #table\r\n         [columns]=\"columns\"\r\n         [value]=\"values\"\r\n         dataKey=\"id\"\r\n         [selectionMode]=\"options.selectable && !isModeEdition() ? 'single' : null\"\r\n         [(selection)]=\"selectedRow\"\r\n         (onRowSelect)=\"onSelectRow($event)\"\r\n         (onRowUnselect)=\"onUnselectRow($event)\"\r\n         (sortFunction)=\"customSort($event)\"\r\n         [customSort]=\"options.grouping == null ? true : false\"\r\n         [scrollable]=\"true\"\r\n         [loading]=\"loading\"\r\n         [scrollHeight]=\"options.scrollHeight != null ? options.scrollHeight : null\"\r\n         [rowGroupMode]=\"options.grouping != null ? 'subheader' : null\"\r\n         [groupRowsBy]=\"options.grouping != null ? options.grouping.obj + '.' + options.grouping.id : null\"\r\n         [virtualScroll]=\"options.virtualScroll != null && options.scrollHeight != null ? true : false\"\r\n         [virtualRowHeight]=\"35\"\r\n         [paginator]=\"options.paginator == null ? false : true\"\r\n         [rows]=\"options.paginatorRows\">\r\n\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\"\r\n                [ngClass]=\"{ 'centerText' : options.centerHeaders }\"\r\n                [pSortableColumn]=\"col.id\"\r\n                [pSortableColumnDisabled]=\"options.virtualScroll != null || options.grouping != null || !options.sortable\"\r\n                id=\"{{ col.id }}\">\r\n                <span>{{ col.libelle }}</span>\r\n                <p-sortIcon *ngIf=\"options.virtualScroll == null && options.sortable && options.grouping == null\" [field]=\"col.id\"></p-sortIcon>\r\n            </th>\r\n            <th class=\"cellDelete\" *ngIf=\"options.rowsDeletable\"></th>\r\n        </tr>\r\n        <!-- FILTRES -->\r\n        <tr *ngIf=\"options.filterable\">\r\n            <ng-container *ngFor=\"let col of columns\">\r\n                <!-- Text -->\r\n                <th *ngIf=\"checkType('Text', col) || checkType('File', col)\">\r\n                    <input pInputText\r\n                           type=\"text\"\r\n                           (input)=\"onFilterCol($event, col)\">\r\n                </th>\r\n\r\n                <!-- Date -->\r\n                <th *ngIf=\"checkType('Date', col)\">\r\n                    <p-calendar dateFormat=\"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                <!-- Number -->\r\n                <th *ngIf=\"checkType('Number', col)\">\r\n                    <p-inputNumber mode=\"decimal\"\r\n                                   locale=\"fr-FR\"\r\n                                   [minFractionDigits]=\"2\"\r\n                                   [showButtons]=\"true\"\r\n                                   (onInput)=\"onFilterCol($event, col)\"\r\n                                   [(ngModel)]=\"col.options.defaultFilters\">\r\n                    </p-inputNumber>\r\n                </th>\r\n\r\n                <!-- Liste -->\r\n                <th *ngIf=\"checkType('Dropdown', col) || checkType('MultiSelect', col) || checkType('SelectButton', col) || checkType('State', col)\">\r\n                    <p-multiSelect [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                                   itemSize=\"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=\"checkType('Button', col) || checkType('Image', col)\">\r\n\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=\"row_grouping\">\r\n            <td [attr.colspan]=\"columns.length + 1\">\r\n                <span class=\"text_bold\">{{ rowData[options.grouping.obj][options.grouping.libelle] }}</span>\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 || isModeEdition()\">\r\n            <ng-container *ngFor=\"let col of columns\">\r\n\r\n                <!-- Text -->\r\n                <td *ngIf=\"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].value\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <input pInputText\r\n                           type=\"text\"\r\n                           [(ngModel)]=\"rowData[col.id].value\"\r\n                           (change)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                           (keyup.enter)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                           (click)=\"onEditInitCell(rowData, col, rowData[col.id].value)\" />\r\n                </td>\r\n                <td *ngIf=\"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                    [ngClass]=\"{ 'paddingCell': rowData[col.id] != null }\"\r\n                    [pTooltip]=\"rowData[col.id].value\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value }}</span>\r\n                </td>\r\n\r\n                <!-- Dropdown -->\r\n                <td *ngIf=\"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                    id=\"{{ rowData[col.id] != null ? rowData[col.id].id : '' }}\"\r\n                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\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                                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                                itemSize=\"30\"\r\n                                (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\">\r\n                    </p-dropdown>\r\n                </td>\r\n                <td *ngIf=\"checkType('Dropdown', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\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]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : ''\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value != null ? rowData[col.id].value[getOption(col, rowData, 'optionLabel')] : '' }}</span>\r\n                </td>\r\n\r\n                <!-- Number -->\r\n                <td *ngIf=\"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                    [ngClass]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value | number\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <p-inputNumber *ngIf=\"rowData[col.id] && !rowData.readonly && !rowData[col.id]?.readonly\"\r\n                                   mode=\"decimal\"\r\n                                   locale=\"fr-FR\"\r\n                                   [(ngModel)]=\"rowData[col.id].value\"\r\n                                   [showButtons]=\"getOption(col, rowData, 'showButtons')\"\r\n                                   [suffix]=\"getOption(col, rowData, 'suffix')\"\r\n                                   [prefix]=\"getOption(col, rowData, 'prefix') != null ? getOption(col, rowData, 'prefix') + ' ' : null\"\r\n                                   [minFractionDigits]=\"2\"\r\n                                   [maxFractionDigits]=\"getOption(col, rowData, 'maxDecimales') != null ? getOption(col, rowData, 'maxDecimales') : 2 \"\r\n                                   (ngModelChange)=\"onEditCell(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=\"checkType('Number', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\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]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value | number\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value | number }}</span>\r\n                </td>\r\n\r\n                <!-- Date -->\r\n                <td *ngIf=\"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]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value | date: 'dd/MM/yyyy'\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <p-calendar [(ngModel)]=\"rowData[col.id].value\"\r\n                                dateFormat=\"dd/mm/yy\"\r\n                                firstDayOfWeek=\"1\"\r\n                                (onSelect)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                [readonlyInput]=\"true\"\r\n                                appendTo=\"body\">\r\n                    </p-calendar>\r\n                </td>\r\n                <td *ngIf=\"checkType('Date', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\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]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value | date: 'dd/MM/yyyy'\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value | date: 'dd/MM/yyyy' }}</span>\r\n                </td>\r\n\r\n                <!-- MultiSelect -->\r\n                <td *ngIf=\"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]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\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                                   itemSize=\"30\"\r\n                                   selectedItemsLabel=\"{0} utilisateurs selectionn\u00E9s\"\r\n                                   (onChange)=\"onEditCell(rowData, col, rowData[col.id].value)\"\r\n                                   [showToggleAll]=\"false\"\r\n                                   [showHeader]=\"getOption(col, rowData, 'filter')\"\r\n                                   ngDefaultControl>\r\n                    </p-multiSelect>\r\n                </td>\r\n                <td *ngIf=\"checkType('MultiSelect', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\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]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel'))\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ getMultiSelectConcat(rowData[col.id].value, getOption(col, rowData, 'optionLabel')) }}</span>\r\n                </td>\r\n\r\n                <!-- Image -->\r\n                <td *ngIf=\"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]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    class=\"centerText\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\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=\"checkType('Button', col)\"\r\n                    class=\"paddingCell centerText\"\r\n                    [ngStyle]=\"{ 'background-color': rowData[col.id].color ? rowData[col.id].color : null }\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <button pButton\r\n                            [disabled]=\"rowData.readonly || rowData[col.id]?.readonly\"\r\n                            [ngClass]=\"'p-button-' + getOption(col, rowData, 'severity')\"\r\n                            [label]=\"getOption(col, rowData, 'label')\"\r\n                            [icon]=\"getOption(col, rowData, 'icon')\"\r\n                            (click)=\"rowData[col.id].value()\"\r\n                            [pTooltip]=\"getOption(col, rowData, 'label')\"\r\n                            [tooltipDisabled]=\"!col.tooltip\">\r\n                    </button>\r\n                </td>\r\n\r\n                <!-- SelectButton -->\r\n                <td *ngIf=\"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]=\"rowData[col.id] != null ? 'paddingCell' : null\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\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                    </p-selectButton>\r\n                </td>\r\n                <td *ngIf=\"checkType('SelectButton', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\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]=\"rowData[col.id] != null ? 'paddingCell' : null\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ getSelectLibelleByValue(rowData, col) }}</span>\r\n                </td>\r\n\r\n                <!-- File -->\r\n                <td *ngIf=\"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]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value ? rowData[col.id].value : ''\"\r\n                    [tooltipDisabled]=\"!col.tooltip\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\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}}\" pInputText type=\"text\" value=\"{{ rowData[col.id].value != null ? rowData[col.id].value : '' }}\" readonly>\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=\"checkType('File', col) && (rowData.readonly || rowData[col.id]?.readonly || !isModeEdition())\"\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]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    [pTooltip]=\"rowData[col.id].value ? rowData[col.id].value : ''\"\r\n                    [tooltipDisabled]=\"!col.tooltip\"\r\n                    tooltipPosition=\"bottom\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <span *ngIf=\"rowData[col.id]\">{{ rowData[col.id].value ? rowData[col.id].value : '' }}</span>\r\n                </td>\r\n\r\n                <!-- State -->\r\n                <td *ngIf=\"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]=\"rowData[col.id] != null ? 'paddingCell' : null\"\r\n                    class=\"centerText\">\r\n                    <span class=\"p-column-title\">{{ col.libelle }} : </span>\r\n                    <p-tag [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                    </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",
+                    styles: ["::ng-deep .p-tooltip .p-tooltip-text{overflow-wrap:break-word!important}:host ::ng-deep .p-datatable-table{width:100%!important}:host ::ng-deep .p-datatable-tbody>tr>td>span,:host ::ng-deep .p-datatable-thead>tr>th>span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}:host ::ng-deep .row_grouping{background:#faeada!important}:host ::ng-deep .text_bold{font-weight:700!important}:host ::ng-deep .cellDelete{flex:0 0 50px!important}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight,:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:#2196f3!important}:host ::ng-deep .p-tooltip .p-tooltip-text{background-color:red!important}:host ::ng-deep .p-datatable-thead>tr>th{background:#dedddd!important;border:1px solid rgba(0,0,0,.12)!important;color:#495057!important;font-weight:600!important;overflow:hidden!important;padding-bottom:8px!important;padding-top:8px!important;text-overflow:ellipsis!important;white-space:nowrap!important}:host ::ng-deep .p-datatable-tbody>tr{height:35px!important}:host ::ng-deep .p-datatable-tbody>tr>td{border:1px solid rgba(0,0,0,.12)!important;min-width:0!important}:host ::ng-deep .centerText{justify-content:center!important}:host ::ng-deep .p-button{padding-bottom:1px;padding-top:1px}:host ::ng-deep .p-button-label{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;width:100%!important}:host ::ng-deep .p-calendar,:host ::ng-deep p-calendar,:host ::ng-deep p-dropdown,:host ::ng-deep p-inputNumber,:host ::ng-deep p-multiselect,:host ::ng-deep p-selectButton{width:100%!important}:host ::ng-deep .p-inputtext{height:25px!important;padding:4px 5px!important;width:100%!important}:host ::ng-deep .p-inputnumber{height:25px;padding:0!important;width:100%}:host ::ng-deep .p-inputnumber-input{padding:0 5px!important;width:100%}:host ::ng-deep .p-inputgroup .p-inputtext{height:25px;padding:4px 5px!important;width:100%}:host ::ng-deep .p-dropdown{vertical-align:middle;width:100%}:host ::ng-deep .p-dropdown-label{padding-bottom:2px;padding-top:2px}:host ::ng-deep .p-multiselect{vertical-align:middle;width:100%}:host ::ng-deep .p-multiselect-label{padding-bottom:2px;padding-top:2px}:host ::ng-deep .p-editable-column,:host ::ng-deep .paddingCell{padding:3px 10px!important}:host ::ng-deep .p-selectbutton>.p-button{height:25px;width:50%}:host ::ng-deep .p-inputgroup>.p-button{height:25px}:host ::ng-deep .buttonDelete{height:20px;width:100%}:host ::ng-deep .p-column-title{display:none}:host ::ng-deep .p-datatable-loading-icon{color:#fff}@media screen and (max-width:650px){:host ::ng-deep .p-datatable-tfoot>tr>td,:host ::ng-deep .p-datatable-thead>tr>th{display:none!important;width:inherit!important}:host ::ng-deep .p-datatable-tbody>tr{border:2px solid rgba(0,0,0,.12);flex-direction:column;height:inherit!important;padding-top:12px!important}:host ::ng-deep .p-datatable-tbody>tr>td{border:0!important;flex-basis:auto!important;width:100%!important}:host ::ng-deep td .p-column-title{display:inline-block!important;font-weight:700;margin:-.4rem 1rem -.4rem -.4rem;min-width:35%;padding:.4rem}:host ::ng-deep .centerText{justify-content:inherit!important}}"]
                 },] }
     ];
     CilogTableComponent.ctorParameters = function () { return [