@dflat-core/web 1.7.2059 → 1.7.2061

package/fesm2022/dflat-core-web-core-ux.mjs

@@ -9,11 +9,11 @@ import * as i2$1 from "@angular/router";
 import { ActivatedRoute, Router, RouterModule } from "@angular/router";
 import * as i6 from "@ng-select/ng-select";
 import { NgSelectModule } from "@ng-select/ng-select";
+import { ComponentLoaderFactory } from "ngx-bootstrap/component-loader";
 import * as i1$4 from "ngx-bootstrap/datepicker";
 import { BsDatepickerConfig, BsDatepickerModule } from "ngx-bootstrap/datepicker";
 import * as i1$6 from "ngx-bootstrap/modal";
 import { BsModalService, ModalModule, ModalOptions } from "ngx-bootstrap/modal";
-import { ComponentLoaderFactory } from "ngx-bootstrap/component-loader";
 import * as i1$3 from "@dflat-core/web/core";
 import { Utilities, isNumeric, nameof } from "@dflat-core/web/core";
 import { BehaviorSubject, EMPTY, Observable, ReplaySubject, Subject, catchError, combineLatest, debounceTime, distinctUntilChanged, filter, firstValueFrom, forkJoin, from, fromEvent, groupBy, map, merge, mergeMap, of, share, shareReplay, startWith, switchMap, take, takeUntil, tap, throwError, toArray, withLatestFrom } from "rxjs";
@@ -2075,6 +2075,8 @@ var LayoutContext = class {
 		this.showFilterButton$ = this._showFilterButton$.asObservable();
 		this._showFilterSummary$ = new BehaviorSubject(true);
 		this.showFilterSummary$ = this._showFilterSummary$.asObservable();
+		this._hiddenSummaryFilters$ = new BehaviorSubject([]);
+		this.hiddenSummaryFilters$ = this._hiddenSummaryFilters$.asObservable();
 		this._showSearchButton$ = new BehaviorSubject(true);
 		this.showSearchButton$ = this._showSearchButton$.asObservable();
 		this._showPaginator$ = new BehaviorSubject(true);
@@ -2107,6 +2109,10 @@ var LayoutContext = class {
 	setShowFilterSummary(v) {
 		this._showFilterSummary$.next(v);
 	}
+	setHiddenSummaryFilters(propertyNames) {
+		const current = this._hiddenSummaryFilters$.value;
+		if (current.length !== propertyNames.length || propertyNames.some((name) => !current.includes(name))) this._hiddenSummaryFilters$.next(propertyNames);
+	}
 	setShowSearchButton(v) {
 		this._showSearchButton$.next(v);
 	}
@@ -2296,6 +2302,7 @@ var SectionContext = class SectionContext {
 		const facade = component.facade;
 		if (cfg.filterOverride && facade) {
 			const newFilter = cfg.filterOverride(selected);
+			facade.layout?.setHiddenSummaryFilters(Object.keys(newFilter ?? {}));
 			if (init) facade.interceptor.filterReady$.pipe(take(1)).subscribe(() => {
 				facade.filter.setFilter(newFilter);
 			});
@@ -6091,6 +6098,9 @@ var DatagridCustomComponent = class DatagridCustomComponent {
 	isUndefined(val) {
 		return Utilities.IsNil(val);
 	}
+	getHeaderLabel(column) {
+		return column.Display?.enumMap?.length ? "" : column.Name;
+	}
 	getEnumImageUrl(row, column) {
 		return this.imageService.getEnumImageUrlForGrid(row, column);
 	}
@@ -6377,7 +6387,7 @@ var DatagridCustomComponent = class DatagridCustomComponent {
 				}
 			],
 			ngImport: i0,
-			template: "<div #datagridContainer [class]=\"this.datagridClass\">\r\n    <table class=\"datagrid-custom-datatable\">\r\n        <thead>\r\n            <tr>\r\n                <th class=\"header row-state\"></th>\r\n                <th #thHeader [ngClass]=\"col.Display.type\" [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                    *ngFor=\"let col of this.columns; let i = index\" (click)=\"sortHeaderClick(col.Property)\" [ngClass]=\"{\r\n                            sorting: isSorting(col.Property),\r\n                            sorting_asc: isSortAsc(col.Property),\r\n                            sorting_desc: isSortDesc(col.Property)}\" [attr.class]=\"this.getHeaderStyle(col.Property)\">\r\n                    <label>{{ col.Name }}</label>\r\n                </th>\r\n                <ng-container *ngIf=\"enableLastColumnResize\">\r\n                    <th #lastColumnHeader class=\"header last-column\"></th>\r\n                </ng-container>\r\n\r\n            </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n            <ng-container *ngFor=\"let row of this.data.Values; let r = index\" >\r\n            <tr [attr.class]=\"getStyleClass(r, row)\"\r\n                [attr.id]=\"guid.toString() + '-row-' + row.Id\" (click)=\"selectRow(row.Id, $event)\"\r\n                (mousedown)=\"handleRowMouseDown(row.Id, $event)\" (mouseup)=\"handleRowMouseUp(row.Id, $event)\"\r\n                [class.first-row]=\"r == 0\">\r\n\r\n                <!--  -->\r\n                <th [attr.class]=\"getRowStateStyle(r, row)\">\r\n                    <ng-container *ngIf=\"isModified(row) && ! isInvalid(row) && ! isWarning(row)\">\r\n                        <div>\r\n                            ...\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"isInvalid(row)\">\r\n                        <div>\r\n                            <img class=\"error-row-icon\" src=\"assets/images/error.svg\" />\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"isWarning(row) && ! isInvalid(row)\">\r\n                        <div>\r\n                            <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" />\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"this.displayDetail\">\r\n                        <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n                            <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n                        </button>\r\n                    </ng-container>\r\n                </th>\r\n\r\n                <td [attr.class]=\"getCellStyleClass(r, row, column)\" *ngFor=\"let column of this.columns; index as i\">\r\n                    <alg-datagrid-cell #dataGridCellComponent class=\"gridcell-container\" [entity]=\"row\"\r\n                        [isEditable]=\"this.enableEdit(column.Property,row)\" [property]=\"column.Property\"\r\n                        (keydown)=\"this.onKeyDown($event)\" (update)=\"this.updateEntity($event,column.Property)\">\r\n\r\n                        <ng-template alg-viewMode>\r\n\r\n                            <div [ngSwitch]=\"column.Display.type\" *ngIf=\"!isUndefined(row[column.Property])\">\r\n                                <div *ngSwitchCase=\"'url'\">\r\n                                    <a [routerLink]=\"[column.Display.baseUrl,row[column.Property]]\">\r\n                                        {{ row.Id || row[column.Property] }}\r\n                                    </a>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n                                    <img *ngIf=\"column.Display.imagePath.length == 0\"\r\n                                        [src]=\"(column.Display.imgBase || '') + (column.Display.sourceProperty? row[column.Display.sourceProperty]: row[column.Property])\" />\r\n\r\n                                    <alg-image *ngIf=\"column.Display.imagePath.length != 0\"\r\n                                        [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n                                    </alg-image>\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n                                    \r\n                                    <alg-image \r\n                                        [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                    </alg-image>\r\n\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n                                    <img *ngIf=\"column.Display.imagePath.length == 0\"\r\n                                        [src]=\"(column.Display.imgBase || '') + (column.Display.sourceProperty? row[column.Display.sourceProperty]: row[column.Property])\" />\r\n\r\n                                    <alg-image *ngIf=\"column.Display.imagePath.length != 0\" [wide]=\"true\"\r\n                                        [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                    </alg-image>\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'date'\">{{row[column.Property]| date: column.Display.format\r\n                                    ||'dd/MM/yyyy'}} </span>\r\n                                <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n                                <span *ngSwitchCase=\"'datetime'\">{{getdatetime(row[column.Property])| date:\r\n                                    column.Display.format ||'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n                                <span *ngSwitchCase=\"'money'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\" class=\"money\">\r\n                                    {{row[column.Property]| currency: column.Display.currency ||\r\n                                    (column.Display.sourceProperty && row[column.Display.sourceProperty] ?\r\n                                    row[column.Display.sourceProperty]: false) ||'EUR':'symbol'| todefine:\r\n                                    column.Display.handleError}}\r\n\r\n                                    <div class=\"tool-tip\" *ngIf=\"this.showOnToolTip(row,column.Property)\">\r\n                                        {{this.showOnToolTip(row,column.Property)}}\r\n                                    </div>\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'percent'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] * column.Display.multiplier | percent : column.Display.format\r\n                                    ||'1.0-2'| todefine: column.Display.handleError}}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'number'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] * column.Display.multiplier| number: column.Display.format\r\n                                    ||'1.0-3' | todefine : column.Display.handleError}}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] | tofixedsizeinteger : column.Display.completingCaracter : column.Display.width }}\r\n                                </span>\r\n                                <span *ngSwitchDefault [innerText]=\"row[column.Property]\">\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div *ngIf=\"isUndefined(row[column.Property])\">\r\n                                <span *ngIf=\"!isUndefined(column.Display.nullCaseText)\" class=\"mw-invalid\">\r\n                                    {{ column.Display.nullCaseText }}\r\n                                </span>\r\n\r\n                                <span *ngIf=\"isUndefined(column.Display.nullCaseText)\">\r\n                                    &nbsp;&nbsp;&nbsp;\r\n                                </span>\r\n                            </div>\r\n\r\n                        </ng-template>\r\n\r\n                        <ng-template alg-editMode>\r\n                            <ng-container [ngSwitch]=\"this.getFieldType(column.Property)\">\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Date\">\r\n                                    <input class=\"form-control\" type=\"text\" placeholder=\"Sélectionner une date\"\r\n                                        bsDatepicker [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                        [bsConfig]=\"this.bsConfig\" [(ngModel)]=\"row[column.Property]\" focusable\r\n                                        tabindex=\"0\" />\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Integer\">\r\n                                    <input class=\"form-control\" type=\"number\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [name]=\"column.Property\" focusable ng-pattern=\"/^[0-9]+$/\" tabindex=\"0\" />\r\n                                </ng-container>\r\n                                <!-- *ngIf=\"!isUndefined(column.ToolTipProperty)\" -->\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.CheckBox\">\r\n                                    <table class=checkbox-table>\r\n                                        <td><input type=\"checkbox\" [(ngModel)]=\"row[column.Property]\"\r\n                                                [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                                [readonly]=\"this.getFieldReadOnly(column.Property)\" focusable\r\n                                                tabindex=\"0\">\r\n                                        </td>\r\n                                    </table>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"this.filterType.ComboBox\">\r\n                                    <ng-select class=\"grid-select\"\r\n                                        placeholder=\"Sélectionner {{this.getField(column.Property).Label}}\"\r\n                                        [items]=\"this.getField(column.Property).Data\"\r\n                                        [name]=\"this.getField(column.Property).PropertyName\"\r\n                                        [multiple]=\"this.getField(column.Property).MultipleSelection\"\r\n                                        [hideSelected]=\"this.getField(column.Property).HideSelected\"\r\n                                        bindValue=\"{{this.getField(column.Property).ValueMember}}\"\r\n                                        bindLabel=\"{{this.getField(column.Property).DisplayMember}}\"\r\n                                        [(ngModel)]=\"row[column.Property]\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" OnEnter focusable\r\n                                        tabindex=\"0\">\r\n                                    </ng-select>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Text\">\r\n                                    <textarea class=\"form-control\" rows=\"5\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" focusable tabindex=\"0\">\r\n                                        </textarea>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <input type=\"text\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" [name]=\"column.Property\"\r\n                                        [id]=\"column.Property\" tabindex=\"0\" focusable />\r\n                                </ng-container>\r\n\r\n                            </ng-container>\r\n\r\n                        </ng-template>\r\n\r\n                    </alg-datagrid-cell>\r\n                </td>\r\n                <ng-container *ngIf=\"enableLastColumnResize\">\r\n                    <td></td>\r\n                </ng-container>\r\n            </tr>\r\n            <ng-container *ngIf=\"this.displayDetail\">\r\n                <tr [attr.id]=\"row.Id + '_detail'\" class=\"toggleable\">\r\n                <th></th>\r\n                <td [attr.colspan]=\"this.columns.length +1\">\r\n                    <div [attr.id]=\"row.Id + '_detail_div'\" class=\"detail-div\">\r\n                        qmsldkqsd <br>\r\n                        qmsldkmqd<br>\r\n                        qmsldkmqdqmlskd,mq<br><br>\r\n                        mqlkdq<br>\r\n\r\n                    </div>\r\n                </td>\r\n                </tr>\r\n            </ng-container>\r\n            </ng-container>\r\n        </tbody>\r\n        <tfoot></tfoot>\r\n    </table>\r\n</div>\r\n",
+			template: "<div #datagridContainer [class]=\"this.datagridClass\">\r\n    <table class=\"datagrid-custom-datatable\">\r\n        <thead>\r\n            <tr>\r\n                <th class=\"header row-state\"></th>\r\n                <th #thHeader [ngClass]=\"col.Display.type\" [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                    *ngFor=\"let col of this.columns; let i = index\" (click)=\"sortHeaderClick(col.Property)\" [ngClass]=\"{\r\n                            sorting: isSorting(col.Property),\r\n                            sorting_asc: isSortAsc(col.Property),\r\n                            sorting_desc: isSortDesc(col.Property)}\" [attr.class]=\"this.getHeaderStyle(col.Property)\">\r\n                    <label>{{ getHeaderLabel(col) }}</label>\r\n                </th>\r\n                <ng-container *ngIf=\"enableLastColumnResize\">\r\n                    <th #lastColumnHeader class=\"header last-column\"></th>\r\n                </ng-container>\r\n\r\n            </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n            <ng-container *ngFor=\"let row of this.data.Values; let r = index\" >\r\n            <tr [attr.class]=\"getStyleClass(r, row)\"\r\n                [attr.id]=\"guid.toString() + '-row-' + row.Id\" (click)=\"selectRow(row.Id, $event)\"\r\n                (mousedown)=\"handleRowMouseDown(row.Id, $event)\" (mouseup)=\"handleRowMouseUp(row.Id, $event)\"\r\n                [class.first-row]=\"r == 0\">\r\n\r\n                <!--  -->\r\n                <th [attr.class]=\"getRowStateStyle(r, row)\">\r\n                    <ng-container *ngIf=\"isModified(row) && ! isInvalid(row) && ! isWarning(row)\">\r\n                        <div>\r\n                            ...\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"isInvalid(row)\">\r\n                        <div>\r\n                            <img class=\"error-row-icon\" src=\"assets/images/error.svg\" />\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"isWarning(row) && ! isInvalid(row)\">\r\n                        <div>\r\n                            <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" />\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"this.displayDetail\">\r\n                        <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n                            <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n                        </button>\r\n                    </ng-container>\r\n                </th>\r\n\r\n                <td [attr.class]=\"getCellStyleClass(r, row, column)\" *ngFor=\"let column of this.columns; index as i\">\r\n                    <alg-datagrid-cell #dataGridCellComponent class=\"gridcell-container\" [entity]=\"row\"\r\n                        [isEditable]=\"this.enableEdit(column.Property,row)\" [property]=\"column.Property\"\r\n                        (keydown)=\"this.onKeyDown($event)\" (update)=\"this.updateEntity($event,column.Property)\">\r\n\r\n                        <ng-template alg-viewMode>\r\n\r\n                            <div [ngSwitch]=\"column.Display.type\" *ngIf=\"!isUndefined(row[column.Property])\">\r\n                                <div *ngSwitchCase=\"'url'\">\r\n                                    <a [routerLink]=\"[column.Display.baseUrl,row[column.Property]]\">\r\n                                        {{ row.Id || row[column.Property] }}\r\n                                    </a>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n                                    <img *ngIf=\"column.Display.imagePath.length == 0\"\r\n                                        [src]=\"(column.Display.imgBase || '') + (column.Display.sourceProperty? row[column.Display.sourceProperty]: row[column.Property])\" />\r\n\r\n                                    <alg-image *ngIf=\"column.Display.imagePath.length != 0\"\r\n                                        [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n                                    </alg-image>\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n                                    \r\n                                    <alg-image \r\n                                        [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                    </alg-image>\r\n\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n                                    <img *ngIf=\"column.Display.imagePath.length == 0\"\r\n                                        [src]=\"(column.Display.imgBase || '') + (column.Display.sourceProperty? row[column.Display.sourceProperty]: row[column.Property])\" />\r\n\r\n                                    <alg-image *ngIf=\"column.Display.imagePath.length != 0\" [wide]=\"true\"\r\n                                        [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                    </alg-image>\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'date'\">{{row[column.Property]| date: column.Display.format\r\n                                    ||'dd/MM/yyyy'}} </span>\r\n                                <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n                                <span *ngSwitchCase=\"'datetime'\">{{getdatetime(row[column.Property])| date:\r\n                                    column.Display.format ||'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n                                <span *ngSwitchCase=\"'money'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\" class=\"money\">\r\n                                    {{row[column.Property]| currency: column.Display.currency ||\r\n                                    (column.Display.sourceProperty && row[column.Display.sourceProperty] ?\r\n                                    row[column.Display.sourceProperty]: false) ||'EUR':'symbol'| todefine:\r\n                                    column.Display.handleError}}\r\n\r\n                                    <div class=\"tool-tip\" *ngIf=\"this.showOnToolTip(row,column.Property)\">\r\n                                        {{this.showOnToolTip(row,column.Property)}}\r\n                                    </div>\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'percent'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] * column.Display.multiplier | percent : column.Display.format\r\n                                    ||'1.0-2'| todefine: column.Display.handleError}}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'number'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] * column.Display.multiplier| number: column.Display.format\r\n                                    ||'1.0-3' | todefine : column.Display.handleError}}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] | tofixedsizeinteger : column.Display.completingCaracter : column.Display.width }}\r\n                                </span>\r\n                                <span *ngSwitchDefault [innerText]=\"row[column.Property]\">\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div *ngIf=\"isUndefined(row[column.Property])\">\r\n                                <span *ngIf=\"!isUndefined(column.Display.nullCaseText)\" class=\"mw-invalid\">\r\n                                    {{ column.Display.nullCaseText }}\r\n                                </span>\r\n\r\n                                <span *ngIf=\"isUndefined(column.Display.nullCaseText)\">\r\n                                    &nbsp;&nbsp;&nbsp;\r\n                                </span>\r\n                            </div>\r\n\r\n                        </ng-template>\r\n\r\n                        <ng-template alg-editMode>\r\n                            <ng-container [ngSwitch]=\"this.getFieldType(column.Property)\">\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Date\">\r\n                                    <input class=\"form-control\" type=\"text\" placeholder=\"Sélectionner une date\"\r\n                                        bsDatepicker [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                        [bsConfig]=\"this.bsConfig\" [(ngModel)]=\"row[column.Property]\" focusable\r\n                                        tabindex=\"0\" />\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Integer\">\r\n                                    <input class=\"form-control\" type=\"number\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [name]=\"column.Property\" focusable ng-pattern=\"/^[0-9]+$/\" tabindex=\"0\" />\r\n                                </ng-container>\r\n                                <!-- *ngIf=\"!isUndefined(column.ToolTipProperty)\" -->\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.CheckBox\">\r\n                                    <table class=checkbox-table>\r\n                                        <td><input type=\"checkbox\" [(ngModel)]=\"row[column.Property]\"\r\n                                                [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                                [readonly]=\"this.getFieldReadOnly(column.Property)\" focusable\r\n                                                tabindex=\"0\">\r\n                                        </td>\r\n                                    </table>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"this.filterType.ComboBox\">\r\n                                    <ng-select class=\"grid-select\"\r\n                                        placeholder=\"Sélectionner {{this.getField(column.Property).Label}}\"\r\n                                        [items]=\"this.getField(column.Property).Data\"\r\n                                        [name]=\"this.getField(column.Property).PropertyName\"\r\n                                        [multiple]=\"this.getField(column.Property).MultipleSelection\"\r\n                                        [hideSelected]=\"this.getField(column.Property).HideSelected\"\r\n                                        bindValue=\"{{this.getField(column.Property).ValueMember}}\"\r\n                                        bindLabel=\"{{this.getField(column.Property).DisplayMember}}\"\r\n                                        [(ngModel)]=\"row[column.Property]\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" OnEnter focusable\r\n                                        tabindex=\"0\">\r\n                                    </ng-select>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Text\">\r\n                                    <textarea class=\"form-control\" rows=\"5\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" focusable tabindex=\"0\">\r\n                                        </textarea>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <input type=\"text\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" [name]=\"column.Property\"\r\n                                        [id]=\"column.Property\" tabindex=\"0\" focusable />\r\n                                </ng-container>\r\n\r\n                            </ng-container>\r\n\r\n                        </ng-template>\r\n\r\n                    </alg-datagrid-cell>\r\n                </td>\r\n                <ng-container *ngIf=\"enableLastColumnResize\">\r\n                    <td></td>\r\n                </ng-container>\r\n            </tr>\r\n            <ng-container *ngIf=\"this.displayDetail\">\r\n                <tr [attr.id]=\"row.Id + '_detail'\" class=\"toggleable\">\r\n                <th></th>\r\n                <td [attr.colspan]=\"this.columns.length +1\">\r\n                    <div [attr.id]=\"row.Id + '_detail_div'\" class=\"detail-div\">\r\n                        qmsldkqsd <br>\r\n                        qmsldkmqd<br>\r\n                        qmsldkmqdqmlskd,mq<br><br>\r\n                        mqlkdq<br>\r\n\r\n                    </div>\r\n                </td>\r\n                </tr>\r\n            </ng-container>\r\n            </ng-container>\r\n        </tbody>\r\n        <tfoot></tfoot>\r\n    </table>\r\n</div>\r\n",
 			styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A  <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}:host{flex:1}table thead .sorting,table thead .sorting_asc,table thead .sorting_desc,table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table thead th:first-child{position:sticky;left:0;z-index:2}table tbody th:first-child{position:sticky;left:0;z-index:1}table tbody th:first-child div{text-align:center;vertical-align:middle;line-height:20px}table tbody tr.row-odd th:first-child{background:#ebf0ff}table tbody tr.row-even th:first-child{background:#fff}table tbody tr.selected.row-odd.mw-invalid th:first-child,table tbody tr.selected.row-even.mw-invalid th:first-child,table tbody tr.selected.row-odd.mw-warning th:first-child,table tbody tr.selected.row-even.mw-warning th:first-child,table tbody tr.selected.row-even th:first-child,table tbody tr.selected.row-odd th:first-child{background-color:#8ea7f8;color:#fff}table tbody tr.row-odd.mw-invalid th:first-child,table tbody tr.row-even.mw-invalid th:first-child{background-color:#f2dede}table tbody tr.row-odd.mw-warning th:first-child,table tbody tr.row-even.mw-warning th:first-child{background-color:#fff4de}table thead th{position:-webkit-sticky;position:sticky;top:0;z-index:1;background:#fff;box-shadow:inset 0 -1px 0 var(--main-bg-color)}.header.last-column{border-left:none!important;width:100%}table thead .sorting{background-image:none;cursor:pointer}table thead .sorting_asc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxNjIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxNTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+z5ABTAAAAI5JREFUeNpi/P//PwO1ABMDFQELIQXVjfe4gFQbEJe11iv9otRl2UCcBcSphBQy4gszoKu0gNROIJYB4jtA7AF03V2SXQY0iBFIFUMNAgEVIM6DipPsTQcgDkQTSwRia5IMA9rOC6RqgVgQTQokXgOUZyfFZSFQF/zAgh2BOIjkCBjQRDtq2Khh9DAMIMAAT9AmNBDSXegAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_desc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxQTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxOTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1fsfwAAAAJdJREFUeNpi/P//PwO1ABMDFcGoYaOG0cMwFmyC1Y33IoHUAiD+h8MBGa31SvOJddk6IN4PxBxY8FEgXkO0N4G2/gRSLUD8GU3qPRA3A+U/kxpmIBege2U9EB/ApYERX6kBDDtlILUDiFWA+AkQuwNddY2s2ARqvAukJgDxbyCehM8gnLGJBmYDsSoQTyWkkHHQFo4AAQYAAA0piq4hbqwAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-image:none}.checkbok-container{align-items:center;margin:0;padding:0}.gridcell-container{padding:0;min-width:fit-content}.gridcell-container input[type=number]{display:block;size:1;font-size:10pt;width:100%!important;height:100%;margin:0!important;border:2px solid #F78383}.datagrid-custom-container{height:100%;overflow:auto;margin-left:-1px}.datagrid-custom-datatable{table-layout:fixed;cursor:pointer;border-spacing:0px}.datagrid-custom-datatable td{box-shadow:none;padding:2px 5px;white-space:nowrap}.datagrid-custom-datatable td.row-state{padding:2px 5px;width:16px}.datagrid-custom-datatable td.img{padding:2px 5px}.datagrid-custom-datatable td.row-state img{height:16px;width:16px;margin-top:-3px;padding:0}.datagrid-custom-datatable tr{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header{vertical-align:bottom;padding:2px 5px 2px 0;font-weight:400;color:var(--main-bg-color);white-space:nowrap;line-height:25px;min-width:32px;margin-bottom:5px}.header.img{min-width:16px}.header.row-state{min-width:27px;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:2;background:#fff;border-left:none;border-right:none}.header label{cursor:pointer;margin-bottom:0;margin-right:10px;padding-left:5px;width:100%}.row-odd{background-color:#ebf0ff}.row-even{background-color:#f7faff}.error-row-icon{padding:2px;width:20px}.selected{background-color:#8ea7f8;color:#fff}.mw-invalid{font-weight:600;background-color:#f2dede;border:1px solid var(--red-error)}.mw-invalid td{background-color:#f2dede!important}span.mw-invalid{padding:0 3px;color:var(--red-error);background-color:transparent}.mw-warning.selected,.mw-invalid.selected{background-color:#8ea7f8}.mw-warning.selected td,.mw-invalid.selected td{background-color:#8ea7f8!important}.mw-warning{font-weight:600;background-color:#fff4de;border:1px solid var(--orange-algorima)}.mw-warning td{background-color:#fff4de!important}.mw-modified{font-weight:600;border:1px solid var(--main-bg-color)}.datagrid-custom-datatable>tbody>tr{z-index:50}.image{position:relative;display:flex;flex-direction:row}.image img{height:20px;width:auto}td.money{position:relative}.tool-tip{visibility:hidden;background-color:#424242;color:#fff;text-align:left;border-radius:3px;font-size:15px;position:absolute;z-index:1;top:-10%;left:150%;opacity:0;transition:opacity .3s;padding:5px 15px;white-space:nowrap;overflow:visible}.tool-tip:after{content:\" \";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent rgb(66,66,66) transparent transparent}.image:hover .tool-tip{visibility:visible;opacity:1}td.money:hover .tool-tip{visibility:visible;opacity:1;left:100%;height:28px;font-size:13px;margin-top:0;padding:5px 10px 10px}.disabled{pointer-events:none}.edit-mode{background-color:#fff;border:1px solid #4465C9;min-width:90px!important;height:30px!important}.edit-mode .form-control{min-height:0px}.edit-mode .inactivated{background-color:#dbe4ff80}.edit-mode .inactivated-fo{background-color:#dbe4ff}.edit-mode .ecartclass{border:2px solid #4465C9}.edit-mode .error-cell{font-weight:700;color:#f78383!important}.edit-mode .selected{color:#4d5a81}.highlight-1,.highlight-1.selected,.edit-mode.highlight-1.selected{background-color:#4d5a81!important;color:#fff!important}.highlight-2,.highlight-2.selected,.edit-mode.highlight-2.selected{background-color:#dbe4ff!important;color:#4d5a81!important}.highlight-3,.highlight-3.selected,.edit-mode.highlight-3.selected{background-color:#4465c9!important;color:#fff!important}.highlight-4,.highlight-4.selected,.edit-mode.highlight-4.selected{background-color:#f78383!important;color:#fff!important}.highlight-5,.highlight-5.selected{background-color:#4465c9!important;color:#fff}.fixed-column{position:-webkit-sticky;position:sticky;left:27px;z-index:2!important;border-left:none}.fixed-header{position:-webkit-sticky;position:sticky;left:27px;z-index:3!important;background:#fff}.has-focus{padding:0!important}.has-focus input,.has-focus input:focus-visible,.has-focus input:focus{border-radius:0;outline:none!important;width:100%}.edit-mode.has-focus{border:none;width:90px!important}.bordered{border-left:1px solid #14358f!important;border-right:1px solid #14358f!important}.match-keywords{color:var(--main-bg-color);font-weight:700}.datagrid-img img{height:20px;width:20px}.right-align{text-align:right}.left-align{text-align:left}.detail-div{height:0px;overflow:hidden;transition:all .2s linear;width:100%}.fa-custom{font-size:smaller}.detail-div-show{height:150px;transition:all .2s linear}.toggleable{visibility:collapse}.toggleable-show{visibility:visible}.toggle-button-down{transform:rotate(90deg);transition:all .2s linear}\n"],
 			dependencies: [
 				{
@@ -6683,7 +6693,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "alg-datagrid-custom",
 			changeDetection: ChangeDetectionStrategy.Eager,
 			standalone: false,
-			template: "<div #datagridContainer [class]=\"this.datagridClass\">\r\n    <table class=\"datagrid-custom-datatable\">\r\n        <thead>\r\n            <tr>\r\n                <th class=\"header row-state\"></th>\r\n                <th #thHeader [ngClass]=\"col.Display.type\" [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                    *ngFor=\"let col of this.columns; let i = index\" (click)=\"sortHeaderClick(col.Property)\" [ngClass]=\"{\r\n                            sorting: isSorting(col.Property),\r\n                            sorting_asc: isSortAsc(col.Property),\r\n                            sorting_desc: isSortDesc(col.Property)}\" [attr.class]=\"this.getHeaderStyle(col.Property)\">\r\n                    <label>{{ col.Name }}</label>\r\n                </th>\r\n                <ng-container *ngIf=\"enableLastColumnResize\">\r\n                    <th #lastColumnHeader class=\"header last-column\"></th>\r\n                </ng-container>\r\n\r\n            </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n            <ng-container *ngFor=\"let row of this.data.Values; let r = index\" >\r\n            <tr [attr.class]=\"getStyleClass(r, row)\"\r\n                [attr.id]=\"guid.toString() + '-row-' + row.Id\" (click)=\"selectRow(row.Id, $event)\"\r\n                (mousedown)=\"handleRowMouseDown(row.Id, $event)\" (mouseup)=\"handleRowMouseUp(row.Id, $event)\"\r\n                [class.first-row]=\"r == 0\">\r\n\r\n                <!--  -->\r\n                <th [attr.class]=\"getRowStateStyle(r, row)\">\r\n                    <ng-container *ngIf=\"isModified(row) && ! isInvalid(row) && ! isWarning(row)\">\r\n                        <div>\r\n                            ...\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"isInvalid(row)\">\r\n                        <div>\r\n                            <img class=\"error-row-icon\" src=\"assets/images/error.svg\" />\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"isWarning(row) && ! isInvalid(row)\">\r\n                        <div>\r\n                            <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" />\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"this.displayDetail\">\r\n                        <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n                            <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n                        </button>\r\n                    </ng-container>\r\n                </th>\r\n\r\n                <td [attr.class]=\"getCellStyleClass(r, row, column)\" *ngFor=\"let column of this.columns; index as i\">\r\n                    <alg-datagrid-cell #dataGridCellComponent class=\"gridcell-container\" [entity]=\"row\"\r\n                        [isEditable]=\"this.enableEdit(column.Property,row)\" [property]=\"column.Property\"\r\n                        (keydown)=\"this.onKeyDown($event)\" (update)=\"this.updateEntity($event,column.Property)\">\r\n\r\n                        <ng-template alg-viewMode>\r\n\r\n                            <div [ngSwitch]=\"column.Display.type\" *ngIf=\"!isUndefined(row[column.Property])\">\r\n                                <div *ngSwitchCase=\"'url'\">\r\n                                    <a [routerLink]=\"[column.Display.baseUrl,row[column.Property]]\">\r\n                                        {{ row.Id || row[column.Property] }}\r\n                                    </a>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n                                    <img *ngIf=\"column.Display.imagePath.length == 0\"\r\n                                        [src]=\"(column.Display.imgBase || '') + (column.Display.sourceProperty? row[column.Display.sourceProperty]: row[column.Property])\" />\r\n\r\n                                    <alg-image *ngIf=\"column.Display.imagePath.length != 0\"\r\n                                        [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n                                    </alg-image>\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n                                    \r\n                                    <alg-image \r\n                                        [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                    </alg-image>\r\n\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n                                    <img *ngIf=\"column.Display.imagePath.length == 0\"\r\n                                        [src]=\"(column.Display.imgBase || '') + (column.Display.sourceProperty? row[column.Display.sourceProperty]: row[column.Property])\" />\r\n\r\n                                    <alg-image *ngIf=\"column.Display.imagePath.length != 0\" [wide]=\"true\"\r\n                                        [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                    </alg-image>\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'date'\">{{row[column.Property]| date: column.Display.format\r\n                                    ||'dd/MM/yyyy'}} </span>\r\n                                <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n                                <span *ngSwitchCase=\"'datetime'\">{{getdatetime(row[column.Property])| date:\r\n                                    column.Display.format ||'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n                                <span *ngSwitchCase=\"'money'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\" class=\"money\">\r\n                                    {{row[column.Property]| currency: column.Display.currency ||\r\n                                    (column.Display.sourceProperty && row[column.Display.sourceProperty] ?\r\n                                    row[column.Display.sourceProperty]: false) ||'EUR':'symbol'| todefine:\r\n                                    column.Display.handleError}}\r\n\r\n                                    <div class=\"tool-tip\" *ngIf=\"this.showOnToolTip(row,column.Property)\">\r\n                                        {{this.showOnToolTip(row,column.Property)}}\r\n                                    </div>\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'percent'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] * column.Display.multiplier | percent : column.Display.format\r\n                                    ||'1.0-2'| todefine: column.Display.handleError}}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'number'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] * column.Display.multiplier| number: column.Display.format\r\n                                    ||'1.0-3' | todefine : column.Display.handleError}}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] | tofixedsizeinteger : column.Display.completingCaracter : column.Display.width }}\r\n                                </span>\r\n                                <span *ngSwitchDefault [innerText]=\"row[column.Property]\">\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div *ngIf=\"isUndefined(row[column.Property])\">\r\n                                <span *ngIf=\"!isUndefined(column.Display.nullCaseText)\" class=\"mw-invalid\">\r\n                                    {{ column.Display.nullCaseText }}\r\n                                </span>\r\n\r\n                                <span *ngIf=\"isUndefined(column.Display.nullCaseText)\">\r\n                                    &nbsp;&nbsp;&nbsp;\r\n                                </span>\r\n                            </div>\r\n\r\n                        </ng-template>\r\n\r\n                        <ng-template alg-editMode>\r\n                            <ng-container [ngSwitch]=\"this.getFieldType(column.Property)\">\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Date\">\r\n                                    <input class=\"form-control\" type=\"text\" placeholder=\"Sélectionner une date\"\r\n                                        bsDatepicker [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                        [bsConfig]=\"this.bsConfig\" [(ngModel)]=\"row[column.Property]\" focusable\r\n                                        tabindex=\"0\" />\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Integer\">\r\n                                    <input class=\"form-control\" type=\"number\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [name]=\"column.Property\" focusable ng-pattern=\"/^[0-9]+$/\" tabindex=\"0\" />\r\n                                </ng-container>\r\n                                <!-- *ngIf=\"!isUndefined(column.ToolTipProperty)\" -->\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.CheckBox\">\r\n                                    <table class=checkbox-table>\r\n                                        <td><input type=\"checkbox\" [(ngModel)]=\"row[column.Property]\"\r\n                                                [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                                [readonly]=\"this.getFieldReadOnly(column.Property)\" focusable\r\n                                                tabindex=\"0\">\r\n                                        </td>\r\n                                    </table>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"this.filterType.ComboBox\">\r\n                                    <ng-select class=\"grid-select\"\r\n                                        placeholder=\"Sélectionner {{this.getField(column.Property).Label}}\"\r\n                                        [items]=\"this.getField(column.Property).Data\"\r\n                                        [name]=\"this.getField(column.Property).PropertyName\"\r\n                                        [multiple]=\"this.getField(column.Property).MultipleSelection\"\r\n                                        [hideSelected]=\"this.getField(column.Property).HideSelected\"\r\n                                        bindValue=\"{{this.getField(column.Property).ValueMember}}\"\r\n                                        bindLabel=\"{{this.getField(column.Property).DisplayMember}}\"\r\n                                        [(ngModel)]=\"row[column.Property]\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" OnEnter focusable\r\n                                        tabindex=\"0\">\r\n                                    </ng-select>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Text\">\r\n                                    <textarea class=\"form-control\" rows=\"5\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" focusable tabindex=\"0\">\r\n                                        </textarea>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <input type=\"text\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" [name]=\"column.Property\"\r\n                                        [id]=\"column.Property\" tabindex=\"0\" focusable />\r\n                                </ng-container>\r\n\r\n                            </ng-container>\r\n\r\n                        </ng-template>\r\n\r\n                    </alg-datagrid-cell>\r\n                </td>\r\n                <ng-container *ngIf=\"enableLastColumnResize\">\r\n                    <td></td>\r\n                </ng-container>\r\n            </tr>\r\n            <ng-container *ngIf=\"this.displayDetail\">\r\n                <tr [attr.id]=\"row.Id + '_detail'\" class=\"toggleable\">\r\n                <th></th>\r\n                <td [attr.colspan]=\"this.columns.length +1\">\r\n                    <div [attr.id]=\"row.Id + '_detail_div'\" class=\"detail-div\">\r\n                        qmsldkqsd <br>\r\n                        qmsldkmqd<br>\r\n                        qmsldkmqdqmlskd,mq<br><br>\r\n                        mqlkdq<br>\r\n\r\n                    </div>\r\n                </td>\r\n                </tr>\r\n            </ng-container>\r\n            </ng-container>\r\n        </tbody>\r\n        <tfoot></tfoot>\r\n    </table>\r\n</div>\r\n",
+			template: "<div #datagridContainer [class]=\"this.datagridClass\">\r\n    <table class=\"datagrid-custom-datatable\">\r\n        <thead>\r\n            <tr>\r\n                <th class=\"header row-state\"></th>\r\n                <th #thHeader [ngClass]=\"col.Display.type\" [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                    *ngFor=\"let col of this.columns; let i = index\" (click)=\"sortHeaderClick(col.Property)\" [ngClass]=\"{\r\n                            sorting: isSorting(col.Property),\r\n                            sorting_asc: isSortAsc(col.Property),\r\n                            sorting_desc: isSortDesc(col.Property)}\" [attr.class]=\"this.getHeaderStyle(col.Property)\">\r\n                    <label>{{ getHeaderLabel(col) }}</label>\r\n                </th>\r\n                <ng-container *ngIf=\"enableLastColumnResize\">\r\n                    <th #lastColumnHeader class=\"header last-column\"></th>\r\n                </ng-container>\r\n\r\n            </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n            <ng-container *ngFor=\"let row of this.data.Values; let r = index\" >\r\n            <tr [attr.class]=\"getStyleClass(r, row)\"\r\n                [attr.id]=\"guid.toString() + '-row-' + row.Id\" (click)=\"selectRow(row.Id, $event)\"\r\n                (mousedown)=\"handleRowMouseDown(row.Id, $event)\" (mouseup)=\"handleRowMouseUp(row.Id, $event)\"\r\n                [class.first-row]=\"r == 0\">\r\n\r\n                <!--  -->\r\n                <th [attr.class]=\"getRowStateStyle(r, row)\">\r\n                    <ng-container *ngIf=\"isModified(row) && ! isInvalid(row) && ! isWarning(row)\">\r\n                        <div>\r\n                            ...\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"isInvalid(row)\">\r\n                        <div>\r\n                            <img class=\"error-row-icon\" src=\"assets/images/error.svg\" />\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"isWarning(row) && ! isInvalid(row)\">\r\n                        <div>\r\n                            <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" />\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"this.displayDetail\">\r\n                        <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n                            <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n                        </button>\r\n                    </ng-container>\r\n                </th>\r\n\r\n                <td [attr.class]=\"getCellStyleClass(r, row, column)\" *ngFor=\"let column of this.columns; index as i\">\r\n                    <alg-datagrid-cell #dataGridCellComponent class=\"gridcell-container\" [entity]=\"row\"\r\n                        [isEditable]=\"this.enableEdit(column.Property,row)\" [property]=\"column.Property\"\r\n                        (keydown)=\"this.onKeyDown($event)\" (update)=\"this.updateEntity($event,column.Property)\">\r\n\r\n                        <ng-template alg-viewMode>\r\n\r\n                            <div [ngSwitch]=\"column.Display.type\" *ngIf=\"!isUndefined(row[column.Property])\">\r\n                                <div *ngSwitchCase=\"'url'\">\r\n                                    <a [routerLink]=\"[column.Display.baseUrl,row[column.Property]]\">\r\n                                        {{ row.Id || row[column.Property] }}\r\n                                    </a>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n                                    <img *ngIf=\"column.Display.imagePath.length == 0\"\r\n                                        [src]=\"(column.Display.imgBase || '') + (column.Display.sourceProperty? row[column.Display.sourceProperty]: row[column.Property])\" />\r\n\r\n                                    <alg-image *ngIf=\"column.Display.imagePath.length != 0\"\r\n                                        [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n                                    </alg-image>\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n                                    \r\n                                    <alg-image \r\n                                        [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                    </alg-image>\r\n\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n                                    <img *ngIf=\"column.Display.imagePath.length == 0\"\r\n                                        [src]=\"(column.Display.imgBase || '') + (column.Display.sourceProperty? row[column.Display.sourceProperty]: row[column.Property])\" />\r\n\r\n                                    <alg-image *ngIf=\"column.Display.imagePath.length != 0\" [wide]=\"true\"\r\n                                        [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                    </alg-image>\r\n                                    <!-- Pop up tool tip -->\r\n                                    <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                        {{ row[column.ToolTipProperty] }}\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'date'\">{{row[column.Property]| date: column.Display.format\r\n                                    ||'dd/MM/yyyy'}} </span>\r\n                                <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n                                <span *ngSwitchCase=\"'datetime'\">{{getdatetime(row[column.Property])| date:\r\n                                    column.Display.format ||'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n                                <span *ngSwitchCase=\"'money'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\" class=\"money\">\r\n                                    {{row[column.Property]| currency: column.Display.currency ||\r\n                                    (column.Display.sourceProperty && row[column.Display.sourceProperty] ?\r\n                                    row[column.Display.sourceProperty]: false) ||'EUR':'symbol'| todefine:\r\n                                    column.Display.handleError}}\r\n\r\n                                    <div class=\"tool-tip\" *ngIf=\"this.showOnToolTip(row,column.Property)\">\r\n                                        {{this.showOnToolTip(row,column.Property)}}\r\n                                    </div>\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'percent'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] * column.Display.multiplier | percent : column.Display.format\r\n                                    ||'1.0-2'| todefine: column.Display.handleError}}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'number'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] * column.Display.multiplier| number: column.Display.format\r\n                                    ||'1.0-3' | todefine : column.Display.handleError}}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n                                    [class.red]=\"!row[column.Property] && column.Display.handleError\">\r\n                                    {{row[column.Property] | tofixedsizeinteger : column.Display.completingCaracter : column.Display.width }}\r\n                                </span>\r\n                                <span *ngSwitchDefault [innerText]=\"row[column.Property]\">\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div *ngIf=\"isUndefined(row[column.Property])\">\r\n                                <span *ngIf=\"!isUndefined(column.Display.nullCaseText)\" class=\"mw-invalid\">\r\n                                    {{ column.Display.nullCaseText }}\r\n                                </span>\r\n\r\n                                <span *ngIf=\"isUndefined(column.Display.nullCaseText)\">\r\n                                    &nbsp;&nbsp;&nbsp;\r\n                                </span>\r\n                            </div>\r\n\r\n                        </ng-template>\r\n\r\n                        <ng-template alg-editMode>\r\n                            <ng-container [ngSwitch]=\"this.getFieldType(column.Property)\">\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Date\">\r\n                                    <input class=\"form-control\" type=\"text\" placeholder=\"Sélectionner une date\"\r\n                                        bsDatepicker [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                        [bsConfig]=\"this.bsConfig\" [(ngModel)]=\"row[column.Property]\" focusable\r\n                                        tabindex=\"0\" />\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Integer\">\r\n                                    <input class=\"form-control\" type=\"number\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [name]=\"column.Property\" focusable ng-pattern=\"/^[0-9]+$/\" tabindex=\"0\" />\r\n                                </ng-container>\r\n                                <!-- *ngIf=\"!isUndefined(column.ToolTipProperty)\" -->\r\n\r\n                                <ng-container *ngSwitchCase=\"this.filterType.CheckBox\">\r\n                                    <table class=checkbox-table>\r\n                                        <td><input type=\"checkbox\" [(ngModel)]=\"row[column.Property]\"\r\n                                                [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                                [readonly]=\"this.getFieldReadOnly(column.Property)\" focusable\r\n                                                tabindex=\"0\">\r\n                                        </td>\r\n                                    </table>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"this.filterType.ComboBox\">\r\n                                    <ng-select class=\"grid-select\"\r\n                                        placeholder=\"Sélectionner {{this.getField(column.Property).Label}}\"\r\n                                        [items]=\"this.getField(column.Property).Data\"\r\n                                        [name]=\"this.getField(column.Property).PropertyName\"\r\n                                        [multiple]=\"this.getField(column.Property).MultipleSelection\"\r\n                                        [hideSelected]=\"this.getField(column.Property).HideSelected\"\r\n                                        bindValue=\"{{this.getField(column.Property).ValueMember}}\"\r\n                                        bindLabel=\"{{this.getField(column.Property).DisplayMember}}\"\r\n                                        [(ngModel)]=\"row[column.Property]\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" OnEnter focusable\r\n                                        tabindex=\"0\">\r\n                                    </ng-select>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"this.filterType.Text\">\r\n                                    <textarea class=\"form-control\" rows=\"5\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [name]=\"this.getFieldPropertyName(column.Property)\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" focusable tabindex=\"0\">\r\n                                        </textarea>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <input type=\"text\" [(ngModel)]=\"row[column.Property]\"\r\n                                        [readonly]=\"this.getFieldReadOnly(column.Property)\" [name]=\"column.Property\"\r\n                                        [id]=\"column.Property\" tabindex=\"0\" focusable />\r\n                                </ng-container>\r\n\r\n                            </ng-container>\r\n\r\n                        </ng-template>\r\n\r\n                    </alg-datagrid-cell>\r\n                </td>\r\n                <ng-container *ngIf=\"enableLastColumnResize\">\r\n                    <td></td>\r\n                </ng-container>\r\n            </tr>\r\n            <ng-container *ngIf=\"this.displayDetail\">\r\n                <tr [attr.id]=\"row.Id + '_detail'\" class=\"toggleable\">\r\n                <th></th>\r\n                <td [attr.colspan]=\"this.columns.length +1\">\r\n                    <div [attr.id]=\"row.Id + '_detail_div'\" class=\"detail-div\">\r\n                        qmsldkqsd <br>\r\n                        qmsldkmqd<br>\r\n                        qmsldkmqdqmlskd,mq<br><br>\r\n                        mqlkdq<br>\r\n\r\n                    </div>\r\n                </td>\r\n                </tr>\r\n            </ng-container>\r\n            </ng-container>\r\n        </tbody>\r\n        <tfoot></tfoot>\r\n    </table>\r\n</div>\r\n",
 			styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A  <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}:host{flex:1}table thead .sorting,table thead .sorting_asc,table thead .sorting_desc,table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table thead th:first-child{position:sticky;left:0;z-index:2}table tbody th:first-child{position:sticky;left:0;z-index:1}table tbody th:first-child div{text-align:center;vertical-align:middle;line-height:20px}table tbody tr.row-odd th:first-child{background:#ebf0ff}table tbody tr.row-even th:first-child{background:#fff}table tbody tr.selected.row-odd.mw-invalid th:first-child,table tbody tr.selected.row-even.mw-invalid th:first-child,table tbody tr.selected.row-odd.mw-warning th:first-child,table tbody tr.selected.row-even.mw-warning th:first-child,table tbody tr.selected.row-even th:first-child,table tbody tr.selected.row-odd th:first-child{background-color:#8ea7f8;color:#fff}table tbody tr.row-odd.mw-invalid th:first-child,table tbody tr.row-even.mw-invalid th:first-child{background-color:#f2dede}table tbody tr.row-odd.mw-warning th:first-child,table tbody tr.row-even.mw-warning th:first-child{background-color:#fff4de}table thead th{position:-webkit-sticky;position:sticky;top:0;z-index:1;background:#fff;box-shadow:inset 0 -1px 0 var(--main-bg-color)}.header.last-column{border-left:none!important;width:100%}table thead .sorting{background-image:none;cursor:pointer}table thead .sorting_asc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxNjIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxNTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+z5ABTAAAAI5JREFUeNpi/P//PwO1ABMDFQELIQXVjfe4gFQbEJe11iv9otRl2UCcBcSphBQy4gszoKu0gNROIJYB4jtA7AF03V2SXQY0iBFIFUMNAgEVIM6DipPsTQcgDkQTSwRia5IMA9rOC6RqgVgQTQokXgOUZyfFZSFQF/zAgh2BOIjkCBjQRDtq2Khh9DAMIMAAT9AmNBDSXegAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_desc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxQTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxOTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1fsfwAAAAJdJREFUeNpi/P//PwO1ABMDFcGoYaOG0cMwFmyC1Y33IoHUAiD+h8MBGa31SvOJddk6IN4PxBxY8FEgXkO0N4G2/gRSLUD8GU3qPRA3A+U/kxpmIBege2U9EB/ApYERX6kBDDtlILUDiFWA+AkQuwNddY2s2ARqvAukJgDxbyCehM8gnLGJBmYDsSoQTyWkkHHQFo4AAQYAAA0piq4hbqwAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-image:none}.checkbok-container{align-items:center;margin:0;padding:0}.gridcell-container{padding:0;min-width:fit-content}.gridcell-container input[type=number]{display:block;size:1;font-size:10pt;width:100%!important;height:100%;margin:0!important;border:2px solid #F78383}.datagrid-custom-container{height:100%;overflow:auto;margin-left:-1px}.datagrid-custom-datatable{table-layout:fixed;cursor:pointer;border-spacing:0px}.datagrid-custom-datatable td{box-shadow:none;padding:2px 5px;white-space:nowrap}.datagrid-custom-datatable td.row-state{padding:2px 5px;width:16px}.datagrid-custom-datatable td.img{padding:2px 5px}.datagrid-custom-datatable td.row-state img{height:16px;width:16px;margin-top:-3px;padding:0}.datagrid-custom-datatable tr{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header{vertical-align:bottom;padding:2px 5px 2px 0;font-weight:400;color:var(--main-bg-color);white-space:nowrap;line-height:25px;min-width:32px;margin-bottom:5px}.header.img{min-width:16px}.header.row-state{min-width:27px;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:2;background:#fff;border-left:none;border-right:none}.header label{cursor:pointer;margin-bottom:0;margin-right:10px;padding-left:5px;width:100%}.row-odd{background-color:#ebf0ff}.row-even{background-color:#f7faff}.error-row-icon{padding:2px;width:20px}.selected{background-color:#8ea7f8;color:#fff}.mw-invalid{font-weight:600;background-color:#f2dede;border:1px solid var(--red-error)}.mw-invalid td{background-color:#f2dede!important}span.mw-invalid{padding:0 3px;color:var(--red-error);background-color:transparent}.mw-warning.selected,.mw-invalid.selected{background-color:#8ea7f8}.mw-warning.selected td,.mw-invalid.selected td{background-color:#8ea7f8!important}.mw-warning{font-weight:600;background-color:#fff4de;border:1px solid var(--orange-algorima)}.mw-warning td{background-color:#fff4de!important}.mw-modified{font-weight:600;border:1px solid var(--main-bg-color)}.datagrid-custom-datatable>tbody>tr{z-index:50}.image{position:relative;display:flex;flex-direction:row}.image img{height:20px;width:auto}td.money{position:relative}.tool-tip{visibility:hidden;background-color:#424242;color:#fff;text-align:left;border-radius:3px;font-size:15px;position:absolute;z-index:1;top:-10%;left:150%;opacity:0;transition:opacity .3s;padding:5px 15px;white-space:nowrap;overflow:visible}.tool-tip:after{content:\" \";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent rgb(66,66,66) transparent transparent}.image:hover .tool-tip{visibility:visible;opacity:1}td.money:hover .tool-tip{visibility:visible;opacity:1;left:100%;height:28px;font-size:13px;margin-top:0;padding:5px 10px 10px}.disabled{pointer-events:none}.edit-mode{background-color:#fff;border:1px solid #4465C9;min-width:90px!important;height:30px!important}.edit-mode .form-control{min-height:0px}.edit-mode .inactivated{background-color:#dbe4ff80}.edit-mode .inactivated-fo{background-color:#dbe4ff}.edit-mode .ecartclass{border:2px solid #4465C9}.edit-mode .error-cell{font-weight:700;color:#f78383!important}.edit-mode .selected{color:#4d5a81}.highlight-1,.highlight-1.selected,.edit-mode.highlight-1.selected{background-color:#4d5a81!important;color:#fff!important}.highlight-2,.highlight-2.selected,.edit-mode.highlight-2.selected{background-color:#dbe4ff!important;color:#4d5a81!important}.highlight-3,.highlight-3.selected,.edit-mode.highlight-3.selected{background-color:#4465c9!important;color:#fff!important}.highlight-4,.highlight-4.selected,.edit-mode.highlight-4.selected{background-color:#f78383!important;color:#fff!important}.highlight-5,.highlight-5.selected{background-color:#4465c9!important;color:#fff}.fixed-column{position:-webkit-sticky;position:sticky;left:27px;z-index:2!important;border-left:none}.fixed-header{position:-webkit-sticky;position:sticky;left:27px;z-index:3!important;background:#fff}.has-focus{padding:0!important}.has-focus input,.has-focus input:focus-visible,.has-focus input:focus{border-radius:0;outline:none!important;width:100%}.edit-mode.has-focus{border:none;width:90px!important}.bordered{border-left:1px solid #14358f!important;border-right:1px solid #14358f!important}.match-keywords{color:var(--main-bg-color);font-weight:700}.datagrid-img img{height:20px;width:20px}.right-align{text-align:right}.left-align{text-align:left}.detail-div{height:0px;overflow:hidden;transition:all .2s linear;width:100%}.fa-custom{font-size:smaller}.detail-div-show{height:150px;transition:all .2s linear}.toggleable{visibility:collapse}.toggleable-show{visibility:visible}.toggle-button-down{transform:rotate(90deg);transition:all .2s linear}\n"]
 		}]
 	}],
@@ -15742,6 +15752,9 @@ var DataGridComponent = class DataGridComponent {
 	isUndefined(val) {
 		return Utilities.IsNil(val);
 	}
+	getHeaderLabel(column) {
+		return column.Display?.enumMap?.length ? "" : column.Name;
+	}
 	getEnumImageUrl(row, column) {
 		return this.imageService.getEnumImageUrlForGrid(row, column);
 	}
@@ -16098,7 +16111,7 @@ var DataGridComponent = class DataGridComponent {
 				}
 			],
 			ngImport: i0,
-			template: "<div #datagridContainer [class]=\"this.datagridClass\">\r\n    <ng-container>\r\n        <table class=\"data-grid-datatable\">\r\n            <ng-container *ngIf=\"this.facade.style as ctx\">\r\n                <ng-container *ngIf=\"this.facade.config.columns$ | async as rcolumns\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th class=\"header row-state\" (click)=\"addFilterQuery()\"></th>\r\n                            <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                                    (click)=\"sortHeaderClick(col.Property)\"\r\n                                    [ngClass]=\"{ sorting: this.facade.filter.isSorting(col.Property),\r\n                                        sorting_asc: this.facade.filter.isAsc(col.Property),\r\n                                        sorting_desc: this.facade.filter.isDesc(col.Property)}\"\r\n                                    [attr.class]=\"'header' | gridStyle : ctx : { column : col }\">\r\n                                <label>{{ col.Name }}</label>\r\n                            </th>\r\n                            <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"></th>\r\n\r\n                        </tr>\r\n                        <ng-container *ngIf=\"this.facade.filter.additionalQuery$ | async as additionalQuery\">\r\n                            <tr #thFilterRows *ngFor=\"let filterRow of additionalQuery.Rows;let i = index\" >\r\n                                <th class=\"filter-header row-state\" (click)=\"removeFilterQuery(i)\"></th>\r\n                                <th class=\"filter-header\" [ngClass]=\"{disabled: !col.IsFilterEnabled}\" *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-filter-' + i\">\r\n                                    <input *ngIf=\"col.IsFilterEnabled\" type=\"text\"\r\n                                        class=\"filter-header-input\"\r\n                                        name=\"keyword\"\r\n                                        #uniquename=\"ngModel\"\r\n                                        [attr.id]=\"guid.toString() + '-filter-input-' + col.Property\"\r\n                                        [(ngModel)]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValue\"\r\n                                        (ngModelChange)=\"handleFilterChanged($event, filterRow, col.Property)\"\r\n                                        (change)=\"validateFilterChanged($event, filterRow, col.Property)\"\r\n                                    />\r\n                                </th>\r\n                                <ng-container>\r\n                                    <th #lastColumnFilter class=\"filter-header last-column\"></th>\r\n                                </ng-container>\r\n                            </tr>\r\n                        </ng-container>\r\n                    </thead>\r\n\r\n                    <tbody>\r\n                        <ng-container *ngIf=\"this.facade.data\">\r\n                            <ng-container *ngFor=\"let row of this.data.Values; let r = index;\">\r\n                            <tr\r\n                                [attr.class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates  }\"\r\n                                [attr.id]=\"guid.toString() + '-row-' + row.Id\"\r\n                                (mousedown)=\"onRowMouseDown(row, $event)\"\r\n                                (mouseup)=\"onRowMouseUp(row, $event)\"\r\n                                (click)=\"onRowClick(row, $event)\"\r\n\r\n                                [rowRef]=\"guid + '-row-' + row.Id\"\r\n                            >\r\n\r\n                            <th [attr.class]=\"'rowstate' | gridStyle : ctx : { row : row }\">\r\n                                <ng-container *ngIf=\"selectionStyler.isModified(row) && !selectionStyler.isInvalid(row) && !selectionStyler.isWarning(row)\">\r\n                                    <div class=\"new-rowstate\"><span>...</span></div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"selectionStyler.isInvalid(row)\">\r\n                                    <div> <img class=\"error-row-icon\" src=\"assets/images/error.svg\" /> </div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"selectionStyler.isWarning(row) && !selectionStyler.isInvalid(row)\">\r\n                                    <div> <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" /> </div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"ctx.displayDetail\">\r\n                                    <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n                                        <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n                                    </button>\r\n                                </ng-container>\r\n                            </th>\r\n\r\n                            <td *ngFor=\"let column of rcolumns; index as i\"\r\n                                [attr.class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\">\r\n\r\n                                <alg-datagrid-cell #dataGridCellComponent\r\n                                    class=\"gridcell-container\"\r\n                                    [entity]=\"row\"\r\n                                    [isEditable]=\"ctx.canEditCell(row,column)\"\r\n                                    [property]=\"column.Property\"\r\n                                    (keydown)=\"this.onKeyDown($event)\"\r\n                                    (update)=\"this.updateEntity($event,column.Property)\"\r\n                                    (contextmenu)=\"openContextMenu($event, dataGridCellComponent)\">\r\n\r\n                                    <ng-template alg-editMode>\r\n                                        <alg-field\r\n                                            [field]=\"facade.editor.getField(column.Property)\"\r\n                                            [form]=\"getRowForm(row)\"\r\n                                            [showLabel]=\"false\"\r\n                                            (propertyChanged)=\"dataGridCellComponent.onPropertyChanged($event)\"\r\n                                            >\r\n                                            <!-- [focusable]=\"cellFocus\" -->\r\n                                        </alg-field>\r\n                                    </ng-template>\r\n                                    <ng-template alg-viewMode>\r\n\r\n                                        <div [ngSwitch]=\"column.Display?.type\" *ngIf=\"!isUndefined(row[column.Property])\">\r\n                                            <div *ngSwitchCase=\"'url'\">\r\n                                                <a [routerLink]=\"[$safeNavigationMigration(column.Display?.baseUrl),row[column.Property]]\">\r\n                                                    {{ row.Id || row[column.Property] }}\r\n                                                </a>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n                                                <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n                                                    [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n                                                <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\"\r\n                                                    [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n\r\n                                                <alg-image\r\n                                                    [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n                                                <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n                                                    [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n                                                <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\" [wide]=\"true\"\r\n                                                    [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <span *ngSwitchCase=\"'date'\">\r\n                                                {{row[column.Property]| date: column.Display?.format || 'dd/MM/yyyy'}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n\r\n                                            <span *ngSwitchCase=\"'datetime'\">{{row[column.Property] | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n                                            <span *ngSwitchCase=\"'money'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\"\r\n                                                class=\"money\">\r\n                                                {{\r\n                                                    row[column.Property]\r\n                                                    | currency: column.Display?.currency\r\n                                                    || (column.Display?.sourceProperty && row[column.Display?.sourceProperty] ? row[column.Display?.sourceProperty] : false)\r\n                                                    || 'EUR' : 'symbol'\r\n\r\n                                                    | todefine: $safeNavigationMigration(column.Display?.handleError)\r\n                                                }}\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"ctx.showOnToolTip(row,column)\">\r\n                                                    {{ctx.showOnToolTip(row,column)}}\r\n                                                </div>\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'percent'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | percent : column.Display?.format\r\n                                                || '1.0-2' | todefine: $safeNavigationMigration(column.Display?.handleError)}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'number'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | number: column.Display?.format\r\n                                                || '1.0-3' | todefine : $safeNavigationMigration(column.Display?.handleError)}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] | tofixedsizeinteger : $safeNavigationMigration(column.Display?.completingCaracter) : $safeNavigationMigration(column.Display?.width) }}\r\n                                            </span>\r\n                                            <span *ngSwitchDefault [innerText]=\"column.Property == 'Id' ? (row[column.Property] < 0 ? '' : row[column.Property]) : row[column.Property]\">\r\n                                            </span>\r\n                                        </div>\r\n\r\n                                        <div *ngIf=\"isUndefined(row[column.Property])\">\r\n                                            <span *ngIf=\"!isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\" class=\"mw-invalid\">\r\n                                                {{ column.Display?.nullCaseText }}\r\n                                            </span>\r\n\r\n                                            <span *ngIf=\"isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\">\r\n                                                &nbsp;&nbsp;&nbsp;\r\n                                            </span>\r\n                                        </div>\r\n\r\n                                    </ng-template>\r\n\r\n                                </alg-datagrid-cell>\r\n                            </td>\r\n                            <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n                                <td></td>\r\n                            </ng-container>\r\n                            </tr>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </tbody>\r\n\r\n                    <tfoot>\r\n                        <tr class=\"empty-row\" *ngIf=\"hasAggregates\">\r\n                             <td></td>\r\n                        </tr>\r\n                        <tr class=\"aggregation-row\" *ngIf=\"hasAggregates\">\r\n                            <td class=\"row-state\"></td>\r\n                            <td *ngFor=\"let column of rcolumns; index as i\" [attr.class]=\"'cell' | gridStyle : ctx : { column : column, index : i }\">\r\n\r\n                                <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n                                    <span [ngSwitch]=\"column.Display?.type\">\r\n\r\n                                        <span *ngSwitchCase=\"'money'\" class=\"money\">\r\n                                            {{ agg.value | currency: getColCurrency(column) }}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'date'\">\r\n                                            {{agg.value | date: column.Display?.format || 'dd/MM/yyyy'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'datetime'\">\r\n                                            {{agg.value | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'number'\">\r\n                                            {{agg.value | number: column.Display?.format || '1.0-3'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchDefault>\r\n                                            {{agg.value}}\r\n                                        </span>\r\n\r\n                                    </span>\r\n\r\n                                </ng-container>\r\n\r\n                            </td>\r\n\r\n                            <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n                                <td class=\"last-column\"></td>\r\n                            </ng-container>\r\n\r\n                        </tr>\r\n                    </tfoot>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </ng-container>\r\n</div>\r\n\r\n\r\n<div class=\"context-menu\"\r\n    [ngStyle]=\"{ top: contextMenuPosition.y + 'px', left: contextMenuPosition.x + 'px' }\"\r\n    *ngIf=\"contextMenuVisible\">\r\n    <ul>\r\n      <li (click)=\"copyValue()\">Copier</li>\r\n      <li (click)=\"editValue()\">Modifier</li>\r\n      <li (click)=\"searchValue()\" [title]=\"'Rechercher ' + getSelectedValue()\">\r\n        Rechercher {{ this.getSelectedValue() }}\r\n    </li>\r\n\r\n      <li class=\"separator\"></li>\r\n\r\n      <li (click)=\"setAggregation('SUM')\">Somme</li>\r\n        <li (click)=\"setAggregation('AVG')\">Moyenne</li>\r\n        <li (click)=\"setAggregation('COUNT')\">Count</li>\r\n        <li (click)=\"setAggregation('MIN')\">Min</li>\r\n        <li (click)=\"setAggregation('MAX')\">Max</li>\r\n        <li (click)=\"clearAggregation()\">Supprimer agrégation</li>\r\n    </ul>\r\n</div>\r\n",
+			template: "<div #datagridContainer [class]=\"this.datagridClass\">\r\n    <ng-container>\r\n        <table class=\"data-grid-datatable\">\r\n            <ng-container *ngIf=\"this.facade.style as ctx\">\r\n                <ng-container *ngIf=\"this.facade.config.columns$ | async as rcolumns\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th class=\"header row-state\" (click)=\"addFilterQuery()\"></th>\r\n                            <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                                    (click)=\"sortHeaderClick(col.Property)\"\r\n                                    [ngClass]=\"{ sorting: this.facade.filter.isSorting(col.Property),\r\n                                        sorting_asc: this.facade.filter.isAsc(col.Property),\r\n                                        sorting_desc: this.facade.filter.isDesc(col.Property)}\"\r\n                                    [attr.class]=\"'header' | gridStyle : ctx : { column : col }\">\r\n                                <label>{{ getHeaderLabel(col) }}</label>\r\n                            </th>\r\n                            <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"></th>\r\n\r\n                        </tr>\r\n                        <ng-container *ngIf=\"this.facade.filter.additionalQuery$ | async as additionalQuery\">\r\n                            <tr #thFilterRows *ngFor=\"let filterRow of additionalQuery.Rows;let i = index\" >\r\n                                <th class=\"filter-header row-state\" (click)=\"removeFilterQuery(i)\"></th>\r\n                                <th class=\"filter-header\" [ngClass]=\"{disabled: !col.IsFilterEnabled}\" *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-filter-' + i\">\r\n                                    <input *ngIf=\"col.IsFilterEnabled\" type=\"text\"\r\n                                        class=\"filter-header-input\"\r\n                                        name=\"keyword\"\r\n                                        #uniquename=\"ngModel\"\r\n                                        [attr.id]=\"guid.toString() + '-filter-input-' + col.Property\"\r\n                                        [(ngModel)]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValue\"\r\n                                        (ngModelChange)=\"handleFilterChanged($event, filterRow, col.Property)\"\r\n                                        (change)=\"validateFilterChanged($event, filterRow, col.Property)\"\r\n                                    />\r\n                                </th>\r\n                                <ng-container>\r\n                                    <th #lastColumnFilter class=\"filter-header last-column\"></th>\r\n                                </ng-container>\r\n                            </tr>\r\n                        </ng-container>\r\n                    </thead>\r\n\r\n                    <tbody>\r\n                        <ng-container *ngIf=\"this.facade.data\">\r\n                            <ng-container *ngFor=\"let row of this.data.Values; let r = index;\">\r\n                            <tr\r\n                                [attr.class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates  }\"\r\n                                [attr.id]=\"guid.toString() + '-row-' + row.Id\"\r\n                                (mousedown)=\"onRowMouseDown(row, $event)\"\r\n                                (mouseup)=\"onRowMouseUp(row, $event)\"\r\n                                (click)=\"onRowClick(row, $event)\"\r\n\r\n                                [rowRef]=\"guid + '-row-' + row.Id\"\r\n                            >\r\n\r\n                            <th [attr.class]=\"'rowstate' | gridStyle : ctx : { row : row }\">\r\n                                <ng-container *ngIf=\"selectionStyler.isModified(row) && !selectionStyler.isInvalid(row) && !selectionStyler.isWarning(row)\">\r\n                                    <div class=\"new-rowstate\"><span>...</span></div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"selectionStyler.isInvalid(row)\">\r\n                                    <div> <img class=\"error-row-icon\" src=\"assets/images/error.svg\" /> </div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"selectionStyler.isWarning(row) && !selectionStyler.isInvalid(row)\">\r\n                                    <div> <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" /> </div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"ctx.displayDetail\">\r\n                                    <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n                                        <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n                                    </button>\r\n                                </ng-container>\r\n                            </th>\r\n\r\n                            <td *ngFor=\"let column of rcolumns; index as i\"\r\n                                [attr.class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\">\r\n\r\n                                <alg-datagrid-cell #dataGridCellComponent\r\n                                    class=\"gridcell-container\"\r\n                                    [entity]=\"row\"\r\n                                    [isEditable]=\"ctx.canEditCell(row,column)\"\r\n                                    [property]=\"column.Property\"\r\n                                    (keydown)=\"this.onKeyDown($event)\"\r\n                                    (update)=\"this.updateEntity($event,column.Property)\"\r\n                                    (contextmenu)=\"openContextMenu($event, dataGridCellComponent)\">\r\n\r\n                                    <ng-template alg-editMode>\r\n                                        <alg-field\r\n                                            [field]=\"facade.editor.getField(column.Property)\"\r\n                                            [form]=\"getRowForm(row)\"\r\n                                            [showLabel]=\"false\"\r\n                                            (propertyChanged)=\"dataGridCellComponent.onPropertyChanged($event)\"\r\n                                            >\r\n                                            <!-- [focusable]=\"cellFocus\" -->\r\n                                        </alg-field>\r\n                                    </ng-template>\r\n                                    <ng-template alg-viewMode>\r\n\r\n                                        <div [ngSwitch]=\"column.Display?.type\" *ngIf=\"!isUndefined(row[column.Property])\">\r\n                                            <div *ngSwitchCase=\"'url'\">\r\n                                                <a [routerLink]=\"[$safeNavigationMigration(column.Display?.baseUrl),row[column.Property]]\">\r\n                                                    {{ row.Id || row[column.Property] }}\r\n                                                </a>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n                                                <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n                                                    [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n                                                <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\"\r\n                                                    [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n\r\n                                                <alg-image\r\n                                                    [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n                                                <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n                                                    [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n                                                <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\" [wide]=\"true\"\r\n                                                    [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <span *ngSwitchCase=\"'date'\">\r\n                                                {{row[column.Property]| date: column.Display?.format || 'dd/MM/yyyy'}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n\r\n                                            <span *ngSwitchCase=\"'datetime'\">{{row[column.Property] | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n                                            <span *ngSwitchCase=\"'money'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\"\r\n                                                class=\"money\">\r\n                                                {{\r\n                                                    row[column.Property]\r\n                                                    | currency: column.Display?.currency\r\n                                                    || (column.Display?.sourceProperty && row[column.Display?.sourceProperty] ? row[column.Display?.sourceProperty] : false)\r\n                                                    || 'EUR' : 'symbol'\r\n\r\n                                                    | todefine: $safeNavigationMigration(column.Display?.handleError)\r\n                                                }}\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"ctx.showOnToolTip(row,column)\">\r\n                                                    {{ctx.showOnToolTip(row,column)}}\r\n                                                </div>\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'percent'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | percent : column.Display?.format\r\n                                                || '1.0-2' | todefine: $safeNavigationMigration(column.Display?.handleError)}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'number'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | number: column.Display?.format\r\n                                                || '1.0-3' | todefine : $safeNavigationMigration(column.Display?.handleError)}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] | tofixedsizeinteger : $safeNavigationMigration(column.Display?.completingCaracter) : $safeNavigationMigration(column.Display?.width) }}\r\n                                            </span>\r\n                                            <span *ngSwitchDefault [innerText]=\"column.Property == 'Id' ? (row[column.Property] < 0 ? '' : row[column.Property]) : row[column.Property]\">\r\n                                            </span>\r\n                                        </div>\r\n\r\n                                        <div *ngIf=\"isUndefined(row[column.Property])\">\r\n                                            <span *ngIf=\"!isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\" class=\"mw-invalid\">\r\n                                                {{ column.Display?.nullCaseText }}\r\n                                            </span>\r\n\r\n                                            <span *ngIf=\"isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\">\r\n                                                &nbsp;&nbsp;&nbsp;\r\n                                            </span>\r\n                                        </div>\r\n\r\n                                    </ng-template>\r\n\r\n                                </alg-datagrid-cell>\r\n                            </td>\r\n                            <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n                                <td></td>\r\n                            </ng-container>\r\n                            </tr>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </tbody>\r\n\r\n                    <tfoot>\r\n                        <tr class=\"empty-row\" *ngIf=\"hasAggregates\">\r\n                             <td></td>\r\n                        </tr>\r\n                        <tr class=\"aggregation-row\" *ngIf=\"hasAggregates\">\r\n                            <td class=\"row-state\"></td>\r\n                            <td *ngFor=\"let column of rcolumns; index as i\" [attr.class]=\"'cell' | gridStyle : ctx : { column : column, index : i }\">\r\n\r\n                                <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n                                    <span [ngSwitch]=\"column.Display?.type\">\r\n\r\n                                        <span *ngSwitchCase=\"'money'\" class=\"money\">\r\n                                            {{ agg.value | currency: getColCurrency(column) }}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'date'\">\r\n                                            {{agg.value | date: column.Display?.format || 'dd/MM/yyyy'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'datetime'\">\r\n                                            {{agg.value | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'number'\">\r\n                                            {{agg.value | number: column.Display?.format || '1.0-3'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchDefault>\r\n                                            {{agg.value}}\r\n                                        </span>\r\n\r\n                                    </span>\r\n\r\n                                </ng-container>\r\n\r\n                            </td>\r\n\r\n                            <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n                                <td class=\"last-column\"></td>\r\n                            </ng-container>\r\n\r\n                        </tr>\r\n                    </tfoot>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </ng-container>\r\n</div>\r\n\r\n\r\n<div class=\"context-menu\"\r\n    [ngStyle]=\"{ top: contextMenuPosition.y + 'px', left: contextMenuPosition.x + 'px' }\"\r\n    *ngIf=\"contextMenuVisible\">\r\n    <ul>\r\n      <li (click)=\"copyValue()\">Copier</li>\r\n      <li (click)=\"editValue()\">Modifier</li>\r\n      <li (click)=\"searchValue()\" [title]=\"'Rechercher ' + getSelectedValue()\">\r\n        Rechercher {{ this.getSelectedValue() }}\r\n    </li>\r\n\r\n      <li class=\"separator\"></li>\r\n\r\n      <li (click)=\"setAggregation('SUM')\">Somme</li>\r\n        <li (click)=\"setAggregation('AVG')\">Moyenne</li>\r\n        <li (click)=\"setAggregation('COUNT')\">Count</li>\r\n        <li (click)=\"setAggregation('MIN')\">Min</li>\r\n        <li (click)=\"setAggregation('MAX')\">Max</li>\r\n        <li (click)=\"clearAggregation()\">Supprimer agrégation</li>\r\n    </ul>\r\n</div>\r\n",
 			styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A  <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}:host{flex:1}.header.last-column{border-left:none!important;width:100%}table thead .sorting,table thead .sorting_asc,table thead .sorting_desc,table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table thead th:first-child,table tfoot tr:first-child{position:sticky;left:0;z-index:2}table tbody th:first-child{position:sticky;left:0;z-index:1;border-right:none}table tbody th:first-child div{text-align:center;vertical-align:middle;line-height:20px}table tbody tr.row-odd th:first-child{background:#ebf0ff}table tbody tr.selected.row-odd.mw-invalid th:first-child,table tbody tr.selected.row-even.mw-invalid th:first-child,table tbody tr.selected.row-odd.mw-warning th:first-child,table tbody tr.selected.row-even.mw-warning th:first-child,table tbody tr.selected.row-even th:first-child,table tbody tr.selected.row-odd th:first-child{background-color:#8ea7f8;color:#fff}table tbody tr.row-odd.mw-invalid th:first-child,table tbody tr.row-even.mw-invalid th:first-child{background-color:#f2dede}table tbody tr.row-odd.mw-warning th:first-child,table tbody tr.row-even.mw-warning th:first-child{background-color:#fff4de}table thead th{position:-webkit-sticky;position:sticky;top:0;z-index:1;background:#fff;border-left:1px solid #3C5DC4;border-bottom:1px solid #3C5DC4}table thead .sorting{background-image:none;cursor:pointer}table thead .sorting_asc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxNjIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxNTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+z5ABTAAAAI5JREFUeNpi/P//PwO1ABMDFQELIQXVjfe4gFQbEJe11iv9otRl2UCcBcSphBQy4gszoKu0gNROIJYB4jtA7AF03V2SXQY0iBFIFUMNAgEVIM6DipPsTQcgDkQTSwRia5IMA9rOC6RqgVgQTQokXgOUZyfFZSFQF/zAgh2BOIjkCBjQRDtq2Khh9DAMIMAAT9AmNBDSXegAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_desc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxQTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxOTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1fsfwAAAAJdJREFUeNpi/P//PwO1ABMDFcGoYaOG0cMwFmyC1Y33IoHUAiD+h8MBGa31SvOJddk6IN4PxBxY8FEgXkO0N4G2/gRSLUD8GU3qPRA3A+U/kxpmIBege2U9EB/ApYERX6kBDDtlILUDiFWA+AkQuwNddY2s2ARqvAukJgDxbyCehM8gnLGJBmYDsSoQTyWkkHHQFo4AAQYAAA0piq4hbqwAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-image:none}.checkbok-container{align-items:center;margin:0;padding:0}.gridcell-container{padding:0;min-width:fit-content}.gridcell-container input[type=number]{display:block;size:1;font-size:10pt;width:100%!important;height:100%;margin:0!important;border:2px solid #F78383}.datagrid-custom-container{height:100%;overflow:auto;margin-left:-1px}.data-grid-datatable{table-layout:fixed;cursor:pointer;border-spacing:0px}.data-grid-datatable td{box-shadow:none;padding:2px 5px;white-space:nowrap}.data-grid-datatable td.row-state{padding:2px 5px;width:16px}.data-grid-datatable td.img{padding:2px 5px}.data-grid-datatable td.row-state img{height:16px;width:16px;margin-top:-3px;padding:0}.data-grid-datatable tr{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header{vertical-align:bottom;padding:2px 5px 2px 0;font-weight:400;color:#3c5dc4;white-space:nowrap;line-height:25px;min-width:32px;margin-bottom:5px}.header.img{min-width:16px}.header.row-state{min-width:27px;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:2;background:#fff;border-left:none;border-right:none}.filter-header{background-color:#f7f7f7!important}.filter-header.disabled{background-color:#9fa9c7!important}.filter-header.row-state:hover:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"57\" height=\"57\" viewBox=\"0 0 57 57\">%0D%0A  <path id=\"Rond_Croix\" data-name=\"Rond Croix\" d=\"M28.5,57A28.5,28.5,0,0,1,8.347,8.347,28.5,28.5,0,1,1,48.652,48.652,28.317,28.317,0,0,1,28.5,57Zm0-24.036h0l11.9,11.9L44.869,40.4,32.964,28.5,44.869,16.593,40.4,12.129,28.5,24.034,16.594,12.129l-4.465,4.464L24.034,28.5,12.129,40.4l4.463,4.465L28.5,32.965Z\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 0 0 3px;filter:brightness(0) saturate(100%) invert(70%) sepia(93%) saturate(1540%) hue-rotate(309deg) brightness(105%) contrast(94%)}.filter-header-input{height:calc(100% - 2px);width:calc(100% - 2px);margin:0;border:none!important;background-color:#f7f7f7;padding:0 0 0 5px;color:#4d5a81}.header.row-state:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->%0D%0A<path fill=\"currentColor\" d=\"M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z\"/></svg>');background-repeat:no-repeat;margin:0 0 3px 5px;filter:brightness(0) saturate(100%) invert(56%) sepia(79%) saturate(2301%) hue-rotate(202deg) brightness(92%) contrast(91%)}.filter-header.last-column{border-left:none!important}.header label{cursor:pointer;margin-bottom:0;margin-right:10px;padding-left:5px;width:100%}.row-odd{background-color:#ebf0ff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.row-even{background-color:#f7faff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.error-row-icon{padding:2px;width:20px}.selected{background-color:#8ea7f8;color:#fff}.mw-invalid{font-weight:600;background-color:#f2dede;border:1px solid var(--red-error)}.mw-invalid td{background-color:#f2dede!important}span.mw-invalid{padding:0 3px;color:var(--red-error);background-color:transparent}.mw-warning.selected,.mw-invalid.selected{background-color:#8ea7f8}.mw-warning.selected td,.mw-invalid.selected td{background-color:#8ea7f8!important}.mw-warning{font-weight:600;background-color:#fff4de;border:1px solid var(--orange-algorima)}.mw-warning td{background-color:#fff4de!important}.mw-modified{font-weight:600;border:1px solid var(--main-bg-color)}.first-row{border-top:none}.last-row,.last-row td{border-bottom:none!important}.data-grid-datatable>tbody>tr{z-index:50}.image{position:relative;display:flex;flex-direction:row}.image img{height:20px;width:auto}td.money{position:relative}.tool-tip{visibility:hidden;background-color:#424242;color:#fff;text-align:left;border-radius:3px;font-size:15px;position:absolute;z-index:1;top:-10%;left:150%;opacity:0;transition:opacity .3s;padding:5px 15px;white-space:nowrap;overflow:visible}.tool-tip:after{content:\" \";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent rgb(66,66,66) transparent transparent}.image:hover .tool-tip{visibility:visible;opacity:1}td.money:hover .tool-tip{visibility:visible;opacity:1;left:100%;height:28px;font-size:13px;margin-top:0;padding:5px 10px 10px}.disabled{pointer-events:none}.edit-mode{background-color:#fff;border:1px solid #4465C9;min-width:90px!important;height:30px!important}.edit-mode .form-group{min-height:0px}.edit-mode .inactivated{background-color:#dbe4ff80}.edit-mode .inactivated-fo{background-color:#dbe4ff}.edit-mode .ecartclass{border:2px solid #4465C9}.edit-mode .error-cell{font-weight:700;color:#f78383!important}.edit-mode .selected{color:#4d5a81}.highlight-1,.highlight-1.selected,.edit-mode.highlight-1.selected{background-color:#4d5a81!important;color:#fff!important}.highlight-2,.highlight-2.selected,.edit-mode.highlight-2.selected{background-color:#dbe4ff!important;color:#4d5a81!important}.highlight-3,.highlight-3.selected,.edit-mode.highlight-3.selected{background-color:#4465c9!important;color:#fff!important}.highlight-4,.highlight-4.selected,.edit-mode.highlight-4.selected{background-color:#f78383!important;color:#fff!important}.highlight-5,.highlight-5.selected{background-color:#4465c9!important;color:#fff}.fixed-column{position:-webkit-sticky;position:sticky;left:27px;z-index:2!important;border-left:none}.fixed-header{position:-webkit-sticky;position:sticky;left:27px;z-index:3!important;background:#fff}.has-focus{padding:0!important}.has-focus ::ng-deep input,.has-focus ::ng-deep input:focus-visible,.has-focus ::ng-deep input:focus{border-radius:.1;outline:none!important;width:100%;height:29px;min-height:0;margin:0;border:1px solid #4465C9}.has-focus ::ng-deep .form-group{margin-bottom:0;min-height:0}.has-focus ::ng-deep .field-container{margin-bottom:0}.edit-mode.has-focus{width:90px!important}.bordered{border-left:1px solid #14358f!important;border-right:1px solid #14358f!important}.match-keywords{color:var(--main-bg-color);font-weight:700}.datagrid-img img{height:20px;width:20px}.right-align{text-align:right}.left-align{text-align:left}.detail-div{height:0px;overflow:hidden;transition:all .2s linear;width:100%}.fa-custom{font-size:smaller}.detail-div-show{height:150px;transition:all .2s linear}.toggleable{visibility:collapse}.toggleable-show{visibility:visible}.toggle-button-down{transform:rotate(90deg);transition:all .2s linear}.no-result{color:#5272d3;height:100%;width:100%;padding:15px 15px 150px}.new-rowstate{display:flex;flex-direction:row;align-items:center;align-self:center;height:100%;width:100%}.new-rowstate span{height:100%;width:100%;margin-top:-6px}.context-menu{position:absolute;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 12px #0000004d;padding:8px;z-index:1000;min-width:75px;max-width:250px;transition:all .3s ease-in-out}.context-menu ul{list-style:none;margin:0;padding:0}.context-menu li{padding:10px 14px;cursor:pointer;border-radius:8px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.context-menu li:hover{background:linear-gradient(135deg,#ffffff4d,#ffffff1a);transform:scale(1.02)}.context-menu li:active{transform:scale(.98)}.grid-container{overflow:auto;position:relative}.aggregation-row{position:sticky;bottom:0;z-index:50;background:#f7faff!important;background-color:#f7faff!important;font-weight:700;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important}.aggregation-row td{background:#f7faff!important;background-color:#f7faff!important;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important;border-left:none!important;border-right:none!important}.empty-row td{padding:0}\n"],
 			dependencies: [
 				{
@@ -16309,7 +16322,7 @@ i0.ɵɵngDeclareClassMetadata({
 				provide: RowRefHost,
 				useExisting: forwardRef(() => DataGridComponent)
 			}],
-			template: "<div #datagridContainer [class]=\"this.datagridClass\">\r\n    <ng-container>\r\n        <table class=\"data-grid-datatable\">\r\n            <ng-container *ngIf=\"this.facade.style as ctx\">\r\n                <ng-container *ngIf=\"this.facade.config.columns$ | async as rcolumns\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th class=\"header row-state\" (click)=\"addFilterQuery()\"></th>\r\n                            <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                                    (click)=\"sortHeaderClick(col.Property)\"\r\n                                    [ngClass]=\"{ sorting: this.facade.filter.isSorting(col.Property),\r\n                                        sorting_asc: this.facade.filter.isAsc(col.Property),\r\n                                        sorting_desc: this.facade.filter.isDesc(col.Property)}\"\r\n                                    [attr.class]=\"'header' | gridStyle : ctx : { column : col }\">\r\n                                <label>{{ col.Name }}</label>\r\n                            </th>\r\n                            <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"></th>\r\n\r\n                        </tr>\r\n                        <ng-container *ngIf=\"this.facade.filter.additionalQuery$ | async as additionalQuery\">\r\n                            <tr #thFilterRows *ngFor=\"let filterRow of additionalQuery.Rows;let i = index\" >\r\n                                <th class=\"filter-header row-state\" (click)=\"removeFilterQuery(i)\"></th>\r\n                                <th class=\"filter-header\" [ngClass]=\"{disabled: !col.IsFilterEnabled}\" *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-filter-' + i\">\r\n                                    <input *ngIf=\"col.IsFilterEnabled\" type=\"text\"\r\n                                        class=\"filter-header-input\"\r\n                                        name=\"keyword\"\r\n                                        #uniquename=\"ngModel\"\r\n                                        [attr.id]=\"guid.toString() + '-filter-input-' + col.Property\"\r\n                                        [(ngModel)]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValue\"\r\n                                        (ngModelChange)=\"handleFilterChanged($event, filterRow, col.Property)\"\r\n                                        (change)=\"validateFilterChanged($event, filterRow, col.Property)\"\r\n                                    />\r\n                                </th>\r\n                                <ng-container>\r\n                                    <th #lastColumnFilter class=\"filter-header last-column\"></th>\r\n                                </ng-container>\r\n                            </tr>\r\n                        </ng-container>\r\n                    </thead>\r\n\r\n                    <tbody>\r\n                        <ng-container *ngIf=\"this.facade.data\">\r\n                            <ng-container *ngFor=\"let row of this.data.Values; let r = index;\">\r\n                            <tr\r\n                                [attr.class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates  }\"\r\n                                [attr.id]=\"guid.toString() + '-row-' + row.Id\"\r\n                                (mousedown)=\"onRowMouseDown(row, $event)\"\r\n                                (mouseup)=\"onRowMouseUp(row, $event)\"\r\n                                (click)=\"onRowClick(row, $event)\"\r\n\r\n                                [rowRef]=\"guid + '-row-' + row.Id\"\r\n                            >\r\n\r\n                            <th [attr.class]=\"'rowstate' | gridStyle : ctx : { row : row }\">\r\n                                <ng-container *ngIf=\"selectionStyler.isModified(row) && !selectionStyler.isInvalid(row) && !selectionStyler.isWarning(row)\">\r\n                                    <div class=\"new-rowstate\"><span>...</span></div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"selectionStyler.isInvalid(row)\">\r\n                                    <div> <img class=\"error-row-icon\" src=\"assets/images/error.svg\" /> </div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"selectionStyler.isWarning(row) && !selectionStyler.isInvalid(row)\">\r\n                                    <div> <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" /> </div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"ctx.displayDetail\">\r\n                                    <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n                                        <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n                                    </button>\r\n                                </ng-container>\r\n                            </th>\r\n\r\n                            <td *ngFor=\"let column of rcolumns; index as i\"\r\n                                [attr.class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\">\r\n\r\n                                <alg-datagrid-cell #dataGridCellComponent\r\n                                    class=\"gridcell-container\"\r\n                                    [entity]=\"row\"\r\n                                    [isEditable]=\"ctx.canEditCell(row,column)\"\r\n                                    [property]=\"column.Property\"\r\n                                    (keydown)=\"this.onKeyDown($event)\"\r\n                                    (update)=\"this.updateEntity($event,column.Property)\"\r\n                                    (contextmenu)=\"openContextMenu($event, dataGridCellComponent)\">\r\n\r\n                                    <ng-template alg-editMode>\r\n                                        <alg-field\r\n                                            [field]=\"facade.editor.getField(column.Property)\"\r\n                                            [form]=\"getRowForm(row)\"\r\n                                            [showLabel]=\"false\"\r\n                                            (propertyChanged)=\"dataGridCellComponent.onPropertyChanged($event)\"\r\n                                            >\r\n                                            <!-- [focusable]=\"cellFocus\" -->\r\n                                        </alg-field>\r\n                                    </ng-template>\r\n                                    <ng-template alg-viewMode>\r\n\r\n                                        <div [ngSwitch]=\"column.Display?.type\" *ngIf=\"!isUndefined(row[column.Property])\">\r\n                                            <div *ngSwitchCase=\"'url'\">\r\n                                                <a [routerLink]=\"[$safeNavigationMigration(column.Display?.baseUrl),row[column.Property]]\">\r\n                                                    {{ row.Id || row[column.Property] }}\r\n                                                </a>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n                                                <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n                                                    [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n                                                <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\"\r\n                                                    [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n\r\n                                                <alg-image\r\n                                                    [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n                                                <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n                                                    [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n                                                <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\" [wide]=\"true\"\r\n                                                    [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <span *ngSwitchCase=\"'date'\">\r\n                                                {{row[column.Property]| date: column.Display?.format || 'dd/MM/yyyy'}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n\r\n                                            <span *ngSwitchCase=\"'datetime'\">{{row[column.Property] | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n                                            <span *ngSwitchCase=\"'money'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\"\r\n                                                class=\"money\">\r\n                                                {{\r\n                                                    row[column.Property]\r\n                                                    | currency: column.Display?.currency\r\n                                                    || (column.Display?.sourceProperty && row[column.Display?.sourceProperty] ? row[column.Display?.sourceProperty] : false)\r\n                                                    || 'EUR' : 'symbol'\r\n\r\n                                                    | todefine: $safeNavigationMigration(column.Display?.handleError)\r\n                                                }}\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"ctx.showOnToolTip(row,column)\">\r\n                                                    {{ctx.showOnToolTip(row,column)}}\r\n                                                </div>\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'percent'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | percent : column.Display?.format\r\n                                                || '1.0-2' | todefine: $safeNavigationMigration(column.Display?.handleError)}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'number'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | number: column.Display?.format\r\n                                                || '1.0-3' | todefine : $safeNavigationMigration(column.Display?.handleError)}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] | tofixedsizeinteger : $safeNavigationMigration(column.Display?.completingCaracter) : $safeNavigationMigration(column.Display?.width) }}\r\n                                            </span>\r\n                                            <span *ngSwitchDefault [innerText]=\"column.Property == 'Id' ? (row[column.Property] < 0 ? '' : row[column.Property]) : row[column.Property]\">\r\n                                            </span>\r\n                                        </div>\r\n\r\n                                        <div *ngIf=\"isUndefined(row[column.Property])\">\r\n                                            <span *ngIf=\"!isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\" class=\"mw-invalid\">\r\n                                                {{ column.Display?.nullCaseText }}\r\n                                            </span>\r\n\r\n                                            <span *ngIf=\"isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\">\r\n                                                &nbsp;&nbsp;&nbsp;\r\n                                            </span>\r\n                                        </div>\r\n\r\n                                    </ng-template>\r\n\r\n                                </alg-datagrid-cell>\r\n                            </td>\r\n                            <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n                                <td></td>\r\n                            </ng-container>\r\n                            </tr>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </tbody>\r\n\r\n                    <tfoot>\r\n                        <tr class=\"empty-row\" *ngIf=\"hasAggregates\">\r\n                             <td></td>\r\n                        </tr>\r\n                        <tr class=\"aggregation-row\" *ngIf=\"hasAggregates\">\r\n                            <td class=\"row-state\"></td>\r\n                            <td *ngFor=\"let column of rcolumns; index as i\" [attr.class]=\"'cell' | gridStyle : ctx : { column : column, index : i }\">\r\n\r\n                                <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n                                    <span [ngSwitch]=\"column.Display?.type\">\r\n\r\n                                        <span *ngSwitchCase=\"'money'\" class=\"money\">\r\n                                            {{ agg.value | currency: getColCurrency(column) }}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'date'\">\r\n                                            {{agg.value | date: column.Display?.format || 'dd/MM/yyyy'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'datetime'\">\r\n                                            {{agg.value | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'number'\">\r\n                                            {{agg.value | number: column.Display?.format || '1.0-3'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchDefault>\r\n                                            {{agg.value}}\r\n                                        </span>\r\n\r\n                                    </span>\r\n\r\n                                </ng-container>\r\n\r\n                            </td>\r\n\r\n                            <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n                                <td class=\"last-column\"></td>\r\n                            </ng-container>\r\n\r\n                        </tr>\r\n                    </tfoot>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </ng-container>\r\n</div>\r\n\r\n\r\n<div class=\"context-menu\"\r\n    [ngStyle]=\"{ top: contextMenuPosition.y + 'px', left: contextMenuPosition.x + 'px' }\"\r\n    *ngIf=\"contextMenuVisible\">\r\n    <ul>\r\n      <li (click)=\"copyValue()\">Copier</li>\r\n      <li (click)=\"editValue()\">Modifier</li>\r\n      <li (click)=\"searchValue()\" [title]=\"'Rechercher ' + getSelectedValue()\">\r\n        Rechercher {{ this.getSelectedValue() }}\r\n    </li>\r\n\r\n      <li class=\"separator\"></li>\r\n\r\n      <li (click)=\"setAggregation('SUM')\">Somme</li>\r\n        <li (click)=\"setAggregation('AVG')\">Moyenne</li>\r\n        <li (click)=\"setAggregation('COUNT')\">Count</li>\r\n        <li (click)=\"setAggregation('MIN')\">Min</li>\r\n        <li (click)=\"setAggregation('MAX')\">Max</li>\r\n        <li (click)=\"clearAggregation()\">Supprimer agrégation</li>\r\n    </ul>\r\n</div>\r\n",
+			template: "<div #datagridContainer [class]=\"this.datagridClass\">\r\n    <ng-container>\r\n        <table class=\"data-grid-datatable\">\r\n            <ng-container *ngIf=\"this.facade.style as ctx\">\r\n                <ng-container *ngIf=\"this.facade.config.columns$ | async as rcolumns\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th class=\"header row-state\" (click)=\"addFilterQuery()\"></th>\r\n                            <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                                    (click)=\"sortHeaderClick(col.Property)\"\r\n                                    [ngClass]=\"{ sorting: this.facade.filter.isSorting(col.Property),\r\n                                        sorting_asc: this.facade.filter.isAsc(col.Property),\r\n                                        sorting_desc: this.facade.filter.isDesc(col.Property)}\"\r\n                                    [attr.class]=\"'header' | gridStyle : ctx : { column : col }\">\r\n                                <label>{{ getHeaderLabel(col) }}</label>\r\n                            </th>\r\n                            <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"></th>\r\n\r\n                        </tr>\r\n                        <ng-container *ngIf=\"this.facade.filter.additionalQuery$ | async as additionalQuery\">\r\n                            <tr #thFilterRows *ngFor=\"let filterRow of additionalQuery.Rows;let i = index\" >\r\n                                <th class=\"filter-header row-state\" (click)=\"removeFilterQuery(i)\"></th>\r\n                                <th class=\"filter-header\" [ngClass]=\"{disabled: !col.IsFilterEnabled}\" *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-filter-' + i\">\r\n                                    <input *ngIf=\"col.IsFilterEnabled\" type=\"text\"\r\n                                        class=\"filter-header-input\"\r\n                                        name=\"keyword\"\r\n                                        #uniquename=\"ngModel\"\r\n                                        [attr.id]=\"guid.toString() + '-filter-input-' + col.Property\"\r\n                                        [(ngModel)]=\"filterRow.ClausesByPropertyName.get(col.Property).FilterValue\"\r\n                                        (ngModelChange)=\"handleFilterChanged($event, filterRow, col.Property)\"\r\n                                        (change)=\"validateFilterChanged($event, filterRow, col.Property)\"\r\n                                    />\r\n                                </th>\r\n                                <ng-container>\r\n                                    <th #lastColumnFilter class=\"filter-header last-column\"></th>\r\n                                </ng-container>\r\n                            </tr>\r\n                        </ng-container>\r\n                    </thead>\r\n\r\n                    <tbody>\r\n                        <ng-container *ngIf=\"this.facade.data\">\r\n                            <ng-container *ngFor=\"let row of this.data.Values; let r = index;\">\r\n                            <tr\r\n                                [attr.class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates  }\"\r\n                                [attr.id]=\"guid.toString() + '-row-' + row.Id\"\r\n                                (mousedown)=\"onRowMouseDown(row, $event)\"\r\n                                (mouseup)=\"onRowMouseUp(row, $event)\"\r\n                                (click)=\"onRowClick(row, $event)\"\r\n\r\n                                [rowRef]=\"guid + '-row-' + row.Id\"\r\n                            >\r\n\r\n                            <th [attr.class]=\"'rowstate' | gridStyle : ctx : { row : row }\">\r\n                                <ng-container *ngIf=\"selectionStyler.isModified(row) && !selectionStyler.isInvalid(row) && !selectionStyler.isWarning(row)\">\r\n                                    <div class=\"new-rowstate\"><span>...</span></div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"selectionStyler.isInvalid(row)\">\r\n                                    <div> <img class=\"error-row-icon\" src=\"assets/images/error.svg\" /> </div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"selectionStyler.isWarning(row) && !selectionStyler.isInvalid(row)\">\r\n                                    <div> <img class=\"error-row-icon\" src=\"assets/images/warning.svg\" /> </div>\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"ctx.displayDetail\">\r\n                                    <button type=\"button\" [attr.id]=\"row.Id + '_button'\" class=\"toggle-button btn\" (click)=\"toggleDetail(row)\">\r\n                                        <i class=\"fa fa-chevron-right fa-custom\"></i>\r\n                                    </button>\r\n                                </ng-container>\r\n                            </th>\r\n\r\n                            <td *ngFor=\"let column of rcolumns; index as i\"\r\n                                [attr.class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\">\r\n\r\n                                <alg-datagrid-cell #dataGridCellComponent\r\n                                    class=\"gridcell-container\"\r\n                                    [entity]=\"row\"\r\n                                    [isEditable]=\"ctx.canEditCell(row,column)\"\r\n                                    [property]=\"column.Property\"\r\n                                    (keydown)=\"this.onKeyDown($event)\"\r\n                                    (update)=\"this.updateEntity($event,column.Property)\"\r\n                                    (contextmenu)=\"openContextMenu($event, dataGridCellComponent)\">\r\n\r\n                                    <ng-template alg-editMode>\r\n                                        <alg-field\r\n                                            [field]=\"facade.editor.getField(column.Property)\"\r\n                                            [form]=\"getRowForm(row)\"\r\n                                            [showLabel]=\"false\"\r\n                                            (propertyChanged)=\"dataGridCellComponent.onPropertyChanged($event)\"\r\n                                            >\r\n                                            <!-- [focusable]=\"cellFocus\" -->\r\n                                        </alg-field>\r\n                                    </ng-template>\r\n                                    <ng-template alg-viewMode>\r\n\r\n                                        <div [ngSwitch]=\"column.Display?.type\" *ngIf=\"!isUndefined(row[column.Property])\">\r\n                                            <div *ngSwitchCase=\"'url'\">\r\n                                                <a [routerLink]=\"[$safeNavigationMigration(column.Display?.baseUrl),row[column.Property]]\">\r\n                                                    {{ row.Id || row[column.Property] }}\r\n                                                </a>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'img'\" class=\"image\">\r\n                                                <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n                                                    [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n                                                <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\"\r\n                                                    [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"20\" [imageWidth]=\"20\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'img-file'\" class=\"image\">\r\n\r\n                                                <alg-image\r\n                                                    [imageUrl]=\"this.getImageUrl(row,column)\" [wide]=\"true\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <div *ngSwitchCase=\"'wide-img'\" class=\"image\">\r\n                                                <img *ngIf=\"column.Display?.imagePath?.length == 0\"\r\n                                                    [src]=\"(column.Display?.imgBase || '') + (column.Display?.sourceProperty ? row[column.Display?.sourceProperty] : row[column.Property])\" />\r\n\r\n                                                <alg-image *ngIf=\"column.Display?.imagePath?.length != 0\" [wide]=\"true\"\r\n                                                    [imageUrl]=\"this.getEnumImageUrl(row,column)\" [imageHeight]=\"40\" [imageWidth]=\"40\">\r\n                                                </alg-image>\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"!isUndefined(column.ToolTipProperty)\">\r\n                                                    {{ row[column.ToolTipProperty] }}\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                            <span *ngSwitchCase=\"'date'\">\r\n                                                {{row[column.Property]| date: column.Display?.format || 'dd/MM/yyyy'}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'boolean'\">{{row[column.Property] ? 'OUI' : 'NON'}} </span>\r\n\r\n                                            <span *ngSwitchCase=\"'datetime'\">{{row[column.Property] | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}</span>\r\n\r\n                                            <span *ngSwitchCase=\"'money'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\"\r\n                                                class=\"money\">\r\n                                                {{\r\n                                                    row[column.Property]\r\n                                                    | currency: column.Display?.currency\r\n                                                    || (column.Display?.sourceProperty && row[column.Display?.sourceProperty] ? row[column.Display?.sourceProperty] : false)\r\n                                                    || 'EUR' : 'symbol'\r\n\r\n                                                    | todefine: $safeNavigationMigration(column.Display?.handleError)\r\n                                                }}\r\n\r\n                                                <div class=\"tool-tip\" *ngIf=\"ctx.showOnToolTip(row,column)\">\r\n                                                    {{ctx.showOnToolTip(row,column)}}\r\n                                                </div>\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'percent'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | percent : column.Display?.format\r\n                                                || '1.0-2' | todefine: $safeNavigationMigration(column.Display?.handleError)}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'number'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] * $safeNavigationMigration(column.Display?.multiplier) | number: column.Display?.format\r\n                                                || '1.0-3' | todefine : $safeNavigationMigration(column.Display?.handleError)}}\r\n                                            </span>\r\n\r\n                                            <span *ngSwitchCase=\"'fixedsizeinteger'\"\r\n                                                [class.red]=\"!row[column.Property] && column.Display?.handleError\">\r\n                                                {{row[column.Property] | tofixedsizeinteger : $safeNavigationMigration(column.Display?.completingCaracter) : $safeNavigationMigration(column.Display?.width) }}\r\n                                            </span>\r\n                                            <span *ngSwitchDefault [innerText]=\"column.Property == 'Id' ? (row[column.Property] < 0 ? '' : row[column.Property]) : row[column.Property]\">\r\n                                            </span>\r\n                                        </div>\r\n\r\n                                        <div *ngIf=\"isUndefined(row[column.Property])\">\r\n                                            <span *ngIf=\"!isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\" class=\"mw-invalid\">\r\n                                                {{ column.Display?.nullCaseText }}\r\n                                            </span>\r\n\r\n                                            <span *ngIf=\"isUndefined($safeNavigationMigration(column.Display?.nullCaseText))\">\r\n                                                &nbsp;&nbsp;&nbsp;\r\n                                            </span>\r\n                                        </div>\r\n\r\n                                    </ng-template>\r\n\r\n                                </alg-datagrid-cell>\r\n                            </td>\r\n                            <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n                                <td></td>\r\n                            </ng-container>\r\n                            </tr>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </tbody>\r\n\r\n                    <tfoot>\r\n                        <tr class=\"empty-row\" *ngIf=\"hasAggregates\">\r\n                             <td></td>\r\n                        </tr>\r\n                        <tr class=\"aggregation-row\" *ngIf=\"hasAggregates\">\r\n                            <td class=\"row-state\"></td>\r\n                            <td *ngFor=\"let column of rcolumns; index as i\" [attr.class]=\"'cell' | gridStyle : ctx : { column : column, index : i }\">\r\n\r\n                                <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n                                    <span [ngSwitch]=\"column.Display?.type\">\r\n\r\n                                        <span *ngSwitchCase=\"'money'\" class=\"money\">\r\n                                            {{ agg.value | currency: getColCurrency(column) }}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'date'\">\r\n                                            {{agg.value | date: column.Display?.format || 'dd/MM/yyyy'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'datetime'\">\r\n                                            {{agg.value | date: column.Display?.format || 'dd/MM/yyyy HH:mm:ss'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchCase=\"'number'\">\r\n                                            {{agg.value | number: column.Display?.format || '1.0-3'}}\r\n                                        </span>\r\n\r\n                                        <span *ngSwitchDefault>\r\n                                            {{agg.value}}\r\n                                        </span>\r\n\r\n                                    </span>\r\n\r\n                                </ng-container>\r\n\r\n                            </td>\r\n\r\n                            <ng-container *ngIf=\"ctx.enableLastColumnResize\">\r\n                                <td class=\"last-column\"></td>\r\n                            </ng-container>\r\n\r\n                        </tr>\r\n                    </tfoot>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </ng-container>\r\n</div>\r\n\r\n\r\n<div class=\"context-menu\"\r\n    [ngStyle]=\"{ top: contextMenuPosition.y + 'px', left: contextMenuPosition.x + 'px' }\"\r\n    *ngIf=\"contextMenuVisible\">\r\n    <ul>\r\n      <li (click)=\"copyValue()\">Copier</li>\r\n      <li (click)=\"editValue()\">Modifier</li>\r\n      <li (click)=\"searchValue()\" [title]=\"'Rechercher ' + getSelectedValue()\">\r\n        Rechercher {{ this.getSelectedValue() }}\r\n    </li>\r\n\r\n      <li class=\"separator\"></li>\r\n\r\n      <li (click)=\"setAggregation('SUM')\">Somme</li>\r\n        <li (click)=\"setAggregation('AVG')\">Moyenne</li>\r\n        <li (click)=\"setAggregation('COUNT')\">Count</li>\r\n        <li (click)=\"setAggregation('MIN')\">Min</li>\r\n        <li (click)=\"setAggregation('MAX')\">Max</li>\r\n        <li (click)=\"clearAggregation()\">Supprimer agrégation</li>\r\n    </ul>\r\n</div>\r\n",
 			styles: [".home-page{font-family:Open sans,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;height:100%;width:100%;padding:16px}.main-container{margin:0 50px}.main-container-modal{width:calc(100% - 50px);margin:10px 25px 0}.moyen-titre{font-weight:700;font-size:24px;color:#4d5a81;margin:8px 0;border-bottom:solid 1px #DBE4FF}.grand-titre{font-weight:700;font-size:28px;color:#4d5a81;margin:0 0 8px}.petit-titre{font-weight:700;font-size:16px;color:#4d5a81;margin:0 0 8px}.petit-titre.underlined{border-bottom:solid 1px #4D5A81}.paragraph{padding:0 15px}.paragraph-highlight{padding:5px 15px 0 12px;border-left:5px solid #8EA7F8;border-bottom:1px solid #DBE4FF;border-top:1px solid #DBE4FF;border-right:1px solid #DBE4FF;background-color:#f7faff}.highlight{background-color:#f7faff;border:1px solid #DBE4FF;border-radius:5px;padding:15px;color:#3c5dc4;margin:0 0 16px}.highlight p{margin-bottom:0}.highlight:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"53.294\" height=\"50.629\" viewBox=\"0 0 53.294 50.629\">%0D%0A  <path id=\"allerg\\e8ne\" d=\"M830.494,25.793l-5.814,6.783.727,8.963-8.721,1.938-4.6,7.752L803.847,47.6l-8.236,3.634-4.6-7.51-8.721-1.938.727-8.963L777.2,26.035l5.814-6.783-.727-8.963,8.721-1.938L795.61.6l8.236,3.634L812.083.6l4.6,7.752,8.721,1.938-.727,8.963Zm-24.467,2.422V13.681h-4.845V28.216Zm0,9.69V33.06h-4.845v4.845Z\" transform=\"translate(-777.2 -0.6)\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 8px 24px 0;filter:invert(31%) sepia(51%) saturate(1323%) hue-rotate(199deg) brightness(99%) contrast(94%)}.notification{background-color:#dbe4ff;border:1px solid #C4D0F9;border-radius:5px;color:#4d5a81;margin:16px;padding:5px 15px;text-align:justify}.notification:before{position:relative;display:block;float:left;width:24px;height:24px;content:\" \";background-size:24px 24px;-webkit-background-size:24px 24px;background-image:url('data:image/svg+xml,<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\" class=\"svg-inline--fa fa-info-circle fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\"></path></svg>');background-repeat:no-repeat;margin:0 8px 0 0;filter:invert(31%) sepia(8%) saturate(2329%) hue-rotate(188deg) brightness(103%) contrast(85%)}.notification-text{padding:0 15px 0 30px;font-size:16px}:host{flex:1}.header.last-column{border-left:none!important;width:100%}table thead .sorting,table thead .sorting_asc,table thead .sorting_desc,table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table thead th:first-child,table tfoot tr:first-child{position:sticky;left:0;z-index:2}table tbody th:first-child{position:sticky;left:0;z-index:1;border-right:none}table tbody th:first-child div{text-align:center;vertical-align:middle;line-height:20px}table tbody tr.row-odd th:first-child{background:#ebf0ff}table tbody tr.selected.row-odd.mw-invalid th:first-child,table tbody tr.selected.row-even.mw-invalid th:first-child,table tbody tr.selected.row-odd.mw-warning th:first-child,table tbody tr.selected.row-even.mw-warning th:first-child,table tbody tr.selected.row-even th:first-child,table tbody tr.selected.row-odd th:first-child{background-color:#8ea7f8;color:#fff}table tbody tr.row-odd.mw-invalid th:first-child,table tbody tr.row-even.mw-invalid th:first-child{background-color:#f2dede}table tbody tr.row-odd.mw-warning th:first-child,table tbody tr.row-even.mw-warning th:first-child{background-color:#fff4de}table thead th{position:-webkit-sticky;position:sticky;top:0;z-index:1;background:#fff;border-left:1px solid #3C5DC4;border-bottom:1px solid #3C5DC4}table thead .sorting{background-image:none;cursor:pointer}table thead .sorting_asc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxNjIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxNTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+z5ABTAAAAI5JREFUeNpi/P//PwO1ABMDFQELIQXVjfe4gFQbEJe11iv9otRl2UCcBcSphBQy4gszoKu0gNROIJYB4jtA7AF03V2SXQY0iBFIFUMNAgEVIM6DipPsTQcgDkQTSwRia5IMA9rOC6RqgVgQTQokXgOUZyfFZSFQF/zAgh2BOIjkCBjQRDtq2Khh9DAMIMAAT9AmNBDSXegAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_desc{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQjM4MkY2QzVGRUYwRTJDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkFEQzYxQTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkFEQzYxOTIyQzExMUUxQTFGMUFEQUQ1QjJBNTM4QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTFCMzgyRjZDNUZFRjBFMkM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1fsfwAAAAJdJREFUeNpi/P//PwO1ABMDFcGoYaOG0cMwFmyC1Y33IoHUAiD+h8MBGa31SvOJddk6IN4PxBxY8FEgXkO0N4G2/gRSLUD8GU3qPRA3A+U/kxpmIBege2U9EB/ApYERX6kBDDtlILUDiFWA+AkQuwNddY2s2ARqvAukJgDxbyCehM8gnLGJBmYDsSoQTyWkkHHQFo4AAQYAAA0piq4hbqwAAAAASUVORK5CYII=);cursor:pointer}table thead .sorting_asc_disabled,table thead .sorting_desc_disabled{background-image:none}.checkbok-container{align-items:center;margin:0;padding:0}.gridcell-container{padding:0;min-width:fit-content}.gridcell-container input[type=number]{display:block;size:1;font-size:10pt;width:100%!important;height:100%;margin:0!important;border:2px solid #F78383}.datagrid-custom-container{height:100%;overflow:auto;margin-left:-1px}.data-grid-datatable{table-layout:fixed;cursor:pointer;border-spacing:0px}.data-grid-datatable td{box-shadow:none;padding:2px 5px;white-space:nowrap}.data-grid-datatable td.row-state{padding:2px 5px;width:16px}.data-grid-datatable td.img{padding:2px 5px}.data-grid-datatable td.row-state img{height:16px;width:16px;margin-top:-3px;padding:0}.data-grid-datatable tr{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header{vertical-align:bottom;padding:2px 5px 2px 0;font-weight:400;color:#3c5dc4;white-space:nowrap;line-height:25px;min-width:32px;margin-bottom:5px}.header.img{min-width:16px}.header.row-state{min-width:27px;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:2;background:#fff;border-left:none;border-right:none}.filter-header{background-color:#f7f7f7!important}.filter-header.disabled{background-color:#9fa9c7!important}.filter-header.row-state:hover:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"57\" height=\"57\" viewBox=\"0 0 57 57\">%0D%0A  <path id=\"Rond_Croix\" data-name=\"Rond Croix\" d=\"M28.5,57A28.5,28.5,0,0,1,8.347,8.347,28.5,28.5,0,1,1,48.652,48.652,28.317,28.317,0,0,1,28.5,57Zm0-24.036h0l11.9,11.9L44.869,40.4,32.964,28.5,44.869,16.593,40.4,12.129,28.5,24.034,16.594,12.129l-4.465,4.464L24.034,28.5,12.129,40.4l4.463,4.465L28.5,32.965Z\"/>%0D%0A</svg>%0D%0A');background-repeat:no-repeat;margin:0 0 0 3px;filter:brightness(0) saturate(100%) invert(70%) sepia(93%) saturate(1540%) hue-rotate(309deg) brightness(105%) contrast(94%)}.filter-header-input{height:calc(100% - 2px);width:calc(100% - 2px);margin:0;border:none!important;background-color:#f7f7f7;padding:0 0 0 5px;color:#4d5a81}.header.row-state:before{position:relative;display:block;float:left;width:16px;height:16px;content:\" \";background-size:16px 16px;-webkit-background-size:16px 16px;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->%0D%0A<path fill=\"currentColor\" d=\"M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z\"/></svg>');background-repeat:no-repeat;margin:0 0 3px 5px;filter:brightness(0) saturate(100%) invert(56%) sepia(79%) saturate(2301%) hue-rotate(202deg) brightness(92%) contrast(91%)}.filter-header.last-column{border-left:none!important}.header label{cursor:pointer;margin-bottom:0;margin-right:10px;padding-left:5px;width:100%}.row-odd{background-color:#ebf0ff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.row-even{background-color:#f7faff;border-left:1px solid #C1D0FD;border-bottom:1px solid #C1D0FD}.error-row-icon{padding:2px;width:20px}.selected{background-color:#8ea7f8;color:#fff}.mw-invalid{font-weight:600;background-color:#f2dede;border:1px solid var(--red-error)}.mw-invalid td{background-color:#f2dede!important}span.mw-invalid{padding:0 3px;color:var(--red-error);background-color:transparent}.mw-warning.selected,.mw-invalid.selected{background-color:#8ea7f8}.mw-warning.selected td,.mw-invalid.selected td{background-color:#8ea7f8!important}.mw-warning{font-weight:600;background-color:#fff4de;border:1px solid var(--orange-algorima)}.mw-warning td{background-color:#fff4de!important}.mw-modified{font-weight:600;border:1px solid var(--main-bg-color)}.first-row{border-top:none}.last-row,.last-row td{border-bottom:none!important}.data-grid-datatable>tbody>tr{z-index:50}.image{position:relative;display:flex;flex-direction:row}.image img{height:20px;width:auto}td.money{position:relative}.tool-tip{visibility:hidden;background-color:#424242;color:#fff;text-align:left;border-radius:3px;font-size:15px;position:absolute;z-index:1;top:-10%;left:150%;opacity:0;transition:opacity .3s;padding:5px 15px;white-space:nowrap;overflow:visible}.tool-tip:after{content:\" \";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent rgb(66,66,66) transparent transparent}.image:hover .tool-tip{visibility:visible;opacity:1}td.money:hover .tool-tip{visibility:visible;opacity:1;left:100%;height:28px;font-size:13px;margin-top:0;padding:5px 10px 10px}.disabled{pointer-events:none}.edit-mode{background-color:#fff;border:1px solid #4465C9;min-width:90px!important;height:30px!important}.edit-mode .form-group{min-height:0px}.edit-mode .inactivated{background-color:#dbe4ff80}.edit-mode .inactivated-fo{background-color:#dbe4ff}.edit-mode .ecartclass{border:2px solid #4465C9}.edit-mode .error-cell{font-weight:700;color:#f78383!important}.edit-mode .selected{color:#4d5a81}.highlight-1,.highlight-1.selected,.edit-mode.highlight-1.selected{background-color:#4d5a81!important;color:#fff!important}.highlight-2,.highlight-2.selected,.edit-mode.highlight-2.selected{background-color:#dbe4ff!important;color:#4d5a81!important}.highlight-3,.highlight-3.selected,.edit-mode.highlight-3.selected{background-color:#4465c9!important;color:#fff!important}.highlight-4,.highlight-4.selected,.edit-mode.highlight-4.selected{background-color:#f78383!important;color:#fff!important}.highlight-5,.highlight-5.selected{background-color:#4465c9!important;color:#fff}.fixed-column{position:-webkit-sticky;position:sticky;left:27px;z-index:2!important;border-left:none}.fixed-header{position:-webkit-sticky;position:sticky;left:27px;z-index:3!important;background:#fff}.has-focus{padding:0!important}.has-focus ::ng-deep input,.has-focus ::ng-deep input:focus-visible,.has-focus ::ng-deep input:focus{border-radius:.1;outline:none!important;width:100%;height:29px;min-height:0;margin:0;border:1px solid #4465C9}.has-focus ::ng-deep .form-group{margin-bottom:0;min-height:0}.has-focus ::ng-deep .field-container{margin-bottom:0}.edit-mode.has-focus{width:90px!important}.bordered{border-left:1px solid #14358f!important;border-right:1px solid #14358f!important}.match-keywords{color:var(--main-bg-color);font-weight:700}.datagrid-img img{height:20px;width:20px}.right-align{text-align:right}.left-align{text-align:left}.detail-div{height:0px;overflow:hidden;transition:all .2s linear;width:100%}.fa-custom{font-size:smaller}.detail-div-show{height:150px;transition:all .2s linear}.toggleable{visibility:collapse}.toggleable-show{visibility:visible}.toggle-button-down{transform:rotate(90deg);transition:all .2s linear}.no-result{color:#5272d3;height:100%;width:100%;padding:15px 15px 150px}.new-rowstate{display:flex;flex-direction:row;align-items:center;align-self:center;height:100%;width:100%}.new-rowstate span{height:100%;width:100%;margin-top:-6px}.context-menu{position:absolute;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 12px #0000004d;padding:8px;z-index:1000;min-width:75px;max-width:250px;transition:all .3s ease-in-out}.context-menu ul{list-style:none;margin:0;padding:0}.context-menu li{padding:10px 14px;cursor:pointer;border-radius:8px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.context-menu li:hover{background:linear-gradient(135deg,#ffffff4d,#ffffff1a);transform:scale(1.02)}.context-menu li:active{transform:scale(.98)}.grid-container{overflow:auto;position:relative}.aggregation-row{position:sticky;bottom:0;z-index:50;background:#f7faff!important;background-color:#f7faff!important;font-weight:700;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important}.aggregation-row td{background:#f7faff!important;background-color:#f7faff!important;border-top:1px solid #4D5A81!important;border-bottom:1px solid #4D5A81!important;border-left:none!important;border-right:none!important}.empty-row td{padding:0}\n"]
 		}]
 	}],
@@ -16753,14 +16766,20 @@ var FilterSummaryPanelComponent = class FilterSummaryPanelComponent {
 		this.Fields = [];
 		this.DisplayFields = this.Fields;
 		this.currentCriteria = null;
+		this.hiddenFilters = [];
 		this.destroy$ = new Subject();
 	}
 	ngOnInit() {
 		this.facade = this.entityFacadeRegistryService.getFacade(this.entityKey, this.guid);
 		this.wrapper = new FormWrapper(this.validationService, this.bus, false);
-		combineLatest([this.facade.criteria$, this.facade.config.filterDescriptors$]).pipe(takeUntil(this.destroy$)).subscribe(([vm, fields]) => {
+		combineLatest([
+			this.facade.criteria$,
+			this.facade.config.filterDescriptors$,
+			this.facade.layout.hiddenSummaryFilters$
+		]).pipe(takeUntil(this.destroy$)).subscribe(([vm, fields, hidden]) => {
 			const filters = fields.filter((x) => x.PropertyName != "Keywords" && x.PropertyName != "Id");
 			this.Fields = filters;
+			this.hiddenFilters = hidden;
 			this.currentCriteria = vm;
 			this.wrapper.initialize(filters);
 			this.wrapper.hookFormEntity(vm);
@@ -16775,7 +16794,7 @@ var FilterSummaryPanelComponent = class FilterSummaryPanelComponent {
 		const descriptors = this.Fields;
 		if (descriptors) {
 			this.filterList.splice(0, this.filterList.length);
-			descriptors.forEach((field) => {
+			descriptors.filter((field) => !this.hiddenFilters.includes(field.PropertyName)).forEach((field) => {
 				this.updateFieldSummary(field);
 			});
 		}