cilog-lib 0.3.1 → 0.3.2

package/bundles/cilog-lib.umd.js

@@ -726,7 +726,7 @@
         { type: i0.Component, args: [{
                     selector: 'cilog-table',
                     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\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}}"]
+                    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 [

package/bundles/cilog-lib.umd.min.js

@@ -1,2 +1,2 @@
-!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("rxjs"),require("@angular/common"),require("primeng/dialog"),require("primeng/button"),require("primeng/table"),require("primeng/inputtext"),require("primeng/selectbutton"),require("primeng/dropdown"),require("primeng/inputnumber"),require("primeng/confirmdialog"),require("primeng/multiselect"),require("primeng/calendar"),require("primeng/tag"),require("primeng/tooltip"),require("@angular/platform-browser"),require("@angular/platform-browser/animations"),require("primeng/api"),require("@angular/forms"),require("@angular/common/locales/fr")):"function"==typeof define&&define.amd?define("cilog-lib",["exports","@angular/core","rxjs","@angular/common","primeng/dialog","primeng/button","primeng/table","primeng/inputtext","primeng/selectbutton","primeng/dropdown","primeng/inputnumber","primeng/confirmdialog","primeng/multiselect","primeng/calendar","primeng/tag","primeng/tooltip","@angular/platform-browser","@angular/platform-browser/animations","primeng/api","@angular/forms","@angular/common/locales/fr"],o):o((t="undefined"!=typeof globalThis?globalThis:t||self)["cilog-lib"]={},t.ng.core,t.rxjs,t.ng.common,t.dialog,t.button,t.table,t.inputtext,t.selectbutton,t.dropdown,t.inputnumber,t.confirmdialog,t.multiselect,t.calendar,t.tag,t.tooltip,t.ng.platformBrowser,t.ng.platformBrowser.animations,t.api,t.ng.forms,t.ng.common.locales.fr)}(this,(function(t,o,e,n,l,r,a,i,c,p,d,s,u,g,w,m,h,D,y,b,f){"use strict";function v(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var x=v(f),C=function(){function t(){this.message=new e.BehaviorSubject(null),this.display=new e.BehaviorSubject(null)}return t.prototype.showDialog=function(t,o,e,n){void 0===e&&(e=!0),void 0===n&&(n=!1),this.message.next({content:t,severity:o,closable:e,refresh:n}),this.display.next(!0)},t.prototype.closeDialog=function(){this.display.next(!1)},t}();C.decorators=[{type:o.Injectable}],C.ctorParameters=function(){return[]};var S=function(){function t(t){this.messageService=t}return t.prototype.ngOnInit=function(){var t=this;this.display=!1,this.messageService.message.subscribe((function(o){null!=o&&(t.message=o)})),this.messageService.display.subscribe((function(o){null!=o&&(t.display=o)}))},t.prototype.headerBySeverity=function(){if(null!=this.message)switch(this.message.severity){case"warn":return"Attention";case"error":return"Erreur";case"success":return"Succès";case"info":return"Information"}},t.prototype.iconBySeverity=function(){if(null!=this.message)switch(this.message.severity){case"warn":return"pi-exclamation-triangle";case"error":return"pi-exclamation-circle";case"success":return"pi-check";case"info":return"pi-info-circle"}},t.prototype.classBySeverity=function(){if(null!=this.message)switch(this.message.severity){case"warn":return"message_warn";case"error":return"message_error";case"success":return"message_success";case"info":return"message_info"}},t.prototype.refreshPage=function(){window.location.reload(!0)},t}();S.decorators=[{type:o.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    \x3c!-- Header --\x3e\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    \x3c!-- Content --\x3e\r\n    <p class="content">\r\n        {{ message?.content }}\r\n    </p>\r\n\r\n    \x3c!-- Footer --\x3e\r\n    <ng-template pTemplate="footer">\r\n        <p-button *ngIf="message?.closable == true && message?.refresh == false" icon="pi pi-check" (click)="display=false" label="Ok" styleClass="p-button-text"></p-button>\r\n        <p-button *ngIf="message?.refresh == true" icon="pi pi-refresh" (click)="refreshPage()" label="Rafraîchir" styleClass="p-button-text"></p-button>\r\n    </ng-template>\r\n\r\n</p-dialog>\r\n',styles:[":host ::ng-deep .message_success :nth-child(1n){background-color:#b7fdc0}:host ::ng-deep .message_error :nth-child(1n){background-color:#fdb8b7}:host ::ng-deep .message_warn :nth-child(1n){background-color:#fff5ba}:host ::ng-deep .message_info :nth-child(1n){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}:host ::ng-deep .p-button-text{padding-bottom:3px;padding-top:0}:host ::ng-deep .header_text{font-size:1.25rem;font-weight:500;margin-left:10px}:host ::ng-deep .header_icon{font-size:1.5rem}:host ::ng-deep .p-dialog-header{justify-content:inherit}"]}]}],S.ctorParameters=function(){return[{type:C}]};var T=function(){function t(){}return t.prototype.ngOnInit=function(){},t}();T.decorators=[{type:o.Component,args:[{selector:"lib-cilog-lib",template:"\n    <p>\n      cilog-lib works!\n    </p>\n  "}]}],T.ctorParameters=function(){return[]};var I=function(){};I.decorators=[{type:o.NgModule,args:[{declarations:[],exports:[l.DialogModule,r.ButtonModule,a.TableModule,i.InputTextModule,c.SelectButtonModule,p.DropdownModule,d.InputNumberModule,s.ConfirmDialogModule,u.MultiSelectModule,g.CalendarModule,w.TagModule,m.TooltipModule],imports:[n.CommonModule]}]}];Object.create;function M(t,o){var e="function"==typeof Symbol&&t[Symbol.iterator];if(!e)return t;var n,l,r=e.call(t),a=[];try{for(;(void 0===o||o-- >0)&&!(n=r.next()).done;)a.push(n.value)}catch(t){l={error:t}}finally{try{n&&!n.done&&(e=r.return)&&e.call(r)}finally{if(l)throw l.error}}return a}var k,F;Object.create;(k=t.ColType||(t.ColType={})).MultiSelect="MultiSelect",k.Dropdown="Dropdown",k.File="File",k.Text="Text",k.Number="Number",k.SelectButton="SelectButton",k.Button="Button",k.Image="Image",k.Date="Date",k.State="State",(F=t.Severity||(t.Severity={})).Secondary="secondary",F.Success="success",F.Info="info",F.Warning="warning",F.Help="help",F.Danger="danger";var E=function(){function e(t,e,n){this.confirmationService=t,this.filterService=e,this.cdRef=n,this.onEdit=new o.EventEmitter,this.onEditInit=new o.EventEmitter,this.onDelete=new o.EventEmitter,this.onSelect=new o.EventEmitter,this.onUnselect=new o.EventEmitter,this.onFilter=new o.EventEmitter,this.onSort=new o.EventEmitter}return e.prototype.ngOnInit=function(){this.filterService.register("dateRangeFilter",(function(t,o){if(null==o)return!0;var e,n=o[0].getTime();return e=o[1]?o[1].getTime()+864e5:n+864e5,null!=t.value&&(t.value.getTime()>=n&&t.value.getTime()<=e)})),this.filterService.register("textFilter",(function(t,o){return null==o||""==o.trim()||null!=t.value&&t.value.toLowerCase().includes(o.toLowerCase())})),this.filterService.register("numberFilter",(function(t,o){return null==o||null!=t.value&&t.value==o})),this.filterService.register("objetFilter",(function(t,o){return-1!=o.indexOf(t.value)})),this.filterService.register("listeFilter",(function(t,o){var e=!1;return o.forEach((function(o){-1!=t.value.indexOf(o)&&(e=!0)})),e})),this.columns.forEach((function(t){null==t.options&&(t.options={defaultFilters:null})}))},e.prototype.ngAfterViewInit=function(){var t=this;this.columns.forEach((function(o){t.filter(o,o.options.defaultFilters,t.getFilterByCol(o),!0)})),this.cdRef.detectChanges()},e.prototype.customSort=function(o){var e=this,n=this.columns.find((function(t){return t.id==o.field}));this.onSort.emit({column:n,order:o.order});var l=n.type;o.data.sort((function(r,a){var i=r[o.field].value,c=a[o.field].value,p=null;return null==i&&null!=c?p=-1:null!=i&&null==c?p=1:null==i&&null==c?p=0:l==t.ColType.Text||l==t.ColType.File?p=i.localeCompare(c):l==t.ColType.MultiSelect?p=e.getMultiSelectConcat(i,e.getOption(n,r,"optionLabel")).localeCompare(e.getMultiSelectConcat(c,e.getOption(n,a,"optionLabel"))):l==t.ColType.Dropdown||l==t.ColType.SelectButton||l==t.ColType.State?p=i[e.getOption(n,r,"optionLabel")].localeCompare(c[e.getOption(n,a,"optionLabel")]):l!=t.ColType.Number&&l!=t.ColType.Date||(p=i<c?-1:i>c?1:0),o.order*p}))},e.prototype.checkType=function(t,o){return o.type==t},e.prototype.clickById=function(t){document.getElementById(t).click()},e.prototype.onEditCell=function(t,o,e){this.onEdit.emit({row:t,column:o,value:e})},e.prototype.onSelectRow=function(t){this.onSelect.emit({row:t})},e.prototype.onUnselectRow=function(t){this.onUnselect.emit({row:t})},e.prototype.onDeleteLine=function(t){var o=this;this.confirmationService.confirm({key:"confirm",message:"Êtes-vous sûr de vouloir supprimer cette ligne ?",accept:function(){o.values.splice(o.values.indexOf(t),1),o.values=function(t,o,e){if(e||2===arguments.length)for(var n,l=0,r=o.length;l<r;l++)!n&&l in o||(n||(n=Array.prototype.slice.call(o,0,l)),n[l]=o[l]);return t.concat(n||Array.prototype.slice.call(o))}([],M(o.values)),o.onDelete.emit({row:t})}})},e.prototype.onEditInitCell=function(t,o,e){this.onEditInit.emit({row:t,column:o,value:e})},e.prototype.isModeEdition=function(){return this.options.editable},e.prototype.getOption=function(t,o,e){return null!=o[t.id].options&&null!=o[t.id].options[e]?o[t.id].options[e]:null!=t.options&&null!=t.options[e]?t.options[e]:null},e.prototype.getMultiSelectConcat=function(t,o){return null!=t?t.map((function(t){return t[o]})).join(", "):""},e.prototype.getSelectLibelleByValue=function(t,o){var e="";return null==t[o.id].value||(null!=t[o.id].options?e=t[o.id].options.options.find((function(e){return e.value==t[o.id].value}))[t[o.id].options.optionLabel]:null!=o.options&&(e=o.options.options.find((function(e){return e.value==t[o.id].value}))[o.options.optionLabel])),e},e.prototype.getFilterByCol=function(o){return o.type==t.ColType.Date?"dateRangeFilter":o.type==t.ColType.Number?"numberFilter":o.type==t.ColType.Dropdown||o.type==t.ColType.State||o.type==t.ColType.SelectButton?"objetFilter":o.type==t.ColType.MultiSelect?"listeFilter":o.type==t.ColType.File||o.type==t.ColType.Text?"textFilter":null},e.prototype.onFilterCol=function(o,e){e.type==t.ColType.Date&&this.filter(e,e.options.defaultFilters,"dateRangeFilter"),e.type==t.ColType.Number&&this.filter(e,o.value,"numberFilter"),e.type!=t.ColType.Dropdown&&e.type!=t.ColType.State&&e.type!=t.ColType.SelectButton||this.filter(e,o.value,"objetFilter"),e.type==t.ColType.MultiSelect&&this.filter(e,o.value,"listeFilter"),e.type!=t.ColType.File&&e.type!=t.ColType.Text||this.filter(e,o.target.value,"textFilter")},e.prototype.filter=function(t,o,e,n){void 0===n&&(n=!1),this.table.filter(o,t.id,e),n||this.onFilter.emit({column:t,value:o})},e}();E.decorators=[{type:o.Component,args:[{selector:"cilog-table",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\r\n    \x3c!-- Header --\x3e\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        \x3c!-- FILTRES --\x3e\r\n        <tr *ngIf="options.filterable">\r\n            <ng-container *ngFor="let col of columns">\r\n                \x3c!-- Text --\x3e\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                \x3c!-- Date --\x3e\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                \x3c!-- Number --\x3e\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                \x3c!-- Liste --\x3e\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ésultat"\r\n                                   emptyMessage="Aucun résultat"\r\n                                   itemSize="30"\r\n                                   selectedItemsLabel="{0} selectionnés"\r\n                                   (onChange)="onFilterCol($event, col)"\r\n                                   [(ngModel)]="col.options.defaultFilters">\r\n                    </p-multiSelect>\r\n                </th>\r\n\r\n                \x3c!-- Non filtrable --\x3e\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    \x3c!-- Groupheader --\x3e\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    \x3c!-- Body --\x3e\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                \x3c!-- Text --\x3e\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                \x3c!-- Dropdown --\x3e\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ésultat"\r\n                                emptyMessage="Aucun résultat"\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                \x3c!-- Number --\x3e\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                \x3c!-- Date --\x3e\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                \x3c!-- MultiSelect --\x3e\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ésultat"\r\n                                   emptyMessage="Aucun résultat"\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és"\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                \x3c!-- Image --\x3e\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                \x3c!-- Button --\x3e\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                \x3c!-- SelectButton --\x3e\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                \x3c!-- File --\x3e\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                \x3c!-- State --\x3e\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            \x3c!-- Deletion --\x3e\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}}"]}]}],E.ctorParameters=function(){return[{type:y.ConfirmationService},{type:y.FilterService},{type:o.ChangeDetectorRef}]},E.propDecorators={columns:[{type:o.Input}],values:[{type:o.Input}],options:[{type:o.Input}],loading:[{type:o.Input}],onEdit:[{type:o.Output}],onEditInit:[{type:o.Output}],onDelete:[{type:o.Output}],onSelect:[{type:o.Output}],onUnselect:[{type:o.Output}],onFilter:[{type:o.Output}],onSort:[{type:o.Output}],table:[{type:o.ViewChild,args:["table",{static:!0}]}]};var O=function(){};O.ɵprov=o.ɵɵdefineInjectable({factory:function(){return new O},token:O,providedIn:"root"}),O.decorators=[{type:o.Injectable,args:[{providedIn:"root"}]}],O.ctorParameters=function(){return[]},n.registerLocaleData(x.default);var B=function(){};B.decorators=[{type:o.NgModule,args:[{imports:[n.CommonModule,I,h.BrowserModule,D.BrowserAnimationsModule,b.FormsModule,b.ReactiveFormsModule],declarations:[T,S,E],exports:[S,E],providers:[C,O,y.ConfirmationService,{provide:o.LOCALE_ID,useValue:"fr-FR"}]}]}];var L=function(){};L.ɵprov=o.ɵɵdefineInjectable({factory:function(){return new L},token:L,providedIn:"root"}),L.decorators=[{type:o.Injectable,args:[{providedIn:"root"}]}],L.ctorParameters=function(){return[]},t.CilogLibComponent=T,t.CilogLibModule=B,t.CilogLibService=L,t.CilogMessageService=C,t.CilogTableService=O,t.ɵa=I,t.ɵb=S,t.ɵc=E,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("rxjs"),require("@angular/common"),require("primeng/dialog"),require("primeng/button"),require("primeng/table"),require("primeng/inputtext"),require("primeng/selectbutton"),require("primeng/dropdown"),require("primeng/inputnumber"),require("primeng/confirmdialog"),require("primeng/multiselect"),require("primeng/calendar"),require("primeng/tag"),require("primeng/tooltip"),require("@angular/platform-browser"),require("@angular/platform-browser/animations"),require("primeng/api"),require("@angular/forms"),require("@angular/common/locales/fr")):"function"==typeof define&&define.amd?define("cilog-lib",["exports","@angular/core","rxjs","@angular/common","primeng/dialog","primeng/button","primeng/table","primeng/inputtext","primeng/selectbutton","primeng/dropdown","primeng/inputnumber","primeng/confirmdialog","primeng/multiselect","primeng/calendar","primeng/tag","primeng/tooltip","@angular/platform-browser","@angular/platform-browser/animations","primeng/api","@angular/forms","@angular/common/locales/fr"],o):o((t="undefined"!=typeof globalThis?globalThis:t||self)["cilog-lib"]={},t.ng.core,t.rxjs,t.ng.common,t.dialog,t.button,t.table,t.inputtext,t.selectbutton,t.dropdown,t.inputnumber,t.confirmdialog,t.multiselect,t.calendar,t.tag,t.tooltip,t.ng.platformBrowser,t.ng.platformBrowser.animations,t.api,t.ng.forms,t.ng.common.locales.fr)}(this,(function(t,o,e,n,l,r,a,i,c,p,d,s,u,g,w,m,h,D,y,b,f){"use strict";function v(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var x=v(f),C=function(){function t(){this.message=new e.BehaviorSubject(null),this.display=new e.BehaviorSubject(null)}return t.prototype.showDialog=function(t,o,e,n){void 0===e&&(e=!0),void 0===n&&(n=!1),this.message.next({content:t,severity:o,closable:e,refresh:n}),this.display.next(!0)},t.prototype.closeDialog=function(){this.display.next(!1)},t}();C.decorators=[{type:o.Injectable}],C.ctorParameters=function(){return[]};var S=function(){function t(t){this.messageService=t}return t.prototype.ngOnInit=function(){var t=this;this.display=!1,this.messageService.message.subscribe((function(o){null!=o&&(t.message=o)})),this.messageService.display.subscribe((function(o){null!=o&&(t.display=o)}))},t.prototype.headerBySeverity=function(){if(null!=this.message)switch(this.message.severity){case"warn":return"Attention";case"error":return"Erreur";case"success":return"Succès";case"info":return"Information"}},t.prototype.iconBySeverity=function(){if(null!=this.message)switch(this.message.severity){case"warn":return"pi-exclamation-triangle";case"error":return"pi-exclamation-circle";case"success":return"pi-check";case"info":return"pi-info-circle"}},t.prototype.classBySeverity=function(){if(null!=this.message)switch(this.message.severity){case"warn":return"message_warn";case"error":return"message_error";case"success":return"message_success";case"info":return"message_info"}},t.prototype.refreshPage=function(){window.location.reload(!0)},t}();S.decorators=[{type:o.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    \x3c!-- Header --\x3e\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    \x3c!-- Content --\x3e\r\n    <p class="content">\r\n        {{ message?.content }}\r\n    </p>\r\n\r\n    \x3c!-- Footer --\x3e\r\n    <ng-template pTemplate="footer">\r\n        <p-button *ngIf="message?.closable == true && message?.refresh == false" icon="pi pi-check" (click)="display=false" label="Ok" styleClass="p-button-text"></p-button>\r\n        <p-button *ngIf="message?.refresh == true" icon="pi pi-refresh" (click)="refreshPage()" label="Rafraîchir" styleClass="p-button-text"></p-button>\r\n    </ng-template>\r\n\r\n</p-dialog>\r\n',styles:[":host ::ng-deep .message_success :nth-child(1n){background-color:#b7fdc0}:host ::ng-deep .message_error :nth-child(1n){background-color:#fdb8b7}:host ::ng-deep .message_warn :nth-child(1n){background-color:#fff5ba}:host ::ng-deep .message_info :nth-child(1n){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}:host ::ng-deep .p-button-text{padding-bottom:3px;padding-top:0}:host ::ng-deep .header_text{font-size:1.25rem;font-weight:500;margin-left:10px}:host ::ng-deep .header_icon{font-size:1.5rem}:host ::ng-deep .p-dialog-header{justify-content:inherit}"]}]}],S.ctorParameters=function(){return[{type:C}]};var T=function(){function t(){}return t.prototype.ngOnInit=function(){},t}();T.decorators=[{type:o.Component,args:[{selector:"lib-cilog-lib",template:"\n    <p>\n      cilog-lib works!\n    </p>\n  "}]}],T.ctorParameters=function(){return[]};var I=function(){};I.decorators=[{type:o.NgModule,args:[{declarations:[],exports:[l.DialogModule,r.ButtonModule,a.TableModule,i.InputTextModule,c.SelectButtonModule,p.DropdownModule,d.InputNumberModule,s.ConfirmDialogModule,u.MultiSelectModule,g.CalendarModule,w.TagModule,m.TooltipModule],imports:[n.CommonModule]}]}];Object.create;function M(t,o){var e="function"==typeof Symbol&&t[Symbol.iterator];if(!e)return t;var n,l,r=e.call(t),a=[];try{for(;(void 0===o||o-- >0)&&!(n=r.next()).done;)a.push(n.value)}catch(t){l={error:t}}finally{try{n&&!n.done&&(e=r.return)&&e.call(r)}finally{if(l)throw l.error}}return a}var k,F;Object.create;(k=t.ColType||(t.ColType={})).MultiSelect="MultiSelect",k.Dropdown="Dropdown",k.File="File",k.Text="Text",k.Number="Number",k.SelectButton="SelectButton",k.Button="Button",k.Image="Image",k.Date="Date",k.State="State",(F=t.Severity||(t.Severity={})).Secondary="secondary",F.Success="success",F.Info="info",F.Warning="warning",F.Help="help",F.Danger="danger";var E=function(){function e(t,e,n){this.confirmationService=t,this.filterService=e,this.cdRef=n,this.onEdit=new o.EventEmitter,this.onEditInit=new o.EventEmitter,this.onDelete=new o.EventEmitter,this.onSelect=new o.EventEmitter,this.onUnselect=new o.EventEmitter,this.onFilter=new o.EventEmitter,this.onSort=new o.EventEmitter}return e.prototype.ngOnInit=function(){this.filterService.register("dateRangeFilter",(function(t,o){if(null==o)return!0;var e,n=o[0].getTime();return e=o[1]?o[1].getTime()+864e5:n+864e5,null!=t.value&&(t.value.getTime()>=n&&t.value.getTime()<=e)})),this.filterService.register("textFilter",(function(t,o){return null==o||""==o.trim()||null!=t.value&&t.value.toLowerCase().includes(o.toLowerCase())})),this.filterService.register("numberFilter",(function(t,o){return null==o||null!=t.value&&t.value==o})),this.filterService.register("objetFilter",(function(t,o){return-1!=o.indexOf(t.value)})),this.filterService.register("listeFilter",(function(t,o){var e=!1;return o.forEach((function(o){-1!=t.value.indexOf(o)&&(e=!0)})),e})),this.columns.forEach((function(t){null==t.options&&(t.options={defaultFilters:null})}))},e.prototype.ngAfterViewInit=function(){var t=this;this.columns.forEach((function(o){t.filter(o,o.options.defaultFilters,t.getFilterByCol(o),!0)})),this.cdRef.detectChanges()},e.prototype.customSort=function(o){var e=this,n=this.columns.find((function(t){return t.id==o.field}));this.onSort.emit({column:n,order:o.order});var l=n.type;o.data.sort((function(r,a){var i=r[o.field].value,c=a[o.field].value,p=null;return null==i&&null!=c?p=-1:null!=i&&null==c?p=1:null==i&&null==c?p=0:l==t.ColType.Text||l==t.ColType.File?p=i.localeCompare(c):l==t.ColType.MultiSelect?p=e.getMultiSelectConcat(i,e.getOption(n,r,"optionLabel")).localeCompare(e.getMultiSelectConcat(c,e.getOption(n,a,"optionLabel"))):l==t.ColType.Dropdown||l==t.ColType.SelectButton||l==t.ColType.State?p=i[e.getOption(n,r,"optionLabel")].localeCompare(c[e.getOption(n,a,"optionLabel")]):l!=t.ColType.Number&&l!=t.ColType.Date||(p=i<c?-1:i>c?1:0),o.order*p}))},e.prototype.checkType=function(t,o){return o.type==t},e.prototype.clickById=function(t){document.getElementById(t).click()},e.prototype.onEditCell=function(t,o,e){this.onEdit.emit({row:t,column:o,value:e})},e.prototype.onSelectRow=function(t){this.onSelect.emit({row:t})},e.prototype.onUnselectRow=function(t){this.onUnselect.emit({row:t})},e.prototype.onDeleteLine=function(t){var o=this;this.confirmationService.confirm({key:"confirm",message:"Êtes-vous sûr de vouloir supprimer cette ligne ?",accept:function(){o.values.splice(o.values.indexOf(t),1),o.values=function(t,o,e){if(e||2===arguments.length)for(var n,l=0,r=o.length;l<r;l++)!n&&l in o||(n||(n=Array.prototype.slice.call(o,0,l)),n[l]=o[l]);return t.concat(n||Array.prototype.slice.call(o))}([],M(o.values)),o.onDelete.emit({row:t})}})},e.prototype.onEditInitCell=function(t,o,e){this.onEditInit.emit({row:t,column:o,value:e})},e.prototype.isModeEdition=function(){return this.options.editable},e.prototype.getOption=function(t,o,e){return null!=o[t.id].options&&null!=o[t.id].options[e]?o[t.id].options[e]:null!=t.options&&null!=t.options[e]?t.options[e]:null},e.prototype.getMultiSelectConcat=function(t,o){return null!=t?t.map((function(t){return t[o]})).join(", "):""},e.prototype.getSelectLibelleByValue=function(t,o){var e="";return null==t[o.id].value||(null!=t[o.id].options?e=t[o.id].options.options.find((function(e){return e.value==t[o.id].value}))[t[o.id].options.optionLabel]:null!=o.options&&(e=o.options.options.find((function(e){return e.value==t[o.id].value}))[o.options.optionLabel])),e},e.prototype.getFilterByCol=function(o){return o.type==t.ColType.Date?"dateRangeFilter":o.type==t.ColType.Number?"numberFilter":o.type==t.ColType.Dropdown||o.type==t.ColType.State||o.type==t.ColType.SelectButton?"objetFilter":o.type==t.ColType.MultiSelect?"listeFilter":o.type==t.ColType.File||o.type==t.ColType.Text?"textFilter":null},e.prototype.onFilterCol=function(o,e){e.type==t.ColType.Date&&this.filter(e,e.options.defaultFilters,"dateRangeFilter"),e.type==t.ColType.Number&&this.filter(e,o.value,"numberFilter"),e.type!=t.ColType.Dropdown&&e.type!=t.ColType.State&&e.type!=t.ColType.SelectButton||this.filter(e,o.value,"objetFilter"),e.type==t.ColType.MultiSelect&&this.filter(e,o.value,"listeFilter"),e.type!=t.ColType.File&&e.type!=t.ColType.Text||this.filter(e,o.target.value,"textFilter")},e.prototype.filter=function(t,o,e,n){void 0===n&&(n=!1),this.table.filter(o,t.id,e),n||this.onFilter.emit({column:t,value:o})},e}();E.decorators=[{type:o.Component,args:[{selector:"cilog-table",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\r\n    \x3c!-- Header --\x3e\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        \x3c!-- FILTRES --\x3e\r\n        <tr *ngIf="options.filterable">\r\n            <ng-container *ngFor="let col of columns">\r\n                \x3c!-- Text --\x3e\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                \x3c!-- Date --\x3e\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                \x3c!-- Number --\x3e\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                \x3c!-- Liste --\x3e\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ésultat"\r\n                                   emptyMessage="Aucun résultat"\r\n                                   itemSize="30"\r\n                                   selectedItemsLabel="{0} selectionnés"\r\n                                   (onChange)="onFilterCol($event, col)"\r\n                                   [(ngModel)]="col.options.defaultFilters">\r\n                    </p-multiSelect>\r\n                </th>\r\n\r\n                \x3c!-- Non filtrable --\x3e\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    \x3c!-- Groupheader --\x3e\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    \x3c!-- Body --\x3e\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                \x3c!-- Text --\x3e\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                \x3c!-- Dropdown --\x3e\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ésultat"\r\n                                emptyMessage="Aucun résultat"\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                \x3c!-- Number --\x3e\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                \x3c!-- Date --\x3e\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                \x3c!-- MultiSelect --\x3e\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ésultat"\r\n                                   emptyMessage="Aucun résultat"\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és"\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                \x3c!-- Image --\x3e\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                \x3c!-- Button --\x3e\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                \x3c!-- SelectButton --\x3e\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                \x3c!-- File --\x3e\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                \x3c!-- State --\x3e\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            \x3c!-- Deletion --\x3e\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}}"]}]}],E.ctorParameters=function(){return[{type:y.ConfirmationService},{type:y.FilterService},{type:o.ChangeDetectorRef}]},E.propDecorators={columns:[{type:o.Input}],values:[{type:o.Input}],options:[{type:o.Input}],loading:[{type:o.Input}],onEdit:[{type:o.Output}],onEditInit:[{type:o.Output}],onDelete:[{type:o.Output}],onSelect:[{type:o.Output}],onUnselect:[{type:o.Output}],onFilter:[{type:o.Output}],onSort:[{type:o.Output}],table:[{type:o.ViewChild,args:["table",{static:!0}]}]};var O=function(){};O.ɵprov=o.ɵɵdefineInjectable({factory:function(){return new O},token:O,providedIn:"root"}),O.decorators=[{type:o.Injectable,args:[{providedIn:"root"}]}],O.ctorParameters=function(){return[]},n.registerLocaleData(x.default);var B=function(){};B.decorators=[{type:o.NgModule,args:[{imports:[n.CommonModule,I,h.BrowserModule,D.BrowserAnimationsModule,b.FormsModule,b.ReactiveFormsModule],declarations:[T,S,E],exports:[S,E],providers:[C,O,y.ConfirmationService,{provide:o.LOCALE_ID,useValue:"fr-FR"}]}]}];var L=function(){};L.ɵprov=o.ɵɵdefineInjectable({factory:function(){return new L},token:L,providedIn:"root"}),L.decorators=[{type:o.Injectable,args:[{providedIn:"root"}]}],L.ctorParameters=function(){return[]},t.CilogLibComponent=T,t.CilogLibModule=B,t.CilogLibService=L,t.CilogMessageService=C,t.CilogTableService=O,t.ɵa=I,t.ɵb=S,t.ɵc=E,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=cilog-lib.umd.min.js.map

package/cilog-lib.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"CilogLibModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":22,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":23,"character":8}],"declarations":[{"__symbolic":"reference","name":"CilogLibComponent"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"exports":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"providers":[{"__symbolic":"reference","name":"CilogMessageService"},{"__symbolic":"reference","name":"CilogTableService"},{"__symbolic":"reference","module":"primeng/api","name":"ConfirmationService","line":37,"character":8},{"provide":{"__symbolic":"reference","module":"@angular/core","name":"LOCALE_ID","line":38,"character":19},"useValue":"fr-FR"}]}]}],"members":{}},"CilogLibComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"lib-cilog-lib","template":"\n    <p>\n      cilog-lib works!\n    </p>\n  ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"CilogLibService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"CilogMessageService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"showDialog":[{"__symbolic":"method"}],"closeDialog":[{"__symbolic":"method"}]}},"CilogTableService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"IGrouping":{"__symbolic":"interface"},"IOptionsGrille":{"__symbolic":"interface"},"IRow":{"__symbolic":"interface"},"ICell":{"__symbolic":"interface"},"IColumn":{"__symbolic":"interface"},"IOptions":{"__symbolic":"interface"},"IOptionsDropdown":{"__symbolic":"interface"},"IOptionsMultiSelect":{"__symbolic":"interface"},"IOptionsNumber":{"__symbolic":"interface"},"IOptionsSelectButton":{"__symbolic":"interface"},"IOptionsButton":{"__symbolic":"interface"},"IOptionsState":{"__symbolic":"interface"},"IMessage":{"__symbolic":"interface"},"IEdition":{"__symbolic":"interface"},"ISuppression":{"__symbolic":"interface"},"ISelection":{"__symbolic":"interface"},"IFilter":{"__symbolic":"interface"},"ISort":{"__symbolic":"interface"},"ColType":{"MultiSelect":"MultiSelect","Dropdown":"Dropdown","File":"File","Text":"Text","Number":"Number","SelectButton":"SelectButton","Button":"Button","Image":"Image","Date":"Date","State":"State"},"Severity":{"Secondary":"secondary","Success":"success","Info":"info","Warning":"warning","Help":"help","Danger":"danger"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[],"exports":[{"__symbolic":"reference","module":"primeng/dialog","name":"DialogModule","line":18,"character":8},{"__symbolic":"reference","module":"primeng/button","name":"ButtonModule","line":19,"character":8},{"__symbolic":"reference","module":"primeng/table","name":"TableModule","line":20,"character":8},{"__symbolic":"reference","module":"primeng/inputtext","name":"InputTextModule","line":21,"character":8},{"__symbolic":"reference","module":"primeng/selectbutton","name":"SelectButtonModule","line":22,"character":8},{"__symbolic":"reference","module":"primeng/dropdown","name":"DropdownModule","line":23,"character":8},{"__symbolic":"reference","module":"primeng/inputnumber","name":"InputNumberModule","line":24,"character":8},{"__symbolic":"reference","module":"primeng/confirmdialog","name":"ConfirmDialogModule","line":25,"character":8},{"__symbolic":"reference","module":"primeng/multiselect","name":"MultiSelectModule","line":26,"character":8},{"__symbolic":"reference","module":"primeng/calendar","name":"CalendarModule","line":27,"character":8},{"__symbolic":"reference","module":"primeng/tag","name":"TagModule","line":28,"character":8},{"__symbolic":"reference","module":"primeng/tooltip","name":"TooltipModule","line":29,"character":8}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":32,"character":8}]}]}],"members":{}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"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\">\r\n        {{ message?.content }}\r\n    </p>\r\n\r\n    <!-- Footer -->\r\n    <ng-template pTemplate=\"footer\">\r\n        <p-button *ngIf=\"message?.closable == true && message?.refresh == false\" icon=\"pi pi-check\" (click)=\"display=false\" label=\"Ok\" styleClass=\"p-button-text\"></p-button>\r\n        <p-button *ngIf=\"message?.refresh == true\" icon=\"pi pi-refresh\" (click)=\"refreshPage()\" label=\"Rafraîchir\" styleClass=\"p-button-text\"></p-button>\r\n    </ng-template>\r\n\r\n</p-dialog>\r\n","styles":[":host ::ng-deep .message_success :nth-child(1n){background-color:#b7fdc0}:host ::ng-deep .message_error :nth-child(1n){background-color:#fdb8b7}:host ::ng-deep .message_warn :nth-child(1n){background-color:#fff5ba}:host ::ng-deep .message_info :nth-child(1n){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}:host ::ng-deep .p-button-text{padding-bottom:3px;padding-top:0}:host ::ng-deep .header_text{font-size:1.25rem;font-weight:500;margin-left:10px}:host ::ng-deep .header_icon{font-size:1.5rem}:host ::ng-deep .p-dialog-header{justify-content:inherit}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CilogMessageService"}]}],"ngOnInit":[{"__symbolic":"method"}],"headerBySeverity":[{"__symbolic":"method"}],"iconBySeverity":[{"__symbolic":"method"}],"classBySeverity":[{"__symbolic":"method"}],"refreshPage":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"cilog-table","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\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ésultat\"\r\n                                   emptyMessage=\"Aucun résultat\"\r\n                                   itemSize=\"30\"\r\n                                   selectedItemsLabel=\"{0} selectionnés\"\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ésultat\"\r\n                                emptyMessage=\"Aucun résultat\"\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ésultat\"\r\n                                   emptyMessage=\"Aucun résultat\"\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és\"\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}}"]}]}],"members":{"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"values":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"onEdit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":5}}]}],"onEditInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":5}}]}],"onDelete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":5}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"onUnselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"onFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"onSort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":31,"character":5},"arguments":["table",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"primeng/api","name":"ConfirmationService","line":34,"character":37},{"__symbolic":"reference","module":"primeng/api","name":"FilterService","line":35,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":36,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"customSort":[{"__symbolic":"method"}],"checkType":[{"__symbolic":"method"}],"clickById":[{"__symbolic":"method"}],"onEditCell":[{"__symbolic":"method"}],"onSelectRow":[{"__symbolic":"method"}],"onUnselectRow":[{"__symbolic":"method"}],"onDeleteLine":[{"__symbolic":"method"}],"onEditInitCell":[{"__symbolic":"method"}],"isModeEdition":[{"__symbolic":"method"}],"getOption":[{"__symbolic":"method"}],"getMultiSelectConcat":[{"__symbolic":"method"}],"getSelectLibelleByValue":[{"__symbolic":"method"}],"getFilterByCol":[{"__symbolic":"method"}],"onFilterCol":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}]}}},"origins":{"CilogLibModule":"./lib/cilog-lib.module","CilogLibComponent":"./lib/cilog-lib.component","CilogLibService":"./lib/cilog-lib.service","CilogMessageService":"./lib/services/message.service","CilogTableService":"./lib/services/table.service","IGrouping":"./lib/helpers/interfaces/grille.interface","IOptionsGrille":"./lib/helpers/interfaces/grille.interface","IRow":"./lib/helpers/interfaces/grille.interface","ICell":"./lib/helpers/interfaces/grille.interface","IColumn":"./lib/helpers/interfaces/grille.interface","IOptions":"./lib/helpers/interfaces/grille.interface","IOptionsDropdown":"./lib/helpers/interfaces/grille.interface","IOptionsMultiSelect":"./lib/helpers/interfaces/grille.interface","IOptionsNumber":"./lib/helpers/interfaces/grille.interface","IOptionsSelectButton":"./lib/helpers/interfaces/grille.interface","IOptionsButton":"./lib/helpers/interfaces/grille.interface","IOptionsState":"./lib/helpers/interfaces/grille.interface","IMessage":"./lib/helpers/interfaces/message.interface","IEdition":"./lib/helpers/interfaces/edition.interface","ISuppression":"./lib/helpers/interfaces/edition.interface","ISelection":"./lib/helpers/interfaces/edition.interface","IFilter":"./lib/helpers/interfaces/edition.interface","ISort":"./lib/helpers/interfaces/edition.interface","ColType":"./lib/helpers/enums/grille.enum","Severity":"./lib/helpers/enums/grille.enum","ɵa":"./lib/modules/primeng.module","ɵb":"./lib/views/message/message.component","ɵc":"./lib/views/table/table.component"},"importAs":"cilog-lib"}
+{"__symbolic":"module","version":4,"metadata":{"CilogLibModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":22,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":23,"character":8}],"declarations":[{"__symbolic":"reference","name":"CilogLibComponent"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"exports":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"providers":[{"__symbolic":"reference","name":"CilogMessageService"},{"__symbolic":"reference","name":"CilogTableService"},{"__symbolic":"reference","module":"primeng/api","name":"ConfirmationService","line":37,"character":8},{"provide":{"__symbolic":"reference","module":"@angular/core","name":"LOCALE_ID","line":38,"character":19},"useValue":"fr-FR"}]}]}],"members":{}},"CilogLibComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"lib-cilog-lib","template":"\n    <p>\n      cilog-lib works!\n    </p>\n  ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"CilogLibService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"CilogMessageService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"showDialog":[{"__symbolic":"method"}],"closeDialog":[{"__symbolic":"method"}]}},"CilogTableService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"IGrouping":{"__symbolic":"interface"},"IOptionsGrille":{"__symbolic":"interface"},"IRow":{"__symbolic":"interface"},"ICell":{"__symbolic":"interface"},"IColumn":{"__symbolic":"interface"},"IOptions":{"__symbolic":"interface"},"IOptionsDropdown":{"__symbolic":"interface"},"IOptionsMultiSelect":{"__symbolic":"interface"},"IOptionsNumber":{"__symbolic":"interface"},"IOptionsSelectButton":{"__symbolic":"interface"},"IOptionsButton":{"__symbolic":"interface"},"IOptionsState":{"__symbolic":"interface"},"IMessage":{"__symbolic":"interface"},"IEdition":{"__symbolic":"interface"},"ISuppression":{"__symbolic":"interface"},"ISelection":{"__symbolic":"interface"},"IFilter":{"__symbolic":"interface"},"ISort":{"__symbolic":"interface"},"ColType":{"MultiSelect":"MultiSelect","Dropdown":"Dropdown","File":"File","Text":"Text","Number":"Number","SelectButton":"SelectButton","Button":"Button","Image":"Image","Date":"Date","State":"State"},"Severity":{"Secondary":"secondary","Success":"success","Info":"info","Warning":"warning","Help":"help","Danger":"danger"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[],"exports":[{"__symbolic":"reference","module":"primeng/dialog","name":"DialogModule","line":18,"character":8},{"__symbolic":"reference","module":"primeng/button","name":"ButtonModule","line":19,"character":8},{"__symbolic":"reference","module":"primeng/table","name":"TableModule","line":20,"character":8},{"__symbolic":"reference","module":"primeng/inputtext","name":"InputTextModule","line":21,"character":8},{"__symbolic":"reference","module":"primeng/selectbutton","name":"SelectButtonModule","line":22,"character":8},{"__symbolic":"reference","module":"primeng/dropdown","name":"DropdownModule","line":23,"character":8},{"__symbolic":"reference","module":"primeng/inputnumber","name":"InputNumberModule","line":24,"character":8},{"__symbolic":"reference","module":"primeng/confirmdialog","name":"ConfirmDialogModule","line":25,"character":8},{"__symbolic":"reference","module":"primeng/multiselect","name":"MultiSelectModule","line":26,"character":8},{"__symbolic":"reference","module":"primeng/calendar","name":"CalendarModule","line":27,"character":8},{"__symbolic":"reference","module":"primeng/tag","name":"TagModule","line":28,"character":8},{"__symbolic":"reference","module":"primeng/tooltip","name":"TooltipModule","line":29,"character":8}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":32,"character":8}]}]}],"members":{}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"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\">\r\n        {{ message?.content }}\r\n    </p>\r\n\r\n    <!-- Footer -->\r\n    <ng-template pTemplate=\"footer\">\r\n        <p-button *ngIf=\"message?.closable == true && message?.refresh == false\" icon=\"pi pi-check\" (click)=\"display=false\" label=\"Ok\" styleClass=\"p-button-text\"></p-button>\r\n        <p-button *ngIf=\"message?.refresh == true\" icon=\"pi pi-refresh\" (click)=\"refreshPage()\" label=\"Rafraîchir\" styleClass=\"p-button-text\"></p-button>\r\n    </ng-template>\r\n\r\n</p-dialog>\r\n","styles":[":host ::ng-deep .message_success :nth-child(1n){background-color:#b7fdc0}:host ::ng-deep .message_error :nth-child(1n){background-color:#fdb8b7}:host ::ng-deep .message_warn :nth-child(1n){background-color:#fff5ba}:host ::ng-deep .message_info :nth-child(1n){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}:host ::ng-deep .p-button-text{padding-bottom:3px;padding-top:0}:host ::ng-deep .header_text{font-size:1.25rem;font-weight:500;margin-left:10px}:host ::ng-deep .header_icon{font-size:1.5rem}:host ::ng-deep .p-dialog-header{justify-content:inherit}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CilogMessageService"}]}],"ngOnInit":[{"__symbolic":"method"}],"headerBySeverity":[{"__symbolic":"method"}],"iconBySeverity":[{"__symbolic":"method"}],"classBySeverity":[{"__symbolic":"method"}],"refreshPage":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"cilog-table","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\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ésultat\"\r\n                                   emptyMessage=\"Aucun résultat\"\r\n                                   itemSize=\"30\"\r\n                                   selectedItemsLabel=\"{0} selectionnés\"\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ésultat\"\r\n                                emptyMessage=\"Aucun résultat\"\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ésultat\"\r\n                                   emptyMessage=\"Aucun résultat\"\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és\"\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}}"]}]}],"members":{"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"values":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"onEdit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":5}}]}],"onEditInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":5}}]}],"onDelete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":5}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"onUnselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"onFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"onSort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":31,"character":5},"arguments":["table",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"primeng/api","name":"ConfirmationService","line":34,"character":37},{"__symbolic":"reference","module":"primeng/api","name":"FilterService","line":35,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":36,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"customSort":[{"__symbolic":"method"}],"checkType":[{"__symbolic":"method"}],"clickById":[{"__symbolic":"method"}],"onEditCell":[{"__symbolic":"method"}],"onSelectRow":[{"__symbolic":"method"}],"onUnselectRow":[{"__symbolic":"method"}],"onDeleteLine":[{"__symbolic":"method"}],"onEditInitCell":[{"__symbolic":"method"}],"isModeEdition":[{"__symbolic":"method"}],"getOption":[{"__symbolic":"method"}],"getMultiSelectConcat":[{"__symbolic":"method"}],"getSelectLibelleByValue":[{"__symbolic":"method"}],"getFilterByCol":[{"__symbolic":"method"}],"onFilterCol":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}]}}},"origins":{"CilogLibModule":"./lib/cilog-lib.module","CilogLibComponent":"./lib/cilog-lib.component","CilogLibService":"./lib/cilog-lib.service","CilogMessageService":"./lib/services/message.service","CilogTableService":"./lib/services/table.service","IGrouping":"./lib/helpers/interfaces/grille.interface","IOptionsGrille":"./lib/helpers/interfaces/grille.interface","IRow":"./lib/helpers/interfaces/grille.interface","ICell":"./lib/helpers/interfaces/grille.interface","IColumn":"./lib/helpers/interfaces/grille.interface","IOptions":"./lib/helpers/interfaces/grille.interface","IOptionsDropdown":"./lib/helpers/interfaces/grille.interface","IOptionsMultiSelect":"./lib/helpers/interfaces/grille.interface","IOptionsNumber":"./lib/helpers/interfaces/grille.interface","IOptionsSelectButton":"./lib/helpers/interfaces/grille.interface","IOptionsButton":"./lib/helpers/interfaces/grille.interface","IOptionsState":"./lib/helpers/interfaces/grille.interface","IMessage":"./lib/helpers/interfaces/message.interface","IEdition":"./lib/helpers/interfaces/edition.interface","ISuppression":"./lib/helpers/interfaces/edition.interface","ISelection":"./lib/helpers/interfaces/edition.interface","IFilter":"./lib/helpers/interfaces/edition.interface","ISort":"./lib/helpers/interfaces/edition.interface","ColType":"./lib/helpers/enums/grille.enum","Severity":"./lib/helpers/enums/grille.enum","ɵa":"./lib/modules/primeng.module","ɵb":"./lib/views/message/message.component","ɵc":"./lib/views/table/table.component"},"importAs":"cilog-lib"}

package/esm2015/lib/views/table/table.component.js

@@ -230,7 +230,7 @@ CilogTableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'cilog-table',
                 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\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}}"]
+                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 = () => [

package/fesm2015/cilog-lib.js

@@ -410,7 +410,7 @@ CilogTableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'cilog-table',
                 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\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}}"]
+                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 = () => [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cilog-lib",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "peerDependencies": {
     "@angular/cdk": "11.0.3",
     "@angular/common": "12.2.13",