@dflat-core/web 1.7.2075 → 1.7.2077

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

@@ -2610,6 +2610,15 @@ function toAdditionalQuery(groups) {
 function additionalQueryOf(condition) {
 	return toAdditionalQuery([{ Conditions: [condition] }]);
 }
+function viewPanelOf(group) {
+	const entries = Object.entries(group?.Panel ?? {}).filter(([, value]) => value !== void 0);
+	return entries.length ? Object.fromEntries(entries) : null;
+}
+function withoutViewPanel(group) {
+	if (!group) return null;
+	const { Panel, ...rest } = group;
+	return normalizeViewFilter(rest);
+}
 const ViewFilterNoValueOperators = [
 	"isnull",
 	"notnull",
@@ -2622,7 +2631,8 @@ function normalizeViewFilter(group) {
 	if (!group) return null;
 	const conditions = (group.Conditions ?? []).filter((c) => !!c?.Property && (ViewFilterNoValueOperators.includes(c.Operator) || (c.Operator === "in" || c.Operator === "notin" ? (c.Values ?? []).length > 0 : (c.Value ?? "") !== "" && (c.Operator !== "between" && c.Operator !== "datebetween" || (c.Value2 ?? "") !== ""))));
 	const groups = (group.Groups ?? []).map(normalizeViewFilter).filter((g) => !!g);
-	if (!conditions.length && !groups.length) return null;
+	const panel = viewPanelOf(group);
+	if (!conditions.length && !groups.length && !panel) return null;
 	return {
 		Logic: group.Logic === "or" ? "or" : "and",
 		Conditions: conditions.map((c) => ({
@@ -2630,7 +2640,8 @@ function normalizeViewFilter(group) {
 			Value: c.Value == null ? null : String(c.Value),
 			Value2: c.Value2 == null ? null : String(c.Value2)
 		})),
-		...groups.length ? { Groups: groups } : {}
+		...groups.length ? { Groups: groups } : {},
+		...panel ? { Panel: panel } : {}
 	};
 }
 function toViewQuery(group) {
@@ -2669,6 +2680,8 @@ var FilterContext = class FilterContext {
 		this.applyFilterUrl$ = new BehaviorSubject(true);
 		this.applyFilterUrlEnabled$ = this.applyFilterUrl$.asObservable();
 		this.refresh$ = new Subject();
+		this.viewFilter$ = new BehaviorSubject(null);
+		this.viewFilterEditing$ = new BehaviorSubject(false);
 		this.config.defaultFilter$.subscribe((df) => {
 			this.setDefaultFilter(df);
 		});
@@ -2746,6 +2759,99 @@ var FilterContext = class FilterContext {
 		if (query === (this.filter$.value?.ViewQuery ?? null)) return;
 		this.setFilter({ ViewQuery: query });
 	}
+	setViewFilter(label, filter, canEdit = false) {
+		if (this.viewFilterEditing$.value) this.viewFilterEditing$.next(false);
+		this.viewFilter$.next(filter ? {
+			label,
+			filter,
+			canEdit
+		} : null);
+	}
+	editViewFilter() {
+		if (!this.viewFilter$.value?.canEdit) return;
+		this.viewFilterEditing$.next(true);
+		const viewQuery = this.getViewQuery();
+		if (viewQuery && this.additionalQuery$.value.Rows.length === 0 && this.setAdditionalQueryFromView(viewQuery)) this.setViewQuery(null);
+	}
+	setAdditionalQueryFromView(group) {
+		const rowsOf = (g) => {
+			const groups = g.Groups ?? [];
+			if (g.Logic === "and") return groups.length ? null : [g.Conditions];
+			if (groups.some((s) => s.Logic !== "and" && s.Conditions.length > 1 || (s.Groups ?? []).length > 0)) return null;
+			return [...g.Conditions.map((c) => [c]), ...groups.map((s) => s.Conditions)];
+		};
+		const patternOf = (c) => {
+			const value = c.Value ?? "";
+			if (value === "" || value.includes("*")) return c.Operator === "like" && value !== "" ? value : null;
+			switch (c.Operator) {
+				case "like":
+				case "eq": return value;
+				case "contains": return `*${value}*`;
+				case "startswith": return `${value}*`;
+				case "endswith": return `*${value}`;
+				default: return null;
+			}
+		};
+		const rows = rowsOf(group);
+		if (!rows?.length) return false;
+		const written = [];
+		for (const conditions of rows) {
+			const row = this.newFilterRow();
+			for (const condition of conditions) {
+				const pattern = patternOf(condition);
+				const clause = row.ClausesByPropertyName.get(condition.Property);
+				if (pattern === null || !clause || clause.FilterValue !== void 0) return false;
+				clause.FilterValue = pattern;
+			}
+			written.push(row);
+		}
+		this.additionalQuery$.next({
+			...this.additionalQuery$.value,
+			Rows: written
+		});
+		this.applyAdditionalQuery();
+		return true;
+	}
+	get lockedPanel() {
+		return this.viewFilterEditing$.value ? {} : this.viewFilter$.value?.filter.Panel ?? {};
+	}
+	getPanelValues(properties) {
+		const current = this.filter$.value;
+		const defaults = this.defaultFilter;
+		const entries = properties.filter((p) => JSON.stringify(current?.[p] ?? null) !== JSON.stringify(defaults?.[p] ?? null)).map((p) => [p, current?.[p] ?? null]);
+		return entries.length ? Object.fromEntries(entries) : null;
+	}
+	setPanelValues(properties, panel) {
+		const defaults = this.defaultFilter;
+		const values = Object.fromEntries(properties.map((p) => [p, defaults?.[p]]));
+		Object.assign(values, panel ?? {});
+		const current = this.filter$.value;
+		if (Object.keys(values).every((p) => JSON.stringify(current?.[p] ?? null) === JSON.stringify(values[p] ?? null))) return;
+		this.setFilter(values);
+	}
+	getAdditionalQueryGroup() {
+		let groups = [];
+		try {
+			const json = this.filter$.value?.AdditionalQuery;
+			groups = json ? JSON.parse(json) : [];
+		} catch {
+			groups = [];
+		}
+		const rows = (Array.isArray(groups) ? groups : []).filter((g) => (g?.Conditions ?? []).length > 0).map((g) => ({
+			Logic: "and",
+			Conditions: g.Conditions.map((c) => ({ ...c }))
+		}));
+		if (!rows.length) return null;
+		return rows.length === 1 ? rows[0] : {
+			Logic: "or",
+			Conditions: [],
+			Groups: rows
+		};
+	}
+	clearAdditionalQuery() {
+		this.additionalQuery$.next({ Rows: [] });
+		if (this.filter$.value?.AdditionalQuery) this.setFilter({ AdditionalQuery: null });
+	}
 	setSortList(sorts) {
 		const list = (sorts ?? []).filter((s) => !Utilities.IsNil(s?.property) && s.property !== "");
 		if (list.length === 0) {
@@ -2883,9 +2989,10 @@ var LayoutContext = class LayoutContext {
 	}
 	setCardMode(card) {
 		this._cardMode$.next(card);
+		this.layoutService?.setCardMode(this.entityKey, card);
 	}
 	toggleCardMode() {
-		this._cardMode$.next(!this._cardMode$.value);
+		this.setCardMode(!this._cardMode$.value);
 	}
 	updateScreenWidth(width = typeof window !== "undefined" ? window.innerWidth : LayoutContext.NarrowWidth) {
 		const narrow = width < LayoutContext.NarrowWidth;
@@ -2967,6 +3074,7 @@ var LayoutContext = class LayoutContext {
 		this.isSection$ = this._isSection$.asObservable();
 		this._defaultPreferences$ = new BehaviorSubject(null);
 		this.defaultPreferences$ = this._defaultPreferences$.asObservable();
+		if (this.layoutService?.getCardMode(this.entityKey)) this._cardMode$.next(true);
 		this.selection.hasSelection$.subscribe((res) => {
 			if (res) this.setShowPropertyPanel(true);
 			else this.setShowPropertyPanel(false);
@@ -4270,6 +4378,19 @@ var LayoutService = class LayoutService {
 	getFixedLayoutPreferences(entityKey) {
 		return this.fixedLayoutMap.get(entityKey);
 	}
+	getCardMode(layoutKey) {
+		return !!this.preferencesMap.get(layoutKey)?.CardMode;
+	}
+	setCardMode(layoutKey, value) {
+		const currentPreferences = this.preferencesMap.get(layoutKey) || this.getDefaultPreferences();
+		this.savePreferences(layoutKey, {
+			...currentPreferences,
+			CardMode: value
+		});
+		try {
+			this.saveLayoutPreferences();
+		} catch {}
+	}
 	setIsVerticalLayout(layoutKey, value) {
 		const updatedPreferences = {
 			...this.preferencesMap.get(layoutKey) || this.getDefaultPreferences(),
@@ -14067,6 +14188,8 @@ var CanDeactivateGuard = class CanDeactivateGuard {
 		if (!Utilities.IsNil(component) && !Utilities.IsNil(component.isDirty)) {
 			if (component.isDirty()) return this.modalService.confirmModal("Vous avez des modifications en cours ! Souhaitez-vous Continuer à faire des modifications, Enregister vos changements, ou bien les Annuler ?", () => component.saveAll(), true);
 		}
+		const leave = component?.canLeaveView?.();
+		if (leave !== void 0) return leave;
 		return true;
 	}
 	static {
@@ -16266,18 +16389,35 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 var GridViewMenuComponent = class GridViewMenuComponent {
-	constructor(cd) {
+	constructor(cd, host) {
 		this.cd = cd;
+		this.host = host;
 		this.done = new EventEmitter();
 		this.mobile = false;
 		this.loaded = new EventEmitter();
 		this.columnsOpen = false;
 		this.search = "";
 		this.columnsPosition = {};
-		this.cardsOpen = false;
-		this.cardsPosition = {};
 		this.visibleOrder = [];
 	}
+	placeSubmenu(item, height, apply) {
+		const width = GridViewMenuComponent.ColumnsWidth;
+		const left = item.right + width + 4 <= window.innerWidth ? item.right + 2 : Math.max(4, item.left - width - 2);
+		const top = Math.max(4, Math.min(item.top - 5, window.innerHeight - 8 - height));
+		apply({
+			left: left + "px",
+			top: top + "px",
+			width: width + "px"
+		});
+	}
+	refineSubmenu(apply) {
+		setTimeout(() => {
+			const menu = this.host?.nativeElement.querySelector(".gvm-columns");
+			if (!menu || !this.submenuItem) return;
+			this.placeSubmenu(this.submenuItem, menu.offsetHeight, apply);
+			this.cd.markForCheck();
+		});
+	}
 	ngOnInit() {
 		this.chooser.loadViews().pipe(take$1(1)).subscribe((list) => {
 			this.viewList = list ?? {
@@ -16287,6 +16427,7 @@ var GridViewMenuComponent = class GridViewMenuComponent {
 			};
 			this.cd.markForCheck();
 			this.loaded.emit();
+			this.refineSubmenu((position) => this.columnsPosition = position);
 		});
 	}
 	isSelected(id) {
@@ -16310,14 +16451,8 @@ var GridViewMenuComponent = class GridViewMenuComponent {
 		event?.stopPropagation();
 		const item = event?.currentTarget?.getBoundingClientRect();
 		if (item) {
-			const width = GridViewMenuComponent.ColumnsWidth, height = GridViewMenuComponent.ColumnsHeight;
-			const left = item.right + width + 4 <= window.innerWidth ? item.right + 2 : Math.max(4, item.left - width - 2);
-			const top = Math.max(4, Math.min(item.top - 5, window.innerHeight - height - 8));
-			this.columnsPosition = {
-				left: left + "px",
-				top: top + "px",
-				width: width + "px"
-			};
+			this.submenuItem = item;
+			this.placeSubmenu(item, GridViewMenuComponent.SubmenuHeight, (position) => this.columnsPosition = position);
 		}
 		if (this.columnsOpen) return;
 		this.columnsOpen = true;
@@ -16325,52 +16460,12 @@ var GridViewMenuComponent = class GridViewMenuComponent {
 	}
 	closeColumns() {
 		this.columnsOpen = false;
-		this.cardsOpen = false;
-	}
-	openCards(event) {
-		event?.stopPropagation();
-		this.columnsOpen = false;
-		const item = event?.currentTarget?.getBoundingClientRect();
-		if (this.mobile) this.cardsPosition = {};
-		else if (item) {
-			const width = GridViewMenuComponent.ColumnsWidth, height = 220;
-			const left = item.right + width + 4 <= window.innerWidth ? item.right + 2 : Math.max(4, item.left - width - 2);
-			const top = Math.max(4, Math.min(item.top - 5, window.innerHeight - height - 8));
-			this.cardsPosition = {
-				left: left + "px",
-				top: top + "px",
-				width: width + "px"
-			};
-		}
-		if (this.cardsOpen) return;
-		this.cardsOpen = true;
-		this.cards = void 0;
-		this.chooser.loadCards?.().pipe(take$1(1)).subscribe((cards) => {
-			this.cards = cards;
-			this.cd.markForCheck();
-		});
-	}
-	closeCards() {
-		this.cardsOpen = false;
-	}
-	linkCard(id) {
-		if (!this.cards?.canLink || this.cards.linkedId === id) return;
-		this.done.emit();
-		this.chooser.linkCard?.(id);
-	}
-	editFilters() {
-		this.done.emit();
-		this.chooser.editFilters?.();
-	}
-	editCard() {
-		this.done.emit();
-		this.chooser.editCard?.();
 	}
 	static {
 		this.ColumnsWidth = 260;
 	}
 	static {
-		this.ColumnsHeight = 320;
+		this.SubmenuHeight = 320;
 	}
 	loadColumns() {
 		this.columns = void 0;
@@ -16453,7 +16548,7 @@ var GridViewMenuComponent = class GridViewMenuComponent {
 			version: "22.2.1",
 			ngImport: i0,
 			type: GridViewMenuComponent,
-			deps: [{ token: i0.ChangeDetectorRef }],
+			deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }],
 			target: i0.ɵɵFactoryTarget.Component
 		});
 	}
@@ -16473,8 +16568,8 @@ var GridViewMenuComponent = class GridViewMenuComponent {
 				loaded: "loaded"
 			},
 			ngImport: i0,
-			template: "<li *ngIf=\"!viewList\" class=\"gvm-info\"><span>Chargement…</span></li>\r\n<li *ngFor=\"let view of viewList?.views\" class=\"gvm-item gvm-view\" (mouseenter)=\"closeColumns()\" [class.checked]=\"isSelected(view.id)\"\r\n    [title]=\"view.isDefault ? 'Vue par défaut' : 'Vue personnalisée'\" (click)=\"toggleView(view.id)\">\r\n    <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"isSelected(view.id)\" (click)=\"$event.preventDefault()\" />\r\n    <span class=\"gvm-label\">{{ view.label }}</span>\r\n    <i *ngIf=\"view.isDefault && !viewList?.canEditDefault\" class=\"fa fa-lock gvm-lock\"></i>\r\n</li>\r\n<li *ngIf=\"viewList && !viewList.views.length\" class=\"gvm-info\"><span>Aucune vue</span></li>\r\n\r\n<li class=\"gvm-separator\"></li>\r\n<li *ngIf=\"chooser.create\" class=\"gvm-item\" (mouseenter)=\"closeColumns()\" (click)=\"createView()\">\r\n    <i class=\"fa fa-plus gvm-icon\"></i><span class=\"gvm-label\">Nouvelle vue</span>\r\n</li>\r\n\r\n<!-- Colonnes : sous-menu à côté du menu (à droite, ou à gauche s'il ne tient pas) ; colonnes\r\n     disponibles, par ordre alphabétique, cochées si affichées ; recherche par mot-clé. -->\r\n<ng-container *ngIf=\"chooser.loadColumns && !mobile\">\r\n    <li class=\"gvm-item\" [class.open]=\"columnsOpen\" (click)=\"openColumns($event)\" (mouseenter)=\"closeCards(); openColumns($event)\">\r\n        <i class=\"fa fa-list gvm-icon\"></i><span class=\"gvm-label\">Colonnes</span>\r\n        <i class=\"fa fa-caret-right gvm-caret\"></i>\r\n    </li>\r\n    <li *ngIf=\"columnsOpen\" class=\"gvm-columns\" [ngStyle]=\"columnsPosition\" (click)=\"$event.stopPropagation()\">\r\n        <input class=\"gvm-search\" type=\"text\" placeholder=\"Rechercher…\" [(ngModel)]=\"search\" />\r\n        <ul class=\"gvm-column-list\">\r\n            <li *ngIf=\"!columns\" class=\"gvm-info\"><span>Chargement…</span></li>\r\n            <!-- Colonnes affichées, dans l'ordre de la grille : à déplacer par glisser-déposer. -->\r\n            <li *ngFor=\"let column of visibleColumns()\" class=\"gvm-item gvm-column checked\" draggable=\"true\"\r\n                [class.pending]=\"pendingColumn === column.key\" [class.dragging]=\"dragKey === column.key\"\r\n                [class.drop-before]=\"dropTarget?.key === column.key && dropTarget?.before\"\r\n                [class.drop-after]=\"dropTarget?.key === column.key && !dropTarget?.before\"\r\n                [title]=\"column.key\" (click)=\"toggleColumn(column)\"\r\n                (dragstart)=\"onDragStart($event, column)\" (dragover)=\"onDragOver($event, column)\"\r\n                (drop)=\"onDrop($event)\" (dragend)=\"onDragEnd()\">\r\n                <i class=\"fa fa-bars gvm-grip\" title=\"Déplacer la colonne\"></i>\r\n                <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"true\" (click)=\"$event.preventDefault()\" />\r\n                <span class=\"gvm-label\">{{ column.label }}</span>\r\n            </li>\r\n            <!-- Colonnes non affichées, par ordre alphabétique. -->\r\n            <li *ngIf=\"visibleColumns().length && hiddenColumns().length\" class=\"gvm-separator\"></li>\r\n            <li *ngFor=\"let column of hiddenColumns()\" class=\"gvm-item gvm-column\"\r\n                [class.pending]=\"pendingColumn === column.key\" [title]=\"column.key\" (click)=\"toggleColumn(column)\">\r\n                <i class=\"fa fa-bars gvm-grip gvm-grip-empty\"></i>\r\n                <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"false\" (click)=\"$event.preventDefault()\" />\r\n                <span class=\"gvm-label\">{{ column.label }}</span>\r\n            </li>\r\n            <li *ngIf=\"columns && !filteredColumns().length\" class=\"gvm-info\"><span>Aucune colonne</span></li>\r\n        </ul>\r\n    </li>\r\n</ng-container>\r\n\r\n<!-- Filtres et tri : fenêtre de paramétrage, enregistrable dans la vue. -->\r\n<li *ngIf=\"chooser.editFilters\" class=\"gvm-item\" (mouseenter)=\"closeColumns()\" (click)=\"editFilters()\">\r\n    <i class=\"fa fa-filter gvm-icon\"></i><span class=\"gvm-label\">Filtres et tri…</span>\r\n</li>\r\n\r\n<!-- Carte : vue Carte liée à la vue Grille affichée (cochée), autres vues Carte, personnalisation. -->\r\n<ng-container *ngIf=\"chooser.loadCards\">\r\n    <li class=\"gvm-item\" [class.open]=\"cardsOpen\" (click)=\"openCards($event)\" (mouseenter)=\"!mobile && openCards($event)\">\r\n        <i class=\"fa fa-th-large gvm-icon\"></i><span class=\"gvm-label\">Carte</span>\r\n        <i class=\"fa fa-caret-right gvm-caret\"></i>\r\n    </li>\r\n    <li *ngIf=\"cardsOpen\" class=\"gvm-columns\" [class.gvm-fullscreen]=\"mobile\" [ngStyle]=\"cardsPosition\" (click)=\"$event.stopPropagation()\">\r\n        <!-- Téléphone : sous-menu en plein écran, au-dessus du menu ; la flèche revient au menu. -->\r\n        <div *ngIf=\"mobile\" class=\"gvm-fullscreen-header\">\r\n            <button type=\"button\" class=\"gvm-back\" title=\"Revenir au menu\" aria-label=\"Revenir au menu\" (click)=\"closeCards()\">\r\n                <i class=\"fa fa-arrow-left\"></i>\r\n            </button>\r\n            <span>Carte</span>\r\n        </div>\r\n        <ul class=\"gvm-column-list\">\r\n            <li *ngIf=\"!cards\" class=\"gvm-info\"><span>Chargement…</span></li>\r\n            <li *ngFor=\"let card of cards?.cards\" class=\"gvm-item gvm-column\" [class.checked]=\"cards?.linkedId === card.id\"\r\n                [class.disabled]=\"!cards?.canLink\"\r\n                [title]=\"cards?.canLink ? (card.isDefault ? 'Carte par défaut' : 'Carte personnalisée') : 'La vue par défaut est en lecture seule : dupliquez-la pour lui associer une autre carte'\"\r\n                (click)=\"linkCard(card.id)\">\r\n                <input type=\"radio\" tabindex=\"-1\" [checked]=\"cards?.linkedId === card.id\" (click)=\"$event.preventDefault()\" />\r\n                <span class=\"gvm-label\">{{ card.label }}</span>\r\n            </li>\r\n            <li *ngIf=\"cards && !cards.cards.length\" class=\"gvm-info\"><span>Aucune carte</span></li>\r\n            <li class=\"gvm-separator\"></li>\r\n            <li class=\"gvm-item\" (click)=\"editCard()\">\r\n                <i class=\"fa fa-pencil gvm-icon\"></i><span class=\"gvm-label\">Personnaliser la carte…</span>\r\n            </li>\r\n        </ul>\r\n    </li>\r\n</ng-container>\r\n\r\n<li class=\"gvm-separator\"></li>\r\n<li class=\"gvm-item\" (mouseenter)=\"closeColumns()\" (click)=\"editView()\">\r\n    <i class=\"fa fa-pencil gvm-icon\"></i><span class=\"gvm-label\">Modifier…</span>\r\n</li>\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{display:contents}li{list-style:none}.gvm-item{display:flex;align-items:center;gap:8px;padding:5px 12px;white-space:nowrap;cursor:pointer;font-size:12px;color:#4d5a81}.gvm-item:hover,.gvm-item.open{background:#ebf0ff}.gvm-item.checked{font-weight:600}.gvm-item.pending{opacity:.5;cursor:progress}.gvm-item input[type=checkbox]{width:14px;margin:0;pointer-events:none}.gvm-label{flex:1;overflow:hidden;text-overflow:ellipsis}.gvm-icon{width:14px;text-align:center;opacity:.8}.gvm-caret{margin-left:auto;opacity:.6}.gvm-lock{margin-left:auto;padding-left:8px;opacity:.5;font-size:11px}.gvm-info{padding:5px 12px;font-size:12px;color:#9fa9c7;cursor:default}.gvm-separator{height:0;margin:4px 0;border-top:1px solid #ebf0ff}.gvm-columns{position:fixed;z-index:3200;box-sizing:border-box;padding:6px;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003}.gvm-search{width:100%;box-sizing:border-box;height:24px;margin-bottom:4px;padding:2px 6px;border:1px solid #C1D0FD;border-radius:3px;font-size:12px;outline:none}.gvm-search:focus{border-color:#5272d3}.gvm-column-list{max-height:270px;overflow-y:auto;margin:0;padding:0}.gvm-column-list .gvm-item{padding:3px 6px}.gvm-grip{width:10px;opacity:.35;cursor:grab;font-size:10px}.gvm-grip-empty{visibility:hidden}.gvm-column{border-top:2px solid transparent;border-bottom:2px solid transparent}.gvm-column.dragging{opacity:.5}.gvm-column.drop-before{border-top-color:var(--orange-algorima, #f59d0f)}.gvm-column.drop-after{border-bottom-color:var(--orange-algorima, #f59d0f)}.gvm-item.disabled{opacity:.55;cursor:default}.gvm-columns.gvm-fullscreen{inset:0;z-index:3300;display:flex;flex-direction:column;padding:0;border:none;border-radius:0;box-shadow:none}.gvm-columns.gvm-fullscreen .gvm-column-list{flex:1 1 auto;max-height:none;overflow-y:auto;padding:6px 0}.gvm-columns.gvm-fullscreen .gvm-item{padding:12px 18px;font-size:14px}.gvm-fullscreen-header{display:flex;align-items:center;gap:8px;flex:none;height:50px;padding:0 8px;padding-top:env(safe-area-inset-top,0px);background:#4465c9;color:#fff;font-size:15px;font-weight:600}.gvm-back{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:5px;background:transparent;color:#fff;font-size:18px;cursor:pointer}\n"],
+			template: "<li *ngIf=\"!viewList\" class=\"gvm-info\"><span>Chargement…</span></li>\r\n<li *ngFor=\"let view of viewList?.views\" class=\"gvm-item gvm-view\" (mouseenter)=\"closeColumns()\" [class.checked]=\"isSelected(view.id)\"\r\n    [title]=\"view.isDefault ? 'Vue par défaut' : 'Vue personnalisée'\" (click)=\"toggleView(view.id)\">\r\n    <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"isSelected(view.id)\" (click)=\"$event.preventDefault()\" />\r\n    <span class=\"gvm-label\">{{ view.label }}</span>\r\n    <i *ngIf=\"view.isDefault && !viewList?.canEditDefault\" class=\"fa fa-lock gvm-lock\"></i>\r\n</li>\r\n<li *ngIf=\"viewList && !viewList.views.length\" class=\"gvm-info\"><span>Aucune vue</span></li>\r\n\r\n<li class=\"gvm-separator\"></li>\r\n<li *ngIf=\"chooser.create\" class=\"gvm-item\" (mouseenter)=\"closeColumns()\" (click)=\"createView()\">\r\n    <i class=\"fa fa-plus gvm-icon\"></i><span class=\"gvm-label\">Nouvelle vue</span>\r\n</li>\r\n\r\n<!-- Colonnes : sous-menu à côté du menu (à droite, ou à gauche s'il ne tient pas) ; colonnes\r\n     disponibles, par ordre alphabétique, cochées si affichées ; recherche par mot-clé. -->\r\n<ng-container *ngIf=\"chooser.loadColumns && !mobile\">\r\n    <li class=\"gvm-item\" [class.open]=\"columnsOpen\" (click)=\"openColumns($event)\" (mouseenter)=\"openColumns($event)\">\r\n        <i class=\"fa fa-list gvm-icon\"></i><span class=\"gvm-label\">Colonnes</span>\r\n        <i class=\"fa fa-caret-right gvm-caret\"></i>\r\n    </li>\r\n    <li *ngIf=\"columnsOpen\" class=\"gvm-columns\" [ngStyle]=\"columnsPosition\" (click)=\"$event.stopPropagation()\">\r\n        <input class=\"gvm-search\" type=\"text\" placeholder=\"Rechercher…\" [(ngModel)]=\"search\" />\r\n        <ul class=\"gvm-column-list\">\r\n            <li *ngIf=\"!columns\" class=\"gvm-info\"><span>Chargement…</span></li>\r\n            <!-- Colonnes affichées, dans l'ordre de la grille : à déplacer par glisser-déposer. -->\r\n            <li *ngFor=\"let column of visibleColumns()\" class=\"gvm-item gvm-column checked\" draggable=\"true\"\r\n                [class.pending]=\"pendingColumn === column.key\" [class.dragging]=\"dragKey === column.key\"\r\n                [class.drop-before]=\"dropTarget?.key === column.key && dropTarget?.before\"\r\n                [class.drop-after]=\"dropTarget?.key === column.key && !dropTarget?.before\"\r\n                [title]=\"column.key\" (click)=\"toggleColumn(column)\"\r\n                (dragstart)=\"onDragStart($event, column)\" (dragover)=\"onDragOver($event, column)\"\r\n                (drop)=\"onDrop($event)\" (dragend)=\"onDragEnd()\">\r\n                <i class=\"fa fa-bars gvm-grip\" title=\"Déplacer la colonne\"></i>\r\n                <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"true\" (click)=\"$event.preventDefault()\" />\r\n                <span class=\"gvm-label\">{{ column.label }}</span>\r\n            </li>\r\n            <!-- Colonnes non affichées, par ordre alphabétique. -->\r\n            <li *ngIf=\"visibleColumns().length && hiddenColumns().length\" class=\"gvm-separator\"></li>\r\n            <li *ngFor=\"let column of hiddenColumns()\" class=\"gvm-item gvm-column\"\r\n                [class.pending]=\"pendingColumn === column.key\" [title]=\"column.key\" (click)=\"toggleColumn(column)\">\r\n                <i class=\"fa fa-bars gvm-grip gvm-grip-empty\"></i>\r\n                <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"false\" (click)=\"$event.preventDefault()\" />\r\n                <span class=\"gvm-label\">{{ column.label }}</span>\r\n            </li>\r\n            <li *ngIf=\"columns && !filteredColumns().length\" class=\"gvm-info\"><span>Aucune colonne</span></li>\r\n        </ul>\r\n    </li>\r\n</ng-container>\r\n\r\n\r\n<li class=\"gvm-separator\"></li>\r\n<li class=\"gvm-item\" (mouseenter)=\"closeColumns()\" (click)=\"editView()\">\r\n    <i class=\"fa fa-pencil gvm-icon\"></i><span class=\"gvm-label\">Modifier…</span>\r\n</li>\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{display:contents}li{list-style:none}.gvm-item{display:flex;align-items:center;gap:8px;padding:5px 12px;white-space:nowrap;cursor:pointer;font-size:12px;color:#4d5a81}.gvm-item:hover,.gvm-item.open{background:#ebf0ff}.gvm-item.checked{font-weight:600}.gvm-item.pending{opacity:.5;cursor:progress}.gvm-item input[type=checkbox]{width:14px;margin:0;pointer-events:none}.gvm-label{flex:1;overflow:hidden;text-overflow:ellipsis}.gvm-icon{width:14px;text-align:center;opacity:.8}.gvm-caret{margin-left:auto;opacity:.6}.gvm-lock{margin-left:auto;padding-left:8px;opacity:.5;font-size:11px}.gvm-info{padding:5px 12px;font-size:12px;color:#9fa9c7;cursor:default}.gvm-separator{height:0;margin:4px 0;border-top:1px solid #ebf0ff}.gvm-columns{position:fixed;z-index:3200;box-sizing:border-box;padding:6px;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003}.gvm-search{width:100%;box-sizing:border-box;height:24px;margin-bottom:4px;padding:2px 6px;border:1px solid #C1D0FD;border-radius:3px;font-size:12px;outline:none}.gvm-search:focus{border-color:#5272d3}.gvm-column-list{max-height:270px;overflow-y:auto;margin:0;padding:0}.gvm-column-list .gvm-item{padding:3px 6px}.gvm-grip{width:10px;opacity:.35;cursor:grab;font-size:10px}.gvm-grip-empty{visibility:hidden}.gvm-column{border-top:2px solid transparent;border-bottom:2px solid transparent}.gvm-column.dragging{opacity:.5}.gvm-column.drop-before{border-top-color:var(--orange-algorima, #f59d0f)}.gvm-column.drop-after{border-bottom-color:var(--orange-algorima, #f59d0f)}\n"],
 			dependencies: [
 				{
 					kind: "ngmodule",
@@ -16550,11 +16645,11 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			imports: [CommonModule, FormsModule],
 			changeDetection: ChangeDetectionStrategy.Eager,
-			template: "<li *ngIf=\"!viewList\" class=\"gvm-info\"><span>Chargement…</span></li>\r\n<li *ngFor=\"let view of viewList?.views\" class=\"gvm-item gvm-view\" (mouseenter)=\"closeColumns()\" [class.checked]=\"isSelected(view.id)\"\r\n    [title]=\"view.isDefault ? 'Vue par défaut' : 'Vue personnalisée'\" (click)=\"toggleView(view.id)\">\r\n    <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"isSelected(view.id)\" (click)=\"$event.preventDefault()\" />\r\n    <span class=\"gvm-label\">{{ view.label }}</span>\r\n    <i *ngIf=\"view.isDefault && !viewList?.canEditDefault\" class=\"fa fa-lock gvm-lock\"></i>\r\n</li>\r\n<li *ngIf=\"viewList && !viewList.views.length\" class=\"gvm-info\"><span>Aucune vue</span></li>\r\n\r\n<li class=\"gvm-separator\"></li>\r\n<li *ngIf=\"chooser.create\" class=\"gvm-item\" (mouseenter)=\"closeColumns()\" (click)=\"createView()\">\r\n    <i class=\"fa fa-plus gvm-icon\"></i><span class=\"gvm-label\">Nouvelle vue</span>\r\n</li>\r\n\r\n<!-- Colonnes : sous-menu à côté du menu (à droite, ou à gauche s'il ne tient pas) ; colonnes\r\n     disponibles, par ordre alphabétique, cochées si affichées ; recherche par mot-clé. -->\r\n<ng-container *ngIf=\"chooser.loadColumns && !mobile\">\r\n    <li class=\"gvm-item\" [class.open]=\"columnsOpen\" (click)=\"openColumns($event)\" (mouseenter)=\"closeCards(); openColumns($event)\">\r\n        <i class=\"fa fa-list gvm-icon\"></i><span class=\"gvm-label\">Colonnes</span>\r\n        <i class=\"fa fa-caret-right gvm-caret\"></i>\r\n    </li>\r\n    <li *ngIf=\"columnsOpen\" class=\"gvm-columns\" [ngStyle]=\"columnsPosition\" (click)=\"$event.stopPropagation()\">\r\n        <input class=\"gvm-search\" type=\"text\" placeholder=\"Rechercher…\" [(ngModel)]=\"search\" />\r\n        <ul class=\"gvm-column-list\">\r\n            <li *ngIf=\"!columns\" class=\"gvm-info\"><span>Chargement…</span></li>\r\n            <!-- Colonnes affichées, dans l'ordre de la grille : à déplacer par glisser-déposer. -->\r\n            <li *ngFor=\"let column of visibleColumns()\" class=\"gvm-item gvm-column checked\" draggable=\"true\"\r\n                [class.pending]=\"pendingColumn === column.key\" [class.dragging]=\"dragKey === column.key\"\r\n                [class.drop-before]=\"dropTarget?.key === column.key && dropTarget?.before\"\r\n                [class.drop-after]=\"dropTarget?.key === column.key && !dropTarget?.before\"\r\n                [title]=\"column.key\" (click)=\"toggleColumn(column)\"\r\n                (dragstart)=\"onDragStart($event, column)\" (dragover)=\"onDragOver($event, column)\"\r\n                (drop)=\"onDrop($event)\" (dragend)=\"onDragEnd()\">\r\n                <i class=\"fa fa-bars gvm-grip\" title=\"Déplacer la colonne\"></i>\r\n                <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"true\" (click)=\"$event.preventDefault()\" />\r\n                <span class=\"gvm-label\">{{ column.label }}</span>\r\n            </li>\r\n            <!-- Colonnes non affichées, par ordre alphabétique. -->\r\n            <li *ngIf=\"visibleColumns().length && hiddenColumns().length\" class=\"gvm-separator\"></li>\r\n            <li *ngFor=\"let column of hiddenColumns()\" class=\"gvm-item gvm-column\"\r\n                [class.pending]=\"pendingColumn === column.key\" [title]=\"column.key\" (click)=\"toggleColumn(column)\">\r\n                <i class=\"fa fa-bars gvm-grip gvm-grip-empty\"></i>\r\n                <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"false\" (click)=\"$event.preventDefault()\" />\r\n                <span class=\"gvm-label\">{{ column.label }}</span>\r\n            </li>\r\n            <li *ngIf=\"columns && !filteredColumns().length\" class=\"gvm-info\"><span>Aucune colonne</span></li>\r\n        </ul>\r\n    </li>\r\n</ng-container>\r\n\r\n<!-- Filtres et tri : fenêtre de paramétrage, enregistrable dans la vue. -->\r\n<li *ngIf=\"chooser.editFilters\" class=\"gvm-item\" (mouseenter)=\"closeColumns()\" (click)=\"editFilters()\">\r\n    <i class=\"fa fa-filter gvm-icon\"></i><span class=\"gvm-label\">Filtres et tri…</span>\r\n</li>\r\n\r\n<!-- Carte : vue Carte liée à la vue Grille affichée (cochée), autres vues Carte, personnalisation. -->\r\n<ng-container *ngIf=\"chooser.loadCards\">\r\n    <li class=\"gvm-item\" [class.open]=\"cardsOpen\" (click)=\"openCards($event)\" (mouseenter)=\"!mobile && openCards($event)\">\r\n        <i class=\"fa fa-th-large gvm-icon\"></i><span class=\"gvm-label\">Carte</span>\r\n        <i class=\"fa fa-caret-right gvm-caret\"></i>\r\n    </li>\r\n    <li *ngIf=\"cardsOpen\" class=\"gvm-columns\" [class.gvm-fullscreen]=\"mobile\" [ngStyle]=\"cardsPosition\" (click)=\"$event.stopPropagation()\">\r\n        <!-- Téléphone : sous-menu en plein écran, au-dessus du menu ; la flèche revient au menu. -->\r\n        <div *ngIf=\"mobile\" class=\"gvm-fullscreen-header\">\r\n            <button type=\"button\" class=\"gvm-back\" title=\"Revenir au menu\" aria-label=\"Revenir au menu\" (click)=\"closeCards()\">\r\n                <i class=\"fa fa-arrow-left\"></i>\r\n            </button>\r\n            <span>Carte</span>\r\n        </div>\r\n        <ul class=\"gvm-column-list\">\r\n            <li *ngIf=\"!cards\" class=\"gvm-info\"><span>Chargement…</span></li>\r\n            <li *ngFor=\"let card of cards?.cards\" class=\"gvm-item gvm-column\" [class.checked]=\"cards?.linkedId === card.id\"\r\n                [class.disabled]=\"!cards?.canLink\"\r\n                [title]=\"cards?.canLink ? (card.isDefault ? 'Carte par défaut' : 'Carte personnalisée') : 'La vue par défaut est en lecture seule : dupliquez-la pour lui associer une autre carte'\"\r\n                (click)=\"linkCard(card.id)\">\r\n                <input type=\"radio\" tabindex=\"-1\" [checked]=\"cards?.linkedId === card.id\" (click)=\"$event.preventDefault()\" />\r\n                <span class=\"gvm-label\">{{ card.label }}</span>\r\n            </li>\r\n            <li *ngIf=\"cards && !cards.cards.length\" class=\"gvm-info\"><span>Aucune carte</span></li>\r\n            <li class=\"gvm-separator\"></li>\r\n            <li class=\"gvm-item\" (click)=\"editCard()\">\r\n                <i class=\"fa fa-pencil gvm-icon\"></i><span class=\"gvm-label\">Personnaliser la carte…</span>\r\n            </li>\r\n        </ul>\r\n    </li>\r\n</ng-container>\r\n\r\n<li class=\"gvm-separator\"></li>\r\n<li class=\"gvm-item\" (mouseenter)=\"closeColumns()\" (click)=\"editView()\">\r\n    <i class=\"fa fa-pencil gvm-icon\"></i><span class=\"gvm-label\">Modifier…</span>\r\n</li>\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{display:contents}li{list-style:none}.gvm-item{display:flex;align-items:center;gap:8px;padding:5px 12px;white-space:nowrap;cursor:pointer;font-size:12px;color:#4d5a81}.gvm-item:hover,.gvm-item.open{background:#ebf0ff}.gvm-item.checked{font-weight:600}.gvm-item.pending{opacity:.5;cursor:progress}.gvm-item input[type=checkbox]{width:14px;margin:0;pointer-events:none}.gvm-label{flex:1;overflow:hidden;text-overflow:ellipsis}.gvm-icon{width:14px;text-align:center;opacity:.8}.gvm-caret{margin-left:auto;opacity:.6}.gvm-lock{margin-left:auto;padding-left:8px;opacity:.5;font-size:11px}.gvm-info{padding:5px 12px;font-size:12px;color:#9fa9c7;cursor:default}.gvm-separator{height:0;margin:4px 0;border-top:1px solid #ebf0ff}.gvm-columns{position:fixed;z-index:3200;box-sizing:border-box;padding:6px;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003}.gvm-search{width:100%;box-sizing:border-box;height:24px;margin-bottom:4px;padding:2px 6px;border:1px solid #C1D0FD;border-radius:3px;font-size:12px;outline:none}.gvm-search:focus{border-color:#5272d3}.gvm-column-list{max-height:270px;overflow-y:auto;margin:0;padding:0}.gvm-column-list .gvm-item{padding:3px 6px}.gvm-grip{width:10px;opacity:.35;cursor:grab;font-size:10px}.gvm-grip-empty{visibility:hidden}.gvm-column{border-top:2px solid transparent;border-bottom:2px solid transparent}.gvm-column.dragging{opacity:.5}.gvm-column.drop-before{border-top-color:var(--orange-algorima, #f59d0f)}.gvm-column.drop-after{border-bottom-color:var(--orange-algorima, #f59d0f)}.gvm-item.disabled{opacity:.55;cursor:default}.gvm-columns.gvm-fullscreen{inset:0;z-index:3300;display:flex;flex-direction:column;padding:0;border:none;border-radius:0;box-shadow:none}.gvm-columns.gvm-fullscreen .gvm-column-list{flex:1 1 auto;max-height:none;overflow-y:auto;padding:6px 0}.gvm-columns.gvm-fullscreen .gvm-item{padding:12px 18px;font-size:14px}.gvm-fullscreen-header{display:flex;align-items:center;gap:8px;flex:none;height:50px;padding:0 8px;padding-top:env(safe-area-inset-top,0px);background:#4465c9;color:#fff;font-size:15px;font-weight:600}.gvm-back{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:5px;background:transparent;color:#fff;font-size:18px;cursor:pointer}\n"]
+			template: "<li *ngIf=\"!viewList\" class=\"gvm-info\"><span>Chargement…</span></li>\r\n<li *ngFor=\"let view of viewList?.views\" class=\"gvm-item gvm-view\" (mouseenter)=\"closeColumns()\" [class.checked]=\"isSelected(view.id)\"\r\n    [title]=\"view.isDefault ? 'Vue par défaut' : 'Vue personnalisée'\" (click)=\"toggleView(view.id)\">\r\n    <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"isSelected(view.id)\" (click)=\"$event.preventDefault()\" />\r\n    <span class=\"gvm-label\">{{ view.label }}</span>\r\n    <i *ngIf=\"view.isDefault && !viewList?.canEditDefault\" class=\"fa fa-lock gvm-lock\"></i>\r\n</li>\r\n<li *ngIf=\"viewList && !viewList.views.length\" class=\"gvm-info\"><span>Aucune vue</span></li>\r\n\r\n<li class=\"gvm-separator\"></li>\r\n<li *ngIf=\"chooser.create\" class=\"gvm-item\" (mouseenter)=\"closeColumns()\" (click)=\"createView()\">\r\n    <i class=\"fa fa-plus gvm-icon\"></i><span class=\"gvm-label\">Nouvelle vue</span>\r\n</li>\r\n\r\n<!-- Colonnes : sous-menu à côté du menu (à droite, ou à gauche s'il ne tient pas) ; colonnes\r\n     disponibles, par ordre alphabétique, cochées si affichées ; recherche par mot-clé. -->\r\n<ng-container *ngIf=\"chooser.loadColumns && !mobile\">\r\n    <li class=\"gvm-item\" [class.open]=\"columnsOpen\" (click)=\"openColumns($event)\" (mouseenter)=\"openColumns($event)\">\r\n        <i class=\"fa fa-list gvm-icon\"></i><span class=\"gvm-label\">Colonnes</span>\r\n        <i class=\"fa fa-caret-right gvm-caret\"></i>\r\n    </li>\r\n    <li *ngIf=\"columnsOpen\" class=\"gvm-columns\" [ngStyle]=\"columnsPosition\" (click)=\"$event.stopPropagation()\">\r\n        <input class=\"gvm-search\" type=\"text\" placeholder=\"Rechercher…\" [(ngModel)]=\"search\" />\r\n        <ul class=\"gvm-column-list\">\r\n            <li *ngIf=\"!columns\" class=\"gvm-info\"><span>Chargement…</span></li>\r\n            <!-- Colonnes affichées, dans l'ordre de la grille : à déplacer par glisser-déposer. -->\r\n            <li *ngFor=\"let column of visibleColumns()\" class=\"gvm-item gvm-column checked\" draggable=\"true\"\r\n                [class.pending]=\"pendingColumn === column.key\" [class.dragging]=\"dragKey === column.key\"\r\n                [class.drop-before]=\"dropTarget?.key === column.key && dropTarget?.before\"\r\n                [class.drop-after]=\"dropTarget?.key === column.key && !dropTarget?.before\"\r\n                [title]=\"column.key\" (click)=\"toggleColumn(column)\"\r\n                (dragstart)=\"onDragStart($event, column)\" (dragover)=\"onDragOver($event, column)\"\r\n                (drop)=\"onDrop($event)\" (dragend)=\"onDragEnd()\">\r\n                <i class=\"fa fa-bars gvm-grip\" title=\"Déplacer la colonne\"></i>\r\n                <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"true\" (click)=\"$event.preventDefault()\" />\r\n                <span class=\"gvm-label\">{{ column.label }}</span>\r\n            </li>\r\n            <!-- Colonnes non affichées, par ordre alphabétique. -->\r\n            <li *ngIf=\"visibleColumns().length && hiddenColumns().length\" class=\"gvm-separator\"></li>\r\n            <li *ngFor=\"let column of hiddenColumns()\" class=\"gvm-item gvm-column\"\r\n                [class.pending]=\"pendingColumn === column.key\" [title]=\"column.key\" (click)=\"toggleColumn(column)\">\r\n                <i class=\"fa fa-bars gvm-grip gvm-grip-empty\"></i>\r\n                <input type=\"checkbox\" tabindex=\"-1\" [checked]=\"false\" (click)=\"$event.preventDefault()\" />\r\n                <span class=\"gvm-label\">{{ column.label }}</span>\r\n            </li>\r\n            <li *ngIf=\"columns && !filteredColumns().length\" class=\"gvm-info\"><span>Aucune colonne</span></li>\r\n        </ul>\r\n    </li>\r\n</ng-container>\r\n\r\n\r\n<li class=\"gvm-separator\"></li>\r\n<li class=\"gvm-item\" (mouseenter)=\"closeColumns()\" (click)=\"editView()\">\r\n    <i class=\"fa fa-pencil gvm-icon\"></i><span class=\"gvm-label\">Modifier…</span>\r\n</li>\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{display:contents}li{list-style:none}.gvm-item{display:flex;align-items:center;gap:8px;padding:5px 12px;white-space:nowrap;cursor:pointer;font-size:12px;color:#4d5a81}.gvm-item:hover,.gvm-item.open{background:#ebf0ff}.gvm-item.checked{font-weight:600}.gvm-item.pending{opacity:.5;cursor:progress}.gvm-item input[type=checkbox]{width:14px;margin:0;pointer-events:none}.gvm-label{flex:1;overflow:hidden;text-overflow:ellipsis}.gvm-icon{width:14px;text-align:center;opacity:.8}.gvm-caret{margin-left:auto;opacity:.6}.gvm-lock{margin-left:auto;padding-left:8px;opacity:.5;font-size:11px}.gvm-info{padding:5px 12px;font-size:12px;color:#9fa9c7;cursor:default}.gvm-separator{height:0;margin:4px 0;border-top:1px solid #ebf0ff}.gvm-columns{position:fixed;z-index:3200;box-sizing:border-box;padding:6px;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003}.gvm-search{width:100%;box-sizing:border-box;height:24px;margin-bottom:4px;padding:2px 6px;border:1px solid #C1D0FD;border-radius:3px;font-size:12px;outline:none}.gvm-search:focus{border-color:#5272d3}.gvm-column-list{max-height:270px;overflow-y:auto;margin:0;padding:0}.gvm-column-list .gvm-item{padding:3px 6px}.gvm-grip{width:10px;opacity:.35;cursor:grab;font-size:10px}.gvm-grip-empty{visibility:hidden}.gvm-column{border-top:2px solid transparent;border-bottom:2px solid transparent}.gvm-column.dragging{opacity:.5}.gvm-column.drop-before{border-top-color:var(--orange-algorima, #f59d0f)}.gvm-column.drop-after{border-bottom-color:var(--orange-algorima, #f59d0f)}\n"]
 		}]
 	}],
-	ctorParameters: () => [{ type: i0.ChangeDetectorRef }],
+	ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }],
 	propDecorators: {
 		chooser: [{
 			type: Input,
@@ -16765,11 +16860,17 @@ var ActionPanelComponent = class ActionPanelComponent {
 			this.actions = acts;
 		});
 		this.wrapper = new FormWrapper(this.validationService, this.bus, false);
-		combineLatest([this.facade.criteria$, this.facade.config.filterDescriptors$]).pipe(takeUntil$1(this.destroy$)).subscribe(([fltr, fds]) => {
+		combineLatest([
+			this.facade.criteria$,
+			this.facade.config.filterDescriptors$,
+			this.facade.filter.viewFilter$,
+			this.facade.filter.viewFilterEditing$
+		]).pipe(takeUntil$1(this.destroy$)).subscribe(([fltr, fds]) => {
 			const filters = fds.filter((x) => x.PropertyName != "Keywords" && x.PropertyName.toUpperCase() != "ID");
 			this.fields = filters;
 			this.wrapper.initialize(filters);
 			this.wrapper.hookFormEntity(fltr);
+			Object.keys(this.facade.filter.lockedPanel).forEach((p) => this.wrapper.form.get(p)?.disable({ emitEvent: false }));
 		});
 		this.wrapper.changes$.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => this.handleFilterEvent(evt));
 	}
@@ -16794,7 +16895,10 @@ var ActionPanelComponent = class ActionPanelComponent {
 	}
 	handleFilterEvent(evt) {
 		if (evt.type === "reset") {
-			this.facade.filter.setFilter(evt.value);
+			this.facade.filter.setFilter({
+				...evt.value,
+				...this.facade.filter.lockedPanel
+			});
 			return;
 		}
 		this.wrapper.applyCascadeFrom(evt.field);
@@ -17472,6 +17576,7 @@ var DataGridComponent = class DataGridComponent {
 		this.rowRegistry = new RowRegistry();
 		this.destroy$ = new Subject();
 		this.columns = [];
+		this.appendingPage = false;
 		this.selectedIds = /* @__PURE__ */ new Set();
 		this.rowForms = /* @__PURE__ */ new Map();
 		this.singleLineFields = /* @__PURE__ */ new Map();
@@ -17502,8 +17607,27 @@ var DataGridComponent = class DataGridComponent {
 		});
 		this.facade.actions.actions$.pipe(filter((acts) => !Utilities.IsNil(acts)), takeUntil(this.destroy$)).subscribe((acts) => this.actions = acts);
 	}
+	static {
+		this.ScrollLoadThreshold = 200;
+	}
+	onGridScroll(event) {
+		const container = event.target;
+		const page = this.facade.filter.pageNumber$.value ?? 1;
+		const pages = this.facade.filter.totalPages$.value ?? 1;
+		if (this.appendingPage || page >= pages || container.scrollTop + container.clientHeight < container.scrollHeight - DataGridComponent.ScrollLoadThreshold) return;
+		this.appendingPage = true;
+		this.facade.filter.setPage(page + 1);
+	}
 	bindData() {
 		this.facade.data.data$.subscribe((res) => {
+			if (this.appendingPage && this.data?.Values?.length) {
+				const shown = new Set(this.data.Values.map((r) => r.Id));
+				res = {
+					...res,
+					Values: [...this.data.Values, ...(res?.Values ?? []).filter((r) => !shown.has(r.Id))]
+				};
+			}
+			this.appendingPage = false;
 			this.data = res;
 			this.facade.selection.setCurrentData(res.Values);
 			this.rowRegistry.setExpectedCount(this.data?.Values?.length ?? 0);
@@ -18786,7 +18910,7 @@ var DataGridComponent = class DataGridComponent {
 				}
 			],
 			ngImport: i0,
-			template: "<div #datagridContainer [class]=\"this.datagridClass\" tabindex=\"-1\" (keydown)=\"onGridKeyDown($event)\"\r\n    (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (contextmenu)=\"openEmptyAreaContextMenu($event)\">\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                            <!-- En-tête : poignée de déplacement à gauche, intitulé, indicateur de tri,\r\n                                 flèche du menu (tri, agrégation) à droite. Le clic ne trie plus. -->\r\n                            <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                                    [attr.class]=\"'header' | gridStyle : ctx : { column : col }\"\r\n                                    [style.width.px]=\"colWidth(col)\" [style.min-width.px]=\"colWidth(col)\" [style.max-width.px]=\"colWidth(col)\"\r\n                                    [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n                                <div class=\"header-cell\"\r\n                                    [class.col-dragging]=\"draggedColumn === col.Property\">\r\n                                    <span class=\"header-handle\" title=\"Déplacer la colonne\"\r\n                                        (mousedown)=\"onHeaderMouseDown(col, $event)\">\r\n                                        <i class=\"fa fa-ellipsis-v\"></i>\r\n                                    </span>\r\n                                    <label>{{ getHeaderLabel(col) }}</label>\r\n                                    <i *ngIf=\"this.facade.filter.isAsc(col.Property)\" class=\"fa fa-long-arrow-up header-sort\" title=\"Tri croissant\"></i>\r\n                                    <i *ngIf=\"this.facade.filter.isDesc(col.Property)\" class=\"fa fa-long-arrow-down header-sort\" title=\"Tri décroissant\"></i>\r\n                                    <sup *ngIf=\"this.facade.filter.sortRank(col.Property) > 0\" class=\"header-sort-rank\"\r\n                                        title=\"Rang dans le tri personnalisé\">{{ this.facade.filter.sortRank(col.Property) }}</sup>\r\n                                    <i *ngIf=\"activeAggregations[col.Property]\" class=\"header-agg\" [title]=\"'Agrégation : ' + aggregationLabel(activeAggregations[col.Property])\">Σ</i>\r\n                                    <!-- Dernière colonne suivie de la colonne vide de fin : sa flèche est dans la colonne vide. -->\r\n                                    <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n                                        *ngIf=\"!(ctx.enableLastColumnResize && i === rcolumns.length - 1)\"\r\n                                        [class.open]=\"headerMenu?.column.Property === col.Property\"\r\n                                        (click)=\"toggleHeaderMenu(col, $event)\">\r\n                                        <i class=\"fa fa-caret-down\"></i>\r\n                                    </button>\r\n                                </div>\r\n                                <!-- Bord droit : largeur de la colonne (tirer), ajustée au contenu (double clic). -->\r\n                                <span class=\"col-resizer\" title=\"Largeur de la colonne (double clic : ajuster au contenu)\"\r\n                                    (mousedown)=\"startResize(col, $event)\" (dblclick)=\"autoFitColumn(col, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"></span>\r\n                            </th>\r\n                            <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"\r\n                                (contextmenu)=\"openHeaderContextMenu($event, rcolumns[rcolumns.length - 1])\">\r\n                                <div class=\"header-cell header-cell-end\" *ngIf=\"rcolumns.length > 0\">\r\n                                    <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n                                        [class.open]=\"headerMenu?.column.Property === rcolumns[rcolumns.length - 1].Property\"\r\n                                        (click)=\"toggleHeaderMenu(rcolumns[rcolumns.length - 1], $event)\">\r\n                                        <i class=\"fa fa-caret-down\"></i>\r\n                                    </button>\r\n                                </div>\r\n                            </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                                [class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates  }\"\r\n                                [class.selected]=\"isRowSelected(row)\"\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.id]=\"cellId(row, column)\"\r\n                                [style.max-width.px]=\"colWidth(column)\" [attr.data-sized]=\"colWidth(column) ? '' : null\"\r\n                                [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\"\r\n                                [class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\"\r\n                                [class.selected]=\"isRowSelected(row)\"\r\n                                (mousedown)=\"onCellMouseDown(r, i, $event)\"\r\n                                (mouseenter)=\"onCellMouseEnter(r, i, $event)\"\r\n                                (click)=\"onCellClick(row, column)\"\r\n                                (dblclick)=\"onCellDblClick(row, column)\">\r\n\r\n                                <alg-datagrid-cell #dataGridCellComponent\r\n                                    class=\"gridcell-container\"\r\n                                    [entity]=\"row\"\r\n                                    [isEditable]=\"canEditCell(row, column)\"\r\n                                    [property]=\"column.Property\"\r\n                                    [managed]=\"true\"\r\n                                    [mode]=\"showEditor(row, column) ? 'edit' : 'view'\"\r\n                                    [class.grid-cursor]=\"isCursorCell(row, column)\"\r\n                                    [class.grid-range]=\"isInRange(r, i)\"\r\n                                    (contextmenu)=\"openContextMenu($event, row, column)\">\r\n\r\n                                    <ng-template alg-editMode>\r\n                                        <!-- Éditeur du champ du formulaire qui correspond à la colonne (sinon déduit de la colonne), à la hauteur de la ligne. -->\r\n                                        <alg-field class=\"grid-editor\"\r\n                                            [field]=\"getEditField(column)\"\r\n                                            [form]=\"getRowForm(row)\"\r\n                                            [showLabel]=\"false\"\r\n                                            (propertyChanged)=\"onCellChanged(row, $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                                <!-- Colonne vide de fin : clic droit = menu de la dernière colonne. -->\r\n                                <td (contextmenu)=\"openContextMenu($event, row, rcolumns[rcolumns.length - 1])\"></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                                [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n\r\n                                <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n                                    <span class=\"agg-label\">{{ aggregationLabel(agg.op) }}</span>\r\n                                    <span [ngSwitch]=\"agg.op === 'COUNT' ? 'count' : column.Display?.type\">\r\n\r\n                                        <span *ngSwitchCase=\"'count'\">{{ agg.value | number: '1.0-0' }}</span>\r\n                                        <span *ngSwitchCase=\"'percent'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n                                        <span *ngSwitchCase=\"'fixedsizeinteger'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\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<!-- Emplacement visé par une colonne déplacée : trait orange sur la séparation des deux en-têtes. -->\r\n<div class=\"col-drop-indicator\" *ngIf=\"dropIndicator\"\r\n    [ngStyle]=\"{ left: dropIndicator.left + 'px', top: dropIndicator.top + 'px', height: dropIndicator.height + 'px' }\"></div>\r\n\r\n<!-- Menu d'une colonne (flèche de l'en-tête ou clic droit sur une cellule), en trois zones séparées\r\n     par un trait : Tri, Actions (celles du panneau des actions), Fonctions (sous-menu « Fonctions »). -->\r\n<div class=\"header-menu\" *ngIf=\"headerMenu\"\r\n    [ngStyle]=\"{ top: headerMenu.y + 'px', left: headerMenu.x + 'px', visibility: headerMenu.ready ? 'visible' : 'hidden' }\"\r\n    (click)=\"$event.stopPropagation()\" (contextmenu)=\"$event.preventDefault()\">\r\n    <ul>\r\n        <!-- Tri -->\r\n        <li [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property)\" (click)=\"sortColumn('asc')\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort-amount-asc\"></i><span>Trier par ordre croissant</span>\r\n        </li>\r\n        <li [class.checked]=\"this.facade.filter.isDesc(headerMenu.column.Property)\" (click)=\"sortColumn('desc')\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort-amount-desc\"></i><span>Trier par ordre décroissant</span>\r\n        </li>\r\n        <li [class.checked]=\"this.facade.filter.getSortList().length > 1\" (click)=\"openCustomSort()\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort\"></i><span>Tri personnalisé…</span>\r\n        </li>\r\n        <!-- Filtre sur la valeur de la cellule (clic droit sur une cellule) : première ligne des filtres composés. -->\r\n        <li *ngIf=\"cellFilterValue() !== undefined\" (click)=\"filterOnCell()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-filter\"></i><span>Filtrer sur « {{ cellFilterLabel() }} »</span>\r\n        </li>\r\n        <!-- Affichage : vues personnalisées (cochée = affichée), puis « Modifier… ». -->\r\n        <li *ngIf=\"this.facade.config.viewChooser\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'columns'\"\r\n            (mouseenter)=\"setSubmenu('columns')\" (click)=\"setSubmenu('columns')\">\r\n            <i class=\"fa fa-columns\"></i><span>Affichage</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n            <ul class=\"header-submenu header-submenu-columns\" *ngIf=\"headerMenu.submenu === 'columns'\"\r\n                [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n                (click)=\"$event.stopPropagation()\">\r\n                <alg-grid-view-menu [chooser]=\"this.facade.config.viewChooser\" (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-view-menu>\r\n            </ul>\r\n        </li>\r\n        <!-- Colonnes figées à gauche, de la première jusqu'à celle-ci. -->\r\n        <li [class.checked]=\"isFrozen(columnIndex(headerMenu.column))\" (click)=\"toggleFrozen()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-thumb-tack\"></i>\r\n            <span>{{ frozenUntil === columnIndex(headerMenu.column) ? 'Libérer les colonnes' : 'Figer jusqu\\'à cette colonne' }}</span>\r\n        </li>\r\n        <li *ngIf=\"frozenUntil !== undefined && frozenUntil !== columnIndex(headerMenu.column)\"\r\n            (click)=\"unfreezeColumns()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-unlock\"></i><span>Libérer les colonnes</span>\r\n        </li>\r\n\r\n        <!-- Actions -->\r\n        <ng-container *ngIf=\"visibleActions.length > 0\">\r\n            <li class=\"separator\"></li>\r\n            <ng-container *ngFor=\"let action of visibleActions\">\r\n                <ng-container *ngIf=\"{ disabled: (action.disabled$ | async) } as state\">\r\n                    <li class=\"menu-action\" [class.disabled]=\"state.disabled\"\r\n                        (click)=\"executeMenuAction(action, state.disabled)\" (mouseenter)=\"setSubmenu(undefined)\">\r\n                        <img class=\"menu-action-icon\" [src]=\"getActionImageUrl(action.icon)\" [alt]=\"action.title\" />\r\n                        <span>{{ action.title }}</span>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <!-- Affichage -->\r\n        <li class=\"separator\"></li>\r\n        <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'display'\"\r\n            (mouseenter)=\"setSubmenu('display')\" (click)=\"setSubmenu('display')\">\r\n            <i class=\"fa fa-calculator\"></i><span>Fonctions</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n            <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'display'\"\r\n                [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n                (click)=\"$event.stopPropagation()\">\r\n                <li *ngFor=\"let op of getAggregationOptions(headerMenu.column)\"\r\n                    [class.checked]=\"activeAggregations[headerMenu.column.Property] === op\"\r\n                    (click)=\"aggregateColumn(op)\">\r\n                    <i class=\"fa fa-check\"></i><span>{{ aggregationLabel(op) }}</span>\r\n                </li>\r\n                <ng-container *ngIf=\"activeAggregations[headerMenu.column.Property]\">\r\n                    <li class=\"separator\"></li>\r\n                    <li (click)=\"aggregateColumn(null)\">\r\n                        <i class=\"fa fa-times\"></i><span>Ne plus afficher</span>\r\n                    </li>\r\n                </ng-container>\r\n            </ul>\r\n        </li>\r\n    </ul>\r\n</div>\r\n\r\n",
+			template: "<div #datagridContainer [class]=\"this.datagridClass\" tabindex=\"-1\" (keydown)=\"onGridKeyDown($event)\" (scroll)=\"onGridScroll($event)\"\r\n    (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (contextmenu)=\"openEmptyAreaContextMenu($event)\">\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                            <!-- En-tête : poignée de déplacement à gauche, intitulé, indicateur de tri,\r\n                                 flèche du menu (tri, agrégation) à droite. Le clic ne trie plus. -->\r\n                            <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                                    [attr.class]=\"'header' | gridStyle : ctx : { column : col }\"\r\n                                    [style.width.px]=\"colWidth(col)\" [style.min-width.px]=\"colWidth(col)\" [style.max-width.px]=\"colWidth(col)\"\r\n                                    [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n                                <div class=\"header-cell\"\r\n                                    [class.col-dragging]=\"draggedColumn === col.Property\">\r\n                                    <span class=\"header-handle\" title=\"Déplacer la colonne\"\r\n                                        (mousedown)=\"onHeaderMouseDown(col, $event)\">\r\n                                        <i class=\"fa fa-ellipsis-v\"></i>\r\n                                    </span>\r\n                                    <label>{{ getHeaderLabel(col) }}</label>\r\n                                    <i *ngIf=\"this.facade.filter.isAsc(col.Property)\" class=\"fa fa-long-arrow-up header-sort\" title=\"Tri croissant\"></i>\r\n                                    <i *ngIf=\"this.facade.filter.isDesc(col.Property)\" class=\"fa fa-long-arrow-down header-sort\" title=\"Tri décroissant\"></i>\r\n                                    <sup *ngIf=\"this.facade.filter.sortRank(col.Property) > 0\" class=\"header-sort-rank\"\r\n                                        title=\"Rang dans le tri personnalisé\">{{ this.facade.filter.sortRank(col.Property) }}</sup>\r\n                                    <i *ngIf=\"activeAggregations[col.Property]\" class=\"header-agg\" [title]=\"'Agrégation : ' + aggregationLabel(activeAggregations[col.Property])\">Σ</i>\r\n                                    <!-- Dernière colonne suivie de la colonne vide de fin : sa flèche est dans la colonne vide. -->\r\n                                    <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n                                        *ngIf=\"!(ctx.enableLastColumnResize && i === rcolumns.length - 1)\"\r\n                                        [class.open]=\"headerMenu?.column.Property === col.Property\"\r\n                                        (click)=\"toggleHeaderMenu(col, $event)\">\r\n                                        <i class=\"fa fa-caret-down\"></i>\r\n                                    </button>\r\n                                </div>\r\n                                <!-- Bord droit : largeur de la colonne (tirer), ajustée au contenu (double clic). -->\r\n                                <span class=\"col-resizer\" title=\"Largeur de la colonne (double clic : ajuster au contenu)\"\r\n                                    (mousedown)=\"startResize(col, $event)\" (dblclick)=\"autoFitColumn(col, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"></span>\r\n                            </th>\r\n                            <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"\r\n                                (contextmenu)=\"openHeaderContextMenu($event, rcolumns[rcolumns.length - 1])\">\r\n                                <div class=\"header-cell header-cell-end\" *ngIf=\"rcolumns.length > 0\">\r\n                                    <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n                                        [class.open]=\"headerMenu?.column.Property === rcolumns[rcolumns.length - 1].Property\"\r\n                                        (click)=\"toggleHeaderMenu(rcolumns[rcolumns.length - 1], $event)\">\r\n                                        <i class=\"fa fa-caret-down\"></i>\r\n                                    </button>\r\n                                </div>\r\n                            </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                                [class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates  }\"\r\n                                [class.selected]=\"isRowSelected(row)\"\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.id]=\"cellId(row, column)\"\r\n                                [style.max-width.px]=\"colWidth(column)\" [attr.data-sized]=\"colWidth(column) ? '' : null\"\r\n                                [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\"\r\n                                [class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\"\r\n                                [class.selected]=\"isRowSelected(row)\"\r\n                                (mousedown)=\"onCellMouseDown(r, i, $event)\"\r\n                                (mouseenter)=\"onCellMouseEnter(r, i, $event)\"\r\n                                (click)=\"onCellClick(row, column)\"\r\n                                (dblclick)=\"onCellDblClick(row, column)\">\r\n\r\n                                <alg-datagrid-cell #dataGridCellComponent\r\n                                    class=\"gridcell-container\"\r\n                                    [entity]=\"row\"\r\n                                    [isEditable]=\"canEditCell(row, column)\"\r\n                                    [property]=\"column.Property\"\r\n                                    [managed]=\"true\"\r\n                                    [mode]=\"showEditor(row, column) ? 'edit' : 'view'\"\r\n                                    [class.grid-cursor]=\"isCursorCell(row, column)\"\r\n                                    [class.grid-range]=\"isInRange(r, i)\"\r\n                                    (contextmenu)=\"openContextMenu($event, row, column)\">\r\n\r\n                                    <ng-template alg-editMode>\r\n                                        <!-- Éditeur du champ du formulaire qui correspond à la colonne (sinon déduit de la colonne), à la hauteur de la ligne. -->\r\n                                        <alg-field class=\"grid-editor\"\r\n                                            [field]=\"getEditField(column)\"\r\n                                            [form]=\"getRowForm(row)\"\r\n                                            [showLabel]=\"false\"\r\n                                            (propertyChanged)=\"onCellChanged(row, $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                                <!-- Colonne vide de fin : clic droit = menu de la dernière colonne. -->\r\n                                <td (contextmenu)=\"openContextMenu($event, row, rcolumns[rcolumns.length - 1])\"></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                                [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n\r\n                                <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n                                    <span class=\"agg-label\">{{ aggregationLabel(agg.op) }}</span>\r\n                                    <span [ngSwitch]=\"agg.op === 'COUNT' ? 'count' : column.Display?.type\">\r\n\r\n                                        <span *ngSwitchCase=\"'count'\">{{ agg.value | number: '1.0-0' }}</span>\r\n                                        <span *ngSwitchCase=\"'percent'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n                                        <span *ngSwitchCase=\"'fixedsizeinteger'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\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<!-- Emplacement visé par une colonne déplacée : trait orange sur la séparation des deux en-têtes. -->\r\n<div class=\"col-drop-indicator\" *ngIf=\"dropIndicator\"\r\n    [ngStyle]=\"{ left: dropIndicator.left + 'px', top: dropIndicator.top + 'px', height: dropIndicator.height + 'px' }\"></div>\r\n\r\n<!-- Menu d'une colonne (flèche de l'en-tête ou clic droit sur une cellule), en trois zones séparées\r\n     par un trait : Tri, Actions (celles du panneau des actions), Fonctions (sous-menu « Fonctions »). -->\r\n<div class=\"header-menu\" *ngIf=\"headerMenu\"\r\n    [ngStyle]=\"{ top: headerMenu.y + 'px', left: headerMenu.x + 'px', visibility: headerMenu.ready ? 'visible' : 'hidden' }\"\r\n    (click)=\"$event.stopPropagation()\" (contextmenu)=\"$event.preventDefault()\">\r\n    <ul>\r\n        <!-- Tri -->\r\n        <li [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property)\" (click)=\"sortColumn('asc')\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort-amount-asc\"></i><span>Trier par ordre croissant</span>\r\n        </li>\r\n        <li [class.checked]=\"this.facade.filter.isDesc(headerMenu.column.Property)\" (click)=\"sortColumn('desc')\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort-amount-desc\"></i><span>Trier par ordre décroissant</span>\r\n        </li>\r\n        <li [class.checked]=\"this.facade.filter.getSortList().length > 1\" (click)=\"openCustomSort()\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort\"></i><span>Tri personnalisé…</span>\r\n        </li>\r\n        <!-- Filtre sur la valeur de la cellule (clic droit sur une cellule) : première ligne des filtres composés. -->\r\n        <li *ngIf=\"cellFilterValue() !== undefined\" (click)=\"filterOnCell()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-filter\"></i><span>Filtrer sur « {{ cellFilterLabel() }} »</span>\r\n        </li>\r\n        <!-- Affichage : vues personnalisées (cochée = affichée), puis « Modifier… ». -->\r\n        <li *ngIf=\"this.facade.config.viewChooser\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'columns'\"\r\n            (mouseenter)=\"setSubmenu('columns')\" (click)=\"setSubmenu('columns')\">\r\n            <i class=\"fa fa-columns\"></i><span>Affichage</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n            <ul class=\"header-submenu header-submenu-columns\" *ngIf=\"headerMenu.submenu === 'columns'\"\r\n                [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n                (click)=\"$event.stopPropagation()\">\r\n                <alg-grid-view-menu [chooser]=\"this.facade.config.viewChooser\" (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-view-menu>\r\n            </ul>\r\n        </li>\r\n        <!-- Colonnes figées à gauche, de la première jusqu'à celle-ci. -->\r\n        <li [class.checked]=\"isFrozen(columnIndex(headerMenu.column))\" (click)=\"toggleFrozen()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-thumb-tack\"></i>\r\n            <span>{{ frozenUntil === columnIndex(headerMenu.column) ? 'Libérer les colonnes' : 'Figer jusqu\\'à cette colonne' }}</span>\r\n        </li>\r\n        <li *ngIf=\"frozenUntil !== undefined && frozenUntil !== columnIndex(headerMenu.column)\"\r\n            (click)=\"unfreezeColumns()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-unlock\"></i><span>Libérer les colonnes</span>\r\n        </li>\r\n\r\n        <!-- Actions -->\r\n        <ng-container *ngIf=\"visibleActions.length > 0\">\r\n            <li class=\"separator\"></li>\r\n            <ng-container *ngFor=\"let action of visibleActions\">\r\n                <ng-container *ngIf=\"{ disabled: (action.disabled$ | async) } as state\">\r\n                    <li class=\"menu-action\" [class.disabled]=\"state.disabled\"\r\n                        (click)=\"executeMenuAction(action, state.disabled)\" (mouseenter)=\"setSubmenu(undefined)\">\r\n                        <img class=\"menu-action-icon\" [src]=\"getActionImageUrl(action.icon)\" [alt]=\"action.title\" />\r\n                        <span>{{ action.title }}</span>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <!-- Affichage -->\r\n        <li class=\"separator\"></li>\r\n        <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'display'\"\r\n            (mouseenter)=\"setSubmenu('display')\" (click)=\"setSubmenu('display')\">\r\n            <i class=\"fa fa-calculator\"></i><span>Fonctions</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n            <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'display'\"\r\n                [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n                (click)=\"$event.stopPropagation()\">\r\n                <li *ngFor=\"let op of getAggregationOptions(headerMenu.column)\"\r\n                    [class.checked]=\"activeAggregations[headerMenu.column.Property] === op\"\r\n                    (click)=\"aggregateColumn(op)\">\r\n                    <i class=\"fa fa-check\"></i><span>{{ aggregationLabel(op) }}</span>\r\n                </li>\r\n                <ng-container *ngIf=\"activeAggregations[headerMenu.column.Property]\">\r\n                    <li class=\"separator\"></li>\r\n                    <li (click)=\"aggregateColumn(null)\">\r\n                        <i class=\"fa fa-times\"></i><span>Ne plus afficher</span>\r\n                    </li>\r\n                </ng-container>\r\n            </ul>\r\n        </li>\r\n    </ul>\r\n</div>\r\n\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}.data-grid-datatable tbody tr.mw-invalid>td,.data-grid-datatable tbody tr.mw-invalid>th{box-shadow:inset 0 1px 0 var(--red-error),inset 0 -1px 0 var(--red-error)}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}.col-resizer{position:absolute;top:0;right:-5px;z-index:4;width:10px;height:100%;cursor:col-resize}.col-resizer:hover{background:#3c5dc440}.data-grid-datatable td[data-sized]{overflow:hidden;text-overflow:ellipsis}:where(.data-grid-datatable tbody tr,.data-grid-datatable tfoot tr){background-color:#fff}.data-grid-datatable td[data-frozen]{position:sticky;z-index:1;background-color:inherit}.data-grid-datatable thead th[data-frozen]{position:sticky;z-index:3}.data-grid-datatable td[data-frozen]:has(+td:not([data-frozen])),.data-grid-datatable thead th[data-frozen]:has(+th:not([data-frozen])){box-shadow:inset -2px 0 #3c5dc459}table thead th.header{background-image:none!important;cursor:default}.header-cell{position:relative;display:flex;align-items:center;gap:2px}.header-cell label{flex:1 1 auto;cursor:default;margin:0;padding-left:2px;overflow:hidden;text-overflow:ellipsis}.header-cell.col-dragging{opacity:.8}.dg-column-ghost{border:1px solid #C1D0FD;box-sizing:border-box}.col-drop-indicator{position:fixed;z-index:3100;width:1px;border-radius:0;background:var(--orange-algorima, #f59d0f);pointer-events:none}.header-cell-end{justify-content:flex-end;align-items:center;height:25px}.header-handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:content-box;width:17px;height:20px;padding:0 2px;color:#3c5dc4;opacity:.35;cursor:grab}.header-handle:hover{opacity:1}.header-handle:active{cursor:grabbing}.header-sort,.header-agg{flex-shrink:0;color:#3c5dc4;font-size:11px;font-style:normal}.header-menu-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:18px;padding:0;border:0;border-radius:3px;background:none;color:#3c5dc4;opacity:.5;cursor:pointer}.header-menu-button:hover,.header-menu-button.open{opacity:1;background:#4465c926}.header-menu{position:fixed;z-index:3000;width:230px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003}.header-menu ul{margin:0;padding:0;list-style:none}.header-menu li{display:flex;align-items:center;gap:8px;padding:5px 12px;color:#3c5dc4;font-size:12.5px;cursor:pointer}.header-menu li i{width:14px;text-align:center;visibility:visible}.header-menu li:hover{background:#dbe4ff}.header-menu li.checked{font-weight:600}.header-menu li.separator{height:1px;margin:4px 0;padding:0;background:#dbe4ff;cursor:default}.header-menu li .fa-check{visibility:hidden}.header-menu li.checked>.fa-check{visibility:visible}.header-menu li.menu-action.disabled{opacity:.45;cursor:default}.header-menu li.menu-action.disabled:hover{background:none}.header-menu .menu-action-icon{width:14px;height:14px}.header-menu li.has-submenu{position:relative}.header-menu li.has-submenu.open{background:#dbe4ff}.header-menu li.has-submenu .submenu-caret{margin-left:auto}.header-menu .header-submenu{position:absolute;top:-5px;left:100%;width:200px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003;font-weight:400}.header-menu .header-submenu.left{left:auto;right:100%}.header-menu .header-submenu.header-submenu-columns{width:240px;max-height:320px;overflow-y:auto}.header-menu .header-submenu .column-choice input[type=checkbox]{width:14px;margin:0;pointer-events:none}.header-menu .header-submenu .submenu-loading{opacity:.6;cursor:default}.header-menu .header-submenu .view-lock{margin-left:auto;padding-left:8px;opacity:.5;font-size:11px}.header-menu .header-submenu.up{top:auto;bottom:-5px}.header-sort-rank{flex-shrink:0;color:#3c5dc4;font-size:9px}.aggregation-row .agg-label{margin-right:4px;color:#3c5dc4;font-size:10.5px;opacity:.7}.datagrid-custom-container:focus,.datagrid-custom-container:focus-visible{outline:none}.data-grid-datatable td .image ::ng-deep img{display:block}.data-grid-datatable td:has(>.grid-cursor){outline:2px solid #4465C9;outline-offset:-2px}.data-grid-datatable td:has(>.grid-range){background-color:#4465c940!important;box-shadow:inset 0 0 0 1px #4465c980;color:#4d5a81!important}.data-grid-datatable td:has(>.grid-range) ::ng-deep *{color:#4d5a81!important}.data-grid-datatable td:has(.grid-editor){padding:0!important;background-color:#fff}.grid-editor{display:block;height:23px;overflow:visible;color:#4d5a81}.grid-editor ::ng-deep .field-container,.grid-editor ::ng-deep .form-group,.grid-editor ::ng-deep .form-group>div,.grid-editor ::ng-deep .checkbox-container{margin:0!important;padding:0;min-height:0!important;height:23px}.grid-editor ::ng-deep .validation-message,.grid-editor ::ng-deep .checkbox-label{display:none}.grid-editor ::ng-deep input,.grid-editor ::ng-deep input:focus,.grid-editor ::ng-deep textarea{box-sizing:border-box;width:100%;height:23px!important;min-height:0!important;margin:0!important;padding:0 4px;border:1px solid #4465C9;border-radius:0;box-shadow:none;font-size:inherit;line-height:normal;resize:none}.grid-editor ::ng-deep input.ng-invalid.ng-touched,.grid-editor ::ng-deep input.ng-invalid.ng-dirty{border-color:#f78383}.grid-editor ::ng-deep input[type=checkbox]{width:auto}.grid-editor ::ng-deep .ng-select .ng-select-container{color:#4d5a81;min-height:0!important;height:23px!important;border-radius:0;border-color:#4465c9}.grid-editor ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%!important;border:none}.grid-editor ::ng-deep .form-group>div{flex:1;min-width:0;width:100%}.grid-editor ::ng-deep .ng-select{width:100%}.grid-editor ::ng-deep alg-selector{display:flex;width:100%;height:23px}.grid-editor ::ng-deep .input-select-default,.grid-editor ::ng-deep .input-select-default.with-button{flex:1;min-width:0;padding-right:0;margin-right:0}.grid-editor ::ng-deep .input-group-btn{float:none}.grid-editor ::ng-deep .btn,.grid-editor ::ng-deep .btn-32,.grid-editor ::ng-deep .btn-input-select{height:23px;width:23px;padding:0;line-height:1;border-radius:0}.grid-editor ::ng-deep .input-with-button{display:flex;height:23px}.grid-editor ::ng-deep .switch{margin:2px 0 0 4px;transform:scale(.7);transform-origin:left top}::ng-deep body.dg-column-dragging,::ng-deep body.dg-column-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}\n"],
 			dependencies: [
 				{
@@ -19006,7 +19130,7 @@ i0.ɵɵngDeclareClassMetadata({
 				provide: RowRefHost,
 				useExisting: forwardRef(() => DataGridComponent)
 			}],
-			template: "<div #datagridContainer [class]=\"this.datagridClass\" tabindex=\"-1\" (keydown)=\"onGridKeyDown($event)\"\r\n    (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (contextmenu)=\"openEmptyAreaContextMenu($event)\">\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                            <!-- En-tête : poignée de déplacement à gauche, intitulé, indicateur de tri,\r\n                                 flèche du menu (tri, agrégation) à droite. Le clic ne trie plus. -->\r\n                            <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                                    [attr.class]=\"'header' | gridStyle : ctx : { column : col }\"\r\n                                    [style.width.px]=\"colWidth(col)\" [style.min-width.px]=\"colWidth(col)\" [style.max-width.px]=\"colWidth(col)\"\r\n                                    [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n                                <div class=\"header-cell\"\r\n                                    [class.col-dragging]=\"draggedColumn === col.Property\">\r\n                                    <span class=\"header-handle\" title=\"Déplacer la colonne\"\r\n                                        (mousedown)=\"onHeaderMouseDown(col, $event)\">\r\n                                        <i class=\"fa fa-ellipsis-v\"></i>\r\n                                    </span>\r\n                                    <label>{{ getHeaderLabel(col) }}</label>\r\n                                    <i *ngIf=\"this.facade.filter.isAsc(col.Property)\" class=\"fa fa-long-arrow-up header-sort\" title=\"Tri croissant\"></i>\r\n                                    <i *ngIf=\"this.facade.filter.isDesc(col.Property)\" class=\"fa fa-long-arrow-down header-sort\" title=\"Tri décroissant\"></i>\r\n                                    <sup *ngIf=\"this.facade.filter.sortRank(col.Property) > 0\" class=\"header-sort-rank\"\r\n                                        title=\"Rang dans le tri personnalisé\">{{ this.facade.filter.sortRank(col.Property) }}</sup>\r\n                                    <i *ngIf=\"activeAggregations[col.Property]\" class=\"header-agg\" [title]=\"'Agrégation : ' + aggregationLabel(activeAggregations[col.Property])\">Σ</i>\r\n                                    <!-- Dernière colonne suivie de la colonne vide de fin : sa flèche est dans la colonne vide. -->\r\n                                    <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n                                        *ngIf=\"!(ctx.enableLastColumnResize && i === rcolumns.length - 1)\"\r\n                                        [class.open]=\"headerMenu?.column.Property === col.Property\"\r\n                                        (click)=\"toggleHeaderMenu(col, $event)\">\r\n                                        <i class=\"fa fa-caret-down\"></i>\r\n                                    </button>\r\n                                </div>\r\n                                <!-- Bord droit : largeur de la colonne (tirer), ajustée au contenu (double clic). -->\r\n                                <span class=\"col-resizer\" title=\"Largeur de la colonne (double clic : ajuster au contenu)\"\r\n                                    (mousedown)=\"startResize(col, $event)\" (dblclick)=\"autoFitColumn(col, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"></span>\r\n                            </th>\r\n                            <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"\r\n                                (contextmenu)=\"openHeaderContextMenu($event, rcolumns[rcolumns.length - 1])\">\r\n                                <div class=\"header-cell header-cell-end\" *ngIf=\"rcolumns.length > 0\">\r\n                                    <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n                                        [class.open]=\"headerMenu?.column.Property === rcolumns[rcolumns.length - 1].Property\"\r\n                                        (click)=\"toggleHeaderMenu(rcolumns[rcolumns.length - 1], $event)\">\r\n                                        <i class=\"fa fa-caret-down\"></i>\r\n                                    </button>\r\n                                </div>\r\n                            </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                                [class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates  }\"\r\n                                [class.selected]=\"isRowSelected(row)\"\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.id]=\"cellId(row, column)\"\r\n                                [style.max-width.px]=\"colWidth(column)\" [attr.data-sized]=\"colWidth(column) ? '' : null\"\r\n                                [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\"\r\n                                [class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\"\r\n                                [class.selected]=\"isRowSelected(row)\"\r\n                                (mousedown)=\"onCellMouseDown(r, i, $event)\"\r\n                                (mouseenter)=\"onCellMouseEnter(r, i, $event)\"\r\n                                (click)=\"onCellClick(row, column)\"\r\n                                (dblclick)=\"onCellDblClick(row, column)\">\r\n\r\n                                <alg-datagrid-cell #dataGridCellComponent\r\n                                    class=\"gridcell-container\"\r\n                                    [entity]=\"row\"\r\n                                    [isEditable]=\"canEditCell(row, column)\"\r\n                                    [property]=\"column.Property\"\r\n                                    [managed]=\"true\"\r\n                                    [mode]=\"showEditor(row, column) ? 'edit' : 'view'\"\r\n                                    [class.grid-cursor]=\"isCursorCell(row, column)\"\r\n                                    [class.grid-range]=\"isInRange(r, i)\"\r\n                                    (contextmenu)=\"openContextMenu($event, row, column)\">\r\n\r\n                                    <ng-template alg-editMode>\r\n                                        <!-- Éditeur du champ du formulaire qui correspond à la colonne (sinon déduit de la colonne), à la hauteur de la ligne. -->\r\n                                        <alg-field class=\"grid-editor\"\r\n                                            [field]=\"getEditField(column)\"\r\n                                            [form]=\"getRowForm(row)\"\r\n                                            [showLabel]=\"false\"\r\n                                            (propertyChanged)=\"onCellChanged(row, $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                                <!-- Colonne vide de fin : clic droit = menu de la dernière colonne. -->\r\n                                <td (contextmenu)=\"openContextMenu($event, row, rcolumns[rcolumns.length - 1])\"></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                                [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n\r\n                                <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n                                    <span class=\"agg-label\">{{ aggregationLabel(agg.op) }}</span>\r\n                                    <span [ngSwitch]=\"agg.op === 'COUNT' ? 'count' : column.Display?.type\">\r\n\r\n                                        <span *ngSwitchCase=\"'count'\">{{ agg.value | number: '1.0-0' }}</span>\r\n                                        <span *ngSwitchCase=\"'percent'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n                                        <span *ngSwitchCase=\"'fixedsizeinteger'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\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<!-- Emplacement visé par une colonne déplacée : trait orange sur la séparation des deux en-têtes. -->\r\n<div class=\"col-drop-indicator\" *ngIf=\"dropIndicator\"\r\n    [ngStyle]=\"{ left: dropIndicator.left + 'px', top: dropIndicator.top + 'px', height: dropIndicator.height + 'px' }\"></div>\r\n\r\n<!-- Menu d'une colonne (flèche de l'en-tête ou clic droit sur une cellule), en trois zones séparées\r\n     par un trait : Tri, Actions (celles du panneau des actions), Fonctions (sous-menu « Fonctions »). -->\r\n<div class=\"header-menu\" *ngIf=\"headerMenu\"\r\n    [ngStyle]=\"{ top: headerMenu.y + 'px', left: headerMenu.x + 'px', visibility: headerMenu.ready ? 'visible' : 'hidden' }\"\r\n    (click)=\"$event.stopPropagation()\" (contextmenu)=\"$event.preventDefault()\">\r\n    <ul>\r\n        <!-- Tri -->\r\n        <li [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property)\" (click)=\"sortColumn('asc')\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort-amount-asc\"></i><span>Trier par ordre croissant</span>\r\n        </li>\r\n        <li [class.checked]=\"this.facade.filter.isDesc(headerMenu.column.Property)\" (click)=\"sortColumn('desc')\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort-amount-desc\"></i><span>Trier par ordre décroissant</span>\r\n        </li>\r\n        <li [class.checked]=\"this.facade.filter.getSortList().length > 1\" (click)=\"openCustomSort()\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort\"></i><span>Tri personnalisé…</span>\r\n        </li>\r\n        <!-- Filtre sur la valeur de la cellule (clic droit sur une cellule) : première ligne des filtres composés. -->\r\n        <li *ngIf=\"cellFilterValue() !== undefined\" (click)=\"filterOnCell()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-filter\"></i><span>Filtrer sur « {{ cellFilterLabel() }} »</span>\r\n        </li>\r\n        <!-- Affichage : vues personnalisées (cochée = affichée), puis « Modifier… ». -->\r\n        <li *ngIf=\"this.facade.config.viewChooser\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'columns'\"\r\n            (mouseenter)=\"setSubmenu('columns')\" (click)=\"setSubmenu('columns')\">\r\n            <i class=\"fa fa-columns\"></i><span>Affichage</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n            <ul class=\"header-submenu header-submenu-columns\" *ngIf=\"headerMenu.submenu === 'columns'\"\r\n                [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n                (click)=\"$event.stopPropagation()\">\r\n                <alg-grid-view-menu [chooser]=\"this.facade.config.viewChooser\" (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-view-menu>\r\n            </ul>\r\n        </li>\r\n        <!-- Colonnes figées à gauche, de la première jusqu'à celle-ci. -->\r\n        <li [class.checked]=\"isFrozen(columnIndex(headerMenu.column))\" (click)=\"toggleFrozen()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-thumb-tack\"></i>\r\n            <span>{{ frozenUntil === columnIndex(headerMenu.column) ? 'Libérer les colonnes' : 'Figer jusqu\\'à cette colonne' }}</span>\r\n        </li>\r\n        <li *ngIf=\"frozenUntil !== undefined && frozenUntil !== columnIndex(headerMenu.column)\"\r\n            (click)=\"unfreezeColumns()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-unlock\"></i><span>Libérer les colonnes</span>\r\n        </li>\r\n\r\n        <!-- Actions -->\r\n        <ng-container *ngIf=\"visibleActions.length > 0\">\r\n            <li class=\"separator\"></li>\r\n            <ng-container *ngFor=\"let action of visibleActions\">\r\n                <ng-container *ngIf=\"{ disabled: (action.disabled$ | async) } as state\">\r\n                    <li class=\"menu-action\" [class.disabled]=\"state.disabled\"\r\n                        (click)=\"executeMenuAction(action, state.disabled)\" (mouseenter)=\"setSubmenu(undefined)\">\r\n                        <img class=\"menu-action-icon\" [src]=\"getActionImageUrl(action.icon)\" [alt]=\"action.title\" />\r\n                        <span>{{ action.title }}</span>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <!-- Affichage -->\r\n        <li class=\"separator\"></li>\r\n        <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'display'\"\r\n            (mouseenter)=\"setSubmenu('display')\" (click)=\"setSubmenu('display')\">\r\n            <i class=\"fa fa-calculator\"></i><span>Fonctions</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n            <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'display'\"\r\n                [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n                (click)=\"$event.stopPropagation()\">\r\n                <li *ngFor=\"let op of getAggregationOptions(headerMenu.column)\"\r\n                    [class.checked]=\"activeAggregations[headerMenu.column.Property] === op\"\r\n                    (click)=\"aggregateColumn(op)\">\r\n                    <i class=\"fa fa-check\"></i><span>{{ aggregationLabel(op) }}</span>\r\n                </li>\r\n                <ng-container *ngIf=\"activeAggregations[headerMenu.column.Property]\">\r\n                    <li class=\"separator\"></li>\r\n                    <li (click)=\"aggregateColumn(null)\">\r\n                        <i class=\"fa fa-times\"></i><span>Ne plus afficher</span>\r\n                    </li>\r\n                </ng-container>\r\n            </ul>\r\n        </li>\r\n    </ul>\r\n</div>\r\n\r\n",
+			template: "<div #datagridContainer [class]=\"this.datagridClass\" tabindex=\"-1\" (keydown)=\"onGridKeyDown($event)\" (scroll)=\"onGridScroll($event)\"\r\n    (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (contextmenu)=\"openEmptyAreaContextMenu($event)\">\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                            <!-- En-tête : poignée de déplacement à gauche, intitulé, indicateur de tri,\r\n                                 flèche du menu (tri, agrégation) à droite. Le clic ne trie plus. -->\r\n                            <th #thHeader *ngFor=\"let col of rcolumns;let i = index\"\r\n                                    [attr.id]=\"guid.toString() + '-col-' + col.Property\"\r\n                                    [attr.class]=\"'header' | gridStyle : ctx : { column : col }\"\r\n                                    [style.width.px]=\"colWidth(col)\" [style.min-width.px]=\"colWidth(col)\" [style.max-width.px]=\"colWidth(col)\"\r\n                                    [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n                                <div class=\"header-cell\"\r\n                                    [class.col-dragging]=\"draggedColumn === col.Property\">\r\n                                    <span class=\"header-handle\" title=\"Déplacer la colonne\"\r\n                                        (mousedown)=\"onHeaderMouseDown(col, $event)\">\r\n                                        <i class=\"fa fa-ellipsis-v\"></i>\r\n                                    </span>\r\n                                    <label>{{ getHeaderLabel(col) }}</label>\r\n                                    <i *ngIf=\"this.facade.filter.isAsc(col.Property)\" class=\"fa fa-long-arrow-up header-sort\" title=\"Tri croissant\"></i>\r\n                                    <i *ngIf=\"this.facade.filter.isDesc(col.Property)\" class=\"fa fa-long-arrow-down header-sort\" title=\"Tri décroissant\"></i>\r\n                                    <sup *ngIf=\"this.facade.filter.sortRank(col.Property) > 0\" class=\"header-sort-rank\"\r\n                                        title=\"Rang dans le tri personnalisé\">{{ this.facade.filter.sortRank(col.Property) }}</sup>\r\n                                    <i *ngIf=\"activeAggregations[col.Property]\" class=\"header-agg\" [title]=\"'Agrégation : ' + aggregationLabel(activeAggregations[col.Property])\">Σ</i>\r\n                                    <!-- Dernière colonne suivie de la colonne vide de fin : sa flèche est dans la colonne vide. -->\r\n                                    <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n                                        *ngIf=\"!(ctx.enableLastColumnResize && i === rcolumns.length - 1)\"\r\n                                        [class.open]=\"headerMenu?.column.Property === col.Property\"\r\n                                        (click)=\"toggleHeaderMenu(col, $event)\">\r\n                                        <i class=\"fa fa-caret-down\"></i>\r\n                                    </button>\r\n                                </div>\r\n                                <!-- Bord droit : largeur de la colonne (tirer), ajustée au contenu (double clic). -->\r\n                                <span class=\"col-resizer\" title=\"Largeur de la colonne (double clic : ajuster au contenu)\"\r\n                                    (mousedown)=\"startResize(col, $event)\" (dblclick)=\"autoFitColumn(col, $event)\"\r\n                                    (click)=\"$event.stopPropagation()\"></span>\r\n                            </th>\r\n                            <th *ngIf=\"ctx.enableLastColumnResize\" #lastColumnHeader class=\"header last-column\"\r\n                                (contextmenu)=\"openHeaderContextMenu($event, rcolumns[rcolumns.length - 1])\">\r\n                                <div class=\"header-cell header-cell-end\" *ngIf=\"rcolumns.length > 0\">\r\n                                    <button type=\"button\" class=\"header-menu-button\" title=\"Trier, agréger\"\r\n                                        [class.open]=\"headerMenu?.column.Property === rcolumns[rcolumns.length - 1].Property\"\r\n                                        (click)=\"toggleHeaderMenu(rcolumns[rcolumns.length - 1], $event)\">\r\n                                        <i class=\"fa fa-caret-down\"></i>\r\n                                    </button>\r\n                                </div>\r\n                            </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                                [class]=\"'alternating' | gridStyle : ctx : { row : row, index : r, maxIndex : this.data.Values.length, hasAggregates: hasAggregates  }\"\r\n                                [class.selected]=\"isRowSelected(row)\"\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.id]=\"cellId(row, column)\"\r\n                                [style.max-width.px]=\"colWidth(column)\" [attr.data-sized]=\"colWidth(column) ? '' : null\"\r\n                                [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\"\r\n                                [class]=\"'cell' | gridStyle : ctx : { row : row,column : column,index : r }\"\r\n                                [class.selected]=\"isRowSelected(row)\"\r\n                                (mousedown)=\"onCellMouseDown(r, i, $event)\"\r\n                                (mouseenter)=\"onCellMouseEnter(r, i, $event)\"\r\n                                (click)=\"onCellClick(row, column)\"\r\n                                (dblclick)=\"onCellDblClick(row, column)\">\r\n\r\n                                <alg-datagrid-cell #dataGridCellComponent\r\n                                    class=\"gridcell-container\"\r\n                                    [entity]=\"row\"\r\n                                    [isEditable]=\"canEditCell(row, column)\"\r\n                                    [property]=\"column.Property\"\r\n                                    [managed]=\"true\"\r\n                                    [mode]=\"showEditor(row, column) ? 'edit' : 'view'\"\r\n                                    [class.grid-cursor]=\"isCursorCell(row, column)\"\r\n                                    [class.grid-range]=\"isInRange(r, i)\"\r\n                                    (contextmenu)=\"openContextMenu($event, row, column)\">\r\n\r\n                                    <ng-template alg-editMode>\r\n                                        <!-- Éditeur du champ du formulaire qui correspond à la colonne (sinon déduit de la colonne), à la hauteur de la ligne. -->\r\n                                        <alg-field class=\"grid-editor\"\r\n                                            [field]=\"getEditField(column)\"\r\n                                            [form]=\"getRowForm(row)\"\r\n                                            [showLabel]=\"false\"\r\n                                            (propertyChanged)=\"onCellChanged(row, $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                                <!-- Colonne vide de fin : clic droit = menu de la dernière colonne. -->\r\n                                <td (contextmenu)=\"openContextMenu($event, row, rcolumns[rcolumns.length - 1])\"></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                                [attr.data-frozen]=\"isFrozen(i) ? '' : null\" [style.left.px]=\"frozenLeft(i)\">\r\n\r\n                                <ng-container *ngFor=\"let agg of columnAggregates[column.Property]\">\r\n\r\n                                    <span class=\"agg-label\">{{ aggregationLabel(agg.op) }}</span>\r\n                                    <span [ngSwitch]=\"agg.op === 'COUNT' ? 'count' : column.Display?.type\">\r\n\r\n                                        <span *ngSwitchCase=\"'count'\">{{ agg.value | number: '1.0-0' }}</span>\r\n                                        <span *ngSwitchCase=\"'percent'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\r\n                                        <span *ngSwitchCase=\"'fixedsizeinteger'\">{{ agg.value | number: column.Display?.format || '1.0-3' }}</span>\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<!-- Emplacement visé par une colonne déplacée : trait orange sur la séparation des deux en-têtes. -->\r\n<div class=\"col-drop-indicator\" *ngIf=\"dropIndicator\"\r\n    [ngStyle]=\"{ left: dropIndicator.left + 'px', top: dropIndicator.top + 'px', height: dropIndicator.height + 'px' }\"></div>\r\n\r\n<!-- Menu d'une colonne (flèche de l'en-tête ou clic droit sur une cellule), en trois zones séparées\r\n     par un trait : Tri, Actions (celles du panneau des actions), Fonctions (sous-menu « Fonctions »). -->\r\n<div class=\"header-menu\" *ngIf=\"headerMenu\"\r\n    [ngStyle]=\"{ top: headerMenu.y + 'px', left: headerMenu.x + 'px', visibility: headerMenu.ready ? 'visible' : 'hidden' }\"\r\n    (click)=\"$event.stopPropagation()\" (contextmenu)=\"$event.preventDefault()\">\r\n    <ul>\r\n        <!-- Tri -->\r\n        <li [class.checked]=\"this.facade.filter.isAsc(headerMenu.column.Property)\" (click)=\"sortColumn('asc')\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort-amount-asc\"></i><span>Trier par ordre croissant</span>\r\n        </li>\r\n        <li [class.checked]=\"this.facade.filter.isDesc(headerMenu.column.Property)\" (click)=\"sortColumn('desc')\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort-amount-desc\"></i><span>Trier par ordre décroissant</span>\r\n        </li>\r\n        <li [class.checked]=\"this.facade.filter.getSortList().length > 1\" (click)=\"openCustomSort()\"\r\n            (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-sort\"></i><span>Tri personnalisé…</span>\r\n        </li>\r\n        <!-- Filtre sur la valeur de la cellule (clic droit sur une cellule) : première ligne des filtres composés. -->\r\n        <li *ngIf=\"cellFilterValue() !== undefined\" (click)=\"filterOnCell()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-filter\"></i><span>Filtrer sur « {{ cellFilterLabel() }} »</span>\r\n        </li>\r\n        <!-- Affichage : vues personnalisées (cochée = affichée), puis « Modifier… ». -->\r\n        <li *ngIf=\"this.facade.config.viewChooser\" class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'columns'\"\r\n            (mouseenter)=\"setSubmenu('columns')\" (click)=\"setSubmenu('columns')\">\r\n            <i class=\"fa fa-columns\"></i><span>Affichage</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n            <ul class=\"header-submenu header-submenu-columns\" *ngIf=\"headerMenu.submenu === 'columns'\"\r\n                [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n                (click)=\"$event.stopPropagation()\">\r\n                <alg-grid-view-menu [chooser]=\"this.facade.config.viewChooser\" (done)=\"closeViewMenu()\" (loaded)=\"onViewMenuLoaded()\"></alg-grid-view-menu>\r\n            </ul>\r\n        </li>\r\n        <!-- Colonnes figées à gauche, de la première jusqu'à celle-ci. -->\r\n        <li [class.checked]=\"isFrozen(columnIndex(headerMenu.column))\" (click)=\"toggleFrozen()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-thumb-tack\"></i>\r\n            <span>{{ frozenUntil === columnIndex(headerMenu.column) ? 'Libérer les colonnes' : 'Figer jusqu\\'à cette colonne' }}</span>\r\n        </li>\r\n        <li *ngIf=\"frozenUntil !== undefined && frozenUntil !== columnIndex(headerMenu.column)\"\r\n            (click)=\"unfreezeColumns()\" (mouseenter)=\"setSubmenu(undefined)\">\r\n            <i class=\"fa fa-unlock\"></i><span>Libérer les colonnes</span>\r\n        </li>\r\n\r\n        <!-- Actions -->\r\n        <ng-container *ngIf=\"visibleActions.length > 0\">\r\n            <li class=\"separator\"></li>\r\n            <ng-container *ngFor=\"let action of visibleActions\">\r\n                <ng-container *ngIf=\"{ disabled: (action.disabled$ | async) } as state\">\r\n                    <li class=\"menu-action\" [class.disabled]=\"state.disabled\"\r\n                        (click)=\"executeMenuAction(action, state.disabled)\" (mouseenter)=\"setSubmenu(undefined)\">\r\n                        <img class=\"menu-action-icon\" [src]=\"getActionImageUrl(action.icon)\" [alt]=\"action.title\" />\r\n                        <span>{{ action.title }}</span>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <!-- Affichage -->\r\n        <li class=\"separator\"></li>\r\n        <li class=\"has-submenu\" [class.open]=\"headerMenu.submenu === 'display'\"\r\n            (mouseenter)=\"setSubmenu('display')\" (click)=\"setSubmenu('display')\">\r\n            <i class=\"fa fa-calculator\"></i><span>Fonctions</span><i class=\"fa fa-caret-right submenu-caret\"></i>\r\n\r\n            <ul class=\"header-submenu\" *ngIf=\"headerMenu.submenu === 'display'\"\r\n                [class.left]=\"headerMenu.submenuLeft\" [class.up]=\"headerMenu.submenuUp\"\r\n                (click)=\"$event.stopPropagation()\">\r\n                <li *ngFor=\"let op of getAggregationOptions(headerMenu.column)\"\r\n                    [class.checked]=\"activeAggregations[headerMenu.column.Property] === op\"\r\n                    (click)=\"aggregateColumn(op)\">\r\n                    <i class=\"fa fa-check\"></i><span>{{ aggregationLabel(op) }}</span>\r\n                </li>\r\n                <ng-container *ngIf=\"activeAggregations[headerMenu.column.Property]\">\r\n                    <li class=\"separator\"></li>\r\n                    <li (click)=\"aggregateColumn(null)\">\r\n                        <i class=\"fa fa-times\"></i><span>Ne plus afficher</span>\r\n                    </li>\r\n                </ng-container>\r\n            </ul>\r\n        </li>\r\n    </ul>\r\n</div>\r\n\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}.data-grid-datatable tbody tr.mw-invalid>td,.data-grid-datatable tbody tr.mw-invalid>th{box-shadow:inset 0 1px 0 var(--red-error),inset 0 -1px 0 var(--red-error)}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}.col-resizer{position:absolute;top:0;right:-5px;z-index:4;width:10px;height:100%;cursor:col-resize}.col-resizer:hover{background:#3c5dc440}.data-grid-datatable td[data-sized]{overflow:hidden;text-overflow:ellipsis}:where(.data-grid-datatable tbody tr,.data-grid-datatable tfoot tr){background-color:#fff}.data-grid-datatable td[data-frozen]{position:sticky;z-index:1;background-color:inherit}.data-grid-datatable thead th[data-frozen]{position:sticky;z-index:3}.data-grid-datatable td[data-frozen]:has(+td:not([data-frozen])),.data-grid-datatable thead th[data-frozen]:has(+th:not([data-frozen])){box-shadow:inset -2px 0 #3c5dc459}table thead th.header{background-image:none!important;cursor:default}.header-cell{position:relative;display:flex;align-items:center;gap:2px}.header-cell label{flex:1 1 auto;cursor:default;margin:0;padding-left:2px;overflow:hidden;text-overflow:ellipsis}.header-cell.col-dragging{opacity:.8}.dg-column-ghost{border:1px solid #C1D0FD;box-sizing:border-box}.col-drop-indicator{position:fixed;z-index:3100;width:1px;border-radius:0;background:var(--orange-algorima, #f59d0f);pointer-events:none}.header-cell-end{justify-content:flex-end;align-items:center;height:25px}.header-handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:content-box;width:17px;height:20px;padding:0 2px;color:#3c5dc4;opacity:.35;cursor:grab}.header-handle:hover{opacity:1}.header-handle:active{cursor:grabbing}.header-sort,.header-agg{flex-shrink:0;color:#3c5dc4;font-size:11px;font-style:normal}.header-menu-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:18px;padding:0;border:0;border-radius:3px;background:none;color:#3c5dc4;opacity:.5;cursor:pointer}.header-menu-button:hover,.header-menu-button.open{opacity:1;background:#4465c926}.header-menu{position:fixed;z-index:3000;width:230px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003}.header-menu ul{margin:0;padding:0;list-style:none}.header-menu li{display:flex;align-items:center;gap:8px;padding:5px 12px;color:#3c5dc4;font-size:12.5px;cursor:pointer}.header-menu li i{width:14px;text-align:center;visibility:visible}.header-menu li:hover{background:#dbe4ff}.header-menu li.checked{font-weight:600}.header-menu li.separator{height:1px;margin:4px 0;padding:0;background:#dbe4ff;cursor:default}.header-menu li .fa-check{visibility:hidden}.header-menu li.checked>.fa-check{visibility:visible}.header-menu li.menu-action.disabled{opacity:.45;cursor:default}.header-menu li.menu-action.disabled:hover{background:none}.header-menu .menu-action-icon{width:14px;height:14px}.header-menu li.has-submenu{position:relative}.header-menu li.has-submenu.open{background:#dbe4ff}.header-menu li.has-submenu .submenu-caret{margin-left:auto}.header-menu .header-submenu{position:absolute;top:-5px;left:100%;width:200px;padding:4px 0;background:#fff;border:1px solid #DBE4FF;border-radius:5px;box-shadow:0 4px 14px #0003;font-weight:400}.header-menu .header-submenu.left{left:auto;right:100%}.header-menu .header-submenu.header-submenu-columns{width:240px;max-height:320px;overflow-y:auto}.header-menu .header-submenu .column-choice input[type=checkbox]{width:14px;margin:0;pointer-events:none}.header-menu .header-submenu .submenu-loading{opacity:.6;cursor:default}.header-menu .header-submenu .view-lock{margin-left:auto;padding-left:8px;opacity:.5;font-size:11px}.header-menu .header-submenu.up{top:auto;bottom:-5px}.header-sort-rank{flex-shrink:0;color:#3c5dc4;font-size:9px}.aggregation-row .agg-label{margin-right:4px;color:#3c5dc4;font-size:10.5px;opacity:.7}.datagrid-custom-container:focus,.datagrid-custom-container:focus-visible{outline:none}.data-grid-datatable td .image ::ng-deep img{display:block}.data-grid-datatable td:has(>.grid-cursor){outline:2px solid #4465C9;outline-offset:-2px}.data-grid-datatable td:has(>.grid-range){background-color:#4465c940!important;box-shadow:inset 0 0 0 1px #4465c980;color:#4d5a81!important}.data-grid-datatable td:has(>.grid-range) ::ng-deep *{color:#4d5a81!important}.data-grid-datatable td:has(.grid-editor){padding:0!important;background-color:#fff}.grid-editor{display:block;height:23px;overflow:visible;color:#4d5a81}.grid-editor ::ng-deep .field-container,.grid-editor ::ng-deep .form-group,.grid-editor ::ng-deep .form-group>div,.grid-editor ::ng-deep .checkbox-container{margin:0!important;padding:0;min-height:0!important;height:23px}.grid-editor ::ng-deep .validation-message,.grid-editor ::ng-deep .checkbox-label{display:none}.grid-editor ::ng-deep input,.grid-editor ::ng-deep input:focus,.grid-editor ::ng-deep textarea{box-sizing:border-box;width:100%;height:23px!important;min-height:0!important;margin:0!important;padding:0 4px;border:1px solid #4465C9;border-radius:0;box-shadow:none;font-size:inherit;line-height:normal;resize:none}.grid-editor ::ng-deep input.ng-invalid.ng-touched,.grid-editor ::ng-deep input.ng-invalid.ng-dirty{border-color:#f78383}.grid-editor ::ng-deep input[type=checkbox]{width:auto}.grid-editor ::ng-deep .ng-select .ng-select-container{color:#4d5a81;min-height:0!important;height:23px!important;border-radius:0;border-color:#4465c9}.grid-editor ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}.grid-editor ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%!important;border:none}.grid-editor ::ng-deep .form-group>div{flex:1;min-width:0;width:100%}.grid-editor ::ng-deep .ng-select{width:100%}.grid-editor ::ng-deep alg-selector{display:flex;width:100%;height:23px}.grid-editor ::ng-deep .input-select-default,.grid-editor ::ng-deep .input-select-default.with-button{flex:1;min-width:0;padding-right:0;margin-right:0}.grid-editor ::ng-deep .input-group-btn{float:none}.grid-editor ::ng-deep .btn,.grid-editor ::ng-deep .btn-32,.grid-editor ::ng-deep .btn-input-select{height:23px;width:23px;padding:0;line-height:1;border-radius:0}.grid-editor ::ng-deep .input-with-button{display:flex;height:23px}.grid-editor ::ng-deep .switch{margin:2px 0 0 4px;transform:scale(.7);transform-origin:left top}::ng-deep body.dg-column-dragging,::ng-deep body.dg-column-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}\n"]
 		}]
 	}],
@@ -19567,330 +19691,827 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var FilterSummaryPanelComponent = class FilterSummaryPanelComponent {
-	isEmptyFilter() {
-		return this.filterList.length == 0;
+const FilterOperators = {
+	text: [
+		{
+			value: "contains",
+			label: "contient"
+		},
+		{
+			value: "notcontains",
+			label: "ne contient pas"
+		},
+		{
+			value: "startswith",
+			label: "commence par"
+		},
+		{
+			value: "endswith",
+			label: "finit par"
+		},
+		{
+			value: "eq",
+			label: "est égal à"
+		},
+		{
+			value: "ne",
+			label: "est différent de"
+		},
+		{
+			value: "isnull",
+			label: "est vide"
+		},
+		{
+			value: "notnull",
+			label: "n'est pas vide"
+		}
+	],
+	number: [
+		{
+			value: "eq",
+			label: "="
+		},
+		{
+			value: "ne",
+			label: "≠"
+		},
+		{
+			value: "gt",
+			label: ">"
+		},
+		{
+			value: "ge",
+			label: "≥"
+		},
+		{
+			value: "lt",
+			label: "<"
+		},
+		{
+			value: "le",
+			label: "≤"
+		},
+		{
+			value: "between",
+			label: "entre"
+		},
+		{
+			value: "isnull",
+			label: "est vide"
+		},
+		{
+			value: "notnull",
+			label: "n'est pas vide"
+		}
+	],
+	date: [
+		{
+			value: "on",
+			label: "le"
+		},
+		{
+			value: "before",
+			label: "avant le"
+		},
+		{
+			value: "after",
+			label: "après le"
+		},
+		{
+			value: "datebetween",
+			label: "entre"
+		},
+		{
+			value: "today",
+			label: "aujourd'hui"
+		},
+		{
+			value: "thismonth",
+			label: "ce mois-ci"
+		},
+		{
+			value: "isnull",
+			label: "est vide"
+		},
+		{
+			value: "notnull",
+			label: "n'est pas vide"
+		}
+	],
+	bool: [{
+		value: "true",
+		label: "est oui"
+	}, {
+		value: "false",
+		label: "est non"
+	}],
+	list: [{
+		value: "in",
+		label: "est l'une de"
+	}, {
+		value: "notin",
+		label: "n'est aucune de"
+	}]
+};
+var FilterEditorComponent = class FilterEditorComponent {
+	constructor() {
+		this.columns = [];
+		this.filter = {
+			Logic: "and",
+			Conditions: [],
+			Groups: []
+		};
+		this.sort = [];
+		this.embedded = false;
+		this.section = null;
+		this.panelFields = [];
+		this.addedPanelKeys = [];
+		this.viewLabel = "";
+		this.canSaveInView = true;
+		this.saveInView = false;
+		this.tab = "filters";
+		this.maxDepth = 3;
+		this.trackIndex = (index) => index;
 	}
-	constructor(validationService, bus, entityFacadeRegistryService) {
-		this.validationService = validationService;
-		this.bus = bus;
-		this.entityFacadeRegistryService = entityFacadeRegistryService;
-		this.filterList = [];
-		this.filterType = FilterType;
-		this.Fields = [];
-		this.DisplayFields = this.Fields;
-		this.currentCriteria = null;
-		this.hiddenFilters = [];
-		this.destroy$ = new Subject();
+	trackKey(_, field) {
+		return field.key;
 	}
-	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$,
-			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);
-			this.updateSummary();
-		});
+	get panel() {
+		return this.filter.Panel ??= {};
 	}
-	ngOnDestroy() {
-		this.destroy$.next();
-		this.destroy$.complete();
+	shownPanelFields() {
+		const keys = /* @__PURE__ */ new Set([...Object.keys(this.filter.Panel ?? {}), ...this.addedPanelKeys]);
+		const known = this.panelFields.filter((f) => keys.has(f.key));
+		const unknown = [...keys].filter((k) => !this.panelFields.some((f) => f.key === k)).map((k) => ({
+			key: k,
+			label: k,
+			type: "text"
+		}));
+		return [...known, ...unknown];
 	}
-	updateSummary() {
-		const descriptors = this.Fields;
-		if (descriptors) {
-			this.filterList.splice(0, this.filterList.length);
-			descriptors.filter((field) => !this.hiddenFilters.includes(field.PropertyName)).forEach((field) => {
-				this.updateFieldSummary(field);
-			});
+	availablePanelFields() {
+		const shown = new Set(this.shownPanelFields().map((f) => f.key));
+		return this.panelFields.filter((f) => !shown.has(f.key));
+	}
+	addPanelField(key) {
+		if (key && !this.addedPanelKeys.includes(key)) this.addedPanelKeys = [...this.addedPanelKeys, key];
+	}
+	removePanelField(field) {
+		this.addedPanelKeys = this.addedPanelKeys.filter((k) => k !== field.key);
+		if (this.filter.Panel) delete this.filter.Panel[field.key];
+	}
+	panelValue(field) {
+		const value = this.filter.Panel?.[field.key];
+		return value === null || value === void 0 ? "" : field.type === "date" ? String(value).substring(0, 10) : String(value);
+	}
+	setPanelValue(field, raw) {
+		const panel = this.panel;
+		if (raw === "" || raw === null || raw === void 0) {
+			delete panel[field.key];
+			return;
 		}
+		if (field.type === "bool") panel[field.key] = raw === true || raw === "true";
+		else if (field.type === "number" || field.type === "list" && /^-?\d+$/.test(String(raw))) panel[field.key] = Number(raw);
+		else panel[field.key] = raw;
 	}
-	updateFieldSummary(field) {
-		const displayedVal = this.getFilterSummaryValue(field);
-		if (displayedVal !== null && displayedVal !== void 0) this.filterList.push({
-			DisplayedValue: displayedVal,
-			Field: field
-		});
+	get shownTab() {
+		return this.section ?? this.tab;
 	}
-	getFilterSummaryValue(field) {
-		if (!field) return null;
-		const fv = this.currentCriteria != null ? this.currentCriteria[field.PropertyName] : this.wrapper.form.get(field.PropertyName)?.value;
-		if (Utilities.IsNil(fv) || fv === -1 || parseInt(fv) === -1 || Utilities.isEmptyString(fv)) return;
-		let displayedValue = null;
-		if (field.FilterType === FilterType.ComboBox) {
-			if (!Utilities.IsUndefined(field.OriginalData)) {
-				const fld = field.OriginalData.find((p) => p[field.ValueMember] == fv);
-				if (fld && fld.hasOwnProperty(field.DisplayMember)) displayedValue = `${fld[field.DisplayMember]}`;
-			}
-		} else if (field.FilterType === FilterType.String || field.FilterType === FilterType.Integer) displayedValue = `${fv}`;
-		else return null;
-		return displayedValue;
+	get result() {
+		return {
+			filter: this.filter,
+			sort: this.sort.filter((s) => !!s.property),
+			saveInView: this.saveInView && this.canSaveInView
+		};
 	}
-	resetFormControl(field) {
-		if (!field.IsClearable) return;
-		const currentValue = this.currentCriteria != null ? this.currentCriteria[field.PropertyName] : this.wrapper.form.get(field.PropertyName)?.value;
-		if (Utilities.IsNil(currentValue) || currentValue === -1 || Utilities.isEmptyString(currentValue)) return;
-		let newValue;
-		if (field.FilterType === FilterType.ComboBox) newValue = field.Data?.find((d) => d[field.ValueMember] === -1) ? -1 : null;
-		else if (field.FilterType === FilterType.String) newValue = "";
-		else return;
-		this.wrapper.form.get(field.PropertyName).reset(newValue, { emitEvent: false });
-		this.facade.filter.setFilter(this.wrapper.form.getRawValue());
+	columnOf(key) {
+		return this.columns.find((c) => c.key === key);
 	}
-	resetFieldData(field) {
-		const fv = this.wrapper.form.get(field.PropertyName).value;
-		field.Data = field.OriginalData.filter((p) => p[field.ValueMember] === -1 || Object.keys(field.CurrentFilters).every((name) => {
-			return p[name] === fv;
-		}));
+	operatorsOf(condition) {
+		return FilterOperators[this.columnOf(condition.Property)?.type ?? "text"];
 	}
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.1",
-			ngImport: i0,
-			type: FilterSummaryPanelComponent,
-			deps: [
-				{ token: ValidationService },
-				{ token: PropertyChangeBus },
-				{ token: EntityFacadeRegistryService }
-			],
-			target: i0.ɵɵFactoryTarget.Component
-		});
+	hasValue(condition) {
+		return !ViewFilterNoValueOperators.includes(condition.Operator);
 	}
-	static {
-		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "14.0.0",
-			version: "22.2.1",
-			type: FilterSummaryPanelComponent,
-			isStandalone: false,
-			selector: "alg-filter-summary-panel",
-			inputs: {
-				entityKey: "entityKey",
-				guid: "guid"
-			},
-			ngImport: i0,
-			template: "<!-- <div class=\"clearfix\" *ngIf=\"!isEmptyFilter()\">\r\n    <div class=\"filter-summary\">\r\n        <div class=\"filter\" [formGroup]=\"wrapper.form\">\r\n            <ng-container *ngIf=\"filterList\">\r\n              \r\n                <div *ngFor=\"let field of Fields\" class=\"option\">\r\n                    <div [ngSwitch]=\"field.FilterType\">\r\n                        <div *ngSwitchCase=\"filterType.String\" class=\"form-group\">\r\n                                <input\r\n                                    class=\"form-control\"\r\n                                    [formControlName]=\"field.PropertyName\"\r\n                                    [id]=\"field.PropertyName\"\r\n                                    [readonly]=\"field.ReadOnly\"\r\n                                    [type]=\"field.InputType\"\r\n                                />\r\n                        </div>\r\n                        <div\r\n                            *ngSwitchCase=\"filterType.Integer\"\r\n                            class=\"form-group\"\r\n                        >\r\n                            <div>\r\n                                <input\r\n                                    class=\"form-control\"\r\n                                    [formControlName]=\"field.PropertyName\"\r\n                                    [id]=\"field.PropertyName\"\r\n                                    type=\"number\"\r\n                                    focusable\r\n                                    ng-pattern=\"/^[0-9]+$/\"\r\n                                    tabindex=\"0\"\r\n                                />\r\n                            </div>\r\n                            <div *ngSwitchCase=\"filterType.ComboBox\" class=\"form-group\">\r\n                                <div>\r\n                                    <ng-select\r\n                                        appendTo=\"body\"\r\n                                        placeholder=\"Sélectionner {{\r\n                                            field.Label\r\n                                        }}\"\r\n                                        [formControlName]=\"field.PropertyName\"\r\n                                        [id]=\"field.PropertyName\"\r\n                                        [items]=\"field.Data\"\r\n                                        [multiple]=\"field.MultipleSelection\"\r\n                                        [hideSelected]=\"field.HideSelected\"\r\n                                        bindValue=\"{{ field.ValueMember }}\"\r\n                                        [clearable]=\"field.IsClearable\"\r\n                                        bindLabel=\"{{ field.DisplayMember }}\"\r\n                                        [selectOnTab]=\"true\"\r\n                                        [readonly]=\"field.ReadOnly\"\r\n                                    >\r\n                                    </ng-select>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"clearfix\" *ngIf=\"!isEmptyFilter()\">\r\n    <div class=\"filter-summary\">\r\n        <div class=\"filter\">\r\n            <ng-container *ngIf=\"filterList\">\r\n                <div *ngFor=\"let field of filterList\">\r\n                    <div class=\"option\" [class.clearable]=\"field.Field.IsClearable\" (click)=\"resetFormControl(field.Field)\">\r\n                        {{field.Field.Label + ' : '+ field.DisplayedValue}}\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\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}.filter-summary{padding:2px 3px;border-bottom:solid 1px var(--main-bg-color);display:flex}.option alg-field .form-group{display:flex!important}.filter-summary .filter{display:flex;flex-direction:row;padding:2px}.filter-summary .filter .option{display:block;float:left;position:relative;background-color:#dbe4ff;text-transform:capitalize;color:#4465c9;padding:5px 10px;margin:0 5px 0 0;border-radius:20px;cursor:pointer;-webkit-transition:background-color .1s ease-out;-moz-transition:background-color .1s ease-out;-o-transition:background-color .1s ease-out;transition:background-color .1s ease-out;border-left:1px solid #ffffff}.filter-summary .filter .option.clearable:hover{text-decoration:line-through}.filter-summary .filter:before,.filter-summary .filter:after{content:\"\";display:table}.filter-summary:before,.filter-summary:after{content:\"\";display:table}\n"],
-			dependencies: [{
-				kind: "directive",
-				type: i1$5.NgForOf,
-				selector: "[ngFor][ngForOf]",
-				inputs: [
-					"ngForOf",
-					"ngForTrackBy",
-					"ngForTemplate"
-				]
-			}, {
-				kind: "directive",
-				type: i1$5.NgIf,
-				selector: "[ngIf]",
-				inputs: [
-					"ngIf",
-					"ngIfThen",
-					"ngIfElse"
-				]
-			}],
-			changeDetection: i0.ChangeDetectionStrategy.Eager
-		});
+	hasSecondValue(condition) {
+		return condition.Operator === "between" || condition.Operator === "datebetween";
 	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: FilterSummaryPanelComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "alg-filter-summary-panel",
-			changeDetection: ChangeDetectionStrategy.Eager,
-			standalone: false,
-			template: "<!-- <div class=\"clearfix\" *ngIf=\"!isEmptyFilter()\">\r\n    <div class=\"filter-summary\">\r\n        <div class=\"filter\" [formGroup]=\"wrapper.form\">\r\n            <ng-container *ngIf=\"filterList\">\r\n              \r\n                <div *ngFor=\"let field of Fields\" class=\"option\">\r\n                    <div [ngSwitch]=\"field.FilterType\">\r\n                        <div *ngSwitchCase=\"filterType.String\" class=\"form-group\">\r\n                                <input\r\n                                    class=\"form-control\"\r\n                                    [formControlName]=\"field.PropertyName\"\r\n                                    [id]=\"field.PropertyName\"\r\n                                    [readonly]=\"field.ReadOnly\"\r\n                                    [type]=\"field.InputType\"\r\n                                />\r\n                        </div>\r\n                        <div\r\n                            *ngSwitchCase=\"filterType.Integer\"\r\n                            class=\"form-group\"\r\n                        >\r\n                            <div>\r\n                                <input\r\n                                    class=\"form-control\"\r\n                                    [formControlName]=\"field.PropertyName\"\r\n                                    [id]=\"field.PropertyName\"\r\n                                    type=\"number\"\r\n                                    focusable\r\n                                    ng-pattern=\"/^[0-9]+$/\"\r\n                                    tabindex=\"0\"\r\n                                />\r\n                            </div>\r\n                            <div *ngSwitchCase=\"filterType.ComboBox\" class=\"form-group\">\r\n                                <div>\r\n                                    <ng-select\r\n                                        appendTo=\"body\"\r\n                                        placeholder=\"Sélectionner {{\r\n                                            field.Label\r\n                                        }}\"\r\n                                        [formControlName]=\"field.PropertyName\"\r\n                                        [id]=\"field.PropertyName\"\r\n                                        [items]=\"field.Data\"\r\n                                        [multiple]=\"field.MultipleSelection\"\r\n                                        [hideSelected]=\"field.HideSelected\"\r\n                                        bindValue=\"{{ field.ValueMember }}\"\r\n                                        [clearable]=\"field.IsClearable\"\r\n                                        bindLabel=\"{{ field.DisplayMember }}\"\r\n                                        [selectOnTab]=\"true\"\r\n                                        [readonly]=\"field.ReadOnly\"\r\n                                    >\r\n                                    </ng-select>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"clearfix\" *ngIf=\"!isEmptyFilter()\">\r\n    <div class=\"filter-summary\">\r\n        <div class=\"filter\">\r\n            <ng-container *ngIf=\"filterList\">\r\n                <div *ngFor=\"let field of filterList\">\r\n                    <div class=\"option\" [class.clearable]=\"field.Field.IsClearable\" (click)=\"resetFormControl(field.Field)\">\r\n                        {{field.Field.Label + ' : '+ field.DisplayedValue}}\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\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}.filter-summary{padding:2px 3px;border-bottom:solid 1px var(--main-bg-color);display:flex}.option alg-field .form-group{display:flex!important}.filter-summary .filter{display:flex;flex-direction:row;padding:2px}.filter-summary .filter .option{display:block;float:left;position:relative;background-color:#dbe4ff;text-transform:capitalize;color:#4465c9;padding:5px 10px;margin:0 5px 0 0;border-radius:20px;cursor:pointer;-webkit-transition:background-color .1s ease-out;-moz-transition:background-color .1s ease-out;-o-transition:background-color .1s ease-out;transition:background-color .1s ease-out;border-left:1px solid #ffffff}.filter-summary .filter .option.clearable:hover{text-decoration:line-through}.filter-summary .filter:before,.filter-summary .filter:after{content:\"\";display:table}.filter-summary:before,.filter-summary:after{content:\"\";display:table}\n"]
-		}]
-	}],
-	ctorParameters: () => [
-		{ type: ValidationService },
-		{ type: PropertyChangeBus },
-		{ type: EntityFacadeRegistryService }
-	],
-	propDecorators: {
-		entityKey: [{ type: Input }],
-		guid: [{ type: Input }]
+	isList(condition) {
+		return condition.Operator === "in" || condition.Operator === "notin";
 	}
-});
-var ViewModelLoaderService = class ViewModelLoaderService {
-	constructor(facades) {
-		this.facades = facades;
+	inputType(condition) {
+		const type = this.columnOf(condition.Property)?.type;
+		return type === "date" ? "date" : type === "number" ? "number" : "text";
 	}
-	getViewModel$(entityKey, guid, isStandalone = true, id) {
-		const facade = this.facades.getFacade(entityKey, guid);
-		const config$ = facade.config.viewModel$.pipe(filter((vm) => !!vm?.FieldSections?.length), shareReplay({
-			bufferSize: 1,
-			refCount: true
-		}));
-		if (isStandalone && (!id || id === "0")) return config$.pipe(map((cfg) => this.createNew(cfg)), shareReplay({
-			bufferSize: 1,
-			refCount: true
-		}));
-		if (isStandalone && id && id !== "0") {
-			facade.selection.getSelectedById$(id);
-			return facade.config.getApiViewModel(id);
-		}
-		return combineLatest([config$, facade.selection.selected$]).pipe(map(([cfg, selection]) => {
-			const adapted = facade.selection.adaptSelectionToViewModel(selection, cfg.FieldSections);
-			return {
-				...cfg,
-				ViewModel: adapted ?? cfg.ViewModel,
-				FieldSections: cfg.FieldSections
-			};
-		}), shareReplay({
-			bufferSize: 1,
-			refCount: true
-		}));
+	onColumnChange(condition) {
+		condition.Operator = this.operatorsOf(condition)[0].value;
+		condition.Value = null;
+		condition.Value2 = null;
+		condition.Values = this.isList(condition) ? [] : void 0;
 	}
-	createNew(baseVm) {
-		const clone = {
-			...baseVm.ViewModel,
-			Id: null
+	onOperatorChange(condition) {
+		if (this.isList(condition)) condition.Values = condition.Values ?? [];
+	}
+	toggleValue(condition, value) {
+		const values = condition.Values ?? [];
+		condition.Values = values.includes(value) ? values.filter((v) => v !== value) : [...values, value];
+	}
+	setLogic(group, logic) {
+		group.Logic = logic;
+	}
+	addCondition(group) {
+		const column = this.columns[0];
+		if (!column) return;
+		const condition = {
+			Property: column.key,
+			Operator: FilterOperators[column.type][0].value,
+			Value: null
 		};
-		return {
-			...baseVm,
-			ViewModel: clone,
-			FieldSections: baseVm.FieldSections
+		if (this.isList(condition)) condition.Values = [];
+		group.Conditions.push(condition);
+	}
+	removeCondition(group, index) {
+		group.Conditions.splice(index, 1);
+	}
+	addGroup(group) {
+		const sub = {
+			Logic: group.Logic === "and" ? "or" : "and",
+			Conditions: [],
+			Groups: []
 		};
+		this.addCondition(sub);
+		group.Groups = [...group.Groups ?? [], sub];
+	}
+	removeGroup(parent, index) {
+		parent.Groups?.splice(index, 1);
+	}
+	clear() {
+		delete this.filter.Panel;
+		this.addedPanelKeys = [];
+		this.filter.Logic = "and";
+		this.filter.Conditions.splice(0);
+		this.filter.Groups = [];
+		this.sort.splice(0);
+	}
+	addSort() {
+		const used = new Set(this.sort.map((s) => s.property));
+		const next = this.columns.find((c) => !used.has(c.key));
+		if (next) this.sort.push({
+			property: next.key,
+			direction: "asc"
+		});
+	}
+	removeSort(index) {
+		this.sort.splice(index, 1);
+	}
+	moveSort(index, offset) {
+		const target = index + offset;
+		if (target < 0 || target >= this.sort.length) return;
+		const [level] = this.sort.splice(index, 1);
+		this.sort.splice(target, 0, level);
+	}
+	summary(group = this.filter) {
+		return [...group.Conditions.map((c) => {
+			const column = this.columnOf(c.Property);
+			const operator = FilterOperators[column?.type ?? "text"].find((o) => o.value === c.Operator)?.label ?? c.Operator;
+			const values = this.isList(c) ? (c.Values ?? []).map((v) => column?.values?.find((x) => x.value === v)?.label ?? v).join(", ") : !this.hasValue(c) ? "" : this.hasSecondValue(c) ? `${c.Value ?? "…"} et ${c.Value2 ?? "…"}` : c.Value ?? "…";
+			return `${column?.label ?? c.Property} ${operator}${values ? " « " + values + " »" : ""}`;
+		}), ...(group.Groups ?? []).map((g) => `(${this.summary(g)})`)].join(group.Logic === "or" ? " OU " : " ET ") || "Aucun filtre";
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
 			version: "22.2.1",
 			ngImport: i0,
-			type: ViewModelLoaderService,
-			deps: [{ token: EntityFacadeRegistryService }],
-			target: i0.ɵɵFactoryTarget.Injectable
+			type: FilterEditorComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
 		});
 	}
 	static {
-		this.ɵprov = i0.ɵɵngDeclareInjectable({
-			minVersion: "12.0.0",
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
 			version: "22.2.1",
+			type: FilterEditorComponent,
+			isStandalone: true,
+			selector: "alg-filter-editor",
+			inputs: {
+				columns: "columns",
+				filter: "filter",
+				sort: "sort",
+				embedded: "embedded",
+				section: "section",
+				panelFields: "panelFields"
+			},
 			ngImport: i0,
-			type: ViewModelLoaderService
-		});
-	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: ViewModelLoaderService,
-	decorators: [{ type: Injectable }],
-	ctorParameters: () => [{ type: EntityFacadeRegistryService }]
-});
-var PropertyEditorComponent = class PropertyEditorComponent {
-	handleKeywordsChanged(event) {}
-	isFieldHidden(field) {
-		return !(Utilities.IsNil(this.keyword) || field.Label.toUpperCase().includes(this.keyword.toUpperCase()));
+			template: "<div class=\"fe\">\r\n    <div class=\"fe-tabs\" role=\"tablist\" *ngIf=\"!section\">\r\n        <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'filters'\" (click)=\"tab = 'filters'\">Filtres</button>\r\n        <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'sort'\" (click)=\"tab = 'sort'\">Tri</button>\r\n    </div>\r\n\r\n    <div class=\"fe-body\" *ngIf=\"shownTab === 'filters'\">\r\n        <!-- Filtres de l'écran (FilterPanel) : valeurs enregistrées avec la vue, appliquées au FilterPanel. -->\r\n        <div class=\"fe-panel\" *ngIf=\"panelFields.length || shownPanelFields().length\">\r\n            <div class=\"fe-panel-title\">Filtres de l'écran</div>\r\n            <div class=\"fe-panel-field\" *ngFor=\"let field of shownPanelFields(); trackBy: trackKey\">\r\n                <span [title]=\"field.label\">{{ field.label }}</span>\r\n                <ng-container [ngSwitch]=\"field.type\">\r\n                    <select *ngSwitchCase=\"'list'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n                        <option value=\"\">Choisir…</option>\r\n                        <option *ngFor=\"let option of field.values\" [value]=\"option.value\">{{ option.label }}</option>\r\n                    </select>\r\n                    <select *ngSwitchCase=\"'bool'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n                        <option value=\"\">Choisir…</option>\r\n                        <option value=\"true\">Oui</option>\r\n                        <option value=\"false\">Non</option>\r\n                    </select>\r\n                    <input *ngSwitchDefault class=\"form-control\" [type]=\"field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'\"\r\n                        [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\" />\r\n                </ng-container>\r\n                <button type=\"button\" class=\"fe-icon\" title=\"Retirer le filtre de l'écran\" (click)=\"removePanelField(field)\"><i class=\"fa fa-times\"></i></button>\r\n            </div>\r\n            <!-- Ajout d'un filtre de l'écran : les champs du FilterPanel pas encore utilisés. -->\r\n            <div class=\"fe-adds\" *ngIf=\"availablePanelFields().length\">\r\n                <select class=\"form-control fe-add-panel\" [ngModel]=\"''\" (ngModelChange)=\"addPanelField($event)\">\r\n                    <option value=\"\">+ Filtre de l'écran</option>\r\n                    <option *ngFor=\"let field of availablePanelFields(); trackBy: trackKey\" [value]=\"field.key\">{{ field.label }}</option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n        <div class=\"fe-panel-title\" *ngIf=\"panelFields.length || shownPanelFields().length\">Filtre additionnel</div>\r\n        <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: filter, parent: null, index: 0, depth: 0 }\"></ng-container>\r\n        <div class=\"fe-summary\">{{ summary() }}</div>\r\n    </div>\r\n\r\n    <div class=\"fe-body\" *ngIf=\"shownTab === 'sort'\">\r\n        <div class=\"fe-sort\" *ngFor=\"let level of sort; let i = index; trackBy: trackIndex\">\r\n            <span class=\"fe-sort-label\">{{ i === 0 ? 'Trier par' : 'Puis par' }}</span>\r\n            <select class=\"form-control\" [(ngModel)]=\"level.property\">\r\n                <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n            </select>\r\n            <select class=\"form-control fe-sort-direction\" [(ngModel)]=\"level.direction\">\r\n                <option value=\"asc\">Croissant</option>\r\n                <option value=\"desc\">Décroissant</option>\r\n            </select>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Monter\" [disabled]=\"i === 0\" (click)=\"moveSort(i, -1)\"><i class=\"fa fa-arrow-up\"></i></button>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Descendre\" [disabled]=\"i === sort.length - 1\" (click)=\"moveSort(i, 1)\"><i class=\"fa fa-arrow-down\"></i></button>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Retirer\" (click)=\"removeSort(i)\"><i class=\"fa fa-times\"></i></button>\r\n        </div>\r\n        <div class=\"fe-adds\"><button type=\"button\" class=\"fe-add\" (click)=\"addSort()\">+ Niveau</button></div>\r\n    </div>\r\n\r\n    <div class=\"fe-foot\">\r\n        <label class=\"fe-save\" *ngIf=\"!embedded\" [class.disabled]=\"!canSaveInView\"\r\n            [title]=\"canSaveInView ? '' : 'La vue par défaut est en lecture seule : dupliquez-la pour y enregistrer un filtre'\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"saveInView\" [disabled]=\"!canSaveInView\" />\r\n            <span>Enregistrer dans la vue{{ viewLabel ? ' « ' + viewLabel + ' »' : '' }}</span>\r\n        </label>\r\n        <button type=\"button\" class=\"fe-clear\" (click)=\"clear()\">Tout effacer</button>\r\n    </div>\r\n</div>\r\n\r\n<!-- Groupe : relation ET / OU, conditions, groupes imbriqués. -->\r\n<ng-template #groupTpl let-group=\"group\" let-parent=\"parent\" let-index=\"index\" let-depth=\"depth\">\r\n    <div class=\"fe-group\" [class.or]=\"group.Logic === 'or'\" [class.nested]=\"depth > 0\">\r\n        <div class=\"fe-group-head\">\r\n            <span class=\"fe-logic\">\r\n                <button type=\"button\" [class.on]=\"group.Logic === 'and'\" class=\"and\" (click)=\"setLogic(group, 'and')\">ET</button>\r\n                <button type=\"button\" [class.on]=\"group.Logic === 'or'\" class=\"or\" (click)=\"setLogic(group, 'or')\">OU</button>\r\n            </span>\r\n            <span class=\"fe-group-hint\">{{ group.Logic === 'and' ? 'Toutes les conditions' : 'Au moins une condition' }}</span>\r\n            <button type=\"button\" *ngIf=\"parent\" class=\"fe-icon fe-group-remove\" title=\"Retirer le groupe\" (click)=\"removeGroup(parent, index)\">\r\n                <i class=\"fa fa-times\"></i>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"fe-cond\" *ngFor=\"let condition of group.Conditions; let i = index; trackBy: trackIndex\">\r\n            <select class=\"form-control\" [(ngModel)]=\"condition.Property\" (ngModelChange)=\"onColumnChange(condition)\">\r\n                <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n            </select>\r\n            <select class=\"form-control\" [(ngModel)]=\"condition.Operator\" (ngModelChange)=\"onOperatorChange(condition)\">\r\n                <option *ngFor=\"let op of operatorsOf(condition)\" [value]=\"op.value\">{{ op.label }}</option>\r\n            </select>\r\n            <span class=\"fe-value\">\r\n                <ng-container *ngIf=\"isList(condition); else valueTpl\">\r\n                    <span class=\"fe-chips\">\r\n                        <button type=\"button\" *ngFor=\"let option of columnOf(condition.Property)?.values\" class=\"fe-chip\"\r\n                            [class.on]=\"condition.Values?.includes(option.value)\" (click)=\"toggleValue(condition, option.value)\">{{ option.label }}</button>\r\n                    </span>\r\n                </ng-container>\r\n                <ng-template #valueTpl>\r\n                    <ng-container *ngIf=\"hasValue(condition)\">\r\n                        <input class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value\" />\r\n                        <input *ngIf=\"hasSecondValue(condition)\" class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value2\" />\r\n                    </ng-container>\r\n                </ng-template>\r\n            </span>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Retirer la condition\" (click)=\"removeCondition(group, i)\"><i class=\"fa fa-times\"></i></button>\r\n        </div>\r\n\r\n        <ng-container *ngFor=\"let sub of group.Groups; let gi = index; trackBy: trackIndex\">\r\n            <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: sub, parent: group, index: gi, depth: depth + 1 }\"></ng-container>\r\n        </ng-container>\r\n\r\n        <div class=\"fe-adds\">\r\n            <button type=\"button\" class=\"fe-add\" (click)=\"addCondition(group)\">+ Condition</button>\r\n            <button type=\"button\" class=\"fe-add\" *ngIf=\"depth < maxDepth - 1\" (click)=\"addGroup(group)\">+ Groupe</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\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}.fe-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:6px 12px;margin-bottom:12px}.fe-panel .fe-adds{grid-column:1/-1}.fe-add-panel{width:auto;border-style:dashed;color:#4465c9}.fe-panel-title{grid-column:1/-1;margin:4px 0 2px;font-weight:600}.fe-panel-field{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:8px;margin:0;font-weight:400}.fe-panel-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fe{display:flex;flex-direction:column;color:#4d5a81;font-size:13px}.fe-tabs{display:flex;gap:4px;padding:8px 14px 0;border-bottom:1px solid #DBE4FF}.fe-tab{padding:6px 12px;border:none;border-bottom:2px solid transparent;background:none;color:#9fa9c7;font:inherit;font-weight:700;cursor:pointer}.fe-tab.active{color:#4465c9;border-bottom-color:#5272d3}.fe-body{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:12px 14px}.fe-group{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #DBE4FF;border-left:4px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or{border-left-color:#e07b12}.fe-group.nested{background:#f6f8fd}.fe-group-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#9fa9c7}.fe-group-remove{margin-left:auto}.fe-logic{display:inline-flex;border:1px solid #DBE4FF;border-radius:999px;overflow:hidden}.fe-logic button{padding:2px 10px;border:none;background:none;color:#9fa9c7;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.fe-logic button.on.and{background:#3b57b8;color:#fff}.fe-logic button.on.or{background:#e07b12;color:#fff}.fe-cond{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) 28px;gap:6px;align-items:center;padding:4px 6px;border:1px solid #DBE4FF;border-left:3px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or>.fe-cond{border-left-color:#e07b12}@media(max-width:600px){.fe-cond{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}.fe-cond .fe-value{grid-column:1/3}}select.form-control,input.form-control{height:30px;min-width:0;padding:2px 6px;font-size:13px}.fe-value{display:flex;gap:6px;min-width:0}.fe-value input{flex:1}.fe-chips{display:flex;flex-wrap:wrap;gap:4px}.fe-chip{padding:2px 8px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4d5a81;font:inherit;font-size:12px;cursor:pointer}.fe-chip.on{background:#5272d3;border-color:#5272d3;color:#fff}.fe-icon{width:28px;height:28px;padding:0;border:none;border-radius:6px;background:none;color:#9fa9c7;cursor:pointer}.fe-icon:hover:not(:disabled){background:#ebf0ff;color:#4d5a81}.fe-icon:disabled{opacity:.3;cursor:default}.fe-adds{display:flex;gap:8px;flex-wrap:wrap}.fe-add{padding:3px 10px;border:1px dashed #C1D0FD;border-radius:6px;background:none;color:#4465c9;font:inherit;font-size:12px;cursor:pointer}.fe-summary{padding:8px 10px;border-radius:6px;background:#ebf0ff;font-size:12px;word-break:break-word}.fe-sort{display:grid;grid-template-columns:64px minmax(0,1fr) 120px 28px 28px 28px;gap:6px;align-items:center}.fe-sort-label{font-size:12px;color:#9fa9c7}.fe-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid #DBE4FF}.fe-save{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;cursor:pointer}.fe-save.disabled{opacity:.55;cursor:default}.fe-save input{margin:0}.fe-clear{border:none;background:none;color:#4465c9;font:inherit;cursor:pointer}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: CommonModule
+				},
+				{
+					kind: "directive",
+					type: i1$5.NgForOf,
+					selector: "[ngFor][ngForOf]",
+					inputs: [
+						"ngForOf",
+						"ngForTrackBy",
+						"ngForTemplate"
+					]
+				},
+				{
+					kind: "directive",
+					type: i1$5.NgIf,
+					selector: "[ngIf]",
+					inputs: [
+						"ngIf",
+						"ngIfThen",
+						"ngIfElse"
+					]
+				},
+				{
+					kind: "directive",
+					type: i1$5.NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: i1$5.NgSwitch,
+					selector: "[ngSwitch]",
+					inputs: ["ngSwitch"]
+				},
+				{
+					kind: "directive",
+					type: i1$5.NgSwitchCase,
+					selector: "[ngSwitchCase]",
+					inputs: ["ngSwitchCase"]
+				},
+				{
+					kind: "directive",
+					type: i1$5.NgSwitchDefault,
+					selector: "[ngSwitchDefault]"
+				},
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i5.NgSelectOption,
+					selector: "option",
+					inputs: ["ngValue", "value"]
+				},
+				{
+					kind: "directive",
+					type: i5.ɵNgSelectMultipleOption,
+					selector: "option",
+					inputs: ["ngValue", "value"]
+				},
+				{
+					kind: "directive",
+					type: i5.DefaultValueAccessor,
+					selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+				},
+				{
+					kind: "directive",
+					type: i5.CheckboxControlValueAccessor,
+					selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]"
+				},
+				{
+					kind: "directive",
+					type: i5.SelectControlValueAccessor,
+					selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]",
+					inputs: ["compareWith"]
+				},
+				{
+					kind: "directive",
+					type: i5.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i5.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
 	}
-	isSectionHidden(section) {
-		return !(Utilities.IsNil(this.keyword) || section.Name.toUpperCase().includes(this.keyword.toUpperCase()) || section.FieldViewModels.some((f) => !this.isFieldHidden(f)));
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: FilterEditorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "alg-filter-editor",
+			standalone: true,
+			imports: [CommonModule, FormsModule],
+			changeDetection: ChangeDetectionStrategy.Eager,
+			template: "<div class=\"fe\">\r\n    <div class=\"fe-tabs\" role=\"tablist\" *ngIf=\"!section\">\r\n        <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'filters'\" (click)=\"tab = 'filters'\">Filtres</button>\r\n        <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'sort'\" (click)=\"tab = 'sort'\">Tri</button>\r\n    </div>\r\n\r\n    <div class=\"fe-body\" *ngIf=\"shownTab === 'filters'\">\r\n        <!-- Filtres de l'écran (FilterPanel) : valeurs enregistrées avec la vue, appliquées au FilterPanel. -->\r\n        <div class=\"fe-panel\" *ngIf=\"panelFields.length || shownPanelFields().length\">\r\n            <div class=\"fe-panel-title\">Filtres de l'écran</div>\r\n            <div class=\"fe-panel-field\" *ngFor=\"let field of shownPanelFields(); trackBy: trackKey\">\r\n                <span [title]=\"field.label\">{{ field.label }}</span>\r\n                <ng-container [ngSwitch]=\"field.type\">\r\n                    <select *ngSwitchCase=\"'list'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n                        <option value=\"\">Choisir…</option>\r\n                        <option *ngFor=\"let option of field.values\" [value]=\"option.value\">{{ option.label }}</option>\r\n                    </select>\r\n                    <select *ngSwitchCase=\"'bool'\" class=\"form-control\" [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\">\r\n                        <option value=\"\">Choisir…</option>\r\n                        <option value=\"true\">Oui</option>\r\n                        <option value=\"false\">Non</option>\r\n                    </select>\r\n                    <input *ngSwitchDefault class=\"form-control\" [type]=\"field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'\"\r\n                        [ngModel]=\"panelValue(field)\" (ngModelChange)=\"setPanelValue(field, $event)\" />\r\n                </ng-container>\r\n                <button type=\"button\" class=\"fe-icon\" title=\"Retirer le filtre de l'écran\" (click)=\"removePanelField(field)\"><i class=\"fa fa-times\"></i></button>\r\n            </div>\r\n            <!-- Ajout d'un filtre de l'écran : les champs du FilterPanel pas encore utilisés. -->\r\n            <div class=\"fe-adds\" *ngIf=\"availablePanelFields().length\">\r\n                <select class=\"form-control fe-add-panel\" [ngModel]=\"''\" (ngModelChange)=\"addPanelField($event)\">\r\n                    <option value=\"\">+ Filtre de l'écran</option>\r\n                    <option *ngFor=\"let field of availablePanelFields(); trackBy: trackKey\" [value]=\"field.key\">{{ field.label }}</option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n        <div class=\"fe-panel-title\" *ngIf=\"panelFields.length || shownPanelFields().length\">Filtre additionnel</div>\r\n        <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: filter, parent: null, index: 0, depth: 0 }\"></ng-container>\r\n        <div class=\"fe-summary\">{{ summary() }}</div>\r\n    </div>\r\n\r\n    <div class=\"fe-body\" *ngIf=\"shownTab === 'sort'\">\r\n        <div class=\"fe-sort\" *ngFor=\"let level of sort; let i = index; trackBy: trackIndex\">\r\n            <span class=\"fe-sort-label\">{{ i === 0 ? 'Trier par' : 'Puis par' }}</span>\r\n            <select class=\"form-control\" [(ngModel)]=\"level.property\">\r\n                <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n            </select>\r\n            <select class=\"form-control fe-sort-direction\" [(ngModel)]=\"level.direction\">\r\n                <option value=\"asc\">Croissant</option>\r\n                <option value=\"desc\">Décroissant</option>\r\n            </select>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Monter\" [disabled]=\"i === 0\" (click)=\"moveSort(i, -1)\"><i class=\"fa fa-arrow-up\"></i></button>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Descendre\" [disabled]=\"i === sort.length - 1\" (click)=\"moveSort(i, 1)\"><i class=\"fa fa-arrow-down\"></i></button>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Retirer\" (click)=\"removeSort(i)\"><i class=\"fa fa-times\"></i></button>\r\n        </div>\r\n        <div class=\"fe-adds\"><button type=\"button\" class=\"fe-add\" (click)=\"addSort()\">+ Niveau</button></div>\r\n    </div>\r\n\r\n    <div class=\"fe-foot\">\r\n        <label class=\"fe-save\" *ngIf=\"!embedded\" [class.disabled]=\"!canSaveInView\"\r\n            [title]=\"canSaveInView ? '' : 'La vue par défaut est en lecture seule : dupliquez-la pour y enregistrer un filtre'\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"saveInView\" [disabled]=\"!canSaveInView\" />\r\n            <span>Enregistrer dans la vue{{ viewLabel ? ' « ' + viewLabel + ' »' : '' }}</span>\r\n        </label>\r\n        <button type=\"button\" class=\"fe-clear\" (click)=\"clear()\">Tout effacer</button>\r\n    </div>\r\n</div>\r\n\r\n<!-- Groupe : relation ET / OU, conditions, groupes imbriqués. -->\r\n<ng-template #groupTpl let-group=\"group\" let-parent=\"parent\" let-index=\"index\" let-depth=\"depth\">\r\n    <div class=\"fe-group\" [class.or]=\"group.Logic === 'or'\" [class.nested]=\"depth > 0\">\r\n        <div class=\"fe-group-head\">\r\n            <span class=\"fe-logic\">\r\n                <button type=\"button\" [class.on]=\"group.Logic === 'and'\" class=\"and\" (click)=\"setLogic(group, 'and')\">ET</button>\r\n                <button type=\"button\" [class.on]=\"group.Logic === 'or'\" class=\"or\" (click)=\"setLogic(group, 'or')\">OU</button>\r\n            </span>\r\n            <span class=\"fe-group-hint\">{{ group.Logic === 'and' ? 'Toutes les conditions' : 'Au moins une condition' }}</span>\r\n            <button type=\"button\" *ngIf=\"parent\" class=\"fe-icon fe-group-remove\" title=\"Retirer le groupe\" (click)=\"removeGroup(parent, index)\">\r\n                <i class=\"fa fa-times\"></i>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"fe-cond\" *ngFor=\"let condition of group.Conditions; let i = index; trackBy: trackIndex\">\r\n            <select class=\"form-control\" [(ngModel)]=\"condition.Property\" (ngModelChange)=\"onColumnChange(condition)\">\r\n                <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n            </select>\r\n            <select class=\"form-control\" [(ngModel)]=\"condition.Operator\" (ngModelChange)=\"onOperatorChange(condition)\">\r\n                <option *ngFor=\"let op of operatorsOf(condition)\" [value]=\"op.value\">{{ op.label }}</option>\r\n            </select>\r\n            <span class=\"fe-value\">\r\n                <ng-container *ngIf=\"isList(condition); else valueTpl\">\r\n                    <span class=\"fe-chips\">\r\n                        <button type=\"button\" *ngFor=\"let option of columnOf(condition.Property)?.values\" class=\"fe-chip\"\r\n                            [class.on]=\"condition.Values?.includes(option.value)\" (click)=\"toggleValue(condition, option.value)\">{{ option.label }}</button>\r\n                    </span>\r\n                </ng-container>\r\n                <ng-template #valueTpl>\r\n                    <ng-container *ngIf=\"hasValue(condition)\">\r\n                        <input class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value\" />\r\n                        <input *ngIf=\"hasSecondValue(condition)\" class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value2\" />\r\n                    </ng-container>\r\n                </ng-template>\r\n            </span>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Retirer la condition\" (click)=\"removeCondition(group, i)\"><i class=\"fa fa-times\"></i></button>\r\n        </div>\r\n\r\n        <ng-container *ngFor=\"let sub of group.Groups; let gi = index; trackBy: trackIndex\">\r\n            <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: sub, parent: group, index: gi, depth: depth + 1 }\"></ng-container>\r\n        </ng-container>\r\n\r\n        <div class=\"fe-adds\">\r\n            <button type=\"button\" class=\"fe-add\" (click)=\"addCondition(group)\">+ Condition</button>\r\n            <button type=\"button\" class=\"fe-add\" *ngIf=\"depth < maxDepth - 1\" (click)=\"addGroup(group)\">+ Groupe</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\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}.fe-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:6px 12px;margin-bottom:12px}.fe-panel .fe-adds{grid-column:1/-1}.fe-add-panel{width:auto;border-style:dashed;color:#4465c9}.fe-panel-title{grid-column:1/-1;margin:4px 0 2px;font-weight:600}.fe-panel-field{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:8px;margin:0;font-weight:400}.fe-panel-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fe{display:flex;flex-direction:column;color:#4d5a81;font-size:13px}.fe-tabs{display:flex;gap:4px;padding:8px 14px 0;border-bottom:1px solid #DBE4FF}.fe-tab{padding:6px 12px;border:none;border-bottom:2px solid transparent;background:none;color:#9fa9c7;font:inherit;font-weight:700;cursor:pointer}.fe-tab.active{color:#4465c9;border-bottom-color:#5272d3}.fe-body{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:12px 14px}.fe-group{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #DBE4FF;border-left:4px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or{border-left-color:#e07b12}.fe-group.nested{background:#f6f8fd}.fe-group-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#9fa9c7}.fe-group-remove{margin-left:auto}.fe-logic{display:inline-flex;border:1px solid #DBE4FF;border-radius:999px;overflow:hidden}.fe-logic button{padding:2px 10px;border:none;background:none;color:#9fa9c7;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.fe-logic button.on.and{background:#3b57b8;color:#fff}.fe-logic button.on.or{background:#e07b12;color:#fff}.fe-cond{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) 28px;gap:6px;align-items:center;padding:4px 6px;border:1px solid #DBE4FF;border-left:3px solid #3b57b8;border-radius:0 4px 4px 0;background:#fff}.fe-group.or>.fe-cond{border-left-color:#e07b12}@media(max-width:600px){.fe-cond{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}.fe-cond .fe-value{grid-column:1/3}}select.form-control,input.form-control{height:30px;min-width:0;padding:2px 6px;font-size:13px}.fe-value{display:flex;gap:6px;min-width:0}.fe-value input{flex:1}.fe-chips{display:flex;flex-wrap:wrap;gap:4px}.fe-chip{padding:2px 8px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4d5a81;font:inherit;font-size:12px;cursor:pointer}.fe-chip.on{background:#5272d3;border-color:#5272d3;color:#fff}.fe-icon{width:28px;height:28px;padding:0;border:none;border-radius:6px;background:none;color:#9fa9c7;cursor:pointer}.fe-icon:hover:not(:disabled){background:#ebf0ff;color:#4d5a81}.fe-icon:disabled{opacity:.3;cursor:default}.fe-adds{display:flex;gap:8px;flex-wrap:wrap}.fe-add{padding:3px 10px;border:1px dashed #C1D0FD;border-radius:6px;background:none;color:#4465c9;font:inherit;font-size:12px;cursor:pointer}.fe-summary{padding:8px 10px;border-radius:6px;background:#ebf0ff;font-size:12px;word-break:break-word}.fe-sort{display:grid;grid-template-columns:64px minmax(0,1fr) 120px 28px 28px 28px;gap:6px;align-items:center}.fe-sort-label{font-size:12px;color:#9fa9c7}.fe-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid #DBE4FF}.fe-save{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;cursor:pointer}.fe-save.disabled{opacity:.55;cursor:default}.fe-save input{margin:0}.fe-clear{border:none;background:none;color:#4465c9;font:inherit;cursor:pointer}\n"]
+		}]
+	}],
+	propDecorators: {
+		columns: [{ type: Input }],
+		filter: [{ type: Input }],
+		sort: [{ type: Input }],
+		embedded: [{ type: Input }],
+		section: [{ type: Input }],
+		panelFields: [{ type: Input }]
 	}
-	constructor(elementRef, toastrService, validationService, vmLoader, entityFacadeRegistryService, route, bus) {
-		this.elementRef = elementRef;
-		this.toastrService = toastrService;
+});
+var FilterSummaryPanelComponent = class FilterSummaryPanelComponent {
+	isEmptyFilter() {
+		return this.filterList.length == 0 && !this.viewFilterText;
+	}
+	editViewFilter() {
+		this.facade.filter.editViewFilter();
+	}
+	saveViewFilter() {
+		this.facade.filter.viewFilterHandler?.save();
+	}
+	cancelViewFilter() {
+		this.facade.filter.viewFilterHandler?.cancel();
+	}
+	constructor(validationService, bus, entityFacadeRegistryService) {
 		this.validationService = validationService;
-		this.vmLoader = vmLoader;
-		this.entityFacadeRegistryService = entityFacadeRegistryService;
-		this.route = route;
 		this.bus = bus;
-		this.validateAfterEachChange = true;
-		this.searchText = "Rechercher une propriété...";
-		this.readonly = false;
-		this.fileChange$ = new Subject();
-		this.selectorChange$ = new Subject();
-		this.buttonClick$ = new Subject();
-		this.allowValidation = false;
-		this.filterTypes = FilterType;
-		this.submitted = false;
-		this.hooked = false;
+		this.entityFacadeRegistryService = entityFacadeRegistryService;
+		this.filterList = [];
+		this.viewFilterText = "";
+		this.canEditViewFilter = false;
+		this.editingViewFilter = false;
+		this.filterType = FilterType;
+		this.Fields = [];
+		this.DisplayFields = this.Fields;
+		this.currentCriteria = null;
+		this.hiddenFilters = [];
 		this.destroy$ = new Subject();
-		this.cascadeTrigger$ = new Subject();
-		this.facadeReadOnly = false;
-		this.entityReadonly = false;
-		this.icon = "circle-info-solid";
-		this.isLoadingExtended = false;
-		this.iconUrl = "pencil.svg";
-	}
-	get Fields() {
-		return (this.ViewModel?.FieldSections ?? []).map((s) => s.FieldViewModels).reduce((a, b) => [...a, ...b], []);
 	}
 	ngOnInit() {
 		this.facade = this.entityFacadeRegistryService.getFacade(this.entityKey, this.guid);
-		const isStandalone = this.facade.editor.isStandaloneMode$.value;
-		const id = this.route.snapshot.params["id"] ?? null;
-		this.facade.config.viewModel$.pipe(takeUntil$1(this.destroy$)).subscribe((cfgVm) => {
-			this.ViewModel = cfgVm;
-			this.facade.sections.setViewModel(cfgVm);
-			this.initForm(true);
-		});
-		this.viewModel$ = this.vmLoader.getViewModel$(this.entityKey, this.guid, isStandalone, id);
-		this.viewModel$.pipe(takeUntil$1(this.destroy$)).subscribe((vm) => {
-			this.onSelectionChanged(vm);
-		});
-		this.facade.sections.extendedProperties$.pipe(takeUntil$1(this.destroy$)).subscribe((res) => this.applyExtendedProperties(res));
-		this.facade.editor.readOnlyMode$.pipe(takeUntil$1(this.destroy$)).subscribe((v) => {
-			this.facadeReadOnly = v;
-			this.updateReadonlyState();
-		});
-		this.facade.selection.cleared$.pipe(takeUntil$1(this.destroy$)).subscribe(() => this.onSelectionCleared());
-		this.cascadeTrigger$.pipe(takeUntil$1(this.destroy$)).subscribe((fields) => {
-			fields.forEach((f) => {
-				this.alterFieldCascadeData(f);
-				this.handleCascadeField(f);
-			});
-		});
-		this.facade.change.getStyleUpdated$().pipe(takeUntil$1(this.destroy$)).subscribe((entities) => {
-			const entity = entities?.[0];
-			if (!entity) return;
-			if (!this.facade.editor.isStandaloneMode$.value && !this.facade.selection.getSelected().some((s) => s.Id === entity.Id)) return;
-			this.patchFormFromEntity(entity);
+		this.wrapper = new FormWrapper(this.validationService, this.bus, false);
+		combineLatest([
+			this.facade.criteria$,
+			this.facade.config.filterDescriptors$,
+			this.facade.layout.hiddenSummaryFilters$,
+			this.facade.filter.viewFilter$,
+			this.facade.filter.viewFilterEditing$,
+			this.facade.config.columns$.pipe(startWith([]))
+		]).pipe(takeUntil(this.destroy$)).subscribe(([vm, fields, hidden, viewFilter, editing, columns]) => {
+			this.canEditViewFilter = !!viewFilter?.canEdit;
+			this.editingViewFilter = editing;
+			const filters = fields.filter((x) => x.PropertyName != "Keywords" && x.PropertyName != "Id");
+			this.Fields = filters;
+			this.hiddenFilters = editing ? hidden : [...hidden, ...Object.keys(viewFilter?.filter.Panel ?? {})];
+			this.viewFilterText = viewFilter ? this.describeViewFilter(viewFilter.label, viewFilter.filter, fields, columns ?? []) : "";
+			this.currentCriteria = vm;
+			this.wrapper.initialize(filters);
+			this.wrapper.hookFormEntity(vm);
+			this.updateSummary();
 		});
 	}
-	set dynamicTabsTemplates(content) {
-		if (content) this.facade.sections.registerDynamicContainers(content.toArray());
+	ngOnDestroy() {
+		this.destroy$.next();
+		this.destroy$.complete();
 	}
-	set tabs(content) {
-		if (content) this.facade.sections.registerTabset(content);
+	updateSummary() {
+		const descriptors = this.Fields;
+		if (descriptors) {
+			this.filterList.splice(0, this.filterList.length);
+			descriptors.filter((field) => !this.hiddenFilters.includes(field.PropertyName)).forEach((field) => {
+				this.updateFieldSummary(field);
+			});
+		}
 	}
-	initForm(withValidators = false) {
-		if (!this.propertyForm) this.propertyForm = new FormGroup({});
-		this.Fields.forEach((field) => {
-			const validators = withValidators ? this.validationService.getFieldValidators(field) : [];
-			if (!this.propertyForm.contains(field.PropertyName)) {
-				const ctrl = new FormControl(null, validators);
-				this.propertyForm.addControl(field.PropertyName, ctrl);
-			} else {
-				const ctrl = this.propertyForm.get(field.PropertyName);
-				ctrl.setValidators(validators);
-				ctrl.updateValueAndValidity({ emitEvent: false });
-			}
+	updateFieldSummary(field) {
+		const displayedVal = this.getFilterSummaryValue(field);
+		if (displayedVal !== null && displayedVal !== void 0) this.filterList.push({
+			DisplayedValue: displayedVal,
+			Field: field
 		});
-		this.facade.change.setForm(this.propertyForm);
 	}
-	patchFormFromEntity(entity) {
-		if (!this.propertyForm) return;
-		this.propertyForm.patchValue(entity, { emitEvent: false });
+	getFilterSummaryValue(field) {
+		if (!field) return null;
+		const fv = this.currentCriteria != null ? this.currentCriteria[field.PropertyName] : this.wrapper.form.get(field.PropertyName)?.value;
+		if (Utilities.IsNil(fv) || fv === -1 || parseInt(fv) === -1 || Utilities.isEmptyString(fv)) return;
+		let displayedValue = null;
+		if (field.FilterType === FilterType.ComboBox) {
+			if (!Utilities.IsUndefined(field.OriginalData)) {
+				const fld = field.OriginalData.find((p) => p[field.ValueMember] == fv);
+				if (fld && fld.hasOwnProperty(field.DisplayMember)) displayedValue = `${fld[field.DisplayMember]}`;
+			}
+		} else if (field.FilterType === FilterType.String || field.FilterType === FilterType.Integer) displayedValue = `${fv}`;
+		else return null;
+		return displayedValue;
 	}
-	onSelectionCleared() {
-		if (this.propertyForm) {
+	resetFormControl(field) {
+		if (!field.IsClearable || field.PropertyName in this.facade.filter.lockedPanel) return;
+		const currentValue = this.currentCriteria != null ? this.currentCriteria[field.PropertyName] : this.wrapper.form.get(field.PropertyName)?.value;
+		if (Utilities.IsNil(currentValue) || currentValue === -1 || Utilities.isEmptyString(currentValue)) return;
+		let newValue;
+		if (field.FilterType === FilterType.ComboBox) newValue = field.Data?.find((d) => d[field.ValueMember] === -1) ? -1 : null;
+		else if (field.FilterType === FilterType.String) newValue = "";
+		else return;
+		this.wrapper.form.get(field.PropertyName).reset(newValue, { emitEvent: false });
+		this.facade.filter.setFilter(this.wrapper.form.getRawValue());
+	}
+	describeViewFilter(label, filter, fields, columns) {
+		const parts = [...this.describePanel(filter.Panel ?? {}, fields), ...this.describeGroup({
+			...filter,
+			Panel: void 0
+		}, columns, true) ? [this.describeGroup({
+			...filter,
+			Panel: void 0
+		}, columns, true)] : []];
+		return parts.length ? `Vue « ${label} » : ${parts.join(" ; ")}` : "";
+	}
+	describePanel(panel, fields) {
+		return Object.entries(panel).map(([property, value]) => {
+			const field = fields.find((f) => f.PropertyName === property);
+			const data = Array.isArray(field?.OriginalData) ? field.OriginalData : Array.isArray(field?.Data) ? field.Data : [];
+			const item = field?.ValueMember ? data.find((d) => d?.[field.ValueMember] == value) : void 0;
+			const shown = item && field?.DisplayMember ? item[field.DisplayMember] : value === true ? "Oui" : value === false ? "Non" : value === null || value === -1 ? "Tous" : value;
+			return `${field?.Label || property} : ${shown}`;
+		});
+	}
+	describeGroup(group, columns, root = false) {
+		const label = (property) => columns.find((c) => c.Property === property)?.Name || property;
+		const operator = (op) => Object.values(FilterOperators).flat().find((o) => o.value === op)?.label ?? (op === "like" ? "ressemble à" : op);
+		const conditions = (group.Conditions ?? []).map((c) => {
+			const values = c.Operator === "in" || c.Operator === "notin" ? (c.Values ?? []).join(", ") : c.Operator === "between" || c.Operator === "datebetween" ? `${c.Value ?? "…"} et ${c.Value2 ?? "…"}` : c.Value ?? "";
+			return `${label(c.Property)} ${operator(c.Operator)}${values ? " " + values : ""}`.trim();
+		});
+		const groups = (group.Groups ?? []).map((g) => this.describeGroup(g, columns)).filter((t) => !!t);
+		const all = [...conditions, ...groups];
+		if (!all.length) return "";
+		const text = all.join(group.Logic === "or" ? " ou " : " et ");
+		return root || all.length === 1 ? text : `(${text})`;
+	}
+	resetFieldData(field) {
+		const fv = this.wrapper.form.get(field.PropertyName).value;
+		field.Data = field.OriginalData.filter((p) => p[field.ValueMember] === -1 || Object.keys(field.CurrentFilters).every((name) => {
+			return p[name] === fv;
+		}));
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: FilterSummaryPanelComponent,
+			deps: [
+				{ token: ValidationService },
+				{ token: PropertyChangeBus },
+				{ token: EntityFacadeRegistryService }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.1",
+			type: FilterSummaryPanelComponent,
+			isStandalone: false,
+			selector: "alg-filter-summary-panel",
+			inputs: {
+				entityKey: "entityKey",
+				guid: "guid"
+			},
+			ngImport: i0,
+			template: "<!-- <div class=\"clearfix\" *ngIf=\"!isEmptyFilter()\">\r\n    <div class=\"filter-summary\">\r\n        <div class=\"filter\" [formGroup]=\"wrapper.form\">\r\n            <ng-container *ngIf=\"filterList\">\r\n              \r\n                <div *ngFor=\"let field of Fields\" class=\"option\">\r\n                    <div [ngSwitch]=\"field.FilterType\">\r\n                        <div *ngSwitchCase=\"filterType.String\" class=\"form-group\">\r\n                                <input\r\n                                    class=\"form-control\"\r\n                                    [formControlName]=\"field.PropertyName\"\r\n                                    [id]=\"field.PropertyName\"\r\n                                    [readonly]=\"field.ReadOnly\"\r\n                                    [type]=\"field.InputType\"\r\n                                />\r\n                        </div>\r\n                        <div\r\n                            *ngSwitchCase=\"filterType.Integer\"\r\n                            class=\"form-group\"\r\n                        >\r\n                            <div>\r\n                                <input\r\n                                    class=\"form-control\"\r\n                                    [formControlName]=\"field.PropertyName\"\r\n                                    [id]=\"field.PropertyName\"\r\n                                    type=\"number\"\r\n                                    focusable\r\n                                    ng-pattern=\"/^[0-9]+$/\"\r\n                                    tabindex=\"0\"\r\n                                />\r\n                            </div>\r\n                            <div *ngSwitchCase=\"filterType.ComboBox\" class=\"form-group\">\r\n                                <div>\r\n                                    <ng-select\r\n                                        appendTo=\"body\"\r\n                                        placeholder=\"Sélectionner {{\r\n                                            field.Label\r\n                                        }}\"\r\n                                        [formControlName]=\"field.PropertyName\"\r\n                                        [id]=\"field.PropertyName\"\r\n                                        [items]=\"field.Data\"\r\n                                        [multiple]=\"field.MultipleSelection\"\r\n                                        [hideSelected]=\"field.HideSelected\"\r\n                                        bindValue=\"{{ field.ValueMember }}\"\r\n                                        [clearable]=\"field.IsClearable\"\r\n                                        bindLabel=\"{{ field.DisplayMember }}\"\r\n                                        [selectOnTab]=\"true\"\r\n                                        [readonly]=\"field.ReadOnly\"\r\n                                    >\r\n                                    </ng-select>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"clearfix\" *ngIf=\"!isEmptyFilter()\">\r\n    <!-- Filtre fixé par la vue affichée : non modifiable à l'écran. -->\r\n    <div class=\"view-filter\" *ngIf=\"viewFilterText\" [class.editing]=\"editingViewFilter\">\r\n        <i class=\"fa\" [class.fa-lock]=\"!editingViewFilter\" [class.fa-unlock]=\"editingViewFilter\"></i>\r\n        <span class=\"view-filter-text\" [title]=\"viewFilterText\">{{ viewFilterText }}</span>\r\n        <!-- Mode édition (propriétaire de la vue ou administrateur) : filtres débloqués, puis réenregistrés. -->\r\n        <ng-container *ngIf=\"canEditViewFilter\">\r\n            <button *ngIf=\"!editingViewFilter\" type=\"button\" class=\"view-filter-btn\" title=\"Débloquer les filtres de la vue pour les modifier\"\r\n                (click)=\"editViewFilter()\"><i class=\"fa fa-pencil\"></i> Modifier</button>\r\n            <ng-container *ngIf=\"editingViewFilter\">\r\n                <button type=\"button\" class=\"view-filter-btn primary\" title=\"Enregistrer dans la vue le tri et les filtres de l'écran\"\r\n                    (click)=\"saveViewFilter()\"><i class=\"fa fa-check\"></i> Enregistrer</button>\r\n                <button type=\"button\" class=\"view-filter-btn\" title=\"Revenir aux filtres de la vue\" (click)=\"cancelViewFilter()\">Annuler</button>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"filter-summary\" *ngIf=\"filterList.length\">\r\n        <div class=\"filter\">\r\n            <ng-container *ngIf=\"filterList\">\r\n                <div *ngFor=\"let field of filterList\">\r\n                    <div class=\"option\" [class.clearable]=\"field.Field.IsClearable\" (click)=\"resetFormControl(field.Field)\">\r\n                        {{field.Field.Label + ' : '+ field.DisplayedValue}}\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\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}.view-filter{display:flex;align-items:center;gap:6px;padding:4px 8px;border-bottom:solid 1px var(--main-bg-color);color:#4465c9;font-size:12px}.view-filter>.fa{opacity:.7}.view-filter.editing{background:#ebf0ff}.view-filter-text{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.view-filter-btn{flex:none;padding:1px 8px;border:1px solid #DBE4FF;border-radius:4px;background:#fff;color:#4465c9;font-size:12px;cursor:pointer}.view-filter-btn.primary{background:#4465c9;border-color:#4465c9;color:#fff}.filter-summary{padding:2px 3px;border-bottom:solid 1px var(--main-bg-color);display:flex}.option alg-field .form-group{display:flex!important}.filter-summary .filter{display:flex;flex-direction:row;padding:2px}.filter-summary .filter .option{display:block;float:left;position:relative;background-color:#dbe4ff;text-transform:capitalize;color:#4465c9;padding:5px 10px;margin:0 5px 0 0;border-radius:20px;cursor:pointer;-webkit-transition:background-color .1s ease-out;-moz-transition:background-color .1s ease-out;-o-transition:background-color .1s ease-out;transition:background-color .1s ease-out;border-left:1px solid #ffffff}.filter-summary .filter .option.clearable:hover{text-decoration:line-through}.filter-summary .filter:before,.filter-summary .filter:after{content:\"\";display:table}.filter-summary:before,.filter-summary:after{content:\"\";display:table}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: i1$5.NgForOf,
+				selector: "[ngFor][ngForOf]",
+				inputs: [
+					"ngForOf",
+					"ngForTrackBy",
+					"ngForTemplate"
+				]
+			}, {
+				kind: "directive",
+				type: i1$5.NgIf,
+				selector: "[ngIf]",
+				inputs: [
+					"ngIf",
+					"ngIfThen",
+					"ngIfElse"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: FilterSummaryPanelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "alg-filter-summary-panel",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			template: "<!-- <div class=\"clearfix\" *ngIf=\"!isEmptyFilter()\">\r\n    <div class=\"filter-summary\">\r\n        <div class=\"filter\" [formGroup]=\"wrapper.form\">\r\n            <ng-container *ngIf=\"filterList\">\r\n              \r\n                <div *ngFor=\"let field of Fields\" class=\"option\">\r\n                    <div [ngSwitch]=\"field.FilterType\">\r\n                        <div *ngSwitchCase=\"filterType.String\" class=\"form-group\">\r\n                                <input\r\n                                    class=\"form-control\"\r\n                                    [formControlName]=\"field.PropertyName\"\r\n                                    [id]=\"field.PropertyName\"\r\n                                    [readonly]=\"field.ReadOnly\"\r\n                                    [type]=\"field.InputType\"\r\n                                />\r\n                        </div>\r\n                        <div\r\n                            *ngSwitchCase=\"filterType.Integer\"\r\n                            class=\"form-group\"\r\n                        >\r\n                            <div>\r\n                                <input\r\n                                    class=\"form-control\"\r\n                                    [formControlName]=\"field.PropertyName\"\r\n                                    [id]=\"field.PropertyName\"\r\n                                    type=\"number\"\r\n                                    focusable\r\n                                    ng-pattern=\"/^[0-9]+$/\"\r\n                                    tabindex=\"0\"\r\n                                />\r\n                            </div>\r\n                            <div *ngSwitchCase=\"filterType.ComboBox\" class=\"form-group\">\r\n                                <div>\r\n                                    <ng-select\r\n                                        appendTo=\"body\"\r\n                                        placeholder=\"Sélectionner {{\r\n                                            field.Label\r\n                                        }}\"\r\n                                        [formControlName]=\"field.PropertyName\"\r\n                                        [id]=\"field.PropertyName\"\r\n                                        [items]=\"field.Data\"\r\n                                        [multiple]=\"field.MultipleSelection\"\r\n                                        [hideSelected]=\"field.HideSelected\"\r\n                                        bindValue=\"{{ field.ValueMember }}\"\r\n                                        [clearable]=\"field.IsClearable\"\r\n                                        bindLabel=\"{{ field.DisplayMember }}\"\r\n                                        [selectOnTab]=\"true\"\r\n                                        [readonly]=\"field.ReadOnly\"\r\n                                    >\r\n                                    </ng-select>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"clearfix\" *ngIf=\"!isEmptyFilter()\">\r\n    <!-- Filtre fixé par la vue affichée : non modifiable à l'écran. -->\r\n    <div class=\"view-filter\" *ngIf=\"viewFilterText\" [class.editing]=\"editingViewFilter\">\r\n        <i class=\"fa\" [class.fa-lock]=\"!editingViewFilter\" [class.fa-unlock]=\"editingViewFilter\"></i>\r\n        <span class=\"view-filter-text\" [title]=\"viewFilterText\">{{ viewFilterText }}</span>\r\n        <!-- Mode édition (propriétaire de la vue ou administrateur) : filtres débloqués, puis réenregistrés. -->\r\n        <ng-container *ngIf=\"canEditViewFilter\">\r\n            <button *ngIf=\"!editingViewFilter\" type=\"button\" class=\"view-filter-btn\" title=\"Débloquer les filtres de la vue pour les modifier\"\r\n                (click)=\"editViewFilter()\"><i class=\"fa fa-pencil\"></i> Modifier</button>\r\n            <ng-container *ngIf=\"editingViewFilter\">\r\n                <button type=\"button\" class=\"view-filter-btn primary\" title=\"Enregistrer dans la vue le tri et les filtres de l'écran\"\r\n                    (click)=\"saveViewFilter()\"><i class=\"fa fa-check\"></i> Enregistrer</button>\r\n                <button type=\"button\" class=\"view-filter-btn\" title=\"Revenir aux filtres de la vue\" (click)=\"cancelViewFilter()\">Annuler</button>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"filter-summary\" *ngIf=\"filterList.length\">\r\n        <div class=\"filter\">\r\n            <ng-container *ngIf=\"filterList\">\r\n                <div *ngFor=\"let field of filterList\">\r\n                    <div class=\"option\" [class.clearable]=\"field.Field.IsClearable\" (click)=\"resetFormControl(field.Field)\">\r\n                        {{field.Field.Label + ' : '+ field.DisplayedValue}}\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\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}.view-filter{display:flex;align-items:center;gap:6px;padding:4px 8px;border-bottom:solid 1px var(--main-bg-color);color:#4465c9;font-size:12px}.view-filter>.fa{opacity:.7}.view-filter.editing{background:#ebf0ff}.view-filter-text{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.view-filter-btn{flex:none;padding:1px 8px;border:1px solid #DBE4FF;border-radius:4px;background:#fff;color:#4465c9;font-size:12px;cursor:pointer}.view-filter-btn.primary{background:#4465c9;border-color:#4465c9;color:#fff}.filter-summary{padding:2px 3px;border-bottom:solid 1px var(--main-bg-color);display:flex}.option alg-field .form-group{display:flex!important}.filter-summary .filter{display:flex;flex-direction:row;padding:2px}.filter-summary .filter .option{display:block;float:left;position:relative;background-color:#dbe4ff;text-transform:capitalize;color:#4465c9;padding:5px 10px;margin:0 5px 0 0;border-radius:20px;cursor:pointer;-webkit-transition:background-color .1s ease-out;-moz-transition:background-color .1s ease-out;-o-transition:background-color .1s ease-out;transition:background-color .1s ease-out;border-left:1px solid #ffffff}.filter-summary .filter .option.clearable:hover{text-decoration:line-through}.filter-summary .filter:before,.filter-summary .filter:after{content:\"\";display:table}.filter-summary:before,.filter-summary:after{content:\"\";display:table}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: ValidationService },
+		{ type: PropertyChangeBus },
+		{ type: EntityFacadeRegistryService }
+	],
+	propDecorators: {
+		entityKey: [{ type: Input }],
+		guid: [{ type: Input }]
+	}
+});
+var ViewModelLoaderService = class ViewModelLoaderService {
+	constructor(facades) {
+		this.facades = facades;
+	}
+	getViewModel$(entityKey, guid, isStandalone = true, id) {
+		const facade = this.facades.getFacade(entityKey, guid);
+		const config$ = facade.config.viewModel$.pipe(filter((vm) => !!vm?.FieldSections?.length), shareReplay({
+			bufferSize: 1,
+			refCount: true
+		}));
+		if (isStandalone && (!id || id === "0")) return config$.pipe(map((cfg) => this.createNew(cfg)), shareReplay({
+			bufferSize: 1,
+			refCount: true
+		}));
+		if (isStandalone && id && id !== "0") {
+			facade.selection.getSelectedById$(id);
+			return facade.config.getApiViewModel(id);
+		}
+		return combineLatest([config$, facade.selection.selected$]).pipe(map(([cfg, selection]) => {
+			const adapted = facade.selection.adaptSelectionToViewModel(selection, cfg.FieldSections);
+			return {
+				...cfg,
+				ViewModel: adapted ?? cfg.ViewModel,
+				FieldSections: cfg.FieldSections
+			};
+		}), shareReplay({
+			bufferSize: 1,
+			refCount: true
+		}));
+	}
+	createNew(baseVm) {
+		const clone = {
+			...baseVm.ViewModel,
+			Id: null
+		};
+		return {
+			...baseVm,
+			ViewModel: clone,
+			FieldSections: baseVm.FieldSections
+		};
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: ViewModelLoaderService,
+			deps: [{ token: EntityFacadeRegistryService }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: ViewModelLoaderService
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ViewModelLoaderService,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => [{ type: EntityFacadeRegistryService }]
+});
+var PropertyEditorComponent = class PropertyEditorComponent {
+	handleKeywordsChanged(event) {}
+	isFieldHidden(field) {
+		return !(Utilities.IsNil(this.keyword) || field.Label.toUpperCase().includes(this.keyword.toUpperCase()));
+	}
+	isSectionHidden(section) {
+		return !(Utilities.IsNil(this.keyword) || section.Name.toUpperCase().includes(this.keyword.toUpperCase()) || section.FieldViewModels.some((f) => !this.isFieldHidden(f)));
+	}
+	constructor(elementRef, toastrService, validationService, vmLoader, entityFacadeRegistryService, route, bus) {
+		this.elementRef = elementRef;
+		this.toastrService = toastrService;
+		this.validationService = validationService;
+		this.vmLoader = vmLoader;
+		this.entityFacadeRegistryService = entityFacadeRegistryService;
+		this.route = route;
+		this.bus = bus;
+		this.validateAfterEachChange = true;
+		this.searchText = "Rechercher une propriété...";
+		this.readonly = false;
+		this.fileChange$ = new Subject();
+		this.selectorChange$ = new Subject();
+		this.buttonClick$ = new Subject();
+		this.allowValidation = false;
+		this.filterTypes = FilterType;
+		this.submitted = false;
+		this.hooked = false;
+		this.destroy$ = new Subject();
+		this.cascadeTrigger$ = new Subject();
+		this.facadeReadOnly = false;
+		this.entityReadonly = false;
+		this.icon = "circle-info-solid";
+		this.isLoadingExtended = false;
+		this.iconUrl = "pencil.svg";
+	}
+	get Fields() {
+		return (this.ViewModel?.FieldSections ?? []).map((s) => s.FieldViewModels).reduce((a, b) => [...a, ...b], []);
+	}
+	ngOnInit() {
+		this.facade = this.entityFacadeRegistryService.getFacade(this.entityKey, this.guid);
+		const isStandalone = this.facade.editor.isStandaloneMode$.value;
+		const id = this.route.snapshot.params["id"] ?? null;
+		this.facade.config.viewModel$.pipe(takeUntil$1(this.destroy$)).subscribe((cfgVm) => {
+			this.ViewModel = cfgVm;
+			this.facade.sections.setViewModel(cfgVm);
+			this.initForm(true);
+		});
+		this.viewModel$ = this.vmLoader.getViewModel$(this.entityKey, this.guid, isStandalone, id);
+		this.viewModel$.pipe(takeUntil$1(this.destroy$)).subscribe((vm) => {
+			this.onSelectionChanged(vm);
+		});
+		this.facade.sections.extendedProperties$.pipe(takeUntil$1(this.destroy$)).subscribe((res) => this.applyExtendedProperties(res));
+		this.facade.editor.readOnlyMode$.pipe(takeUntil$1(this.destroy$)).subscribe((v) => {
+			this.facadeReadOnly = v;
+			this.updateReadonlyState();
+		});
+		this.facade.selection.cleared$.pipe(takeUntil$1(this.destroy$)).subscribe(() => this.onSelectionCleared());
+		this.cascadeTrigger$.pipe(takeUntil$1(this.destroy$)).subscribe((fields) => {
+			fields.forEach((f) => {
+				this.alterFieldCascadeData(f);
+				this.handleCascadeField(f);
+			});
+		});
+		this.facade.change.getStyleUpdated$().pipe(takeUntil$1(this.destroy$)).subscribe((entities) => {
+			const entity = entities?.[0];
+			if (!entity) return;
+			if (!this.facade.editor.isStandaloneMode$.value && !this.facade.selection.getSelected().some((s) => s.Id === entity.Id)) return;
+			this.patchFormFromEntity(entity);
+		});
+	}
+	set dynamicTabsTemplates(content) {
+		if (content) this.facade.sections.registerDynamicContainers(content.toArray());
+	}
+	set tabs(content) {
+		if (content) this.facade.sections.registerTabset(content);
+	}
+	initForm(withValidators = false) {
+		if (!this.propertyForm) this.propertyForm = new FormGroup({});
+		this.Fields.forEach((field) => {
+			const validators = withValidators ? this.validationService.getFieldValidators(field) : [];
+			if (!this.propertyForm.contains(field.PropertyName)) {
+				const ctrl = new FormControl(null, validators);
+				this.propertyForm.addControl(field.PropertyName, ctrl);
+			} else {
+				const ctrl = this.propertyForm.get(field.PropertyName);
+				ctrl.setValidators(validators);
+				ctrl.updateValueAndValidity({ emitEvent: false });
+			}
+		});
+		this.facade.change.setForm(this.propertyForm);
+	}
+	patchFormFromEntity(entity) {
+		if (!this.propertyForm) return;
+		this.propertyForm.patchValue(entity, { emitEvent: false });
+	}
+	onSelectionCleared() {
+		if (this.propertyForm) {
 			this.propertyForm.reset();
 			this.propertyForm.clearValidators();
 		}
@@ -20905,7 +21526,7 @@ var CardListComponent = class CardListComponent {
 			},
 			ngImport: i0,
 			template: "<div class=\"card-list\" (scroll)=\"onScroll($event)\" role=\"list\">\r\n    <div *ngIf=\"card === null\" class=\"card-info\">Pas de vue Carte pour cette table.</div>\r\n\r\n    <ng-container *ngIf=\"card\">\r\n        <button type=\"button\" *ngFor=\"let row of items; trackBy: trackById\" class=\"card-item\" role=\"listitem\"\r\n            [class.selected]=\"isSelected(row)\" [class.no-image]=\"!hasImage()\" (click)=\"open(row)\">\r\n            <span class=\"card-image\" *ngIf=\"hasImage()\">\r\n                <img *ngIf=\"imageUrl(row) as url; else initialsTpl\" [src]=\"url\" alt=\"\" />\r\n                <ng-template #initialsTpl><span class=\"card-initials\">{{ initials(row) }}</span></ng-template>\r\n            </span>\r\n            <span class=\"card-main\">\r\n                <span class=\"card-title\" *ngIf=\"card.title\">{{ valueOf(row, card.title) }}</span>\r\n                <span class=\"card-text\" *ngIf=\"card.text\">{{ valueOf(row, card.text) }}</span>\r\n                <span class=\"card-detail\" *ngIf=\"card.detail\">{{ valueOf(row, card.detail) }}</span>\r\n            </span>\r\n            <span class=\"card-badge\" *ngIf=\"card.badge && valueOf(row, card.badge) as badge\">{{ badge }}</span>\r\n        </button>\r\n\r\n        <div class=\"card-info\" *ngIf=\"!items.length && !loading\">Aucun élément</div>\r\n        <button type=\"button\" class=\"card-more\" *ngIf=\"hasMore\" [disabled]=\"loading\" (click)=\"loadMore()\">\r\n            {{ loading ? 'Chargement…' : 'Afficher les suivants' }}\r\n        </button>\r\n    </ng-container>\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{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}.card-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:10px;background:#f4f6fb}.card-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:10px 12px;border:1px solid #DBE4FF;border-radius:4px 0 0 4px;background:#fff;color:#4d5a81;font:inherit;text-align:left;cursor:pointer}.card-item.no-image{grid-template-columns:minmax(0,1fr) auto}.card-item:hover{border-color:#5272d3}.card-item:focus-visible{outline:2px solid #5272D3;outline-offset:1px}.card-item.selected{border-color:#5272d3;box-shadow:inset 3px 0 #5272d3}.card-image{width:44px;height:44px;border-radius:4px;background:#ebf0ff;display:grid;place-items:center;overflow:hidden}.card-image img{max-width:100%;max-height:100%;object-fit:contain}.card-initials{color:#4465c9;font-weight:700;font-size:13px}.card-main{min-width:0;display:flex;flex-direction:column}.card-title,.card-text,.card-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-title{font-size:12px;color:#4465c9}.card-text{font-size:14px;font-weight:700}.card-detail{font-size:12px;color:#9fa9c7}.card-badge{padding:1px 8px;border-radius:999px;background:#ebf0ff;color:#4465c9;font-size:11px;font-weight:700;white-space:nowrap}.card-info{padding:16px;text-align:center;color:#9fa9c7}.card-more{align-self:center;margin:4px 0 8px;padding:6px 14px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4465c9;font:inherit;cursor:pointer}.card-more:disabled{cursor:progress;opacity:.7}\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{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}.card-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));align-content:start;gap:8px;padding:10px;background:#f4f6fb}.card-list>.card-info,.card-list>.card-more{grid-column:1/-1}.card-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:10px 12px;border:1px solid #DBE4FF;border-radius:0 4px 4px 0;background:#fff;color:#4d5a81;font:inherit;text-align:left;cursor:pointer}.card-item.no-image{grid-template-columns:minmax(0,1fr) auto}.card-item:hover{border-color:#5272d3}.card-item:focus-visible{outline:2px solid #5272D3;outline-offset:1px}.card-item.selected{border-color:#5272d3;box-shadow:inset 3px 0 #5272d3}.card-image{width:44px;height:44px;border-radius:4px;background:#ebf0ff;display:grid;place-items:center;overflow:hidden}.card-image img{max-width:100%;max-height:100%;object-fit:contain}.card-initials{color:#4465c9;font-weight:700;font-size:13px}.card-main{min-width:0;display:flex;flex-direction:column}.card-title,.card-text,.card-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-title{font-size:12px;color:#4465c9}.card-text{font-size:14px;font-weight:700}.card-detail{font-size:12px;color:#9fa9c7}.card-badge{padding:1px 8px;border-radius:999px;background:#ebf0ff;color:#4465c9;font-size:11px;font-weight:700;white-space:nowrap}.card-info{padding:16px;text-align:center;color:#9fa9c7}.card-more{justify-self:center;margin:4px 0 8px;padding:6px 14px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4465c9;font:inherit;cursor:pointer}.card-more:disabled{cursor:progress;opacity:.7}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: i1$5.NgForOf,
@@ -20941,7 +21562,7 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.Eager,
 			standalone: false,
 			template: "<div class=\"card-list\" (scroll)=\"onScroll($event)\" role=\"list\">\r\n    <div *ngIf=\"card === null\" class=\"card-info\">Pas de vue Carte pour cette table.</div>\r\n\r\n    <ng-container *ngIf=\"card\">\r\n        <button type=\"button\" *ngFor=\"let row of items; trackBy: trackById\" class=\"card-item\" role=\"listitem\"\r\n            [class.selected]=\"isSelected(row)\" [class.no-image]=\"!hasImage()\" (click)=\"open(row)\">\r\n            <span class=\"card-image\" *ngIf=\"hasImage()\">\r\n                <img *ngIf=\"imageUrl(row) as url; else initialsTpl\" [src]=\"url\" alt=\"\" />\r\n                <ng-template #initialsTpl><span class=\"card-initials\">{{ initials(row) }}</span></ng-template>\r\n            </span>\r\n            <span class=\"card-main\">\r\n                <span class=\"card-title\" *ngIf=\"card.title\">{{ valueOf(row, card.title) }}</span>\r\n                <span class=\"card-text\" *ngIf=\"card.text\">{{ valueOf(row, card.text) }}</span>\r\n                <span class=\"card-detail\" *ngIf=\"card.detail\">{{ valueOf(row, card.detail) }}</span>\r\n            </span>\r\n            <span class=\"card-badge\" *ngIf=\"card.badge && valueOf(row, card.badge) as badge\">{{ badge }}</span>\r\n        </button>\r\n\r\n        <div class=\"card-info\" *ngIf=\"!items.length && !loading\">Aucun élément</div>\r\n        <button type=\"button\" class=\"card-more\" *ngIf=\"hasMore\" [disabled]=\"loading\" (click)=\"loadMore()\">\r\n            {{ loading ? 'Chargement…' : 'Afficher les suivants' }}\r\n        </button>\r\n    </ng-container>\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{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}.card-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:10px;background:#f4f6fb}.card-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:10px 12px;border:1px solid #DBE4FF;border-radius:4px 0 0 4px;background:#fff;color:#4d5a81;font:inherit;text-align:left;cursor:pointer}.card-item.no-image{grid-template-columns:minmax(0,1fr) auto}.card-item:hover{border-color:#5272d3}.card-item:focus-visible{outline:2px solid #5272D3;outline-offset:1px}.card-item.selected{border-color:#5272d3;box-shadow:inset 3px 0 #5272d3}.card-image{width:44px;height:44px;border-radius:4px;background:#ebf0ff;display:grid;place-items:center;overflow:hidden}.card-image img{max-width:100%;max-height:100%;object-fit:contain}.card-initials{color:#4465c9;font-weight:700;font-size:13px}.card-main{min-width:0;display:flex;flex-direction:column}.card-title,.card-text,.card-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-title{font-size:12px;color:#4465c9}.card-text{font-size:14px;font-weight:700}.card-detail{font-size:12px;color:#9fa9c7}.card-badge{padding:1px 8px;border-radius:999px;background:#ebf0ff;color:#4465c9;font-size:11px;font-weight:700;white-space:nowrap}.card-info{padding:16px;text-align:center;color:#9fa9c7}.card-more{align-self:center;margin:4px 0 8px;padding:6px 14px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4465c9;font:inherit;cursor:pointer}.card-more:disabled{cursor:progress;opacity:.7}\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{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}.card-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));align-content:start;gap:8px;padding:10px;background:#f4f6fb}.card-list>.card-info,.card-list>.card-more{grid-column:1/-1}.card-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:10px 12px;border:1px solid #DBE4FF;border-radius:0 4px 4px 0;background:#fff;color:#4d5a81;font:inherit;text-align:left;cursor:pointer}.card-item.no-image{grid-template-columns:minmax(0,1fr) auto}.card-item:hover{border-color:#5272d3}.card-item:focus-visible{outline:2px solid #5272D3;outline-offset:1px}.card-item.selected{border-color:#5272d3;box-shadow:inset 3px 0 #5272d3}.card-image{width:44px;height:44px;border-radius:4px;background:#ebf0ff;display:grid;place-items:center;overflow:hidden}.card-image img{max-width:100%;max-height:100%;object-fit:contain}.card-initials{color:#4465c9;font-weight:700;font-size:13px}.card-main{min-width:0;display:flex;flex-direction:column}.card-title,.card-text,.card-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-title{font-size:12px;color:#4465c9}.card-text{font-size:14px;font-weight:700}.card-detail{font-size:12px;color:#9fa9c7}.card-badge{padding:1px 8px;border-radius:999px;background:#ebf0ff;color:#4465c9;font-size:11px;font-weight:700;white-space:nowrap}.card-info{padding:16px;text-align:center;color:#9fa9c7}.card-more{justify-self:center;margin:4px 0 8px;padding:6px 14px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4465c9;font:inherit;cursor:pointer}.card-more:disabled{cursor:progress;opacity:.7}\n"]
 		}]
 	}],
 	ctorParameters: () => [
@@ -24411,11 +25032,7 @@ var BaseComponent = class BaseComponent extends DflatBaseComponent {
 		this.FILE_SECTION = "Fichiers";
 		this.busMessages = inject(BusMessageService, { optional: true });
 		this.ppService = inject(PP_SERVICE, { optional: true });
-		this.savedViewQueries = {
-			sortQuery: "",
-			filterQuery: ""
-		};
-		this.viewQueriesLoaded = false;
+		this.panelFields = [];
 		this.hostElement = inject(ElementRef, { optional: true });
 		this.proposedColumnOrder = "";
 		this.guid = Guid.create();
@@ -24443,7 +25060,6 @@ var BaseComponent = class BaseComponent extends DflatBaseComponent {
 		this.registerSelectColumnsAction();
 		this.subscribeFormChanged();
 		this.subscribePresentationChanged();
-		this.watchLeaveForColumnOrder();
 	}
 	subscribeFormChanged() {
 		this.busMessages?.of(FormChangedMessage).pipe(filter$1((message) => message.concerns(this.getEntityKey())), exhaustMap(() => this.confirmFormReload$()), takeUntil$1(this.destroy$)).subscribe(() => this.reloadForm());
@@ -24565,15 +25181,33 @@ var BaseComponent = class BaseComponent extends DflatBaseComponent {
 		this.facade?.layout?.updateScreenWidth();
 	}
 	registerViewChooser(config) {
-		this.facade.config.viewChooser = {
-			loadViews: () => this.ppService.loadViews(config),
+		combineLatest([this.facade.config.filterDescriptors$, this.facade.layout.hiddenSummaryFilters$]).pipe(takeUntil$1(this.destroy$)).subscribe(([fields, hidden]) => this.panelFields = (fields ?? []).filter((f) => !!f.PropertyName && f.PropertyName !== "Keywords" && f.PropertyName !== "Id" && !f.IsHidden && !hidden.includes(f.PropertyName)));
+		this.facade.filter.viewFilterHandler = {
+			save: () => {
+				const order = this.facade.config.getDisplayedColumnKeys();
+				this.ppService.saveViewFilter({
+					...config,
+					title: this.getTitle()
+				}, order, this.currentViewQueries()).pipe(take$1(1)).subscribe((saved) => {
+					if (!saved) return;
+					this.proposedColumnOrder = JSON.stringify(order);
+					this.resetColumns();
+					this.applyCurrentViewQueries(config);
+				});
+			},
+			cancel: () => this.applyCurrentViewQueries(config)
+		};
+		this.facade.config.viewChooser = {
+			loadViews: () => this.ppService.loadViews(config),
 			select: (id) => this.ppService.selectView(config, id).pipe(take$1(1)).subscribe(() => {
 				this.resetColumns();
 				this.applyCurrentViewQueries(config);
 			}),
 			edit: (id) => this.openViewEditor(config, id, "columns"),
-			create: () => this.ppService.createView(config).pipe(take$1(1)).subscribe((created) => {
-				if (created) this.resetColumns();
+			create: () => this.ppService.createView(config, this.currentViewQueries()).pipe(take$1(1)).subscribe((created) => {
+				if (!created) return;
+				this.resetColumns();
+				this.applyCurrentViewQueries(config);
 			}),
 			loadColumns: () => this.ppService.loadViewColumns(config).pipe(map$1((columns) => {
 				const shown = new Set(this.facade.config.getDisplayedColumnKeys());
@@ -24593,18 +25227,8 @@ var BaseComponent = class BaseComponent extends DflatBaseComponent {
 				}), catchError$1(() => of(false)));
 			},
 			displayedColumns: () => this.facade.config.getDisplayedColumnKeys(),
-			loadCards: () => this.ppService.loadCardViews(config),
-			linkCard: (id) => this.ppService.linkCardView(config, id).pipe(take$1(1)).subscribe((linked) => {
-				if (linked) this.resetColumns();
-			}),
-			editCard: () => this.ppService.editCardView({
-				...config,
-				title: this.getTitle()
-			}).pipe(take$1(1)).subscribe((saved) => {
-				if (saved) this.resetColumns();
-			}),
 			moveColumn: (key, targetKey, before) => this.facade.config.moveDisplayedColumn(key, targetKey, before),
-			isModified: () => this.facade.config.isColumnLayoutModified() || this.viewQueriesModified(),
+			isModified: () => this.facade.config.isColumnLayoutModified(),
 			saveCurrent: () => {
 				const order = this.unsavedLayout();
 				if (!order) return;
@@ -24614,31 +25238,43 @@ var BaseComponent = class BaseComponent extends DflatBaseComponent {
 					title: this.getTitle()
 				}, order, queries).pipe(take$1(1)).subscribe((saved) => {
 					if (!saved) return;
-					this.proposedColumnOrder = JSON.stringify({
-						order,
-						queries
-					});
-					this.savedViewQueries = queries;
+					this.proposedColumnOrder = JSON.stringify(order);
 					this.resetColumns();
 				});
-			},
-			editFilters: () => this.openViewEditor(config, null, "filters")
+			}
 		};
 		this.applyCurrentViewQueries(config, true);
 	}
+	get panelProperties() {
+		return this.panelFields.map((f) => f.PropertyName);
+	}
 	currentViewQueries() {
 		const sort = this.facade.filter.getSortList();
+		const panel = this.facade.filter.getPanelValues(this.panelProperties);
+		const filter = BaseComponent.bothFilters(this.facade.filter.getViewQuery(), this.facade.filter.getAdditionalQueryGroup()) ?? {
+			Logic: "and",
+			Conditions: []
+		};
 		return {
 			sortQuery: sort.length ? JSON.stringify(sort) : "",
-			filterQuery: toViewQuery(this.facade.filter.getViewQuery()) ?? ""
+			filterQuery: toViewQuery(panel ? {
+				...filter,
+				Panel: panel
+			} : filter) ?? ""
 		};
 	}
-	viewQueriesModified() {
-		if (!this.viewQueriesLoaded) return false;
-		const current = this.currentViewQueries();
-		const defaultSort = this.facade.filter.getDefaultSortList();
-		const savedSort = this.savedViewQueries.sortQuery || (defaultSort.length ? JSON.stringify(defaultSort) : "");
-		return current.sortQuery !== savedSort && current.sortQuery !== this.savedViewQueries.sortQuery || current.filterQuery !== this.savedViewQueries.filterQuery;
+	static bothFilters(view, additional) {
+		if (!view || !additional) return view ?? additional;
+		if (view.Logic === "and" && additional.Logic === "and") return {
+			...view,
+			Conditions: [...view.Conditions, ...additional.Conditions],
+			Groups: [...view.Groups ?? [], ...additional.Groups ?? []]
+		};
+		return {
+			Logic: "and",
+			Conditions: [],
+			Groups: [view, additional]
+		};
 	}
 	applyCurrentViewQueries(config, initial = false) {
 		this.ppService.loadViews(config).pipe(take$1(1)).subscribe((list) => {
@@ -24650,11 +25286,11 @@ var BaseComponent = class BaseComponent extends DflatBaseComponent {
 				filterQuery: toViewQuery(filter) ?? ""
 			};
 			const current = this.currentViewQueries();
-			const keepCurrent = initial && (current.sortQuery !== "" || current.filterQuery !== "");
-			this.savedViewQueries = keepCurrent ? current : saved;
-			this.viewQueriesLoaded = true;
-			if (keepCurrent) return;
-			this.facade.filter.setViewQuery(filter);
+			this.facade.filter.setViewFilter(view?.label ?? "", filter, !!view && (!view.isDefault || list.canEditDefault));
+			if (initial && (current.sortQuery !== "" || current.filterQuery !== "")) return;
+			this.facade.filter.clearAdditionalQuery();
+			this.facade.filter.setViewQuery(withoutViewPanel(filter));
+			this.facade.filter.setPanelValues(this.panelProperties, viewPanelOf(filter));
 			if (saved.sortQuery !== current.sortQuery) this.facade.filter.setSortList(sort);
 		});
 	}
@@ -24676,9 +25312,61 @@ var BaseComponent = class BaseComponent extends DflatBaseComponent {
 			...config,
 			viewId,
 			tab,
-			filterColumns: (descriptors ?? []).filter((d) => !!d.Property).map((d) => BaseComponent.filterColumnOf(d))
+			filterColumns: (descriptors ?? []).filter((d) => !!d.Property).map((d) => BaseComponent.filterColumnOf(d)),
+			panelFields: this.panelFields.map((f) => BaseComponent.panelColumnOf(f)).filter((c) => !!c),
+			gridQueries: this.currentViewQueries()
 		}));
 	}
+	static panelColumnOf(f) {
+		const key = f.PropertyName;
+		const label = f.Label || key;
+		switch (f.FilterType) {
+			case FilterType.ComboBox:
+			case FilterType.HorizComboBox:
+			case FilterType.RadioButton: {
+				const data = Array.isArray(f.OriginalData) ? f.OriginalData : Array.isArray(f.Data) ? f.Data : [];
+				const valueMember = f.ValueMember || "Id";
+				const displayMember = f.DisplayMember || "Label";
+				return {
+					key,
+					label,
+					type: "list",
+					values: data.map((d) => ({
+						value: String(d?.[valueMember]),
+						label: String(d?.[displayMember] ?? d?.[valueMember])
+					}))
+				};
+			}
+			case FilterType.Integer:
+			case FilterType.Decimal:
+			case FilterType.WeekNumber: return {
+				key,
+				label,
+				type: "number"
+			};
+			case FilterType.Date:
+			case FilterType.DateTime: return {
+				key,
+				label,
+				type: "date"
+			};
+			case FilterType.CheckBox: return {
+				key,
+				label,
+				type: "bool"
+			};
+			case FilterType.String:
+			case FilterType.Text:
+			case FilterType.Email:
+			case void 0:
+			case null: return {
+				key,
+				label,
+				type: "text"
+			};
+			default: return null;
+		}
+	}
 	static filterColumnOf(d) {
 		const type = d.Display?.type;
 		const label = d.Name || d.FieldName || d.Property;
@@ -24714,37 +25402,36 @@ var BaseComponent = class BaseComponent extends DflatBaseComponent {
 	}
 	unsavedLayout() {
 		if (!this.ppService || !this.IsTheMainComponent || !this.getPpMetaEntityKey()) return null;
-		if (!this.facade?.config?.isColumnLayoutModified() && !this.viewQueriesModified()) return null;
+		if (!this.facade?.config?.isColumnLayoutModified()) return null;
 		const columns = this.facade.config.getDisplayedColumnKeys();
 		return columns.length > 0 ? columns : null;
 	}
 	unsavedColumnOrder() {
 		const columns = this.unsavedLayout();
-		return columns && JSON.stringify({
-			order: columns,
-			queries: this.currentViewQueries()
-		}) !== this.proposedColumnOrder ? columns : null;
+		return columns && JSON.stringify(columns) !== this.proposedColumnOrder ? columns : null;
 	}
 	saveColumnOrderOnLeave() {
 		const order = this.unsavedColumnOrder();
 		if (!order) return;
 		const queries = this.currentViewQueries();
-		this.proposedColumnOrder = JSON.stringify({
-			order,
-			queries
-		});
+		this.proposedColumnOrder = JSON.stringify(order);
 		this.ppService.saveColumnOrder({
 			...this.getPpConfig(),
 			title: this.getTitle()
 		}, order, queries);
 	}
-	watchLeaveForColumnOrder() {
-		const events = this.router?.events;
-		if (!this.IsTheMainComponent || !events) return;
-		events.pipe(filter$1((e) => e instanceof NavigationStart), takeUntil$1(this.destroy$)).subscribe((e) => {
-			const path = (url) => Utilities.splitInTwo(url, "?").firstPart;
-			if (this.isDisplayed() && path(e.url) !== path(this.router.url)) this.saveColumnOrderOnLeave();
-		});
+	canLeaveView() {
+		const order = this.unsavedLayout();
+		if (!order || !this.isDisplayed()) return true;
+		const queries = this.currentViewQueries();
+		return this.ppService.confirmLeaveView({
+			...this.getPpConfig(),
+			title: this.getTitle()
+		}, order, queries).pipe(take$1(1), map$1((leave) => {
+			this.proposedColumnOrder = "";
+			this.resetColumns();
+			return leave;
+		}), catchError$1(() => of(true)));
 	}
 	isDisplayed() {
 		return !!this.hostElement?.nativeElement?.isConnected;
@@ -24913,722 +25600,232 @@ var BaseEntityEditor = class BaseEntityEditor {
 			...values
 		};
 		updated["isValid"] = this.form.valid;
-		this.facade.change.emitUpdated([updated]);
-	}
-	setEntity(entity) {
-		this.entity = entity;
-		this.updateReadonly();
-		this.patchForm();
-		this.onEntityChanged(entity);
-	}
-	updateReadonly() {
-		this.readonly = this.facadeReadOnly || !Utilities.IsNil(this.entity?.["IsEditable"]) && !this.entity.IsEditable;
-	}
-	initForm() {
-		this.fields.forEach((field) => {
-			const validators = this.validationService.getFieldValidators(field);
-			const control = this.form.get(field.PropertyName);
-			if (!control) this.form.addControl(field.PropertyName, new FormControl(null, validators));
-			else {
-				control.setValidators(validators);
-				control.updateValueAndValidity({ emitEvent: false });
-			}
-		});
-	}
-	patchForm() {
-		this.form.reset(void 0, { emitEvent: false });
-		if (!Utilities.IsNil(this.entity)) this.form.patchValue(this.entity, { emitEvent: false });
-	}
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.1",
-			ngImport: i0,
-			type: BaseEntityEditor,
-			deps: [{ token: ApplicationService }, { token: ValidationService }],
-			target: i0.ɵɵFactoryTarget.Directive
-		});
-	}
-	static {
-		this.ɵdir = i0.ɵɵngDeclareDirective({
-			minVersion: "14.0.0",
-			version: "22.2.1",
-			type: BaseEntityEditor,
-			isStandalone: true,
-			inputs: {
-				entityKey: "entityKey",
-				guid: "guid"
-			},
-			ngImport: i0
-		});
-	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: BaseEntityEditor,
-	decorators: [{ type: Directive }],
-	ctorParameters: () => [{ type: ApplicationService }, { type: ValidationService }],
-	propDecorators: {
-		entityKey: [{ type: Input }],
-		guid: [{ type: Input }]
-	}
-});
-var SelectorRegistry = class SelectorRegistry {
-	constructor() {
-		this.registry = /* @__PURE__ */ new Map();
-	}
-	register(entityKey, config) {
-		this.registry.set(entityKey, config);
-	}
-	resolve(entityKey) {
-		const cfg = this.registry.get(entityKey);
-		if (!cfg) throw new Error(`No selector registered for ${entityKey}`);
-		return cfg;
-	}
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.1",
-			ngImport: i0,
-			type: SelectorRegistry,
-			deps: [],
-			target: i0.ɵɵFactoryTarget.Injectable
-		});
-	}
-	static {
-		this.ɵprov = i0.ɵɵngDeclareInjectable({
-			minVersion: "12.0.0",
-			version: "22.2.1",
-			ngImport: i0,
-			type: SelectorRegistry
-		});
-	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: SelectorRegistry,
-	decorators: [{ type: Injectable }]
-});
-var SelectorDataSource = class {
-	constructor(config) {
-		this.config = config;
-		this.cache = /* @__PURE__ */ new Map();
-	}
-	load(term, page) {
-		const key = `${term}|${page}`;
-		if (this.cache.has(key)) return of(this.cache.get(key));
-		return this.config.load({
-			term,
-			page,
-			pageSize: this.config.pageSize
-		}).pipe(tap((data) => this.cache.set(key, data)));
-	}
-	clearCache() {
-		this.cache.clear();
-	}
-};
-var AppConfigService = class AppConfigService {
-	constructor(app) {
-		this.app = app;
-		this.memoryCache = /* @__PURE__ */ new Map();
-		this.ttl = 3e5;
-		this.storagePrefix = "entityConfigCache:";
-		this.configSubjects = /* @__PURE__ */ new Map();
-		this.initializeFromLocalStorage();
-	}
-	initializeFromLocalStorage() {
-		try {
-			Object.keys(localStorage).filter((key) => key.startsWith(this.storagePrefix)).forEach((key) => {
-				try {
-					const storedItem = localStorage.getItem(key);
-					if (storedItem) {
-						const parsedItem = JSON.parse(storedItem);
-						if (Date.now() - parsedItem.timestamp < this.ttl) {
-							const config$ = of(parsedItem.config).pipe(shareReplay(1));
-							this.memoryCache.set(key.replace(this.storagePrefix, ""), {
-								observable: config$,
-								timestamp: parsedItem.timestamp
-							});
-						} else localStorage.removeItem(key);
-					}
-				} catch (innerError) {
-					console.error("Error parsing stored cache item:", innerError);
-					localStorage.removeItem(key);
-				}
-			});
-		} catch (error) {
-			console.error("Error initializing cache from localStorage:", error);
-		}
-	}
-	loadConfig(entityKey) {
-		return combineLatest({
-			columns: this.app.DataService.getViewColumns(entityKey).pipe(startWith(null)),
-			viewModel: this.app.DataService.getEntityViewModel(entityKey, 0).pipe(startWith(null)),
-			emptyFilter: this.app.DataService.getEmptyFilter(entityKey).pipe(startWith(null)),
-			filterDescriptors: this.app.DataService.getViewFilterDescriptors(entityKey).pipe(startWith(null)),
-			actions: this.app.DataService.getExtendedActions(entityKey).pipe(startWith(null))
-		});
-	}
-	saveToLocalStorage(entityKey, config) {
-		try {
-			const cacheEntry = this.memoryCache.get(entityKey);
-			if (!cacheEntry) return;
-			const storableItem = {
-				config,
-				timestamp: cacheEntry.timestamp
-			};
-			localStorage.setItem(`${this.storagePrefix}${entityKey}`, JSON.stringify(storableItem));
-		} catch (error) {
-			console.error("Error saving to localStorage:", error);
-		}
-	}
-	resetConfig(entityKey) {
-		if (entityKey) {
-			this.memoryCache.delete(entityKey);
-			localStorage.removeItem(`${this.storagePrefix}${entityKey}`);
-		} else {
-			this.memoryCache.clear();
-			Object.keys(localStorage).filter((k) => k.startsWith(this.storagePrefix)).forEach((k) => localStorage.removeItem(k));
-		}
-	}
-	getAllConfigs() {
-		const now = Date.now();
-		const validConfigs = /* @__PURE__ */ new Map();
-		for (const [key, entry] of this.memoryCache.entries()) if (now - entry.timestamp < this.ttl) validConfigs.set(key, entry.observable);
-		return validConfigs;
-	}
-	getConfig$(entityKey) {
-		if (!this.configSubjects.has(entityKey)) {
-			const subject = new BehaviorSubject(null);
-			this.configSubjects.set(entityKey, subject);
-			this.loadConfig(entityKey).subscribe({
-				next: (cfg) => subject.next(cfg),
-				error: (err) => {
-					console.error(`Error loading config for ${entityKey}`, err);
-					subject.error(err);
-				}
-			});
-		}
-		return this.configSubjects.get(entityKey).pipe(filter((cfg) => !!cfg), distinctUntilChanged((a, b) => isEqual(a, b)), shareReplay({
-			refCount: true,
-			bufferSize: 1
-		}));
-	}
-	reloadConfig(entityKey) {
-		const subject = this.configSubjects.get(entityKey);
-		if (subject) this.loadConfig(entityKey).subscribe((cfg) => subject.next(cfg));
-	}
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.1",
-			ngImport: i0,
-			type: AppConfigService,
-			deps: [{ token: ApplicationService }],
-			target: i0.ɵɵFactoryTarget.Injectable
-		});
-	}
-	static {
-		this.ɵprov = i0.ɵɵngDeclareInjectable({
-			minVersion: "12.0.0",
-			version: "22.2.1",
-			ngImport: i0,
-			type: AppConfigService,
-			providedIn: "root"
-		});
-	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: AppConfigService,
-	decorators: [{
-		type: Injectable,
-		args: [{ providedIn: "root" }]
-	}],
-	ctorParameters: () => [{ type: ApplicationService }]
-});
-var BaseFormContext = class {
-	constructor(fb, validationService) {
-		this.fb = fb;
-		this.validationService = validationService;
-		this.fields = [];
-		this.trackByField = (_, d) => d.PropertyName;
-	}
-	initPropertyForm(withValidators = false) {
-		if (!this.fields) return;
-		if (!this.form) this.form = new FormGroup({});
-		else this.form.reset();
-		this.fields.forEach((field) => {
-			const validators = withValidators ? this.validationService.getFieldValidators(field) : [];
-			const controlValue = this.entity?.hasOwnProperty(field.PropertyName) && this.entity[field.PropertyName] !== void 0 ? this.entity[field.PropertyName] : null;
-			if (!this.form.contains(field.PropertyName)) this.form.addControl(field.PropertyName, new FormControl(controlValue, validators));
-		});
-		if (this.entity) this.form.patchValue(this.entity);
-	}
-	triggerField(desc) {
-		if (desc.IsConditioning) this.handleConditional(desc);
-		if (desc.CascadeDependency) this.handleCascade(desc);
-	}
-	setupCascade(descriptors) {
-		descriptors.forEach((desc) => {
-			if (!desc.CascadeDependency || !desc.CascadeDependencyProperty) return;
-			this.form.get(desc.PropertyName)?.valueChanges.subscribe(() => this.handleCascade(desc));
-		});
-	}
-	setupConditional(descriptors) {
-		descriptors.forEach((desc) => {
-			if (!desc.IsConditioning) return;
-			this.form.get(desc.PropertyName)?.valueChanges.subscribe(() => this.handleConditional(desc));
-		});
-	}
-	changes$() {
-		return this.form.valueChanges.pipe(debounceTime$1(50), distinctUntilChanged$1(), shareReplay$1(1));
-	}
-	patch(values) {
-		this.form.patchValue(values, { emitEvent: true });
-	}
-	serialize() {
-		return this.form.getRawValue();
-	}
-	handleCascade(field) {
-		const selectedValue = field.FilterType === FilterType.Integer ? Number(this.entity[field.PropertyName]) : this.entity[field.PropertyName];
-		const props = field.CascadeDependencyProperty.split(";");
-		const dependentFields = this.fields.filter((f) => props.includes(f.PropertyName));
-		for (const dependingField of dependentFields) {
-			dependingField.CurrentFilters = dependingField.CurrentFilters || {};
-			if (Utilities.IsNil(selectedValue) || Utilities.isEmptyString(selectedValue)) delete dependingField.CurrentFilters[field.PropertyName];
-			else dependingField.CurrentFilters[field.PropertyName] = true;
-			this.resetFieldData(dependingField);
-			if (field.FilterDistinct) dependingField.Data = [...new Map(dependingField.Data.map((item) => [item[dependingField.PropertyName], item])).values()];
-		}
-	}
-	handleConditional(field) {
-		const allFields = this.fields.filter((f) => f.ConditioningField === field.PropertyName);
-		const conditioningValue = this.form.get(field.PropertyName)?.value;
-		for (let conditionedField of allFields) {
-			const conditionMet = Utilities.IsNil(conditioningValue) || conditionedField.ConditioningFieldValue.includes(conditioningValue) || conditionedField.BoolConditioningFieldValue === conditioningValue;
-			if (conditionedField.ConditionalResult === ConditionalResults.Hide) conditionedField.IsHidden = conditionMet;
-			if (conditionedField.ConditionalResult === ConditionalResults.ReadOnly) conditionedField.ReadOnly = conditionMet;
-			const control = this.form.get(conditionedField.PropertyName);
-			if (control) {
-				if (conditionedField.IsHidden) control.clearValidators();
-				else {
-					const validators = this.validationService.getValidators(conditionedField.FieldValidators);
-					this.updateControlValidators(control, validators);
-				}
-			}
-		}
-	}
-	resetFieldData(field) {
-		if (Utilities.IsNil(field.OriginalData)) return;
-		if (field.FilterType === FilterType.Integer) field.Data = field.OriginalData.filter((p) => p[field.ValueMember] === -1 || Object.keys(field.CurrentFilters).every((name) => p[name] === this.entity[name]));
-		else field.Data = field.OriginalData.filter((p) => Object.keys(field.CurrentFilters).every((name) => p[name] === this.entity[name]));
-	}
-	updateControlValidators(ctrl, validators) {
-		ctrl.setValidators(validators);
-		ctrl.updateValueAndValidity({ emitEvent: false });
-	}
-};
-var SortingState = class {
-	constructor(entityKey) {
-		this.entityKey = entityKey;
-		this.property$ = new BehaviorSubject(" ");
-		this.direction$ = new BehaviorSubject("desc");
-	}
-	get changes$() {
-		return this.property$.pipe(distinctUntilChanged(), (source) => new Observable((observer) => {
-			const sub1 = this.property$.subscribe(() => observer.next(this.snapshot()));
-			const sub2 = this.direction$.subscribe(() => observer.next(this.snapshot()));
-			return () => {
-				sub1.unsubscribe();
-				sub2.unsubscribe();
-			};
-		}));
-	}
-	snapshot() {
-		return {
-			property: this.property$.value,
-			direction: this.direction$.value
-		};
-	}
-	updateProperty(property) {
-		if (this.property$.value === property) this.toggleDirection();
-		else {
-			this.property$.next(property);
-			this.direction$.next("asc");
-		}
-	}
-	toggleDirection() {
-		const next = this.direction$.value === "asc" ? "desc" : "asc";
-		this.direction$.next(next);
-	}
-	reset() {
-		this.property$.next("");
-		this.direction$.next("asc");
-	}
-};
-const FilterOperators = {
-	text: [
-		{
-			value: "contains",
-			label: "contient"
-		},
-		{
-			value: "notcontains",
-			label: "ne contient pas"
-		},
-		{
-			value: "startswith",
-			label: "commence par"
-		},
-		{
-			value: "endswith",
-			label: "finit par"
-		},
-		{
-			value: "eq",
-			label: "est égal à"
-		},
-		{
-			value: "ne",
-			label: "est différent de"
-		},
-		{
-			value: "isnull",
-			label: "est vide"
-		},
-		{
-			value: "notnull",
-			label: "n'est pas vide"
-		}
-	],
-	number: [
-		{
-			value: "eq",
-			label: "="
-		},
-		{
-			value: "ne",
-			label: "≠"
-		},
-		{
-			value: "gt",
-			label: ">"
-		},
-		{
-			value: "ge",
-			label: "≥"
-		},
-		{
-			value: "lt",
-			label: "<"
-		},
-		{
-			value: "le",
-			label: "≤"
-		},
-		{
-			value: "between",
-			label: "entre"
-		},
-		{
-			value: "isnull",
-			label: "est vide"
-		},
-		{
-			value: "notnull",
-			label: "n'est pas vide"
-		}
-	],
-	date: [
-		{
-			value: "on",
-			label: "le"
-		},
-		{
-			value: "before",
-			label: "avant le"
-		},
-		{
-			value: "after",
-			label: "après le"
-		},
-		{
-			value: "datebetween",
-			label: "entre"
-		},
-		{
-			value: "today",
-			label: "aujourd'hui"
-		},
-		{
-			value: "thismonth",
-			label: "ce mois-ci"
-		},
-		{
-			value: "isnull",
-			label: "est vide"
-		},
-		{
-			value: "notnull",
-			label: "n'est pas vide"
-		}
-	],
-	bool: [{
-		value: "true",
-		label: "est oui"
-	}, {
-		value: "false",
-		label: "est non"
-	}],
-	list: [{
-		value: "in",
-		label: "est l'une de"
-	}, {
-		value: "notin",
-		label: "n'est aucune de"
-	}]
-};
-var FilterEditorComponent = class FilterEditorComponent {
-	constructor() {
-		this.columns = [];
-		this.filter = {
-			Logic: "and",
-			Conditions: [],
-			Groups: []
-		};
-		this.sort = [];
-		this.embedded = false;
-		this.section = null;
-		this.viewLabel = "";
-		this.canSaveInView = true;
-		this.saveInView = false;
-		this.tab = "filters";
-		this.maxDepth = 3;
-		this.trackIndex = (index) => index;
+		this.facade.change.emitUpdated([updated]);
 	}
-	get shownTab() {
-		return this.section ?? this.tab;
+	setEntity(entity) {
+		this.entity = entity;
+		this.updateReadonly();
+		this.patchForm();
+		this.onEntityChanged(entity);
 	}
-	get result() {
-		return {
-			filter: this.filter,
-			sort: this.sort.filter((s) => !!s.property),
-			saveInView: this.saveInView && this.canSaveInView
-		};
+	updateReadonly() {
+		this.readonly = this.facadeReadOnly || !Utilities.IsNil(this.entity?.["IsEditable"]) && !this.entity.IsEditable;
 	}
-	columnOf(key) {
-		return this.columns.find((c) => c.key === key);
+	initForm() {
+		this.fields.forEach((field) => {
+			const validators = this.validationService.getFieldValidators(field);
+			const control = this.form.get(field.PropertyName);
+			if (!control) this.form.addControl(field.PropertyName, new FormControl(null, validators));
+			else {
+				control.setValidators(validators);
+				control.updateValueAndValidity({ emitEvent: false });
+			}
+		});
 	}
-	operatorsOf(condition) {
-		return FilterOperators[this.columnOf(condition.Property)?.type ?? "text"];
+	patchForm() {
+		this.form.reset(void 0, { emitEvent: false });
+		if (!Utilities.IsNil(this.entity)) this.form.patchValue(this.entity, { emitEvent: false });
 	}
-	hasValue(condition) {
-		return !ViewFilterNoValueOperators.includes(condition.Operator);
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: BaseEntityEditor,
+			deps: [{ token: ApplicationService }, { token: ValidationService }],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
 	}
-	hasSecondValue(condition) {
-		return condition.Operator === "between" || condition.Operator === "datebetween";
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.1",
+			type: BaseEntityEditor,
+			isStandalone: true,
+			inputs: {
+				entityKey: "entityKey",
+				guid: "guid"
+			},
+			ngImport: i0
+		});
 	}
-	isList(condition) {
-		return condition.Operator === "in" || condition.Operator === "notin";
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: BaseEntityEditor,
+	decorators: [{ type: Directive }],
+	ctorParameters: () => [{ type: ApplicationService }, { type: ValidationService }],
+	propDecorators: {
+		entityKey: [{ type: Input }],
+		guid: [{ type: Input }]
 	}
-	inputType(condition) {
-		const type = this.columnOf(condition.Property)?.type;
-		return type === "date" ? "date" : type === "number" ? "number" : "text";
+});
+var SelectorRegistry = class SelectorRegistry {
+	constructor() {
+		this.registry = /* @__PURE__ */ new Map();
 	}
-	onColumnChange(condition) {
-		condition.Operator = this.operatorsOf(condition)[0].value;
-		condition.Value = null;
-		condition.Value2 = null;
-		condition.Values = this.isList(condition) ? [] : void 0;
+	register(entityKey, config) {
+		this.registry.set(entityKey, config);
 	}
-	onOperatorChange(condition) {
-		if (this.isList(condition)) condition.Values = condition.Values ?? [];
+	resolve(entityKey) {
+		const cfg = this.registry.get(entityKey);
+		if (!cfg) throw new Error(`No selector registered for ${entityKey}`);
+		return cfg;
 	}
-	toggleValue(condition, value) {
-		const values = condition.Values ?? [];
-		condition.Values = values.includes(value) ? values.filter((v) => v !== value) : [...values, value];
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: SelectorRegistry,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
 	}
-	setLogic(group, logic) {
-		group.Logic = logic;
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: SelectorRegistry
+		});
 	}
-	addCondition(group) {
-		const column = this.columns[0];
-		if (!column) return;
-		const condition = {
-			Property: column.key,
-			Operator: FilterOperators[column.type][0].value,
-			Value: null
-		};
-		if (this.isList(condition)) condition.Values = [];
-		group.Conditions.push(condition);
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SelectorRegistry,
+	decorators: [{ type: Injectable }]
+});
+var SelectorDataSource = class {
+	constructor(config) {
+		this.config = config;
+		this.cache = /* @__PURE__ */ new Map();
 	}
-	removeCondition(group, index) {
-		group.Conditions.splice(index, 1);
+	load(term, page) {
+		const key = `${term}|${page}`;
+		if (this.cache.has(key)) return of(this.cache.get(key));
+		return this.config.load({
+			term,
+			page,
+			pageSize: this.config.pageSize
+		}).pipe(tap((data) => this.cache.set(key, data)));
 	}
-	addGroup(group) {
-		const sub = {
-			Logic: group.Logic === "and" ? "or" : "and",
-			Conditions: [],
-			Groups: []
-		};
-		this.addCondition(sub);
-		group.Groups = [...group.Groups ?? [], sub];
+	clearCache() {
+		this.cache.clear();
 	}
-	removeGroup(parent, index) {
-		parent.Groups?.splice(index, 1);
+};
+var AppConfigService = class AppConfigService {
+	constructor(app) {
+		this.app = app;
+		this.memoryCache = /* @__PURE__ */ new Map();
+		this.ttl = 3e5;
+		this.storagePrefix = "entityConfigCache:";
+		this.configSubjects = /* @__PURE__ */ new Map();
+		this.initializeFromLocalStorage();
 	}
-	clear() {
-		this.filter.Logic = "and";
-		this.filter.Conditions.splice(0);
-		this.filter.Groups = [];
-		this.sort.splice(0);
+	initializeFromLocalStorage() {
+		try {
+			Object.keys(localStorage).filter((key) => key.startsWith(this.storagePrefix)).forEach((key) => {
+				try {
+					const storedItem = localStorage.getItem(key);
+					if (storedItem) {
+						const parsedItem = JSON.parse(storedItem);
+						if (Date.now() - parsedItem.timestamp < this.ttl) {
+							const config$ = of(parsedItem.config).pipe(shareReplay(1));
+							this.memoryCache.set(key.replace(this.storagePrefix, ""), {
+								observable: config$,
+								timestamp: parsedItem.timestamp
+							});
+						} else localStorage.removeItem(key);
+					}
+				} catch (innerError) {
+					console.error("Error parsing stored cache item:", innerError);
+					localStorage.removeItem(key);
+				}
+			});
+		} catch (error) {
+			console.error("Error initializing cache from localStorage:", error);
+		}
 	}
-	addSort() {
-		const used = new Set(this.sort.map((s) => s.property));
-		const next = this.columns.find((c) => !used.has(c.key));
-		if (next) this.sort.push({
-			property: next.key,
-			direction: "asc"
+	loadConfig(entityKey) {
+		return combineLatest({
+			columns: this.app.DataService.getViewColumns(entityKey).pipe(startWith(null)),
+			viewModel: this.app.DataService.getEntityViewModel(entityKey, 0).pipe(startWith(null)),
+			emptyFilter: this.app.DataService.getEmptyFilter(entityKey).pipe(startWith(null)),
+			filterDescriptors: this.app.DataService.getViewFilterDescriptors(entityKey).pipe(startWith(null)),
+			actions: this.app.DataService.getExtendedActions(entityKey).pipe(startWith(null))
 		});
 	}
-	removeSort(index) {
-		this.sort.splice(index, 1);
+	saveToLocalStorage(entityKey, config) {
+		try {
+			const cacheEntry = this.memoryCache.get(entityKey);
+			if (!cacheEntry) return;
+			const storableItem = {
+				config,
+				timestamp: cacheEntry.timestamp
+			};
+			localStorage.setItem(`${this.storagePrefix}${entityKey}`, JSON.stringify(storableItem));
+		} catch (error) {
+			console.error("Error saving to localStorage:", error);
+		}
 	}
-	moveSort(index, offset) {
-		const target = index + offset;
-		if (target < 0 || target >= this.sort.length) return;
-		const [level] = this.sort.splice(index, 1);
-		this.sort.splice(target, 0, level);
+	resetConfig(entityKey) {
+		if (entityKey) {
+			this.memoryCache.delete(entityKey);
+			localStorage.removeItem(`${this.storagePrefix}${entityKey}`);
+		} else {
+			this.memoryCache.clear();
+			Object.keys(localStorage).filter((k) => k.startsWith(this.storagePrefix)).forEach((k) => localStorage.removeItem(k));
+		}
+	}
+	getAllConfigs() {
+		const now = Date.now();
+		const validConfigs = /* @__PURE__ */ new Map();
+		for (const [key, entry] of this.memoryCache.entries()) if (now - entry.timestamp < this.ttl) validConfigs.set(key, entry.observable);
+		return validConfigs;
+	}
+	getConfig$(entityKey) {
+		if (!this.configSubjects.has(entityKey)) {
+			const subject = new BehaviorSubject(null);
+			this.configSubjects.set(entityKey, subject);
+			this.loadConfig(entityKey).subscribe({
+				next: (cfg) => subject.next(cfg),
+				error: (err) => {
+					console.error(`Error loading config for ${entityKey}`, err);
+					subject.error(err);
+				}
+			});
+		}
+		return this.configSubjects.get(entityKey).pipe(filter((cfg) => !!cfg), distinctUntilChanged((a, b) => isEqual(a, b)), shareReplay({
+			refCount: true,
+			bufferSize: 1
+		}));
 	}
-	summary(group = this.filter) {
-		return [...group.Conditions.map((c) => {
-			const column = this.columnOf(c.Property);
-			const operator = FilterOperators[column?.type ?? "text"].find((o) => o.value === c.Operator)?.label ?? c.Operator;
-			const values = this.isList(c) ? (c.Values ?? []).map((v) => column?.values?.find((x) => x.value === v)?.label ?? v).join(", ") : !this.hasValue(c) ? "" : this.hasSecondValue(c) ? `${c.Value ?? "…"} et ${c.Value2 ?? "…"}` : c.Value ?? "…";
-			return `${column?.label ?? c.Property} ${operator}${values ? " « " + values + " »" : ""}`;
-		}), ...(group.Groups ?? []).map((g) => `(${this.summary(g)})`)].join(group.Logic === "or" ? " OU " : " ET ") || "Aucun filtre";
+	reloadConfig(entityKey) {
+		const subject = this.configSubjects.get(entityKey);
+		if (subject) this.loadConfig(entityKey).subscribe((cfg) => subject.next(cfg));
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
 			version: "22.2.1",
 			ngImport: i0,
-			type: FilterEditorComponent,
-			deps: [],
-			target: i0.ɵɵFactoryTarget.Component
+			type: AppConfigService,
+			deps: [{ token: ApplicationService }],
+			target: i0.ɵɵFactoryTarget.Injectable
 		});
 	}
 	static {
-		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "14.0.0",
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
 			version: "22.2.1",
-			type: FilterEditorComponent,
-			isStandalone: true,
-			selector: "alg-filter-editor",
-			inputs: {
-				columns: "columns",
-				filter: "filter",
-				sort: "sort",
-				embedded: "embedded",
-				section: "section"
-			},
 			ngImport: i0,
-			template: "<div class=\"fe\">\r\n    <div class=\"fe-tabs\" role=\"tablist\" *ngIf=\"!section\">\r\n        <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'filters'\" (click)=\"tab = 'filters'\">Filtres</button>\r\n        <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'sort'\" (click)=\"tab = 'sort'\">Tri</button>\r\n    </div>\r\n\r\n    <div class=\"fe-body\" *ngIf=\"shownTab === 'filters'\">\r\n        <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: filter, parent: null, index: 0, depth: 0 }\"></ng-container>\r\n        <div class=\"fe-summary\">{{ summary() }}</div>\r\n    </div>\r\n\r\n    <div class=\"fe-body\" *ngIf=\"shownTab === 'sort'\">\r\n        <div class=\"fe-sort\" *ngFor=\"let level of sort; let i = index; trackBy: trackIndex\">\r\n            <span class=\"fe-sort-label\">{{ i === 0 ? 'Trier par' : 'Puis par' }}</span>\r\n            <select class=\"form-control\" [(ngModel)]=\"level.property\">\r\n                <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n            </select>\r\n            <select class=\"form-control fe-sort-direction\" [(ngModel)]=\"level.direction\">\r\n                <option value=\"asc\">Croissant</option>\r\n                <option value=\"desc\">Décroissant</option>\r\n            </select>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Monter\" [disabled]=\"i === 0\" (click)=\"moveSort(i, -1)\"><i class=\"fa fa-arrow-up\"></i></button>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Descendre\" [disabled]=\"i === sort.length - 1\" (click)=\"moveSort(i, 1)\"><i class=\"fa fa-arrow-down\"></i></button>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Retirer\" (click)=\"removeSort(i)\"><i class=\"fa fa-times\"></i></button>\r\n        </div>\r\n        <div class=\"fe-adds\"><button type=\"button\" class=\"fe-add\" (click)=\"addSort()\">+ Niveau</button></div>\r\n    </div>\r\n\r\n    <div class=\"fe-foot\">\r\n        <label class=\"fe-save\" *ngIf=\"!embedded\" [class.disabled]=\"!canSaveInView\"\r\n            [title]=\"canSaveInView ? '' : 'La vue par défaut est en lecture seule : dupliquez-la pour y enregistrer un filtre'\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"saveInView\" [disabled]=\"!canSaveInView\" />\r\n            <span>Enregistrer dans la vue{{ viewLabel ? ' « ' + viewLabel + ' »' : '' }}</span>\r\n        </label>\r\n        <button type=\"button\" class=\"fe-clear\" (click)=\"clear()\">Tout effacer</button>\r\n    </div>\r\n</div>\r\n\r\n<!-- Groupe : relation ET / OU, conditions, groupes imbriqués. -->\r\n<ng-template #groupTpl let-group=\"group\" let-parent=\"parent\" let-index=\"index\" let-depth=\"depth\">\r\n    <div class=\"fe-group\" [class.or]=\"group.Logic === 'or'\" [class.nested]=\"depth > 0\">\r\n        <div class=\"fe-group-head\">\r\n            <span class=\"fe-logic\">\r\n                <button type=\"button\" [class.on]=\"group.Logic === 'and'\" class=\"and\" (click)=\"setLogic(group, 'and')\">ET</button>\r\n                <button type=\"button\" [class.on]=\"group.Logic === 'or'\" class=\"or\" (click)=\"setLogic(group, 'or')\">OU</button>\r\n            </span>\r\n            <span class=\"fe-group-hint\">{{ group.Logic === 'and' ? 'Toutes les conditions' : 'Au moins une condition' }}</span>\r\n            <button type=\"button\" *ngIf=\"parent\" class=\"fe-icon fe-group-remove\" title=\"Retirer le groupe\" (click)=\"removeGroup(parent, index)\">\r\n                <i class=\"fa fa-times\"></i>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"fe-cond\" *ngFor=\"let condition of group.Conditions; let i = index; trackBy: trackIndex\">\r\n            <select class=\"form-control\" [(ngModel)]=\"condition.Property\" (ngModelChange)=\"onColumnChange(condition)\">\r\n                <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n            </select>\r\n            <select class=\"form-control\" [(ngModel)]=\"condition.Operator\" (ngModelChange)=\"onOperatorChange(condition)\">\r\n                <option *ngFor=\"let op of operatorsOf(condition)\" [value]=\"op.value\">{{ op.label }}</option>\r\n            </select>\r\n            <span class=\"fe-value\">\r\n                <ng-container *ngIf=\"isList(condition); else valueTpl\">\r\n                    <span class=\"fe-chips\">\r\n                        <button type=\"button\" *ngFor=\"let option of columnOf(condition.Property)?.values\" class=\"fe-chip\"\r\n                            [class.on]=\"condition.Values?.includes(option.value)\" (click)=\"toggleValue(condition, option.value)\">{{ option.label }}</button>\r\n                    </span>\r\n                </ng-container>\r\n                <ng-template #valueTpl>\r\n                    <ng-container *ngIf=\"hasValue(condition)\">\r\n                        <input class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value\" />\r\n                        <input *ngIf=\"hasSecondValue(condition)\" class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value2\" />\r\n                    </ng-container>\r\n                </ng-template>\r\n            </span>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Retirer la condition\" (click)=\"removeCondition(group, i)\"><i class=\"fa fa-times\"></i></button>\r\n        </div>\r\n\r\n        <ng-container *ngFor=\"let sub of group.Groups; let gi = index; trackBy: trackIndex\">\r\n            <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: sub, parent: group, index: gi, depth: depth + 1 }\"></ng-container>\r\n        </ng-container>\r\n\r\n        <div class=\"fe-adds\">\r\n            <button type=\"button\" class=\"fe-add\" (click)=\"addCondition(group)\">+ Condition</button>\r\n            <button type=\"button\" class=\"fe-add\" *ngIf=\"depth < maxDepth - 1\" (click)=\"addGroup(group)\">+ Groupe</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\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}.fe{display:flex;flex-direction:column;color:#4d5a81;font-size:13px}.fe-tabs{display:flex;gap:4px;padding:8px 14px 0;border-bottom:1px solid #DBE4FF}.fe-tab{padding:6px 12px;border:none;border-bottom:2px solid transparent;background:none;color:#9fa9c7;font:inherit;font-weight:700;cursor:pointer}.fe-tab.active{color:#4465c9;border-bottom-color:#5272d3}.fe-body{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:12px 14px}.fe-group{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #DBE4FF;border-left:4px solid #2f7d6b;border-radius:8px;background:#fff}.fe-group.or{border-left-color:#8a5a12}.fe-group.nested{background:#f6f8fd}.fe-group-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#9fa9c7}.fe-group-remove{margin-left:auto}.fe-logic{display:inline-flex;border:1px solid #DBE4FF;border-radius:999px;overflow:hidden}.fe-logic button{padding:2px 10px;border:none;background:none;color:#9fa9c7;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.fe-logic button.on.and{background:#2f7d6b;color:#fff}.fe-logic button.on.or{background:#8a5a12;color:#fff}.fe-cond{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) 28px;gap:6px;align-items:center}@media(max-width:600px){.fe-cond{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}.fe-cond .fe-value{grid-column:1/3}}select.form-control,input.form-control{height:30px;min-width:0;padding:2px 6px;font-size:13px}.fe-value{display:flex;gap:6px;min-width:0}.fe-value input{flex:1}.fe-chips{display:flex;flex-wrap:wrap;gap:4px}.fe-chip{padding:2px 8px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4d5a81;font:inherit;font-size:12px;cursor:pointer}.fe-chip.on{background:#5272d3;border-color:#5272d3;color:#fff}.fe-icon{width:28px;height:28px;padding:0;border:none;border-radius:6px;background:none;color:#9fa9c7;cursor:pointer}.fe-icon:hover:not(:disabled){background:#ebf0ff;color:#4d5a81}.fe-icon:disabled{opacity:.3;cursor:default}.fe-adds{display:flex;gap:8px;flex-wrap:wrap}.fe-add{padding:3px 10px;border:1px dashed #C1D0FD;border-radius:6px;background:none;color:#4465c9;font:inherit;font-size:12px;cursor:pointer}.fe-summary{padding:8px 10px;border-radius:6px;background:#ebf0ff;font-size:12px;word-break:break-word}.fe-sort{display:grid;grid-template-columns:64px minmax(0,1fr) 120px 28px 28px 28px;gap:6px;align-items:center}.fe-sort-label{font-size:12px;color:#9fa9c7}.fe-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid #DBE4FF}.fe-save{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;cursor:pointer}.fe-save.disabled{opacity:.55;cursor:default}.fe-save input{margin:0}.fe-clear{border:none;background:none;color:#4465c9;font:inherit;cursor:pointer}\n"],
-			dependencies: [
-				{
-					kind: "ngmodule",
-					type: CommonModule
-				},
-				{
-					kind: "directive",
-					type: i1$5.NgForOf,
-					selector: "[ngFor][ngForOf]",
-					inputs: [
-						"ngForOf",
-						"ngForTrackBy",
-						"ngForTemplate"
-					]
-				},
-				{
-					kind: "directive",
-					type: i1$5.NgIf,
-					selector: "[ngIf]",
-					inputs: [
-						"ngIf",
-						"ngIfThen",
-						"ngIfElse"
-					]
-				},
-				{
-					kind: "directive",
-					type: i1$5.NgTemplateOutlet,
-					selector: "[ngTemplateOutlet]",
-					inputs: [
-						"ngTemplateOutletContext",
-						"ngTemplateOutlet",
-						"ngTemplateOutletInjector"
-					]
-				},
-				{
-					kind: "ngmodule",
-					type: FormsModule
-				},
-				{
-					kind: "directive",
-					type: i5.NgSelectOption,
-					selector: "option",
-					inputs: ["ngValue", "value"]
-				},
-				{
-					kind: "directive",
-					type: i5.ɵNgSelectMultipleOption,
-					selector: "option",
-					inputs: ["ngValue", "value"]
-				},
-				{
-					kind: "directive",
-					type: i5.DefaultValueAccessor,
-					selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
-				},
-				{
-					kind: "directive",
-					type: i5.CheckboxControlValueAccessor,
-					selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]"
-				},
-				{
-					kind: "directive",
-					type: i5.SelectControlValueAccessor,
-					selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]",
-					inputs: ["compareWith"]
-				},
-				{
-					kind: "directive",
-					type: i5.NgControlStatus,
-					selector: "[formControlName],[ngModel],[formControl]"
-				},
-				{
-					kind: "directive",
-					type: i5.NgModel,
-					selector: "[ngModel]:not([formControlName]):not([formControl])",
-					inputs: [
-						"name",
-						"disabled",
-						"ngModel",
-						"ngModelOptions"
-					],
-					outputs: ["ngModelChange"],
-					exportAs: ["ngModel"]
-				}
-			],
-			changeDetection: i0.ChangeDetectionStrategy.Eager
+			type: AppConfigService,
+			providedIn: "root"
 		});
 	}
 };
@@ -25636,26 +25833,133 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.1",
 	ngImport: i0,
-	type: FilterEditorComponent,
+	type: AppConfigService,
 	decorators: [{
-		type: Component,
-		args: [{
-			selector: "alg-filter-editor",
-			standalone: true,
-			imports: [CommonModule, FormsModule],
-			changeDetection: ChangeDetectionStrategy.Eager,
-			template: "<div class=\"fe\">\r\n    <div class=\"fe-tabs\" role=\"tablist\" *ngIf=\"!section\">\r\n        <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'filters'\" (click)=\"tab = 'filters'\">Filtres</button>\r\n        <button type=\"button\" class=\"fe-tab\" [class.active]=\"tab === 'sort'\" (click)=\"tab = 'sort'\">Tri</button>\r\n    </div>\r\n\r\n    <div class=\"fe-body\" *ngIf=\"shownTab === 'filters'\">\r\n        <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: filter, parent: null, index: 0, depth: 0 }\"></ng-container>\r\n        <div class=\"fe-summary\">{{ summary() }}</div>\r\n    </div>\r\n\r\n    <div class=\"fe-body\" *ngIf=\"shownTab === 'sort'\">\r\n        <div class=\"fe-sort\" *ngFor=\"let level of sort; let i = index; trackBy: trackIndex\">\r\n            <span class=\"fe-sort-label\">{{ i === 0 ? 'Trier par' : 'Puis par' }}</span>\r\n            <select class=\"form-control\" [(ngModel)]=\"level.property\">\r\n                <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n            </select>\r\n            <select class=\"form-control fe-sort-direction\" [(ngModel)]=\"level.direction\">\r\n                <option value=\"asc\">Croissant</option>\r\n                <option value=\"desc\">Décroissant</option>\r\n            </select>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Monter\" [disabled]=\"i === 0\" (click)=\"moveSort(i, -1)\"><i class=\"fa fa-arrow-up\"></i></button>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Descendre\" [disabled]=\"i === sort.length - 1\" (click)=\"moveSort(i, 1)\"><i class=\"fa fa-arrow-down\"></i></button>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Retirer\" (click)=\"removeSort(i)\"><i class=\"fa fa-times\"></i></button>\r\n        </div>\r\n        <div class=\"fe-adds\"><button type=\"button\" class=\"fe-add\" (click)=\"addSort()\">+ Niveau</button></div>\r\n    </div>\r\n\r\n    <div class=\"fe-foot\">\r\n        <label class=\"fe-save\" *ngIf=\"!embedded\" [class.disabled]=\"!canSaveInView\"\r\n            [title]=\"canSaveInView ? '' : 'La vue par défaut est en lecture seule : dupliquez-la pour y enregistrer un filtre'\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"saveInView\" [disabled]=\"!canSaveInView\" />\r\n            <span>Enregistrer dans la vue{{ viewLabel ? ' « ' + viewLabel + ' »' : '' }}</span>\r\n        </label>\r\n        <button type=\"button\" class=\"fe-clear\" (click)=\"clear()\">Tout effacer</button>\r\n    </div>\r\n</div>\r\n\r\n<!-- Groupe : relation ET / OU, conditions, groupes imbriqués. -->\r\n<ng-template #groupTpl let-group=\"group\" let-parent=\"parent\" let-index=\"index\" let-depth=\"depth\">\r\n    <div class=\"fe-group\" [class.or]=\"group.Logic === 'or'\" [class.nested]=\"depth > 0\">\r\n        <div class=\"fe-group-head\">\r\n            <span class=\"fe-logic\">\r\n                <button type=\"button\" [class.on]=\"group.Logic === 'and'\" class=\"and\" (click)=\"setLogic(group, 'and')\">ET</button>\r\n                <button type=\"button\" [class.on]=\"group.Logic === 'or'\" class=\"or\" (click)=\"setLogic(group, 'or')\">OU</button>\r\n            </span>\r\n            <span class=\"fe-group-hint\">{{ group.Logic === 'and' ? 'Toutes les conditions' : 'Au moins une condition' }}</span>\r\n            <button type=\"button\" *ngIf=\"parent\" class=\"fe-icon fe-group-remove\" title=\"Retirer le groupe\" (click)=\"removeGroup(parent, index)\">\r\n                <i class=\"fa fa-times\"></i>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"fe-cond\" *ngFor=\"let condition of group.Conditions; let i = index; trackBy: trackIndex\">\r\n            <select class=\"form-control\" [(ngModel)]=\"condition.Property\" (ngModelChange)=\"onColumnChange(condition)\">\r\n                <option *ngFor=\"let column of columns\" [value]=\"column.key\">{{ column.label }}</option>\r\n            </select>\r\n            <select class=\"form-control\" [(ngModel)]=\"condition.Operator\" (ngModelChange)=\"onOperatorChange(condition)\">\r\n                <option *ngFor=\"let op of operatorsOf(condition)\" [value]=\"op.value\">{{ op.label }}</option>\r\n            </select>\r\n            <span class=\"fe-value\">\r\n                <ng-container *ngIf=\"isList(condition); else valueTpl\">\r\n                    <span class=\"fe-chips\">\r\n                        <button type=\"button\" *ngFor=\"let option of columnOf(condition.Property)?.values\" class=\"fe-chip\"\r\n                            [class.on]=\"condition.Values?.includes(option.value)\" (click)=\"toggleValue(condition, option.value)\">{{ option.label }}</button>\r\n                    </span>\r\n                </ng-container>\r\n                <ng-template #valueTpl>\r\n                    <ng-container *ngIf=\"hasValue(condition)\">\r\n                        <input class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value\" />\r\n                        <input *ngIf=\"hasSecondValue(condition)\" class=\"form-control\" [type]=\"inputType(condition)\" [(ngModel)]=\"condition.Value2\" />\r\n                    </ng-container>\r\n                </ng-template>\r\n            </span>\r\n            <button type=\"button\" class=\"fe-icon\" title=\"Retirer la condition\" (click)=\"removeCondition(group, i)\"><i class=\"fa fa-times\"></i></button>\r\n        </div>\r\n\r\n        <ng-container *ngFor=\"let sub of group.Groups; let gi = index; trackBy: trackIndex\">\r\n            <ng-container *ngTemplateOutlet=\"groupTpl; context: { group: sub, parent: group, index: gi, depth: depth + 1 }\"></ng-container>\r\n        </ng-container>\r\n\r\n        <div class=\"fe-adds\">\r\n            <button type=\"button\" class=\"fe-add\" (click)=\"addCondition(group)\">+ Condition</button>\r\n            <button type=\"button\" class=\"fe-add\" *ngIf=\"depth < maxDepth - 1\" (click)=\"addGroup(group)\">+ Groupe</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\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}.fe{display:flex;flex-direction:column;color:#4d5a81;font-size:13px}.fe-tabs{display:flex;gap:4px;padding:8px 14px 0;border-bottom:1px solid #DBE4FF}.fe-tab{padding:6px 12px;border:none;border-bottom:2px solid transparent;background:none;color:#9fa9c7;font:inherit;font-weight:700;cursor:pointer}.fe-tab.active{color:#4465c9;border-bottom-color:#5272d3}.fe-body{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:12px 14px}.fe-group{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #DBE4FF;border-left:4px solid #2f7d6b;border-radius:8px;background:#fff}.fe-group.or{border-left-color:#8a5a12}.fe-group.nested{background:#f6f8fd}.fe-group-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#9fa9c7}.fe-group-remove{margin-left:auto}.fe-logic{display:inline-flex;border:1px solid #DBE4FF;border-radius:999px;overflow:hidden}.fe-logic button{padding:2px 10px;border:none;background:none;color:#9fa9c7;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.fe-logic button.on.and{background:#2f7d6b;color:#fff}.fe-logic button.on.or{background:#8a5a12;color:#fff}.fe-cond{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) 28px;gap:6px;align-items:center}@media(max-width:600px){.fe-cond{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}.fe-cond .fe-value{grid-column:1/3}}select.form-control,input.form-control{height:30px;min-width:0;padding:2px 6px;font-size:13px}.fe-value{display:flex;gap:6px;min-width:0}.fe-value input{flex:1}.fe-chips{display:flex;flex-wrap:wrap;gap:4px}.fe-chip{padding:2px 8px;border:1px solid #C1D0FD;border-radius:999px;background:#fff;color:#4d5a81;font:inherit;font-size:12px;cursor:pointer}.fe-chip.on{background:#5272d3;border-color:#5272d3;color:#fff}.fe-icon{width:28px;height:28px;padding:0;border:none;border-radius:6px;background:none;color:#9fa9c7;cursor:pointer}.fe-icon:hover:not(:disabled){background:#ebf0ff;color:#4d5a81}.fe-icon:disabled{opacity:.3;cursor:default}.fe-adds{display:flex;gap:8px;flex-wrap:wrap}.fe-add{padding:3px 10px;border:1px dashed #C1D0FD;border-radius:6px;background:none;color:#4465c9;font:inherit;font-size:12px;cursor:pointer}.fe-summary{padding:8px 10px;border-radius:6px;background:#ebf0ff;font-size:12px;word-break:break-word}.fe-sort{display:grid;grid-template-columns:64px minmax(0,1fr) 120px 28px 28px 28px;gap:6px;align-items:center}.fe-sort-label{font-size:12px;color:#9fa9c7}.fe-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid #DBE4FF}.fe-save{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;cursor:pointer}.fe-save.disabled{opacity:.55;cursor:default}.fe-save input{margin:0}.fe-clear{border:none;background:none;color:#4465c9;font:inherit;cursor:pointer}\n"]
-		}]
+		type: Injectable,
+		args: [{ providedIn: "root" }]
 	}],
-	propDecorators: {
-		columns: [{ type: Input }],
-		filter: [{ type: Input }],
-		sort: [{ type: Input }],
-		embedded: [{ type: Input }],
-		section: [{ type: Input }]
-	}
+	ctorParameters: () => [{ type: ApplicationService }]
 });
-export { Action, ActionContext, ActionDefinition, ActionHandlerContext, ActionPanelComponent, ActionService, ActionsComponent, ActionsContentComponent, AddclassDirective, AlertDialog, AlertMessage, AlertService, AppConfigService, ApplicationService, BaseArrayParameterTypeComponent, BaseComponent, BaseEditorComponent, BaseEntityEditor, BaseFormContext, BaseItemListComponent, BaseParameterTypeComponent, BaseShortcutsDirective, BreadcrumbComponent, CalendarComponent, CanDeactivateGuard, CardListComponent, CellRendererComponent, ChangeDetectionContext, ChangeUtilities, CollapseDirective, ConfirmModalComponent, ConfirmOptions, ContextChoice, CoreUxModule, DataContext, DataGridComponent, DataGridStyleContext, DataListComponent, DatagridCellComponent, DatagridCustomComponent, DatePickerDirective, DecimalInputDirective, DefaultDataGridStyleContext, DefaultFilterComponent, DefaultLayoutComponent, DflatBaseComponent, DflatBaseFilterComponent, DflatModalFrameComponent, DflatModalOptions, DflatModalRef, DflatModalService, DialogComponent, DialogComponentParameter, DialogType, DraggableDirective, DroppableDirective, DynamicFieldComponent, DynamicFilterComponent, DynamicFilterExtraComponent, DynamicFilterPanel, DynamicFormComponent, EXTENDED_ACTION_COMPONENT, EditModeDirective, EditorContext, EditorTabComponent, EditorTabSetComponent, EntityConfigContext, EntityFacade, EntityFacadeRegistryService, EntitySections, EntitySelectors, EntityUpdater, ExportDataModalComponent, ExtendedAction, ExtendedActionComponent, FacadeLoadGuard, FacadeModalService, FieldComponent, FilterContext, FilterEditorComponent, FilterFormModalComponent, FilterLifecycleGuard, FilterOperators, FilterSummaryComponent, FilterSummaryPanelComponent, FireAuthService, FocusableDirective, FormPasswordComponent, FormWrapper, GridFieldComponent, GridRowComponent, GridStylePipe, GridViewMenuComponent, HideOnThresholdDirective, IIsCancelWithWarning, ImageComponent, ImageService, InputSelectorComponent, InputSelectorOptions, InputTreeSelectorComponent, InsertionDirective, LayoutContext, LayoutHandlerDirective, LayoutService, LoginLayoutComponent, LogsComponent, MenuComponent, MenuDashboardComponent, MessageSeverity, MobileMenuComponent, ModalService, ModalStateService, NewEditorComponent, NewPaginatorComponent, OldDataPageComponent, OldLayoutHandlerDirective, OnEnterDirective, OpenNavigationMenuEvent, OrderableModalComponent, OrderableModalService, PP_SERVICE, PageLayoutComponent, PageTabRouteReuseStrategy, PageTabService, PageTabsComponent, PaginatorComponent, ParameterFieldComponent, ParameterTypeBoolArrayComponent, ParameterTypeBoolComponent, ParameterTypeDateArrayComponent, ParameterTypeDateComponent, ParameterTypeNumberArrayComponent, ParameterTypeNumberComponent, ParameterTypePasswordComponent, ParameterTypeTextArrayComponent, ParameterTypeTextComponent, PropertyChangeBus, PropertyEditorComponent, PropertyGridComponent, ROOT_DEPS, RowRefDirective, RowRefHost, RowRegistry, SearchResultsComponent, SectionContext, SelectionContext, SelectionService, SelectionStyler, SelectionType, SelectorComponent, SelectorDataSource, SelectorMapperServiceBase, SelectorRegistry, SortableColumnComponent, SortingState, StandardPageLayoutComponent, TRACK_RECORD_MODAL_COMPONENT, Tab, TabHeadingDirective, TabTranscludeDirective, Tabset, TestService, TextViewerComponent, TimePickerComponent, ToDefinePipe, ToFixedSizeIntegerPipe, TooltipDirective, TrackRecordModalComponent, TreeComponent, ValidateOnEnterDirective, ValidationErrorComponent, ValidationModalComponent, ValidationService, ViewFilterNoValueOperators, ViewModeDirective, ViewModelLoaderService, WizardComponent, WizardStepComponent, additionalQueryOf, downloadFile, filterFromId, formatDecimal, layoutKeyToString, normalisedOrder, normalizeViewFilter, parseDecimal, parseViewQuery, toAdditionalQuery, toViewQuery };
+var BaseFormContext = class {
+	constructor(fb, validationService) {
+		this.fb = fb;
+		this.validationService = validationService;
+		this.fields = [];
+		this.trackByField = (_, d) => d.PropertyName;
+	}
+	initPropertyForm(withValidators = false) {
+		if (!this.fields) return;
+		if (!this.form) this.form = new FormGroup({});
+		else this.form.reset();
+		this.fields.forEach((field) => {
+			const validators = withValidators ? this.validationService.getFieldValidators(field) : [];
+			const controlValue = this.entity?.hasOwnProperty(field.PropertyName) && this.entity[field.PropertyName] !== void 0 ? this.entity[field.PropertyName] : null;
+			if (!this.form.contains(field.PropertyName)) this.form.addControl(field.PropertyName, new FormControl(controlValue, validators));
+		});
+		if (this.entity) this.form.patchValue(this.entity);
+	}
+	triggerField(desc) {
+		if (desc.IsConditioning) this.handleConditional(desc);
+		if (desc.CascadeDependency) this.handleCascade(desc);
+	}
+	setupCascade(descriptors) {
+		descriptors.forEach((desc) => {
+			if (!desc.CascadeDependency || !desc.CascadeDependencyProperty) return;
+			this.form.get(desc.PropertyName)?.valueChanges.subscribe(() => this.handleCascade(desc));
+		});
+	}
+	setupConditional(descriptors) {
+		descriptors.forEach((desc) => {
+			if (!desc.IsConditioning) return;
+			this.form.get(desc.PropertyName)?.valueChanges.subscribe(() => this.handleConditional(desc));
+		});
+	}
+	changes$() {
+		return this.form.valueChanges.pipe(debounceTime$1(50), distinctUntilChanged$1(), shareReplay$1(1));
+	}
+	patch(values) {
+		this.form.patchValue(values, { emitEvent: true });
+	}
+	serialize() {
+		return this.form.getRawValue();
+	}
+	handleCascade(field) {
+		const selectedValue = field.FilterType === FilterType.Integer ? Number(this.entity[field.PropertyName]) : this.entity[field.PropertyName];
+		const props = field.CascadeDependencyProperty.split(";");
+		const dependentFields = this.fields.filter((f) => props.includes(f.PropertyName));
+		for (const dependingField of dependentFields) {
+			dependingField.CurrentFilters = dependingField.CurrentFilters || {};
+			if (Utilities.IsNil(selectedValue) || Utilities.isEmptyString(selectedValue)) delete dependingField.CurrentFilters[field.PropertyName];
+			else dependingField.CurrentFilters[field.PropertyName] = true;
+			this.resetFieldData(dependingField);
+			if (field.FilterDistinct) dependingField.Data = [...new Map(dependingField.Data.map((item) => [item[dependingField.PropertyName], item])).values()];
+		}
+	}
+	handleConditional(field) {
+		const allFields = this.fields.filter((f) => f.ConditioningField === field.PropertyName);
+		const conditioningValue = this.form.get(field.PropertyName)?.value;
+		for (let conditionedField of allFields) {
+			const conditionMet = Utilities.IsNil(conditioningValue) || conditionedField.ConditioningFieldValue.includes(conditioningValue) || conditionedField.BoolConditioningFieldValue === conditioningValue;
+			if (conditionedField.ConditionalResult === ConditionalResults.Hide) conditionedField.IsHidden = conditionMet;
+			if (conditionedField.ConditionalResult === ConditionalResults.ReadOnly) conditionedField.ReadOnly = conditionMet;
+			const control = this.form.get(conditionedField.PropertyName);
+			if (control) {
+				if (conditionedField.IsHidden) control.clearValidators();
+				else {
+					const validators = this.validationService.getValidators(conditionedField.FieldValidators);
+					this.updateControlValidators(control, validators);
+				}
+			}
+		}
+	}
+	resetFieldData(field) {
+		if (Utilities.IsNil(field.OriginalData)) return;
+		if (field.FilterType === FilterType.Integer) field.Data = field.OriginalData.filter((p) => p[field.ValueMember] === -1 || Object.keys(field.CurrentFilters).every((name) => p[name] === this.entity[name]));
+		else field.Data = field.OriginalData.filter((p) => Object.keys(field.CurrentFilters).every((name) => p[name] === this.entity[name]));
+	}
+	updateControlValidators(ctrl, validators) {
+		ctrl.setValidators(validators);
+		ctrl.updateValueAndValidity({ emitEvent: false });
+	}
+};
+var SortingState = class {
+	constructor(entityKey) {
+		this.entityKey = entityKey;
+		this.property$ = new BehaviorSubject(" ");
+		this.direction$ = new BehaviorSubject("desc");
+	}
+	get changes$() {
+		return this.property$.pipe(distinctUntilChanged(), (source) => new Observable((observer) => {
+			const sub1 = this.property$.subscribe(() => observer.next(this.snapshot()));
+			const sub2 = this.direction$.subscribe(() => observer.next(this.snapshot()));
+			return () => {
+				sub1.unsubscribe();
+				sub2.unsubscribe();
+			};
+		}));
+	}
+	snapshot() {
+		return {
+			property: this.property$.value,
+			direction: this.direction$.value
+		};
+	}
+	updateProperty(property) {
+		if (this.property$.value === property) this.toggleDirection();
+		else {
+			this.property$.next(property);
+			this.direction$.next("asc");
+		}
+	}
+	toggleDirection() {
+		const next = this.direction$.value === "asc" ? "desc" : "asc";
+		this.direction$.next(next);
+	}
+	reset() {
+		this.property$.next("");
+		this.direction$.next("asc");
+	}
+};
+export { Action, ActionContext, ActionDefinition, ActionHandlerContext, ActionPanelComponent, ActionService, ActionsComponent, ActionsContentComponent, AddclassDirective, AlertDialog, AlertMessage, AlertService, AppConfigService, ApplicationService, BaseArrayParameterTypeComponent, BaseComponent, BaseEditorComponent, BaseEntityEditor, BaseFormContext, BaseItemListComponent, BaseParameterTypeComponent, BaseShortcutsDirective, BreadcrumbComponent, CalendarComponent, CanDeactivateGuard, CardListComponent, CellRendererComponent, ChangeDetectionContext, ChangeUtilities, CollapseDirective, ConfirmModalComponent, ConfirmOptions, ContextChoice, CoreUxModule, DataContext, DataGridComponent, DataGridStyleContext, DataListComponent, DatagridCellComponent, DatagridCustomComponent, DatePickerDirective, DecimalInputDirective, DefaultDataGridStyleContext, DefaultFilterComponent, DefaultLayoutComponent, DflatBaseComponent, DflatBaseFilterComponent, DflatModalFrameComponent, DflatModalOptions, DflatModalRef, DflatModalService, DialogComponent, DialogComponentParameter, DialogType, DraggableDirective, DroppableDirective, DynamicFieldComponent, DynamicFilterComponent, DynamicFilterExtraComponent, DynamicFilterPanel, DynamicFormComponent, EXTENDED_ACTION_COMPONENT, EditModeDirective, EditorContext, EditorTabComponent, EditorTabSetComponent, EntityConfigContext, EntityFacade, EntityFacadeRegistryService, EntitySections, EntitySelectors, EntityUpdater, ExportDataModalComponent, ExtendedAction, ExtendedActionComponent, FacadeLoadGuard, FacadeModalService, FieldComponent, FilterContext, FilterEditorComponent, FilterFormModalComponent, FilterLifecycleGuard, FilterOperators, FilterSummaryComponent, FilterSummaryPanelComponent, FireAuthService, FocusableDirective, FormPasswordComponent, FormWrapper, GridFieldComponent, GridRowComponent, GridStylePipe, GridViewMenuComponent, HideOnThresholdDirective, IIsCancelWithWarning, ImageComponent, ImageService, InputSelectorComponent, InputSelectorOptions, InputTreeSelectorComponent, InsertionDirective, LayoutContext, LayoutHandlerDirective, LayoutService, LoginLayoutComponent, LogsComponent, MenuComponent, MenuDashboardComponent, MessageSeverity, MobileMenuComponent, ModalService, ModalStateService, NewEditorComponent, NewPaginatorComponent, OldDataPageComponent, OldLayoutHandlerDirective, OnEnterDirective, OpenNavigationMenuEvent, OrderableModalComponent, OrderableModalService, PP_SERVICE, PageLayoutComponent, PageTabRouteReuseStrategy, PageTabService, PageTabsComponent, PaginatorComponent, ParameterFieldComponent, ParameterTypeBoolArrayComponent, ParameterTypeBoolComponent, ParameterTypeDateArrayComponent, ParameterTypeDateComponent, ParameterTypeNumberArrayComponent, ParameterTypeNumberComponent, ParameterTypePasswordComponent, ParameterTypeTextArrayComponent, ParameterTypeTextComponent, PropertyChangeBus, PropertyEditorComponent, PropertyGridComponent, ROOT_DEPS, RowRefDirective, RowRefHost, RowRegistry, SearchResultsComponent, SectionContext, SelectionContext, SelectionService, SelectionStyler, SelectionType, SelectorComponent, SelectorDataSource, SelectorMapperServiceBase, SelectorRegistry, SortableColumnComponent, SortingState, StandardPageLayoutComponent, TRACK_RECORD_MODAL_COMPONENT, Tab, TabHeadingDirective, TabTranscludeDirective, Tabset, TestService, TextViewerComponent, TimePickerComponent, ToDefinePipe, ToFixedSizeIntegerPipe, TooltipDirective, TrackRecordModalComponent, TreeComponent, ValidateOnEnterDirective, ValidationErrorComponent, ValidationModalComponent, ValidationService, ViewFilterNoValueOperators, ViewModeDirective, ViewModelLoaderService, WizardComponent, WizardStepComponent, additionalQueryOf, downloadFile, filterFromId, formatDecimal, layoutKeyToString, normalisedOrder, normalizeViewFilter, parseDecimal, parseViewQuery, toAdditionalQuery, toViewQuery, viewPanelOf, withoutViewPanel };
 
 //# sourceMappingURL=dflat-core-web-core-ux.mjs.map