@provoly/hypervisor 0.0.15 → 0.0.17

package/fesm2022/provoly-hypervisor.mjs

@@ -1,22 +1,25 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, Component, Input, EventEmitter, Output, ContentChildren, forwardRef, InjectionToken, NgModule, Inject } from '@angular/core';
-import * as i2 from '@provoly/dashboard';
+import { Injectable, Pipe, Component, Input, EventEmitter, Output, ContentChildren, forwardRef, signal, computed, TemplateRef, ViewChild, InjectionToken, NgModule, Inject } from '@angular/core';
+import * as i3 from '@provoly/dashboard';
 import { DEFAULT_ICON_URL, SubscriptionnerDirective, PryI18nModule, PryCoreModule, PryIconModule, PrySelectModule, PryDatePickerModule } from '@provoly/dashboard';
 import * as i1$1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, StoreModule } from '@ngrx/store';
-import { mergeMap, of, fromEvent, map, withLatestFrom, filter, auditTime } from 'rxjs';
+import { mergeMap, of, combineLatest, map, fromEvent, withLatestFrom, filter, auditTime } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
-import * as i3 from '@provoly/dashboard/components/checkbox';
+import * as i3$1 from '@provoly/dashboard/components/checkbox';
 import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
 import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/common';
 import { NgForOf, AsyncPipe, NgStyle, DatePipe, KeyValuePipe, JsonPipe } from '@angular/common';
-import * as i2$1 from '@angular/router';
+import * as i2 from '@angular/router';
 import { RouterLink } from '@angular/router';
 import * as i10 from '@provoly/dashboard/components/sinceDate';
 import { PrySinceDateModule } from '@provoly/dashboard/components/sinceDate';
+import * as i2$1 from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
 import { map as map$1, debounceTime, mergeMap as mergeMap$1, catchError } from 'rxjs/operators';
 import * as i1$3 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
@@ -33,9 +36,11 @@ const HypEventCategory = {
     values: ['ALERT_MALFUNCTION', 'REPORT', 'OPERATOR_EVENT', 'ALERT_LIMIT', 'MANIFESTATION'],
 };
 const CATEGORIES_BY_TYPE = {
-    'OPERATOR': ['OPERATOR_EVENT', 'MANIFESTATION'],
-    'ALERT': ['ALERT_MALFUNCTION', 'ALERT_LIMIT'],
-    'REPORT': ['REPORT'],
+    values: {
+        'OPERATOR': ['OPERATOR_EVENT', 'MANIFESTATION'],
+        'ALERT': ['ALERT_MALFUNCTION', 'ALERT_LIMIT'],
+        'REPORT': ['REPORT'],
+    },
 };
 
 const EventActions = {
@@ -56,7 +61,6 @@ const EventActions = {
     statusSuccess: createAction('[Event] Close success'),
     statusFailure: createAction('[Event] Close failure', props()),
     sort: createAction('[Event] set log event sorting', props()),
-    setFilters: createAction('[Event] set filters', props()),
 };
 
 const HypervisorActions = {
@@ -126,7 +130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
 
 class IconDisplayComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: IconDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: IconDisplayComponent, selector: "hvy-icon-display", inputs: { event: "event" }, ngImport: i0, template: "<div class=\"\n        m-hvy-event-summary-item__event-icon-container\n        -hvy-{{ event.criticality.toString().toLowerCase()}}\n        -hvy-{{event.type.toString().toLowerCase()}}\n      \">\n        <span\n          class=\"m-hvy-event-summary-item__event-icon a-icon\"\n          [ngStyle]=\"{\n          'mask-image': 'url(' + (event | eventIcon | async | getSecuredImage | async) + ')',\n          '-webkit-mask-image': 'url(' + (event | eventIcon | async | getSecuredImage | async) + ')'\n          }\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        ></span>\n</div>\n", dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: EventIconPipe, name: "eventIcon" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: IconDisplayComponent, selector: "hvy-icon-display", inputs: { event: "event" }, ngImport: i0, template: "<div class=\"\n        m-hvy-event-summary-item__event-icon-container\n        -hvy-{{ event.criticality.toString().toLowerCase()}}\n        -hvy-{{event.type.toString().toLowerCase()}}\n      \">\n        <span\n          class=\"m-hvy-event-summary-item__event-icon a-icon\"\n          [ngStyle]=\"{\n          'mask-image': 'url(' + (event | eventIcon | async | getSecuredImage | async) + ')',\n          '-webkit-mask-image': 'url(' + (event | eventIcon | async | getSecuredImage | async) + ')'\n          }\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        ></span>\n</div>\n", dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: EventIconPipe, name: "eventIcon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: IconDisplayComponent, decorators: [{
             type: Component,
@@ -167,7 +171,7 @@ class StatusDisplayComponent {
         this.targetsDisplayed = this.targetStatuses.length > 0 && !this.targetsDisplayed;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: StatusDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: StatusDisplayComponent, selector: "hvy-status-display", inputs: { event: "event", modifiable: "modifiable" }, outputs: { modified: "modified" }, ngImport: i0, template: "<span class=\"a-chip -md -{{event.status}} a-chip-status\" (click)=\"toggle()\" >\n  {{ '@hvy.event.status.' + event.status | i18n }}\n  @if (targetStatuses.length > 0) {\n    <pry-icon iconSvg=\"chevron_bottom\" [width]=\"10\" [height]=\"10\"></pry-icon>\n  }\n</span>\n@if (targetsDisplayed) {\n  <div class=\"a-chip-status__target\">\n    <div class=\"a-chip-status__target__filler\"></div>\n    @for (status of targetStatuses;track status) {\n      <div class=\"a-chip-status__target__item\" (click)=\"trigger(status)\">{{ '@hvy.event.status.' + status | i18n }}</div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: StatusDisplayComponent, selector: "hvy-status-display", inputs: { event: "event", modifiable: "modifiable" }, outputs: { modified: "modified" }, ngImport: i0, template: "<span class=\"a-chip -md -{{event.status}} a-chip-status\" (click)=\"toggle()\" >\n  {{ '@hvy.event.status.' + event.status | i18n }}\n  @if (targetStatuses.length > 0) {\n    <pry-icon iconSvg=\"chevron_bottom\" [width]=\"10\" [height]=\"10\"></pry-icon>\n  }\n</span>\n@if (targetsDisplayed) {\n  <div class=\"a-chip-status__target\">\n    <div class=\"a-chip-status__target__filler\"></div>\n    @for (status of targetStatuses;track status) {\n      <div class=\"a-chip-status__target__item\" (click)=\"trigger(status)\">{{ '@hvy.event.status.' + status | i18n }}</div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: StatusDisplayComponent, decorators: [{
             type: Component,
@@ -212,6 +216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
         }], ctorParameters: () => [{ type: i1$1.Store }] });
 
 class EventDetailComponent extends SubscriptionnerDirective {
+    static { this.CARD_HEIGHT = 75; }
     set events(events) {
         this._events = events.filter(ev => !!ev);
         this.eventModifications = new Array(this._events.length);
@@ -243,13 +248,19 @@ class EventDetailComponent extends SubscriptionnerDirective {
         this.eventErrors = new EventEmitter();
         this.errors = [];
         this.canCloseSome = false;
+        this.newComentContent = '';
+        this.moveStart = 0;
+        this.moveInitialIndex = 0;
+        this.initialActionList = [];
+        this.previousOffset = 0;
     }
     get events() {
         return this._events.map((evt, idx) => ({ ...evt, ...(this.eventModifications[idx] ?? {}) }));
     }
     get procedure() {
         return this._procedure ? ({
-            ...this._procedure, ...(this.procedureModifications ?? {}),
+            ...this._procedure,
+            ...(this.procedureModifications ?? {}),
             events: this.events,
         }) : undefined;
     }
@@ -386,7 +397,7 @@ class EventDetailComponent extends SubscriptionnerDirective {
         return this.errors[idx]?.find(err => err.field === prop) ?? false;
     }
     categories(event) {
-        return CATEGORIES_BY_TYPE[event.type];
+        return CATEGORIES_BY_TYPE.values[event.type];
     }
     changeStatus($event, event) {
         this.store.dispatch(EventActions.status({ targetStatus: $event, event: event }));
@@ -399,12 +410,49 @@ class EventDetailComponent extends SubscriptionnerDirective {
             this.store.dispatch(EventActions.status({ targetStatus: 'DONE', procedure: this.procedure }));
         }
     }
+    onMouseDown($event) {
+        this.dragTarget = $event.target;
+    }
+    dragStart($event, action, index) {
+        if (this.dragTarget && this.dragTarget.style.maskImage.indexOf('six_dot') > -1) {
+            this.movingAction = action;
+            this.moveStart = $event.clientY;
+            this.moveInitialIndex = index;
+            this.initialActionList = [...this.procedure.actions];
+        }
+        else {
+            $event.preventDefault();
+        }
+    }
+    move($event) {
+        $event.preventDefault();
+        if (this.movingAction) {
+            const offsetInCards = Math.round(($event.clientY - this.moveStart) / EventDetailComponent.CARD_HEIGHT);
+            if (this.previousOffset !== offsetInCards) {
+                this.previousOffset = offsetInCards;
+                const newIndex = Math.min(Math.max(this.moveInitialIndex + offsetInCards, 0), this.initialActionList.length - 1);
+                const newTab = [...this.initialActionList];
+                const element = newTab.splice(this.moveInitialIndex, 1)[0];
+                newTab.splice(newIndex, 0, element);
+                this.procedureModifications.actions = newTab;
+            }
+        }
+    }
+    drop($event) {
+        $event.preventDefault();
+        this.move($event);
+        this.movingAction = undefined;
+        this._outputModifications();
+    }
+    allowDrop($event) {
+        $event.preventDefault();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventDetailComponent, deps: [{ token: EquipmentService }, { token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: EventDetailComponent, selector: "hvy-event-detail", inputs: { events: "events", procedure: "procedure", cancelModifications: "cancelModifications" }, outputs: { modifiedEvents: "modifiedEvents", modifiedProcedure: "modifiedProcedure", eventErrors: "eventErrors" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-events-detail\">\n  <div class=\"o-hvy-events-detail__header\">\n    <div class=\"o-hvy-events-detail__header__split\">\n      <h1>{{ '@hvy.event.detail' | i18n }}</h1>\n      <button class=\"a-btn a-btn--secondary -fix-right\" [disabled]=\"!canCloseSome\"\n              (click)=\"closeAll()\">{{ '@hvy.event.log.event.close' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-hvy-events-detail__header__split\">\n      <button class=\"a-btn a-btn--secondary\">{{ '@hvy.event.log.procedure.delete' | i18n }}</button>\n    </div>\n  </div>\n  <div class=\"o-hvy-events-detail__container\">\n    <div class=\"o-hvy-events-detail__container__scrollable\">\n      <div class=\"o-hvy-events-detail__events\">\n        @for (event of events;track event.id;let idx = $index) {\n          <div class=\"o-hvy-events-detail__events__event\">\n            <div class=\"o-hvy-events-detail__events__event__header\">\n              <pry-icon [iconSvg]=\"!opened[idx] ? 'chevron_bottom' : 'chevron_top'\" (click)=\"toggle(idx)\"></pry-icon>\n              <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n              <h2>{{ event.name }}</h2>\n              <hvy-status-display [event]=\"event\" [modifiable]=\"event.status !== 'DONE'\"\n                                  (modified)=\"changeStatus($event, event)\"></hvy-status-display>\n            </div>\n            <div class=\"o-hvy-events-detail__events__event__content\">\n              @if (!opened[idx]) {\n                <div>{{ '@hvy.event.log.event.description' | i18n }}: {{ event.description }}</div>\n                <div>{{ '@hvy.event.log.event.address' | i18n }}: {{ event.address }}</div>\n              } @else {\n                @if (access(event);as accessValue) {\n                  <h3>{{ '@hvy.event.log.event.detail' | i18n }}</h3>\n                  <table>\n                    <tbody>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.name' | i18n }}<span class=\"required\">*</span></td>\n                      <td><input type=\"text\" class=\"a-form-field\" [class.-error]=\"hasError('name', idx)\"\n                                 [value]=\"event.name\"\n                                 (change)=\"modifyEvent(idx, 'name', $event)\" [readonly]=\"accessValue.name\"></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.category' | i18n }}<span class=\"required\">*</span></td>\n                      <td>\n                        <pry-select [ngModel]=\"event.category\"\n                                    [items]=\"categories(event)\"\n                                    [class.-error]=\"hasError('category', idx)\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'category', $event)\"\n                                    i18nPrefix=\"@hvy.event.category.\" [disabled]=\"accessValue.category\"></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.criticality.name' | i18n }}<span class=\"required\">*</span></td>\n                      <td>\n                        <pry-select [ngModel]=\"event.criticality\" [items]=\"criticalities\"\n                                    [class.-error]=\"hasError('criticality', idx)\"\n                                    i18nPrefix=\"@hvy.event.criticality.\"\n                                    [disabled]=\"accessValue.criticality\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'criticality', $event)\"></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.description' | i18n }}<span class=\"required\">*</span></td>\n                      <td><textarea [ngModel]=\"event.description\" class=\"a-form-field\"\n                                    [class.-error]=\"hasError('description', idx)\"\n                                    [readonly]=\"accessValue.description\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'description', $event)\"></textarea></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.address' | i18n }}</td>\n                      <td><textarea [ngModel]=\"event.address\" class=\"a-form-field\"\n                                    [class.-error]=\"hasError('address', idx)\"\n                                    [readonly]=\"accessValue.address\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'address', $event)\"></textarea></td>\n                    </tr>\n                      @if (['ALERT', 'REPORT'].includes(event.type)) {\n                        <tr>\n                          <td>{{ '@hvy.event.source' | i18n }}</td>\n                          <td><input type=\"text\" class=\"a-form-field\" [value]=\"event.externalSourceRef ?? ''\"\n                                     [class.-error]=\"hasError('source', idx)\"\n                                     [readonly]=\"accessValue.source\" (change)=\"modifyEvent(idx, 'source', $event)\"></td>\n                        </tr>\n                      }\n                    <tr>\n                      <td>{{ '@hvy.event.equipment' | i18n }}</td>\n                      <td>\n                        <input type=\"text\" class=\"a-form-field\"\n                               [value]=\"event.equipment?.name ?? ''\"\n                               [class.-error]=\"hasError('equipment', idx)\"\n                               [readonly]=\"accessValue.eqName\"\n                               (change)=\"changeEquipment(idx, $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.equipmentEntity' | i18n }}</td>\n                      <td><input type=\"text\" class=\"a-form-field\" [value]=\"event.equipment?.entity ?? ''\"\n                                 readonly></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.domain.name' | i18n }}</td>\n                      <td>\n                        <pry-select [items]=\"DOMAINS\" [ngModel]=\"event.domain\" i18nPrefix=\"@hvy.event.domain.\"\n                                    [class.-error]=\"hasError('domain', idx)\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'domain', $event)\"\n                                    [disabled]=\"accessValue.domain\"\n                        ></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>\n                        {{ '@hvy.event.startDate' | i18n }}\n                        @if (event.category === 'MANIFESTATION') {\n                          <span class=\"required\">*</span>\n                        }\n                      </td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.startDate | forDateTimeLocal\"\n                               [class.-error]=\"hasError('startDate', idx)\"\n                               [readonly]=\"accessValue.startDate\" (change)=\"modifyEvent(idx, 'startDate', $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>\n                        {{ '@hvy.event.endDate' | i18n }}\n                        @if (event.category === 'MANIFESTATION') {\n                          <span class=\"required\">*</span>\n                        }\n                      </td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.endDate | forDateTimeLocal\"\n                               [class.-error]=\"hasError('endDate', idx)\"\n                               [readonly]=\"accessValue.endDate\" (change)=\"modifyEvent(idx, 'endDate', $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.creationDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.creationDate | forDateTimeLocal\"\n                               readonly>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.lastModificationDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.lastModificationDate | forDateTimeLocal\" readonly>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.closeDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\" [value]=\"event.closeDate | forDateTimeLocal\"\n                               readonly>\n                      </td>\n                    </tr>\n                    </tbody>\n                  </table>\n                  <div class=\"o-hvy-events-detail__events__event__content__comments\">\n                    <h3>{{ '@hvy.event.log.event.comments.name' | i18n }}</h3>\n                    <textarea [placeholder]=\"('@hvy.event.log.event.comments.placeholder' | i18n) + '...'\"></textarea>\n                    <div class=\"o-hvy-events-detail__events__event__content__comments__button\">\n                      <button class=\"a-btn a-btn--primary\">{{ '@hvy.action.send' | i18n }}</button>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"o-hvy-events-detail__procedure\">\n        @if (procedure) {\n          <div class=\"o-hvy-events-detail__procedure__header\">\n            <h2>{{ '@hvy.event.log.procedure.name' | i18n }}</h2>\n          </div>\n          <div>\n            <p>{{ procedure.name }}</p>\n          </div>\n          <div class=\"o-hvy-events-detail__procedure__progress\">\n            <p>{{ '@hvy.event.log.procedure.progress' | i18n }}</p>\n            <hvy-progress-display [progress]=\"procedure.progress\"></hvy-progress-display>\n          </div>\n          <div class=\"o-hvy-events-detail__procedure__actions\">\n            @for (action of procedure.actions;track action.id) {\n              <div class=\"o-hvy-events-detail__procedure__actions__action\">\n                <pry-icon iconSvg=\"six_dot\"></pry-icon>\n                <pry-checkbox [ngModel]=\"action.status === 'DONE'\"></pry-checkbox>\n                <div>{{ action.name }}</div>\n                <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n              </div>\n            } @empty {\n              <div>\n                {{ '@hvy.event.log.procedure.noAction' | i18n }}\n              </div>\n            }\n          </div>\n          <div>\n            <button class=\"a-btn a-btn--primary\">\n              <pry-icon iconSvg=\"add\"></pry-icon>\n              {{ '@hvy.event.log.procedure.addAction' | i18n }}\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "component", type: IconDisplayComponent, selector: "hvy-icon-display", inputs: ["event"] }, { kind: "component", type: StatusDisplayComponent, selector: "hvy-status-display", inputs: ["event", "modifiable"], outputs: ["modified"] }, { kind: "component", type: ProgressDisplayComponent, selector: "hvy-progress-display", inputs: ["progress"] }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: ForDatetimeLocalPipe, name: "forDateTimeLocal" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: EventDetailComponent, selector: "hvy-event-detail", inputs: { events: "events", procedure: "procedure", cancelModifications: "cancelModifications" }, outputs: { modifiedEvents: "modifiedEvents", modifiedProcedure: "modifiedProcedure", eventErrors: "eventErrors" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-events-detail\">\n  <div class=\"o-hvy-events-detail__header\">\n    <div class=\"o-hvy-events-detail__header__split\">\n      <h1>{{ '@hvy.event.detail' | i18n }}</h1>\n      @if (events.length > 1) {\n        <button class=\"a-btn a-btn--secondary -fix-right\" [disabled]=\"!canCloseSome\"\n                (click)=\"closeAll()\">{{ '@hvy.event.log.event.close' | i18n }}\n        </button>\n      }\n    </div>\n    <div class=\"o-hvy-events-detail__header__split\">\n      <button class=\"a-btn a-btn--secondary\">{{ '@hvy.event.log.procedure.delete' | i18n }}</button>\n    </div>\n  </div>\n  <div class=\"o-hvy-events-detail__container\">\n    <div class=\"o-hvy-events-detail__container__scrollable\">\n      <div class=\"o-hvy-events-detail__events\">\n        @for (event of events;track event.id;let idx = $index) {\n          <div class=\"o-hvy-events-detail__events__event\">\n            <div class=\"o-hvy-events-detail__events__event__header\">\n              <pry-icon [iconSvg]=\"!opened[idx] ? 'chevron_bottom' : 'chevron_top'\" (click)=\"toggle(idx)\"></pry-icon>\n              <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n              <h2>{{ event.name }}</h2>\n              <hvy-status-display [event]=\"event\" [modifiable]=\"event.status !== 'DONE'\"\n                                  (modified)=\"changeStatus($event, event)\"></hvy-status-display>\n            </div>\n            <div class=\"o-hvy-events-detail__events__event__content\">\n              @if (!opened[idx]) {\n                <div>{{ '@hvy.event.log.event.description' | i18n }}: {{ event.description }}</div>\n                <div>{{ '@hvy.event.log.event.address' | i18n }}: {{ event.address }}</div>\n              } @else {\n                @if (access(event);as accessValue) {\n                  <h3>{{ '@hvy.event.log.event.detail' | i18n }}</h3>\n                  <table>\n                    <tbody>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.name' | i18n }}<span class=\"required\">*</span></td>\n                      <td><input type=\"text\" class=\"a-form-field\" [class.-error]=\"hasError('name', idx)\"\n                                 [value]=\"event.name\"\n                                 (change)=\"modifyEvent(idx, 'name', $event)\" [readonly]=\"accessValue.name\"></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.category' | i18n }}<span class=\"required\">*</span></td>\n                      <td>\n                        <pry-select [ngModel]=\"event.category\"\n                                    [items]=\"categories(event)\"\n                                    [class.-error]=\"hasError('category', idx)\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'category', $event)\"\n                                    i18nPrefix=\"@hvy.event.category.\" [disabled]=\"accessValue.category\"></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.criticality.name' | i18n }}<span class=\"required\">*</span></td>\n                      <td>\n                        <pry-select [ngModel]=\"event.criticality\" [items]=\"criticalities\"\n                                    [class.-error]=\"hasError('criticality', idx)\"\n                                    i18nPrefix=\"@hvy.event.criticality.\"\n                                    [disabled]=\"accessValue.criticality\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'criticality', $event)\"></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.description' | i18n }}<span class=\"required\">*</span></td>\n                      <td><textarea [ngModel]=\"event.description\" class=\"a-form-field\"\n                                    [class.-error]=\"hasError('description', idx)\"\n                                    [readonly]=\"accessValue.description\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'description', $event)\"></textarea></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.address' | i18n }}</td>\n                      <td><textarea [ngModel]=\"event.address\" class=\"a-form-field\"\n                                    [class.-error]=\"hasError('address', idx)\"\n                                    [readonly]=\"accessValue.address\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'address', $event)\"></textarea></td>\n                    </tr>\n                      @if (['ALERT', 'REPORT'].includes(event.type)) {\n                        <tr>\n                          <td>{{ '@hvy.event.source' | i18n }}</td>\n                          <td><input type=\"text\" class=\"a-form-field\" [value]=\"event.externalSourceRef ?? ''\"\n                                     [class.-error]=\"hasError('source', idx)\"\n                                     [readonly]=\"accessValue.source\" (change)=\"modifyEvent(idx, 'source', $event)\"></td>\n                        </tr>\n                      }\n                    <tr>\n                      <td>{{ '@hvy.event.equipment' | i18n }}</td>\n                      <td>\n                        <input type=\"text\" class=\"a-form-field\"\n                               [value]=\"event.equipment?.name ?? ''\"\n                               [class.-error]=\"hasError('equipment', idx)\"\n                               [readonly]=\"accessValue.eqName\"\n                               (change)=\"changeEquipment(idx, $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.equipmentEntity' | i18n }}</td>\n                      <td><input type=\"text\" class=\"a-form-field\" [value]=\"event.equipment?.entity ?? ''\"\n                                 readonly></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.domain.name' | i18n }}</td>\n                      <td>\n                        <pry-select [items]=\"DOMAINS\" [ngModel]=\"event.domain\" i18nPrefix=\"@hvy.event.domain.\"\n                                    [class.-error]=\"hasError('domain', idx)\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'domain', $event)\"\n                                    [disabled]=\"accessValue.domain\"\n                        ></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>\n                        {{ '@hvy.event.startDate' | i18n }}\n                        @if (event.category === 'MANIFESTATION') {\n                          <span class=\"required\">*</span>\n                        }\n                      </td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.startDate | forDateTimeLocal\"\n                               [class.-error]=\"hasError('startDate', idx)\"\n                               [readonly]=\"accessValue.startDate\" (change)=\"modifyEvent(idx, 'startDate', $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>\n                        {{ '@hvy.event.endDate' | i18n }}\n                        @if (event.category === 'MANIFESTATION') {\n                          <span class=\"required\">*</span>\n                        }\n                      </td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.endDate | forDateTimeLocal\"\n                               [class.-error]=\"hasError('endDate', idx)\"\n                               [readonly]=\"accessValue.endDate\" (change)=\"modifyEvent(idx, 'endDate', $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.creationDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.creationDate | forDateTimeLocal\"\n                               readonly>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.lastModificationDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.lastModificationDate | forDateTimeLocal\" readonly>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.closeDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\" [value]=\"event.closeDate | forDateTimeLocal\"\n                               readonly>\n                      </td>\n                    </tr>\n                    </tbody>\n                  </table>\n                  <div class=\"o-hvy-events-detail__events__event__content__comments\">\n                    <h3>{{ '@hvy.event.log.event.comments.name' | i18n }}</h3>\n                    <textarea [placeholder]=\"('@hvy.event.log.event.comments.placeholder' | i18n) + '...'\"\n                              [(ngModel)]=\"newComentContent\"></textarea>\n                    <div class=\"o-hvy-events-detail__events__event__content__comments__button\">\n                      <button class=\"a-btn a-btn--primary\"\n                              [disabled]=\"newComentContent.length === 0\">{{ '@hvy.action.comment' | i18n }}\n                      </button>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"o-hvy-events-detail__procedure\">\n        <div class=\"o-hvy-events-detail__procedure__header\">\n          <h2>{{ '@hvy.event.log.procedure.name' | i18n }}</h2>\n        </div>\n        @if (procedure) {\n          <div>\n            <p>{{ procedure.name }}</p>\n          </div>\n          <div class=\"o-hvy-events-detail__procedure__progress\">\n            <p>{{ '@hvy.event.log.procedure.progress' | i18n }}</p>\n            <hvy-progress-display [progress]=\"procedure.progress\"></hvy-progress-display>\n          </div>\n          <div class=\"o-hvy-events-detail__procedure__actions\" (drag)=\"move($event)\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n            @for (action of procedure.actions;track action.id;let idx = $index) {\n              <div class=\"o-hvy-events-detail__procedure__actions__action\" [draggable]=\"true\" (dragstart)=\"dragStart($event, action, idx)\" (mousedown)=\"onMouseDown($event)\">\n                <pry-icon iconSvg=\"six_dot\" #handle></pry-icon>\n                <pry-checkbox [ngModel]=\"action.status === 'DONE'\"></pry-checkbox>\n                <div>{{ action.name }}</div>\n                <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n              </div>\n            } @empty {\n              <div>\n                {{ '@hvy.event.log.procedure.noAction' | i18n }}\n              </div>\n            }\n          </div>\n          <div>\n            <button class=\"a-btn a-btn--primary\">\n              <pry-icon iconSvg=\"add\"></pry-icon>\n              {{ '@hvy.event.log.procedure.addAction' | i18n }}\n            </button>\n          </div>\n        } @else {\n          <button class=\"a-btn a-btn--secondary\">\n            {{ '@chh.actions.associate' | i18n }}\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "component", type: IconDisplayComponent, selector: "hvy-icon-display", inputs: ["event"] }, { kind: "component", type: StatusDisplayComponent, selector: "hvy-status-display", inputs: ["event", "modifiable"], outputs: ["modified"] }, { kind: "component", type: ProgressDisplayComponent, selector: "hvy-progress-display", inputs: ["progress"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }, { kind: "pipe", type: ForDatetimeLocalPipe, name: "forDateTimeLocal" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hvy-event-detail', template: "<div class=\"o-hvy-events-detail\">\n  <div class=\"o-hvy-events-detail__header\">\n    <div class=\"o-hvy-events-detail__header__split\">\n      <h1>{{ '@hvy.event.detail' | i18n }}</h1>\n      <button class=\"a-btn a-btn--secondary -fix-right\" [disabled]=\"!canCloseSome\"\n              (click)=\"closeAll()\">{{ '@hvy.event.log.event.close' | i18n }}\n      </button>\n    </div>\n    <div class=\"o-hvy-events-detail__header__split\">\n      <button class=\"a-btn a-btn--secondary\">{{ '@hvy.event.log.procedure.delete' | i18n }}</button>\n    </div>\n  </div>\n  <div class=\"o-hvy-events-detail__container\">\n    <div class=\"o-hvy-events-detail__container__scrollable\">\n      <div class=\"o-hvy-events-detail__events\">\n        @for (event of events;track event.id;let idx = $index) {\n          <div class=\"o-hvy-events-detail__events__event\">\n            <div class=\"o-hvy-events-detail__events__event__header\">\n              <pry-icon [iconSvg]=\"!opened[idx] ? 'chevron_bottom' : 'chevron_top'\" (click)=\"toggle(idx)\"></pry-icon>\n              <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n              <h2>{{ event.name }}</h2>\n              <hvy-status-display [event]=\"event\" [modifiable]=\"event.status !== 'DONE'\"\n                                  (modified)=\"changeStatus($event, event)\"></hvy-status-display>\n            </div>\n            <div class=\"o-hvy-events-detail__events__event__content\">\n              @if (!opened[idx]) {\n                <div>{{ '@hvy.event.log.event.description' | i18n }}: {{ event.description }}</div>\n                <div>{{ '@hvy.event.log.event.address' | i18n }}: {{ event.address }}</div>\n              } @else {\n                @if (access(event);as accessValue) {\n                  <h3>{{ '@hvy.event.log.event.detail' | i18n }}</h3>\n                  <table>\n                    <tbody>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.name' | i18n }}<span class=\"required\">*</span></td>\n                      <td><input type=\"text\" class=\"a-form-field\" [class.-error]=\"hasError('name', idx)\"\n                                 [value]=\"event.name\"\n                                 (change)=\"modifyEvent(idx, 'name', $event)\" [readonly]=\"accessValue.name\"></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.category' | i18n }}<span class=\"required\">*</span></td>\n                      <td>\n                        <pry-select [ngModel]=\"event.category\"\n                                    [items]=\"categories(event)\"\n                                    [class.-error]=\"hasError('category', idx)\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'category', $event)\"\n                                    i18nPrefix=\"@hvy.event.category.\" [disabled]=\"accessValue.category\"></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.criticality.name' | i18n }}<span class=\"required\">*</span></td>\n                      <td>\n                        <pry-select [ngModel]=\"event.criticality\" [items]=\"criticalities\"\n                                    [class.-error]=\"hasError('criticality', idx)\"\n                                    i18nPrefix=\"@hvy.event.criticality.\"\n                                    [disabled]=\"accessValue.criticality\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'criticality', $event)\"></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.description' | i18n }}<span class=\"required\">*</span></td>\n                      <td><textarea [ngModel]=\"event.description\" class=\"a-form-field\"\n                                    [class.-error]=\"hasError('description', idx)\"\n                                    [readonly]=\"accessValue.description\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'description', $event)\"></textarea></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.address' | i18n }}</td>\n                      <td><textarea [ngModel]=\"event.address\" class=\"a-form-field\"\n                                    [class.-error]=\"hasError('address', idx)\"\n                                    [readonly]=\"accessValue.address\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'address', $event)\"></textarea></td>\n                    </tr>\n                      @if (['ALERT', 'REPORT'].includes(event.type)) {\n                        <tr>\n                          <td>{{ '@hvy.event.source' | i18n }}</td>\n                          <td><input type=\"text\" class=\"a-form-field\" [value]=\"event.externalSourceRef ?? ''\"\n                                     [class.-error]=\"hasError('source', idx)\"\n                                     [readonly]=\"accessValue.source\" (change)=\"modifyEvent(idx, 'source', $event)\"></td>\n                        </tr>\n                      }\n                    <tr>\n                      <td>{{ '@hvy.event.equipment' | i18n }}</td>\n                      <td>\n                        <input type=\"text\" class=\"a-form-field\"\n                               [value]=\"event.equipment?.name ?? ''\"\n                               [class.-error]=\"hasError('equipment', idx)\"\n                               [readonly]=\"accessValue.eqName\"\n                               (change)=\"changeEquipment(idx, $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.equipmentEntity' | i18n }}</td>\n                      <td><input type=\"text\" class=\"a-form-field\" [value]=\"event.equipment?.entity ?? ''\"\n                                 readonly></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.domain.name' | i18n }}</td>\n                      <td>\n                        <pry-select [items]=\"DOMAINS\" [ngModel]=\"event.domain\" i18nPrefix=\"@hvy.event.domain.\"\n                                    [class.-error]=\"hasError('domain', idx)\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'domain', $event)\"\n                                    [disabled]=\"accessValue.domain\"\n                        ></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>\n                        {{ '@hvy.event.startDate' | i18n }}\n                        @if (event.category === 'MANIFESTATION') {\n                          <span class=\"required\">*</span>\n                        }\n                      </td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.startDate | forDateTimeLocal\"\n                               [class.-error]=\"hasError('startDate', idx)\"\n                               [readonly]=\"accessValue.startDate\" (change)=\"modifyEvent(idx, 'startDate', $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>\n                        {{ '@hvy.event.endDate' | i18n }}\n                        @if (event.category === 'MANIFESTATION') {\n                          <span class=\"required\">*</span>\n                        }\n                      </td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.endDate | forDateTimeLocal\"\n                               [class.-error]=\"hasError('endDate', idx)\"\n                               [readonly]=\"accessValue.endDate\" (change)=\"modifyEvent(idx, 'endDate', $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.creationDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.creationDate | forDateTimeLocal\"\n                               readonly>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.lastModificationDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.lastModificationDate | forDateTimeLocal\" readonly>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.closeDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\" [value]=\"event.closeDate | forDateTimeLocal\"\n                               readonly>\n                      </td>\n                    </tr>\n                    </tbody>\n                  </table>\n                  <div class=\"o-hvy-events-detail__events__event__content__comments\">\n                    <h3>{{ '@hvy.event.log.event.comments.name' | i18n }}</h3>\n                    <textarea [placeholder]=\"('@hvy.event.log.event.comments.placeholder' | i18n) + '...'\"></textarea>\n                    <div class=\"o-hvy-events-detail__events__event__content__comments__button\">\n                      <button class=\"a-btn a-btn--primary\">{{ '@hvy.action.send' | i18n }}</button>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"o-hvy-events-detail__procedure\">\n        @if (procedure) {\n          <div class=\"o-hvy-events-detail__procedure__header\">\n            <h2>{{ '@hvy.event.log.procedure.name' | i18n }}</h2>\n          </div>\n          <div>\n            <p>{{ procedure.name }}</p>\n          </div>\n          <div class=\"o-hvy-events-detail__procedure__progress\">\n            <p>{{ '@hvy.event.log.procedure.progress' | i18n }}</p>\n            <hvy-progress-display [progress]=\"procedure.progress\"></hvy-progress-display>\n          </div>\n          <div class=\"o-hvy-events-detail__procedure__actions\">\n            @for (action of procedure.actions;track action.id) {\n              <div class=\"o-hvy-events-detail__procedure__actions__action\">\n                <pry-icon iconSvg=\"six_dot\"></pry-icon>\n                <pry-checkbox [ngModel]=\"action.status === 'DONE'\"></pry-checkbox>\n                <div>{{ action.name }}</div>\n                <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n              </div>\n            } @empty {\n              <div>\n                {{ '@hvy.event.log.procedure.noAction' | i18n }}\n              </div>\n            }\n          </div>\n          <div>\n            <button class=\"a-btn a-btn--primary\">\n              <pry-icon iconSvg=\"add\"></pry-icon>\n              {{ '@hvy.event.log.procedure.addAction' | i18n }}\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'hvy-event-detail', template: "<div class=\"o-hvy-events-detail\">\n  <div class=\"o-hvy-events-detail__header\">\n    <div class=\"o-hvy-events-detail__header__split\">\n      <h1>{{ '@hvy.event.detail' | i18n }}</h1>\n      @if (events.length > 1) {\n        <button class=\"a-btn a-btn--secondary -fix-right\" [disabled]=\"!canCloseSome\"\n                (click)=\"closeAll()\">{{ '@hvy.event.log.event.close' | i18n }}\n        </button>\n      }\n    </div>\n    <div class=\"o-hvy-events-detail__header__split\">\n      <button class=\"a-btn a-btn--secondary\">{{ '@hvy.event.log.procedure.delete' | i18n }}</button>\n    </div>\n  </div>\n  <div class=\"o-hvy-events-detail__container\">\n    <div class=\"o-hvy-events-detail__container__scrollable\">\n      <div class=\"o-hvy-events-detail__events\">\n        @for (event of events;track event.id;let idx = $index) {\n          <div class=\"o-hvy-events-detail__events__event\">\n            <div class=\"o-hvy-events-detail__events__event__header\">\n              <pry-icon [iconSvg]=\"!opened[idx] ? 'chevron_bottom' : 'chevron_top'\" (click)=\"toggle(idx)\"></pry-icon>\n              <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n              <h2>{{ event.name }}</h2>\n              <hvy-status-display [event]=\"event\" [modifiable]=\"event.status !== 'DONE'\"\n                                  (modified)=\"changeStatus($event, event)\"></hvy-status-display>\n            </div>\n            <div class=\"o-hvy-events-detail__events__event__content\">\n              @if (!opened[idx]) {\n                <div>{{ '@hvy.event.log.event.description' | i18n }}: {{ event.description }}</div>\n                <div>{{ '@hvy.event.log.event.address' | i18n }}: {{ event.address }}</div>\n              } @else {\n                @if (access(event);as accessValue) {\n                  <h3>{{ '@hvy.event.log.event.detail' | i18n }}</h3>\n                  <table>\n                    <tbody>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.name' | i18n }}<span class=\"required\">*</span></td>\n                      <td><input type=\"text\" class=\"a-form-field\" [class.-error]=\"hasError('name', idx)\"\n                                 [value]=\"event.name\"\n                                 (change)=\"modifyEvent(idx, 'name', $event)\" [readonly]=\"accessValue.name\"></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.category' | i18n }}<span class=\"required\">*</span></td>\n                      <td>\n                        <pry-select [ngModel]=\"event.category\"\n                                    [items]=\"categories(event)\"\n                                    [class.-error]=\"hasError('category', idx)\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'category', $event)\"\n                                    i18nPrefix=\"@hvy.event.category.\" [disabled]=\"accessValue.category\"></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.criticality.name' | i18n }}<span class=\"required\">*</span></td>\n                      <td>\n                        <pry-select [ngModel]=\"event.criticality\" [items]=\"criticalities\"\n                                    [class.-error]=\"hasError('criticality', idx)\"\n                                    i18nPrefix=\"@hvy.event.criticality.\"\n                                    [disabled]=\"accessValue.criticality\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'criticality', $event)\"></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.description' | i18n }}<span class=\"required\">*</span></td>\n                      <td><textarea [ngModel]=\"event.description\" class=\"a-form-field\"\n                                    [class.-error]=\"hasError('description', idx)\"\n                                    [readonly]=\"accessValue.description\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'description', $event)\"></textarea></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.log.event.address' | i18n }}</td>\n                      <td><textarea [ngModel]=\"event.address\" class=\"a-form-field\"\n                                    [class.-error]=\"hasError('address', idx)\"\n                                    [readonly]=\"accessValue.address\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'address', $event)\"></textarea></td>\n                    </tr>\n                      @if (['ALERT', 'REPORT'].includes(event.type)) {\n                        <tr>\n                          <td>{{ '@hvy.event.source' | i18n }}</td>\n                          <td><input type=\"text\" class=\"a-form-field\" [value]=\"event.externalSourceRef ?? ''\"\n                                     [class.-error]=\"hasError('source', idx)\"\n                                     [readonly]=\"accessValue.source\" (change)=\"modifyEvent(idx, 'source', $event)\"></td>\n                        </tr>\n                      }\n                    <tr>\n                      <td>{{ '@hvy.event.equipment' | i18n }}</td>\n                      <td>\n                        <input type=\"text\" class=\"a-form-field\"\n                               [value]=\"event.equipment?.name ?? ''\"\n                               [class.-error]=\"hasError('equipment', idx)\"\n                               [readonly]=\"accessValue.eqName\"\n                               (change)=\"changeEquipment(idx, $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.equipmentEntity' | i18n }}</td>\n                      <td><input type=\"text\" class=\"a-form-field\" [value]=\"event.equipment?.entity ?? ''\"\n                                 readonly></td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.domain.name' | i18n }}</td>\n                      <td>\n                        <pry-select [items]=\"DOMAINS\" [ngModel]=\"event.domain\" i18nPrefix=\"@hvy.event.domain.\"\n                                    [class.-error]=\"hasError('domain', idx)\"\n                                    (ngModelChange)=\"modifyEvent(idx, 'domain', $event)\"\n                                    [disabled]=\"accessValue.domain\"\n                        ></pry-select>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>\n                        {{ '@hvy.event.startDate' | i18n }}\n                        @if (event.category === 'MANIFESTATION') {\n                          <span class=\"required\">*</span>\n                        }\n                      </td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.startDate | forDateTimeLocal\"\n                               [class.-error]=\"hasError('startDate', idx)\"\n                               [readonly]=\"accessValue.startDate\" (change)=\"modifyEvent(idx, 'startDate', $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>\n                        {{ '@hvy.event.endDate' | i18n }}\n                        @if (event.category === 'MANIFESTATION') {\n                          <span class=\"required\">*</span>\n                        }\n                      </td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.endDate | forDateTimeLocal\"\n                               [class.-error]=\"hasError('endDate', idx)\"\n                               [readonly]=\"accessValue.endDate\" (change)=\"modifyEvent(idx, 'endDate', $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.creationDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.creationDate | forDateTimeLocal\"\n                               readonly>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.lastModificationDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\"\n                               [value]=\"event.lastModificationDate | forDateTimeLocal\" readonly>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.closeDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\" [value]=\"event.closeDate | forDateTimeLocal\"\n                               readonly>\n                      </td>\n                    </tr>\n                    </tbody>\n                  </table>\n                  <div class=\"o-hvy-events-detail__events__event__content__comments\">\n                    <h3>{{ '@hvy.event.log.event.comments.name' | i18n }}</h3>\n                    <textarea [placeholder]=\"('@hvy.event.log.event.comments.placeholder' | i18n) + '...'\"\n                              [(ngModel)]=\"newComentContent\"></textarea>\n                    <div class=\"o-hvy-events-detail__events__event__content__comments__button\">\n                      <button class=\"a-btn a-btn--primary\"\n                              [disabled]=\"newComentContent.length === 0\">{{ '@hvy.action.comment' | i18n }}\n                      </button>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"o-hvy-events-detail__procedure\">\n        <div class=\"o-hvy-events-detail__procedure__header\">\n          <h2>{{ '@hvy.event.log.procedure.name' | i18n }}</h2>\n        </div>\n        @if (procedure) {\n          <div>\n            <p>{{ procedure.name }}</p>\n          </div>\n          <div class=\"o-hvy-events-detail__procedure__progress\">\n            <p>{{ '@hvy.event.log.procedure.progress' | i18n }}</p>\n            <hvy-progress-display [progress]=\"procedure.progress\"></hvy-progress-display>\n          </div>\n          <div class=\"o-hvy-events-detail__procedure__actions\" (drag)=\"move($event)\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n            @for (action of procedure.actions;track action.id;let idx = $index) {\n              <div class=\"o-hvy-events-detail__procedure__actions__action\" [draggable]=\"true\" (dragstart)=\"dragStart($event, action, idx)\" (mousedown)=\"onMouseDown($event)\">\n                <pry-icon iconSvg=\"six_dot\" #handle></pry-icon>\n                <pry-checkbox [ngModel]=\"action.status === 'DONE'\"></pry-checkbox>\n                <div>{{ action.name }}</div>\n                <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n              </div>\n            } @empty {\n              <div>\n                {{ '@hvy.event.log.procedure.noAction' | i18n }}\n              </div>\n            }\n          </div>\n          <div>\n            <button class=\"a-btn a-btn--primary\">\n              <pry-icon iconSvg=\"add\"></pry-icon>\n              {{ '@hvy.event.log.procedure.addAction' | i18n }}\n            </button>\n          </div>\n        } @else {\n          <button class=\"a-btn a-btn--secondary\">\n            {{ '@chh.actions.associate' | i18n }}\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: EquipmentService }, { type: i1$1.Store }], propDecorators: { modifiedEvents: [{
                 type: Output
             }], modifiedProcedure: [{
@@ -442,9 +490,6 @@ const internalReducer$1 = createReducer(eventInitialState, on(EventActions.load,
     ...state,
     loading: false,
     events: [],
-})), on(EventActions.filter, (state, { filters }) => ({
-    ...state,
-    filters,
 })), on(EventActions.select, (state, { ids, cumulative }) => ({
     ...state,
     selectedIds: !cumulative ? ids : [...state.selectedIds, ...ids].reduce((p, c) => p.indexOf(c) === -1 ? [...p, c] : p.filter(p1 => p1 !== c), []),
@@ -459,6 +504,11 @@ const internalReducer$1 = createReducer(eventInitialState, on(EventActions.load,
     events: [],
     noMoreEvents: false,
     sort: { field, order },
+})), on(EventActions.filter, (state, { filters }) => ({
+    ...state,
+    events: [],
+    noMoreEvents: false,
+    filters: filters,
 })));
 function eventReducer(state, action) {
     return internalReducer$1(state, action);
@@ -497,7 +547,7 @@ class ColumnOrderComponent extends SubscriptionnerDirective {
         return this.field === this.sortValue?.field && order === this.sortValue.order;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ColumnOrderComponent, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ColumnOrderComponent, selector: "hvy-column-order", inputs: { field: "field" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-column-order\">\n  <div>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"o-hvy-column-order__chevrons\">\n    <pry-icon iconSvg=\"caret_top\" (click)=\"sort('ASC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('ASC')\"></pry-icon>\n    <pry-icon iconSvg=\"caret_bottom\" (click)=\"sort('DESC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('DESC')\"></pry-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ColumnOrderComponent, selector: "hvy-column-order", inputs: { field: "field" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-column-order\">\n  <div>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"o-hvy-column-order__chevrons\">\n    <pry-icon iconSvg=\"caret_top\" (click)=\"sort('ASC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('ASC')\"></pry-icon>\n    <pry-icon iconSvg=\"caret_bottom\" (click)=\"sort('DESC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('DESC')\"></pry-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ColumnOrderComponent, decorators: [{
             type: Component,
@@ -516,9 +566,11 @@ class EventListComponent extends SubscriptionnerDirective {
         this.el = el;
         this.EVENT_LINK = EVENT_LINK;
         this._store = this.store;
+        this._inhibate = false;
         this.store.dispatch(EventActions.load({}));
         this.events$ = this.store.select(EventSelectors.events);
         this.selectedIds$ = this.store.select(EventSelectors.selectedIds);
+        this.allSelected$ = combineLatest([this.events$, this.selectedIds$]).pipe(map(([events, selectedIds]) => events.filter(ev => !selectedIds.includes(ev.id)).length === 0));
     }
     ngAfterViewInit() {
         this.subscriptions.add(fromEvent(this.el.nativeElement, 'scroll')
@@ -532,16 +584,30 @@ class EventListComponent extends SubscriptionnerDirective {
         }));
     }
     select(event, $event) {
+        this.inhibate();
         this.store.dispatch(EventActions.select({ ids: [event.id], cumulative: true }));
         $event.preventDefault();
         $event.stopPropagation();
     }
+    selectAll($event) {
+        if (!this._inhibate) {
+            this.inhibate();
+            const tmpSub = this.events$.subscribe(events => {
+                this.store.dispatch(EventActions.select({ ids: $event ? events.map(ev => ev.id) : [], cumulative: false }));
+                setTimeout(() => tmpSub.unsubscribe(), 10);
+            });
+        }
+    }
+    inhibate() {
+        this._inhibate = true;
+        setTimeout(() => this._inhibate = false, 100);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventListComponent, deps: [{ token: i1$1.Store }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: EventListComponent, selector: "hvy-event-list", usesInheritance: true, ngImport: i0, template: "<table class=\"o-hvy-events-table\">\n  <thead>\n  <tr class=\"o-hvy-events-table__header\">\n    <th></th>\n    <th>{{ '@hvy.event.criticality.name' | i18n }}</th>\n    <th>{{ '@hvy.event.name' | i18n }}</th>\n    <th>{{ '@hvy.event.category.name' | i18n }}</th>\n    <th>{{ '@hvy.event.address' | i18n }}</th>\n    <th>\n      <hvy-column-order field=\"creationDate\">{{ '@hvy.event.creationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"lastModificationDate\">{{ '@hvy.event.lastModificationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"name\">{{ '@hvy.event.status.name' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"progress\">{{ '@hvy.procedure.progress' | i18n }}</hvy-column-order>\n    </th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n    @for (event of events$|async;track event.id) {\n      <tr class=\"o-hvy-events-table__line\" (click)=\"select(event, $event)\">\n        <td class=\"o-hvy-events-table__line__cell\">\n          <pry-checkbox [ngModel]=\"(selectedIds$|async)!.includes(event.id)\"></pry-checkbox>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <div class=\"o-hvy-events-table__line__cell__name__main\">{{ event.name }}</div>\n          <div\n            class=\"o-hvy-events-table__line__cell__name__sub\">{{ event.equipment?.name ? event.equipment?.name : '' }}\n          </div>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.category.' + event.category | i18n }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.address }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.creationDate| sinceDate: { onlyLocale: true } }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.lastModificationDate | sinceDate: { onlyLocale: true } }}\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-status-display [event]=\"event\"></hvy-status-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          {{ event.procedureProgress }} %\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <a [routerLink]=\"EVENT_LINK.fn(event, _store)\">\n            > {{ '@hvy.action.consult' | i18n }} @if (event.linkedEvents > 1) {\n            ({{ event.linkedEvents }})\n          }\n          </a>\n        </td>\n      </tr>\n    } @empty {\n      <tr>\n        <td class=\"o-hvy-events-table__empty\" colspan=\"50\">\n          <div>{{ '@hvy.event.log.empty' | i18n }}</div>\n          <div>\n            <ng-content></ng-content>\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: i3.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconDisplayComponent, selector: "hvy-icon-display", inputs: ["event"] }, { kind: "component", type: StatusDisplayComponent, selector: "hvy-status-display", inputs: ["event", "modifiable"], outputs: ["modified"] }, { kind: "component", type: ColumnOrderComponent, selector: "hvy-column-order", inputs: ["field"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i10.PrySinceDatePipe, name: "sinceDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: EventListComponent, selector: "hvy-event-list", usesInheritance: true, ngImport: i0, template: "<table class=\"o-hvy-events-table\">\n  <thead>\n  <tr class=\"o-hvy-events-table__header\">\n    <th>\n      <pry-checkbox [ngModel]=\"allSelected$|async\" (ngModelChange)=\"selectAll($event)\"></pry-checkbox>\n    </th>\n    <th>{{ '@hvy.event.criticality.name' | i18n }}</th>\n    <th>{{ '@hvy.event.name' | i18n }}</th>\n    <th>{{ '@hvy.event.category.name' | i18n }}</th>\n    <th>{{ '@hvy.event.address' | i18n }}</th>\n    <th>\n      <hvy-column-order field=\"creationDate\">{{ '@hvy.event.creationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"lastModificationDate\">{{ '@hvy.event.lastModificationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"name\">{{ '@hvy.event.status.name' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"progress\">{{ '@hvy.procedure.progress' | i18n }}</hvy-column-order>\n    </th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n    @for (event of events$|async;track event.id) {\n      <tr class=\"o-hvy-events-table__line\" (click)=\"select(event, $event)\">\n        <td class=\"o-hvy-events-table__line__cell\">\n          <pry-checkbox [ngModel]=\"(selectedIds$|async)!.includes(event.id)\"></pry-checkbox>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <div class=\"o-hvy-events-table__line__cell__name__main\">{{ event.name }}</div>\n          <div\n            class=\"o-hvy-events-table__line__cell__name__sub\">{{ event.equipment?.name ? event.equipment?.name : '' }}\n          </div>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.category.' + event.category | i18n }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.address }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.creationDate| sinceDate: { onlyLocale: true } }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.lastModificationDate | sinceDate: { onlyLocale: true } }}\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-status-display [event]=\"event\"></hvy-status-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          {{ event.procedureProgress }} %\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <a [routerLink]=\"EVENT_LINK.fn(event, _store)\">\n            > {{ '@hvy.action.consult' | i18n }} @if (event.linkedEvents > 1) {\n            ({{ event.linkedEvents }})\n          }\n          </a>\n        </td>\n      </tr>\n    } @empty {\n      <tr>\n        <td class=\"o-hvy-events-table__empty\" colspan=\"50\">\n          <div>{{ '@hvy.event.log.empty' | i18n }}</div>\n          <div>\n            <ng-content></ng-content>\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: i3$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconDisplayComponent, selector: "hvy-icon-display", inputs: ["event"] }, { kind: "component", type: StatusDisplayComponent, selector: "hvy-status-display", inputs: ["event", "modifiable"], outputs: ["modified"] }, { kind: "component", type: ColumnOrderComponent, selector: "hvy-column-order", inputs: ["field"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }, { kind: "pipe", type: i10.PrySinceDatePipe, name: "sinceDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hvy-event-list', template: "<table class=\"o-hvy-events-table\">\n  <thead>\n  <tr class=\"o-hvy-events-table__header\">\n    <th></th>\n    <th>{{ '@hvy.event.criticality.name' | i18n }}</th>\n    <th>{{ '@hvy.event.name' | i18n }}</th>\n    <th>{{ '@hvy.event.category.name' | i18n }}</th>\n    <th>{{ '@hvy.event.address' | i18n }}</th>\n    <th>\n      <hvy-column-order field=\"creationDate\">{{ '@hvy.event.creationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"lastModificationDate\">{{ '@hvy.event.lastModificationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"name\">{{ '@hvy.event.status.name' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"progress\">{{ '@hvy.procedure.progress' | i18n }}</hvy-column-order>\n    </th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n    @for (event of events$|async;track event.id) {\n      <tr class=\"o-hvy-events-table__line\" (click)=\"select(event, $event)\">\n        <td class=\"o-hvy-events-table__line__cell\">\n          <pry-checkbox [ngModel]=\"(selectedIds$|async)!.includes(event.id)\"></pry-checkbox>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <div class=\"o-hvy-events-table__line__cell__name__main\">{{ event.name }}</div>\n          <div\n            class=\"o-hvy-events-table__line__cell__name__sub\">{{ event.equipment?.name ? event.equipment?.name : '' }}\n          </div>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.category.' + event.category | i18n }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.address }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.creationDate| sinceDate: { onlyLocale: true } }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.lastModificationDate | sinceDate: { onlyLocale: true } }}\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-status-display [event]=\"event\"></hvy-status-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          {{ event.procedureProgress }} %\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <a [routerLink]=\"EVENT_LINK.fn(event, _store)\">\n            > {{ '@hvy.action.consult' | i18n }} @if (event.linkedEvents > 1) {\n            ({{ event.linkedEvents }})\n          }\n          </a>\n        </td>\n      </tr>\n    } @empty {\n      <tr>\n        <td class=\"o-hvy-events-table__empty\" colspan=\"50\">\n          <div>{{ '@hvy.event.log.empty' | i18n }}</div>\n          <div>\n            <ng-content></ng-content>\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'hvy-event-list', template: "<table class=\"o-hvy-events-table\">\n  <thead>\n  <tr class=\"o-hvy-events-table__header\">\n    <th>\n      <pry-checkbox [ngModel]=\"allSelected$|async\" (ngModelChange)=\"selectAll($event)\"></pry-checkbox>\n    </th>\n    <th>{{ '@hvy.event.criticality.name' | i18n }}</th>\n    <th>{{ '@hvy.event.name' | i18n }}</th>\n    <th>{{ '@hvy.event.category.name' | i18n }}</th>\n    <th>{{ '@hvy.event.address' | i18n }}</th>\n    <th>\n      <hvy-column-order field=\"creationDate\">{{ '@hvy.event.creationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"lastModificationDate\">{{ '@hvy.event.lastModificationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"name\">{{ '@hvy.event.status.name' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"progress\">{{ '@hvy.procedure.progress' | i18n }}</hvy-column-order>\n    </th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n    @for (event of events$|async;track event.id) {\n      <tr class=\"o-hvy-events-table__line\" (click)=\"select(event, $event)\">\n        <td class=\"o-hvy-events-table__line__cell\">\n          <pry-checkbox [ngModel]=\"(selectedIds$|async)!.includes(event.id)\"></pry-checkbox>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <div class=\"o-hvy-events-table__line__cell__name__main\">{{ event.name }}</div>\n          <div\n            class=\"o-hvy-events-table__line__cell__name__sub\">{{ event.equipment?.name ? event.equipment?.name : '' }}\n          </div>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.category.' + event.category | i18n }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.address }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.creationDate| sinceDate: { onlyLocale: true } }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.lastModificationDate | sinceDate: { onlyLocale: true } }}\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-status-display [event]=\"event\"></hvy-status-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          {{ event.procedureProgress }} %\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <a [routerLink]=\"EVENT_LINK.fn(event, _store)\">\n            > {{ '@hvy.action.consult' | i18n }} @if (event.linkedEvents > 1) {\n            ({{ event.linkedEvents }})\n          }\n          </a>\n        </td>\n      </tr>\n    } @empty {\n      <tr>\n        <td class=\"o-hvy-events-table__empty\" colspan=\"50\">\n          <div>{{ '@hvy.event.log.empty' | i18n }}</div>\n          <div>\n            <ng-content></ng-content>\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: i1$1.Store }, { type: i0.ElementRef }] });
 
 class EventFiltersComponent extends SubscriptionnerDirective {
@@ -552,21 +618,21 @@ class EventFiltersComponent extends SubscriptionnerDirective {
     filter() {
         const filters = this.filters.map(filter => filter.getParams())
             .reduce((p, c) => ({ ...p, ...c }), {});
-        this.store.dispatch(EventActions.setFilters({ filters }));
+        this.store.dispatch(EventActions.filter({ filters }));
     }
     reset() {
         this.filters.forEach(filter => filter.reset());
-        this.store.dispatch(EventActions.setFilters({ filters: {} }));
+        this.store.dispatch(EventActions.filter({ filters: {} }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventFiltersComponent, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: EventFiltersComponent, selector: "hvy-event-filters", queries: [{ propertyName: "filters", predicate: ["filter"] }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-event-filters\">\n  <ng-content></ng-content>\n  <div class=\"o-hvy-event-filters__buttons\">\n    <button (click)=\"reset()\">\n      <pry-icon iconSvg=\"reset\"></pry-icon>\n      RESET\n    </button>\n    <button (click)=\"filter()\">\n      <pry-icon iconSvg=\"filter\"></pry-icon>\n      FILTRER\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: EventFiltersComponent, selector: "hvy-event-filters", queries: [{ propertyName: "filters", predicate: ["filter"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-event-filters\">\n  <ng-content></ng-content>\n  <div class=\"o-hvy-event-filters__buttons\">\n    <button (click)=\"reset()\" class=\"a-btn a-btn--secondary\">\n      <pry-icon iconSvg=\"reset_filter_event\"></pry-icon>\n    </button>\n    <button (click)=\"filter()\" class=\"a-btn a-btn--primary\">\n      {{ '@hvy.event.filter.name' | i18n }}\n      <pry-icon iconSvg=\"event_filter\"></pry-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hvy-event-filters', template: "<div class=\"o-hvy-event-filters\">\n  <ng-content></ng-content>\n  <div class=\"o-hvy-event-filters__buttons\">\n    <button (click)=\"reset()\">\n      <pry-icon iconSvg=\"reset\"></pry-icon>\n      RESET\n    </button>\n    <button (click)=\"filter()\">\n      <pry-icon iconSvg=\"filter\"></pry-icon>\n      FILTRER\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'hvy-event-filters', template: "<div class=\"o-hvy-event-filters\">\n  <ng-content></ng-content>\n  <div class=\"o-hvy-event-filters__buttons\">\n    <button (click)=\"reset()\" class=\"a-btn a-btn--secondary\">\n      <pry-icon iconSvg=\"reset_filter_event\"></pry-icon>\n    </button>\n    <button (click)=\"filter()\" class=\"a-btn a-btn--primary\">\n      {{ '@hvy.event.filter.name' | i18n }}\n      <pry-icon iconSvg=\"event_filter\"></pry-icon>\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.Store }], propDecorators: { filters: [{
                 type: ContentChildren,
-                args: ['filter']
+                args: ['filter', { descendants: true }]
             }] } });
 
 class HvyUnitFilterComponent extends SubscriptionnerDirective {
@@ -615,32 +681,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
             }] } });
 
 class ChoiceFilterComponent extends HvyUnitFilterComponent {
-    constructor(store) {
+    static { this.idCounter = 0; }
+    constructor(store, overlay, viewContainerRef, i18nService, ref) {
         super();
         this.store = store;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.i18nService = i18nService;
+        this.ref = ref;
+        this.id = -1;
         this.prop = 'no-prop-defined';
-        this.value = [];
+        this.label = 'no-label-defined';
+        this.i18nPrefix = 'no-prefix-defined.';
+        this.value = signal([]);
         this.choices = [];
+        this.inhibate = false;
+        this.displayValue = computed(() => {
+            if (this.allSelected()) {
+                return this.i18nService.instant('@hvy.event.filter.choice.all');
+            }
+            if (this.value().length > 1) {
+                return `(${this.value().length})`;
+            }
+            if (this.value().length === 1) {
+                return this.i18nService.instant(this.i18nPrefix + this.value()[0]);
+            }
+            return '';
+        });
+        this.id = ChoiceFilterComponent.idCounter++;
+    }
+    ngAfterViewInit() {
         this.subscriptions.add(this.store.select(EventSelectors.filters).subscribe(filters => {
-            this.value = filters[this.prop] ?? [];
+            this.assignValue(filters.hasOwnProperty(this.prop) ?
+                filters[this.prop].length === 1 && filters[this.prop][0] === '' ? [] : filters[this.prop] : this.allValues());
         }));
     }
     getParams() {
-        return { [this.prop]: this.value };
+        if (this.value().length === this.allValues().length) {
+            return {};
+        }
+        return { [this.prop]: this.value().length === 0 ? [''] : this.value() };
     }
     reset() {
-        this.value = [];
+        this.assignValue([]);
+    }
+    toggleModal() {
+        if (!this.overlayRef) {
+            this.triggerInhibate();
+            this.overlayRef = this.overlay.create(new OverlayConfig({
+                hasBackdrop: true,
+                backdropClass: 'backdrop',
+                panelClass: ['m-context-menu-wrapper', 'o-choice-filter-popup'],
+            }));
+            this.overlayRef.backdropClick().subscribe(() => this.toggleModal());
+            this.overlayRef.attach(new TemplatePortal(this.template, this.viewContainerRef));
+            const contextMenu = document.querySelector('.o-choice-filter-popup');
+            if (!!contextMenu) {
+                const rect = this.ref.nativeElement.getBoundingClientRect();
+                contextMenu.style.left = rect.x + 'px';
+                contextMenu.style.top = rect.bottom + 'px';
+            }
+        }
+        else {
+            this.overlayRef.dispose();
+            this.overlayRef = undefined;
+        }
+    }
+    clickAll() {
+        if (this.allSelected()) {
+            this.assignValue([]);
+        }
+        else {
+            this.assignValue(this.allValues());
+        }
+    }
+    toggle(elt) {
+        const isSelected = this.isSelected(elt);
+        const eltSubKeys = !elt.children ? [elt.key] : elt.children.map(ch => ch.key);
+        if (!isSelected) {
+            this.assignValue([...new Set([...this.value(), ...eltSubKeys])]);
+        }
+        else {
+            this.assignValue(this.value().filter(v => !eltSubKeys.includes(v)));
+        }
+    }
+    allSelected() {
+        return this.choices.map(choice => this.isSelected(choice)).reduce((p, c) => p && c, true);
+    }
+    isSelected(choice) {
+        if (!choice.children) {
+            return this.value().includes(choice.key);
+        }
+        else {
+            return choice.children.map(child => this.isSelected(child)).reduce((p, c) => p && c, true);
+        }
+    }
+    allValues() {
+        return this.choices
+            .map(choice => !choice.children ? [choice.key] : choice.children.map(child => child.key))
+            .reduce((p, c) => [...p, ...c], []);
+    }
+    assignValue(value) {
+        if (!this.inhibate) {
+            this.triggerInhibate();
+            this.value.set(value);
+        }
+    }
+    triggerInhibate() {
+        this.inhibate = true;
+        setTimeout(() => this.inhibate = false, 50);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ChoiceFilterComponent, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ChoiceFilterComponent, selector: "hvy-choice-filter", inputs: { prop: "prop", choices: "choices" }, providers: [{ provide: HvyUnitFilterComponent, useExisting: forwardRef(() => ChoiceFilterComponent) }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-choice-filters\">\n  CHOICE: {{ value | json }}\n</div>\n", dependencies: [{ kind: "pipe", type: i1$2.JsonPipe, name: "json" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ChoiceFilterComponent, deps: [{ token: i1$1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: i3.PryI18nService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: ChoiceFilterComponent, selector: "hvy-choice-filter", inputs: { prop: "prop", label: "label", i18nPrefix: "i18nPrefix", choices: "choices" }, providers: [{ provide: HvyUnitFilterComponent, useExisting: forwardRef(() => ChoiceFilterComponent) }], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<button (click)=\"toggleModal()\" #button class=\"o-hvy-choice-filter -horizontal\"\n        [class.-highlight]=\"displayValue() !== ('@hvy.event.filter.choice.all' | i18n)\" [class.-focus]=\"overlayRef\">\n  <span class=\"o-hvy-choice-filter__label\">{{ label | i18n }}:</span>\n  <span class=\"o-hvy-choice-filter__value\" type=\"text\" id=\"select_{{id}}\">{{ displayValue() }}</span>\n  <pry-icon [iconSvg]=\"!!overlayRef ? 'chevron_top' : 'chevron_bottom'\" [width]=\"10\" [height]=\"10\"></pry-icon>\n</button>\n\n<ng-template #template>\n  <div\n    class=\"m-context-menu o-hvy-choice-filter\"\n    aria-labelledby=\"manage-account\"\n    tabindex=\"-1\"\n    id=\"account-menu\"\n    role=\"menu\"\n    aria-modal=\"true\"\n  >\n    <div class=\"o-hvy-choice-filter__all\">\n      <pry-checkbox [ngModel]=\"allSelected()\" (ngModelChange)=\"clickAll()\">\n        <span>{{ '@hvy.event.filter.choice.all' | i18n }}</span>\n      </pry-checkbox>\n    </div>\n    @for (elt of choices;track elt.key) {\n      @if (!elt.children) {\n        <pry-checkbox [ngModel]=\"isSelected(elt)\" (ngModelChange)=\"toggle(elt)\" class=\"o-hvy-choice-filter__root\">\n          <span>{{ i18nPrefix + elt.key | i18n }}</span>\n        </pry-checkbox>\n      } @else {\n        <pry-checkbox [ngModel]=\"isSelected(elt)\" (ngModelChange)=\"toggle(elt)\" class=\"o-hvy-choice-filter__root\">\n          <span>{{ i18nPrefix + elt.key | i18n }}</span>\n        </pry-checkbox>\n        @for (child of elt.children;track child.key) {\n          <pry-checkbox [ngModel]=\"isSelected(child)\" (ngModelChange)=\"toggle(child)\"\n                        class=\"o-hvy-choice-filter__child\">\n            <span>{{ i18nPrefix + child.key | i18n }}</span>\n          </pry-checkbox>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ChoiceFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hvy-choice-filter', providers: [{ provide: HvyUnitFilterComponent, useExisting: forwardRef(() => ChoiceFilterComponent) }], template: "<div class=\"o-hvy-choice-filters\">\n  CHOICE: {{ value | json }}\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.Store }], propDecorators: { prop: [{
+            args: [{ selector: 'hvy-choice-filter', providers: [{ provide: HvyUnitFilterComponent, useExisting: forwardRef(() => ChoiceFilterComponent) }], template: "<button (click)=\"toggleModal()\" #button class=\"o-hvy-choice-filter -horizontal\"\n        [class.-highlight]=\"displayValue() !== ('@hvy.event.filter.choice.all' | i18n)\" [class.-focus]=\"overlayRef\">\n  <span class=\"o-hvy-choice-filter__label\">{{ label | i18n }}:</span>\n  <span class=\"o-hvy-choice-filter__value\" type=\"text\" id=\"select_{{id}}\">{{ displayValue() }}</span>\n  <pry-icon [iconSvg]=\"!!overlayRef ? 'chevron_top' : 'chevron_bottom'\" [width]=\"10\" [height]=\"10\"></pry-icon>\n</button>\n\n<ng-template #template>\n  <div\n    class=\"m-context-menu o-hvy-choice-filter\"\n    aria-labelledby=\"manage-account\"\n    tabindex=\"-1\"\n    id=\"account-menu\"\n    role=\"menu\"\n    aria-modal=\"true\"\n  >\n    <div class=\"o-hvy-choice-filter__all\">\n      <pry-checkbox [ngModel]=\"allSelected()\" (ngModelChange)=\"clickAll()\">\n        <span>{{ '@hvy.event.filter.choice.all' | i18n }}</span>\n      </pry-checkbox>\n    </div>\n    @for (elt of choices;track elt.key) {\n      @if (!elt.children) {\n        <pry-checkbox [ngModel]=\"isSelected(elt)\" (ngModelChange)=\"toggle(elt)\" class=\"o-hvy-choice-filter__root\">\n          <span>{{ i18nPrefix + elt.key | i18n }}</span>\n        </pry-checkbox>\n      } @else {\n        <pry-checkbox [ngModel]=\"isSelected(elt)\" (ngModelChange)=\"toggle(elt)\" class=\"o-hvy-choice-filter__root\">\n          <span>{{ i18nPrefix + elt.key | i18n }}</span>\n        </pry-checkbox>\n        @for (child of elt.children;track child.key) {\n          <pry-checkbox [ngModel]=\"isSelected(child)\" (ngModelChange)=\"toggle(child)\"\n                        class=\"o-hvy-choice-filter__child\">\n            <span>{{ i18nPrefix + child.key | i18n }}</span>\n          </pry-checkbox>\n        }\n      }\n    }\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: i3.PryI18nService }, { type: i0.ElementRef }], propDecorators: { prop: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], i18nPrefix: [{
                 type: Input
             }], choices: [{
                 type: Input
+            }], template: [{
+                type: ViewChild,
+                args: ['template', { read: TemplateRef }]
             }] } });
 
 const EventSummaryActions = {
@@ -684,6 +851,10 @@ const EventSummarySelectors = {
     loading
 };
 
+const HypEventStatus = {
+    values: ['NEW', 'IN_PROGRESS', 'DONE'],
+};
+
 class EventSummaryItemComponent {
     constructor(store) {
         this.store = store;
@@ -691,7 +862,7 @@ class EventSummaryItemComponent {
         this.EVENT_LINK = EVENT_LINK;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryItemComponent, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: EventSummaryItemComponent, selector: "hvy-event-summary-item", inputs: { event: "event", linkBase: "linkBase" }, ngImport: i0, template: "<div class=\"m-hvy-event-summary-item\" [routerLink]=\"EVENT_LINK.fn(event, store)\">\n  <div class=\"m-hvy-event-summary-item__title\">\n    <h4>\n      {{ event.name }}\n    </h4>\n  </div>\n  <div class=\"m-hvy-event-summary-item__content\">\n    <span>\n          {{\n        event.manifestation ?\n          (event.manifestation.startDate | date :  'dd/MM HH:MM') + ' - ' + (event.manifestation.endDate | date :  'dd/MM HH:MM') :\n          event.serviceTitle\n      }}\n    </span>\n  </div>\n  <div class=\"m-hvy-event-summary-item__footer\">\n    <div class=\"m-hvy-event-summary-item__icons\">\n      <span class=\"m-hvy-event-summary-item__intervention-counter\">{{ event.serviceCount }}</span>\n      <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n    </div>\n    <div class=\"m-hvy-event-summary-item__date\">\n      <span>\n        {{ event.lastModificationDate | date :  'd MMMM . HH:MM' }}\n      </span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconDisplayComponent, selector: "hvy-icon-display", inputs: ["event"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: EventSummaryItemComponent, selector: "hvy-event-summary-item", inputs: { event: "event", linkBase: "linkBase" }, ngImport: i0, template: "<div class=\"m-hvy-event-summary-item\" [routerLink]=\"EVENT_LINK.fn(event, store)\">\n  <div class=\"m-hvy-event-summary-item__title\">\n    <h4>\n      {{ event.name }}\n    </h4>\n  </div>\n  <div class=\"m-hvy-event-summary-item__content\">\n    <span>\n          {{\n        event.manifestation ?\n          (event.manifestation.startDate | date :  'dd/MM HH:MM') + ' - ' + (event.manifestation.endDate | date :  'dd/MM HH:MM') :\n          event.serviceTitle\n      }}\n    </span>\n  </div>\n  <div class=\"m-hvy-event-summary-item__footer\">\n    <div class=\"m-hvy-event-summary-item__icons\">\n      <span class=\"m-hvy-event-summary-item__intervention-counter\">{{ event.serviceCount }}</span>\n      <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n    </div>\n    <div class=\"m-hvy-event-summary-item__date\">\n      <span>\n        {{ event.lastModificationDate | date :  'd MMMM . HH:MM' }}\n      </span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconDisplayComponent, selector: "hvy-icon-display", inputs: ["event"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryItemComponent, decorators: [{
             type: Component,
@@ -721,13 +892,13 @@ class EventSummaryListComponent {
         this.router.navigate([...this.consultLink]);
         this.store.dispatch(EventActions.filter({ filters: { status: [status] } }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryListComponent, deps: [{ token: i1$1.Store }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: EventSummaryListComponent, selector: "hvy-event-summary-list", inputs: { events: "events", totalEventCount: "totalEventCount", status: "status", consultLink: "consultLink", itemLinkBase: "itemLinkBase" }, ngImport: i0, template: "<div class=\"o-hvy-event-summary-list -hvy-{{status.toLowerCase()}}\">\n  <div class=\"o-hvy-event-summary-list__header\">\n    <h3 class=\"o-hvy-event-summary-list__title\">\n      {{ '@hvy.eventSummary.statusLabels.' + status | i18n }}\n    </h3>\n    <span class=\"o-hvy-event-summary-list__counter\">\n      {{ totalEventCount }}\n    </span>\n  </div>\n  <div class=\"o-hvy-event-summary-list__content\">\n    @for (event of events; track event.id) {\n      <hvy-event-summary-item\n        [event]=\"event\"\n        [linkBase]=\"itemLinkBase\">\n      </hvy-event-summary-item>\n    } @empty {\n      <span class=\"o-hvy-event-summary-list__no-content\">\n        {{ '@hvy.eventSummary.noContent' | i18n }}\n      </span>\n    }\n  </div>\n  <div class=\"o-hvy-event-summary-list__footer\">\n    <button class=\"o-hvy-event-summary-list__footer-button\" (click)=\"filterAndRoute(status)\">\n      Consulter\n      <pry-icon iconSvg=\"arrow\"></pry-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: EventSummaryItemComponent, selector: "hvy-event-summary-item", inputs: ["event", "linkBase"] }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryListComponent, deps: [{ token: i1$1.Store }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: EventSummaryListComponent, selector: "hvy-event-summary-list", inputs: { events: "events", totalEventCount: "totalEventCount", status: "status", consultLink: "consultLink", itemLinkBase: "itemLinkBase" }, ngImport: i0, template: "<div class=\"o-hvy-event-summary-list -hvy-{{status.toLowerCase()}}\">\n  <div class=\"o-hvy-event-summary-list__header\">\n    <h3 class=\"o-hvy-event-summary-list__title\">\n      {{ '@hvy.eventSummary.statusLabels.' + status | i18n }}\n    </h3>\n    <span class=\"o-hvy-event-summary-list__counter\">\n      {{ totalEventCount }}\n    </span>\n  </div>\n  <div class=\"o-hvy-event-summary-list__content\">\n    @for (event of events; track event.id) {\n      <hvy-event-summary-item\n        [event]=\"event\"\n        [linkBase]=\"itemLinkBase\">\n      </hvy-event-summary-item>\n    } @empty {\n      <span class=\"o-hvy-event-summary-list__no-content\">\n        {{ '@hvy.eventSummary.noContent' | i18n }}\n      </span>\n    }\n  </div>\n  <div class=\"o-hvy-event-summary-list__footer\">\n    <button class=\"o-hvy-event-summary-list__footer-button\" (click)=\"filterAndRoute(status)\">\n      {{ '@hvy.action.consult' | i18n }}\n      <pry-icon iconSvg=\"arrow\"></pry-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: EventSummaryItemComponent, selector: "hvy-event-summary-item", inputs: ["event", "linkBase"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hvy-event-summary-list', template: "<div class=\"o-hvy-event-summary-list -hvy-{{status.toLowerCase()}}\">\n  <div class=\"o-hvy-event-summary-list__header\">\n    <h3 class=\"o-hvy-event-summary-list__title\">\n      {{ '@hvy.eventSummary.statusLabels.' + status | i18n }}\n    </h3>\n    <span class=\"o-hvy-event-summary-list__counter\">\n      {{ totalEventCount }}\n    </span>\n  </div>\n  <div class=\"o-hvy-event-summary-list__content\">\n    @for (event of events; track event.id) {\n      <hvy-event-summary-item\n        [event]=\"event\"\n        [linkBase]=\"itemLinkBase\">\n      </hvy-event-summary-item>\n    } @empty {\n      <span class=\"o-hvy-event-summary-list__no-content\">\n        {{ '@hvy.eventSummary.noContent' | i18n }}\n      </span>\n    }\n  </div>\n  <div class=\"o-hvy-event-summary-list__footer\">\n    <button class=\"o-hvy-event-summary-list__footer-button\" (click)=\"filterAndRoute(status)\">\n      Consulter\n      <pry-icon iconSvg=\"arrow\"></pry-icon>\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.Store }, { type: i2$1.Router }], propDecorators: { events: [{
+            args: [{ selector: 'hvy-event-summary-list', template: "<div class=\"o-hvy-event-summary-list -hvy-{{status.toLowerCase()}}\">\n  <div class=\"o-hvy-event-summary-list__header\">\n    <h3 class=\"o-hvy-event-summary-list__title\">\n      {{ '@hvy.eventSummary.statusLabels.' + status | i18n }}\n    </h3>\n    <span class=\"o-hvy-event-summary-list__counter\">\n      {{ totalEventCount }}\n    </span>\n  </div>\n  <div class=\"o-hvy-event-summary-list__content\">\n    @for (event of events; track event.id) {\n      <hvy-event-summary-item\n        [event]=\"event\"\n        [linkBase]=\"itemLinkBase\">\n      </hvy-event-summary-item>\n    } @empty {\n      <span class=\"o-hvy-event-summary-list__no-content\">\n        {{ '@hvy.eventSummary.noContent' | i18n }}\n      </span>\n    }\n  </div>\n  <div class=\"o-hvy-event-summary-list__footer\">\n    <button class=\"o-hvy-event-summary-list__footer-button\" (click)=\"filterAndRoute(status)\">\n      {{ '@hvy.action.consult' | i18n }}\n      <pry-icon iconSvg=\"arrow\"></pry-icon>\n    </button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.Store }, { type: i2.Router }], propDecorators: { events: [{
                 type: Input
             }], totalEventCount: [{
                 type: Input
@@ -744,12 +915,16 @@ class EventSummaryPageComponent extends SubscriptionnerDirective {
         super();
         this.store = store;
         this.pageTitle = '';
+        this.consultLink = [];
         this.summaries = {
             NEW: { events: [], count: 0 },
             IN_PROGRESS: { events: [], count: 0 },
             DONE: { events: [], count: 0 },
         };
-        this.criticalityList = ["LOW", "MEDIUM", "HIGH", "ALL"];
+        this.criticalityList = [...HypEventStatus.values, 'ALL'];
+        this.criticalityOrder = (a, b) => {
+            return this.criticalityList.indexOf(a.key) - this.criticalityList.indexOf(b.key);
+        };
         this.store.dispatch(EventSummaryActions.load());
         this.selectedCriticality$ = this.store.select(EventSelectors.filters).pipe(map$1((filters) => filters['criticality']?.[0] ?? 'ALL'));
         this.subscriptions.add(this.store.select(EventSummarySelectors.summaries).subscribe((summaries) => {
@@ -761,17 +936,16 @@ class EventSummaryPageComponent extends SubscriptionnerDirective {
             this.store.dispatch(EventActions.filter({ filters: { criticality: [$event] } }));
         this.store.dispatch(EventSummaryActions.load());
     }
-    asIsOrder() {
-        return 0;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryPageComponent, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: EventSummaryPageComponent, selector: "hvy-event-summary-page", inputs: { pageTitle: "pageTitle" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-event-summary-page\">\n  <div class=\"o-hvy-event-summary-page__header\">\n    @if (pageTitle) {\n      <h3 class=\"o-hvy-event-summary-page__title\">{{ pageTitle }}</h3>\n    }\n    <div class=\"m-filter__input-wrapper m-filter__input-wrapper--dropdown\">\n      <label class=\"a-label m-filter__label\" for=\"criticality-filter\">{{ '@hvy.event.criticality.name' | i18n }} :&nbsp;</label>\n      <pry-select\n        id=\"criticality-filter\"\n        class=\"o-hvy-event-summary-page__filter\"\n        [items]=\"criticalityList\"\n        [ngModel]=\"selectedCriticality$ | async\"\n        (ngModelChange)=\"filterByCriticality($event)\"\n        [translate]=\"true\"\n        i18nPrefix=\"@hvy.eventSummary.criticalityLabels.\"\n      >\n      </pry-select>\n    </div>\n  </div>\n  <div class=\"o-hvy-event-summary-page__content\">\n    @for (summaryList of summaries | keyvalue: asIsOrder; track summaryList.key) {\n      <hvy-event-summary-list\n        class=\"o-hvy-event-summary-page__summary-list\"\n        [status]=\"summaryList.key\"\n        [totalEventCount]=\"summaryList.value.count\"\n        [events]=\"summaryList.value.events\">\n      </hvy-event-summary-list>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "component", type: EventSummaryListComponent, selector: "hvy-event-summary-list", inputs: ["events", "totalEventCount", "status", "consultLink", "itemLinkBase"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: EventSummaryPageComponent, selector: "hvy-event-summary-page", inputs: { pageTitle: "pageTitle", consultLink: "consultLink" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-event-summary-page\">\n  <div class=\"o-hvy-event-summary-page__header\">\n    @if (pageTitle) {\n      <h3 class=\"o-hvy-event-summary-page__title\">{{ pageTitle }}</h3>\n    }\n    <div class=\"m-filter__input-wrapper m-filter__input-wrapper--dropdown\">\n      <label class=\"a-label m-filter__label\" for=\"criticality-filter\">{{ '@hvy.event.criticality.name' | i18n }}\n        :&nbsp;</label>\n      <pry-select\n        id=\"criticality-filter\"\n        class=\"o-hvy-event-summary-page__filter\"\n        [items]=\"criticalityList\"\n        [ngModel]=\"selectedCriticality$ | async\"\n        (ngModelChange)=\"filterByCriticality($event)\"\n        [translate]=\"true\"\n        i18nPrefix=\"@hvy.eventSummary.criticalityLabels.\"\n      >\n      </pry-select>\n    </div>\n  </div>\n  <div class=\"o-hvy-event-summary-page__content\">\n    <div class=\"o-hvy-event-summary-page__content__sub\">\n      @for (summaryList of summaries | keyvalue: criticalityOrder;track summaryList.key) {\n        <hvy-event-summary-list\n          class=\"o-hvy-event-summary-page__summary-list\"\n          [status]=\"summaryList.key\"\n          [totalEventCount]=\"summaryList.value.count\"\n          [events]=\"summaryList.value.events\"\n          [consultLink]=\"consultLink\">\n        </hvy-event-summary-list>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "component", type: EventSummaryListComponent, selector: "hvy-event-summary-list", inputs: ["events", "totalEventCount", "status", "consultLink", "itemLinkBase"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hvy-event-summary-page', template: "<div class=\"o-hvy-event-summary-page\">\n  <div class=\"o-hvy-event-summary-page__header\">\n    @if (pageTitle) {\n      <h3 class=\"o-hvy-event-summary-page__title\">{{ pageTitle }}</h3>\n    }\n    <div class=\"m-filter__input-wrapper m-filter__input-wrapper--dropdown\">\n      <label class=\"a-label m-filter__label\" for=\"criticality-filter\">{{ '@hvy.event.criticality.name' | i18n }} :&nbsp;</label>\n      <pry-select\n        id=\"criticality-filter\"\n        class=\"o-hvy-event-summary-page__filter\"\n        [items]=\"criticalityList\"\n        [ngModel]=\"selectedCriticality$ | async\"\n        (ngModelChange)=\"filterByCriticality($event)\"\n        [translate]=\"true\"\n        i18nPrefix=\"@hvy.eventSummary.criticalityLabels.\"\n      >\n      </pry-select>\n    </div>\n  </div>\n  <div class=\"o-hvy-event-summary-page__content\">\n    @for (summaryList of summaries | keyvalue: asIsOrder; track summaryList.key) {\n      <hvy-event-summary-list\n        class=\"o-hvy-event-summary-page__summary-list\"\n        [status]=\"summaryList.key\"\n        [totalEventCount]=\"summaryList.value.count\"\n        [events]=\"summaryList.value.events\">\n      </hvy-event-summary-list>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'hvy-event-summary-page', template: "<div class=\"o-hvy-event-summary-page\">\n  <div class=\"o-hvy-event-summary-page__header\">\n    @if (pageTitle) {\n      <h3 class=\"o-hvy-event-summary-page__title\">{{ pageTitle }}</h3>\n    }\n    <div class=\"m-filter__input-wrapper m-filter__input-wrapper--dropdown\">\n      <label class=\"a-label m-filter__label\" for=\"criticality-filter\">{{ '@hvy.event.criticality.name' | i18n }}\n        :&nbsp;</label>\n      <pry-select\n        id=\"criticality-filter\"\n        class=\"o-hvy-event-summary-page__filter\"\n        [items]=\"criticalityList\"\n        [ngModel]=\"selectedCriticality$ | async\"\n        (ngModelChange)=\"filterByCriticality($event)\"\n        [translate]=\"true\"\n        i18nPrefix=\"@hvy.eventSummary.criticalityLabels.\"\n      >\n      </pry-select>\n    </div>\n  </div>\n  <div class=\"o-hvy-event-summary-page__content\">\n    <div class=\"o-hvy-event-summary-page__content__sub\">\n      @for (summaryList of summaries | keyvalue: criticalityOrder;track summaryList.key) {\n        <hvy-event-summary-list\n          class=\"o-hvy-event-summary-page__summary-list\"\n          [status]=\"summaryList.key\"\n          [totalEventCount]=\"summaryList.value.count\"\n          [events]=\"summaryList.value.events\"\n          [consultLink]=\"consultLink\">\n        </hvy-event-summary-list>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.Store }], propDecorators: { pageTitle: [{
                 type: Input
+            }], consultLink: [{
+                type: Input
             }] } });
 
 const HYP_BASE_CONFIG = new InjectionToken('base config');
@@ -779,7 +953,6 @@ const HYP_BASE_CONFIG = new InjectionToken('base config');
 const enTranslations = {
     '@hvy': {
         event: {
-            criticality: 'Criticality',
             name: 'Event',
             type: {
                 name: 'Event type',
@@ -828,12 +1001,25 @@ const enTranslations = {
                 },
             },
             category: {
-                ALERT: 'Dysfunction alert',
+                name: "Event category",
+                ALERT_MALFUNCTION: 'Dysfunction alert',
                 REPORT: 'GRC report',
                 OPERATOR_EVENT: 'Operator event',
                 ALERT_LIMIT: 'Limit alert',
                 MANIFESTATION: 'Manifestation',
             },
+            criticality: {
+                name: 'Criticality',
+                LOW: 'Low',
+                MEDIUM: 'Middle',
+                HIGH: 'High',
+            },
+            filter: {
+                name: 'Filter',
+                choice: {
+                    all: "All"
+                }
+            }
         },
         eventSummary: {
             noContent: 'No event with given criticality',
@@ -857,6 +1043,7 @@ const enTranslations = {
             consult: 'Consult',
             close: 'Close',
             send: 'Send',
+            comment: 'Comment'
         },
     },
 };
@@ -864,15 +1051,15 @@ const enTranslations = {
 const frTranslations = {
     '@hvy': {
         event: {
-            name: 'Évènement',
+            name: 'Événements',
             type: {
-                name: 'Type d\'évènement',
+                name: 'Type d\'événement',
                 ALERT: 'Alerte',
                 REPORT: 'Signalement',
                 OPERATOR: 'Opérateur',
             },
             status: {
-                name: 'Statut évènement',
+                name: 'Statut événement',
                 NEW: 'Nouveau',
                 IN_PROGRESS: 'En cours',
                 DONE: 'Clôturé',
@@ -889,19 +1076,19 @@ const frTranslations = {
             creationDate: 'Date de création',
             lastModificationDate: 'Date dernières modifications',
             closeDate: 'Date de clotûre',
-            detail: "Description des évènements",
+            detail: "Description des événements",
             log: {
-                name: 'Journal des évènements',
-                empty: 'Aucun évènement n\'a été créé',
+                name: 'Journal des événements',
+                empty: 'Aucun événement n\'a été créé',
                 event: {
                     description: 'Description',
                     address: 'Adresse',
                     detail: 'Informations',
                     name: 'Nom',
                     category: 'Catégorie',
-                    close: 'Clôturer tous ces évènements',
+                    close: 'Clôturer tous ces événements',
                     comments: {
-                        name: 'Commentaires de l\'évènement',
+                        name: 'Commentaires de l\'événement',
                         placeholder: 'Écrivez votre commentaire'
                     }
                 },
@@ -914,7 +1101,7 @@ const frTranslations = {
                 },
             },
             category: {
-                name: "Catégorie d'évènement",
+                name: "Catégorie d'événement",
                 ALERT_MALFUNCTION: 'Alerte Dysfonctionnement',
                 REPORT: 'Signalement GRC',
                 OPERATOR_EVENT: 'Evènement Opérateur',
@@ -927,9 +1114,15 @@ const frTranslations = {
                 MEDIUM: 'Moyen',
                 HIGH: 'Haut',
             },
+            filter: {
+                name: 'Filtrer',
+                choice: {
+                    all: "Tous"
+                }
+            }
         },
         eventSummary: {
-            noContent: 'Aucun évènement avec la criticité donnée',
+            noContent: 'Aucun événement avec la criticité donnée',
             statusLabels: {
                 NEW: 'Nouveaux',
                 IN_PROGRESS: 'En cours',
@@ -949,7 +1142,8 @@ const frTranslations = {
         action: {
             consult: 'Consulter',
             close: 'Clotûrer',
-            send: 'Envoyer'
+            send: 'Envoyer',
+            comment: 'Commenter'
         },
     },
 };
@@ -959,10 +1153,6 @@ const eventForWriteAPI = (event) => ({
     equipmentId: event.equipment?.id
 });
 
-const HypEventStatus = {
-    values: ['NEW', 'IN_PROGRESS', 'DONE'],
-};
-
 const HypEventType = { values: ['ALERT', 'REPORT', 'OPERATOR'] };
 
 const procedureForWriteAPI = (procedure) => ({
@@ -986,7 +1176,7 @@ class EventService {
             let params = new HttpParams();
             Object.keys(filters).forEach(filter => {
                 filters[filter].forEach((filterValue) => {
-                    params = params.set(filter, filterValue);
+                    params = params.append(filter, filterValue);
                 });
             });
             const pageSize = 20;
@@ -1067,7 +1257,7 @@ class EventEffects {
                 return this.eventService.statusProcedure(action.procedure, action.targetStatus).pipe(map$1((event) => EventActions.statusSuccess()), catchError((error) => [EventActions.statusFailure({ error: error })]));
             }
         })));
-        this.sort$ = createEffect(() => this.actions$.pipe(ofType(EventActions.sort), debounceTime(200), map$1(() => EventActions.load({}))));
+        this.sort$ = createEffect(() => this.actions$.pipe(ofType(EventActions.sort, EventActions.filter), debounceTime(200), map$1(() => EventActions.load({}))));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventEffects, deps: [{ token: i1$3.Actions }, { token: EventService }, { token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventEffects }); }
@@ -1177,7 +1367,7 @@ class PvyHypervisorModule {
         this.i18nService.addLangObject('en', '@hvy', enTranslations);
         this.i18nService.addLangObject('fr', '@hvy', frTranslations);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PvyHypervisorModule, deps: [{ token: HYP_BASE_CONFIG }, { token: i1$1.Store }, { token: i2.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PvyHypervisorModule, deps: [{ token: HYP_BASE_CONFIG }, { token: i1$1.Store }, { token: i3.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: PvyHypervisorModule, declarations: [EventDetailComponent,
             EventListComponent,
             IconDisplayComponent,
@@ -1210,7 +1400,10 @@ class PvyHypervisorModule {
             JsonPipe,
             PryDatePickerModule,
             PryI18nModule,
-            PryIconModule], exports: [EventDetailComponent,
+            PryIconModule,
+            PryI18nModule,
+            AsyncPipe,
+            PryI18nModule], exports: [EventDetailComponent,
             EventListComponent,
             IconDisplayComponent,
             EventSummaryItemComponent,
@@ -1239,7 +1432,9 @@ class PvyHypervisorModule {
             FormsModule,
             PryDatePickerModule,
             PryI18nModule,
-            PryIconModule] }); }
+            PryIconModule,
+            PryI18nModule,
+            PryI18nModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PvyHypervisorModule, decorators: [{
             type: NgModule,
@@ -1272,6 +1467,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                         PryDatePickerModule,
                         PryI18nModule,
                         PryIconModule,
+                        PryI18nModule,
+                        AsyncPipe,
+                        PryI18nModule,
                     ],
                     exports: [
                         ...components,
@@ -1280,7 +1478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [HYP_BASE_CONFIG]
-                }] }, { type: i1$1.Store }, { type: i2.PryI18nService }] });
+                }] }, { type: i1$1.Store }, { type: i3.PryI18nService }] });
 
 /*
  * Public API Surface of hypervisor