@provoly/hypervisor 0.0.8 → 0.0.10

package/fesm2022/provoly-hypervisor.mjs

@@ -1,45 +1,314 @@
 import * as i0 from '@angular/core';
-import { Component, Input, Pipe, InjectionToken, Injectable, NgModule, Inject } from '@angular/core';
-import * as i1 from '@ngrx/store';
+import { Injectable, Pipe, Component, Input, EventEmitter, Output, 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 from '@angular/common/http';
+import { HttpParams } from '@angular/common/http';
+import { mergeMap, of, fromEvent, map, withLatestFrom, filter, auditTime } from 'rxjs';
+import * as i1$1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, StoreModule } from '@ngrx/store';
-import * as i1$1 from '@angular/common';
-import { NgForOf, AsyncPipe, NgStyle, DatePipe, KeyValuePipe } from '@angular/common';
-import * as i3$1 from '@provoly/dashboard/components/checkbox';
+import * as i2 from '@provoly/dashboard/components/checkbox';
 import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
-import * as i4 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i2 from '@angular/router';
+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 { RouterLink } from '@angular/router';
-import * as i3 from '@provoly/dashboard';
-import { DEFAULT_ICON_URL, SubscriptionnerDirective, PryI18nModule, PryCoreModule, PryIconModule, PrySelectModule } from '@provoly/dashboard';
-import { of, withLatestFrom, mergeMap } from 'rxjs';
-import * as i8 from '@provoly/dashboard/components/sinceDate';
+import * as i9 from '@provoly/dashboard/components/sinceDate';
 import { PrySinceDateModule } from '@provoly/dashboard/components/sinceDate';
-import { map, debounceTime, mergeMap as mergeMap$1, catchError } from 'rxjs/operators';
+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';
-import * as i1$2 from '@angular/common/http';
-import { HttpParams } from '@angular/common/http';
 
-class EventDetailComponent {
+const HypEventCategory = ['ALERT_MALFUNCTION', 'REPORT', 'OPERATOR_EVENT', 'ALERT_LIMIT', 'MANIFESTATION'];
+
+const HypEventCriticality = ['LOW', 'MEDIUM', 'HIGH'];
+
+const HypervisorActions = {
+    setUrl: createAction('[Event] Set Backend Url', props())
+};
+
+const hypFeatureKey = '@hvy/general';
+const hypInitialState = {
+    url: '/api/hypervisor',
+};
+const internalReducer$2 = createReducer(hypInitialState, on(HypervisorActions.setUrl, (state, action) => ({
+    ...state,
+    url: action.url ?? state.url,
+})));
+function hypervisorReducer(state, action) {
+    return internalReducer$2(state, action);
+}
+
+const feature$2 = createFeatureSelector(hypFeatureKey);
+const url = createSelector(feature$2, (state) => state.url);
+const HypSelectors = {
+    feature: feature$2,
+    url
+};
+
+class EquipmentService {
+    constructor(httpClient, store) {
+        this.httpClient = httpClient;
+        this.store = store;
+    }
+    findByName(name) {
+        return this.store
+            .select(HypSelectors.url)
+            .pipe(mergeMap((url) => {
+            let params = new HttpParams();
+            params = params.set('name', name);
+            return this.httpClient.get(encodeURI(`${url}/equipment`), { params });
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EquipmentService, deps: [{ token: i1.HttpClient }, { token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EquipmentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EquipmentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i1$1.Store }] });
+
+const EVENT_TO_ICON = {
+    fn: (event, store) => of(DEFAULT_ICON_URL),
+};
+class EventIconPipe {
+    constructor(store) {
+        this.store = store;
+    }
+    transform(value, ...args) {
+        return EVENT_TO_ICON.fn(value, this.store);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventIconPipe, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: EventIconPipe, name: "eventIcon" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventIconPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'eventIcon',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Store }] });
+
+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: 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,
+            args: [{ selector: 'hvy-icon-display', 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" }]
+        }], propDecorators: { event: [{
+                type: Input
+            }] } });
+
+class StatusDisplayComponent {
     constructor() {
-        this.events = [];
-        this.procedure = undefined;
+        this.modified = new EventEmitter();
+        this.targetStatuses = [];
+        this.targetsDisplayed = false;
+        this._modifiable = false;
+    }
+    set event(event) {
+        this._event = event;
+        this.updateTargetStatuses();
+    }
+    set modifiable(modifiable) {
+        this._modifiable = modifiable;
+        this.updateTargetStatuses();
+    }
+    get modifiable() {
+        return this._modifiable;
+    }
+    get event() {
+        return this._event;
+    }
+    trigger(status) {
+        this.modified.next(status);
+        this.targetsDisplayed = false;
+    }
+    updateTargetStatuses() {
+        this.targetStatuses = (this.modifiable && this.event.status !== 'DONE') ? ['DONE'] : [];
+    }
+    toggle() {
+        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: 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,
+            args: [{ selector: 'hvy-status-display', 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" }]
+        }], propDecorators: { modified: [{
+                type: Output
+            }], event: [{
+                type: Input
+            }], modifiable: [{
+                type: Input
+            }] } });
+
+class ProgressDisplayComponent {
+    constructor() {
+        this.progress = 50;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ProgressDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: ProgressDisplayComponent, selector: "hvy-progress-display", inputs: { progress: "progress" }, ngImport: i0, template: "<div class=\"o-progressbar\">\n  <div class=\"o-progressbar__header\">\n    <div>0%</div>\n    @if (progress > 0 && progress < 100) {\n      <div [style.flex-grow]=\"progress\" class=\"-value\">{{ progress }}%</div>\n    }\n    <div [style.flex-grow]=\"progress === 100 ? 100 : 100 - progress\">100%</div>\n  </div>\n  <div class=\"o-progressbar__value\">\n    <div [style.flex-grow]=\"progress\" class=\"-filled\"></div>\n    <div [style.flex-grow]=\"100 - progress\" class=\"-empty\"></div>\n  </div>\n</div>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ProgressDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hvy-progress-display', template: "<div class=\"o-progressbar\">\n  <div class=\"o-progressbar__header\">\n    <div>0%</div>\n    @if (progress > 0 && progress < 100) {\n      <div [style.flex-grow]=\"progress\" class=\"-value\">{{ progress }}%</div>\n    }\n    <div [style.flex-grow]=\"progress === 100 ? 100 : 100 - progress\">100%</div>\n  </div>\n  <div class=\"o-progressbar__value\">\n    <div [style.flex-grow]=\"progress\" class=\"-filled\"></div>\n    <div [style.flex-grow]=\"100 - progress\" class=\"-empty\"></div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { progress: [{
+                type: Input
+            }] } });
+
+class ForDatetimeLocalPipe {
+    constructor(store) {
+        this.store = store;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: EventDetailComponent, selector: "hvy-event-detail", inputs: { events: "events", procedure: "procedure" }, ngImport: i0, template: "<h1> TODO </h1>\n<p>Events: {{ events.length }}</p>\n<p>Procedure: {{ procedure }}</p>\n" }); }
+    transform(completeDate, ...args) {
+        return completeDate ? completeDate.substring(0, completeDate.lastIndexOf(':')) : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ForDatetimeLocalPipe, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: ForDatetimeLocalPipe, name: "forDateTimeLocal" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ForDatetimeLocalPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'forDateTimeLocal',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Store }] });
+
+class EventDetailComponent extends SubscriptionnerDirective {
+    set events(events) {
+        this._events = events.filter(ev => !!ev);
+        this.eventModifications = new Array(this._events.length);
+        this.opened = events.length === 1 ? [true] : [];
+    }
+    ;
+    set procedure(procedure) {
+        this._procedure = procedure;
+        this.procedureModifications = {};
+    }
+    set cancelModifications(evt) {
+        this.eventModifications = new Array(this._events.length);
+        this.procedureModifications = {};
+        this._outputModifications();
+    }
+    constructor(equipmentService) {
+        super();
+        this.equipmentService = equipmentService;
+        this.opened = [];
+        this.categories = HypEventCategory;
+        this.criticalities = HypEventCriticality;
+        this._events = [];
+        this.eventModifications = [];
+        this.modifiedEvents = new EventEmitter();
+        this.procedureModifications = {};
+        this.modifiedProcedure = new EventEmitter();
+    }
+    get events() {
+        return this._events.map((evt, idx) => ({ ...evt, ...(this.eventModifications[idx] ?? {}) }));
+    }
+    get procedure() {
+        return this._procedure ? ({ ...this._procedure, ...(this.procedureModifications ?? {}), events: this.events }) : undefined;
+    }
+    toggle(i) {
+        this.opened[i] = !this.opened[i];
+    }
+    modifyEvent(index, prop, $event) {
+        // @ts-ignore
+        const newValue = $event instanceof Event ? $event.target?.value : $event;
+        // @ts-ignore
+        if (this._events[index][prop] !== newValue) {
+            if (!this.eventModifications[index]) {
+                this.eventModifications[index] = {};
+            }
+            // @ts-ignore
+            this.eventModifications[index][prop] = newValue;
+            this._outputModifications();
+        }
+    }
+    access(event) {
+        switch (event.type) {
+            case 'ALERT':
+            default:
+                return {
+                    name: true,
+                    category: true,
+                    criticality: true,
+                    description: true,
+                    address: true,
+                    source: true,
+                    eqName: true,
+                    eqEntity: true,
+                    startDate: true,
+                    endDate: true,
+                };
+            case 'REPORT':
+                return {
+                    name: false,
+                    category: true,
+                    criticality: false,
+                    description: true,
+                    address: false,
+                    source: true,
+                    eqName: false,
+                    eqEntity: true,
+                    startDate: true,
+                    endDate: true,
+                };
+            case 'OPERATOR':
+                return {
+                    name: false,
+                    category: false,
+                    criticality: false,
+                    description: false,
+                    address: false,
+                    source: false,
+                    eqName: false,
+                    eqEntity: false,
+                    startDate: false,
+                    endDate: false,
+                };
+        }
+    }
+    changeEquipment(index, $event) {
+        this.equipmentService.findByName($event.target.value).subscribe((equipment) => {
+            if (equipment && this._events[index].name !== equipment.name) {
+                if (!this.eventModifications[index]) {
+                    this.eventModifications[index] = {};
+                }
+                // @ts-ignore
+                this.eventModifications[index].equipment = equipment;
+                this._outputModifications();
+            }
+        });
+    }
+    _outputModifications() {
+        this.modifiedEvents.next(this._events.map((ev, idx) => [this.eventModifications[idx], ev]));
+        this.modifiedProcedure.next(this.procedure ? [this.procedureModifications, this.procedure] : undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventDetailComponent, deps: [{ token: EquipmentService }], 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" }, 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.log.name' | i18n }}</h1>\n      <button class=\"a-btn a-btn--secondary -fix-right\">{{ '@hvy.event.log.event.close' | i18n }}</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]=\"true\"></hvy-status-display>\n            </div>\n            <div class=\"o-hvy-events-detail__events__event__content\">\n              <div>{{ '@hvy.event.log.event.description' | i18n }}: {{ event.description }}</div>\n              <div>{{ '@hvy.event.log.event.address' | i18n }}: {{ event.address }}</div>\n              @if (opened[idx]) {\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\" [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\" [items]=\"categories\"\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                                    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                                    [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                                    [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                                     [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                               [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.startDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\" [value]=\"event.startDate | forDateTimeLocal\"\n                               [readonly]=\"accessValue.startDate\" (change)=\"modifyEvent(idx, 'startDate', $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.endDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\" [value]=\"event.endDate | forDateTimeLocal\"\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: i2.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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: "<h1> TODO </h1>\n<p>Events: {{ events.length }}</p>\n<p>Procedure: {{ procedure }}</p>\n" }]
-        }], propDecorators: { events: [{
+            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.log.name' | i18n }}</h1>\n      <button class=\"a-btn a-btn--secondary -fix-right\">{{ '@hvy.event.log.event.close' | i18n }}</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]=\"true\"></hvy-status-display>\n            </div>\n            <div class=\"o-hvy-events-detail__events__event__content\">\n              <div>{{ '@hvy.event.log.event.description' | i18n }}: {{ event.description }}</div>\n              <div>{{ '@hvy.event.log.event.address' | i18n }}: {{ event.address }}</div>\n              @if (opened[idx]) {\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\" [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\" [items]=\"categories\"\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                                    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                                    [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                                    [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                                     [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                               [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.startDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\" [value]=\"event.startDate | forDateTimeLocal\"\n                               [readonly]=\"accessValue.startDate\" (change)=\"modifyEvent(idx, 'startDate', $event)\">\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>{{ '@hvy.event.endDate' | i18n }}</td>\n                      <td>\n                        <input type=\"datetime-local\" class=\"a-form-field\" [value]=\"event.endDate | forDateTimeLocal\"\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" }]
+        }], ctorParameters: () => [{ type: EquipmentService }], propDecorators: { modifiedEvents: [{
+                type: Output
+            }], modifiedProcedure: [{
+                type: Output
+            }], events: [{
                 type: Input
             }], procedure: [{
                 type: Input
+            }], cancelModifications: [{
+                type: Input
             }] } });
 
 const EventActions = {
-    load: createAction('[Event] Load Events'),
+    load: createAction('[Event] Load Events', props()),
     loadSuccess: createAction('[Event Api] (bus) Load Events Success', props()),
     loadFailure: createAction('[Event Api] Load Events Failure', props()),
     filter: createAction('[Event Api] Set filters', props()),
@@ -48,114 +317,106 @@ const EventActions = {
     getForProcedure: createAction('[Event] Load specific Event for procedure', props()),
     getSuccess: createAction('[Event Api] (bus) Get Events/Procedure Success', props()),
     getFailure: createAction('[Event Api] Get Events/Procedure Failure', props()),
+    save: createAction('[Event] Save Event', props()),
+    saveProcedure: createAction('[Event] Save Procedure and linked Events', props()),
+    saveSuccess: createAction('[Event] Save success', props()),
+    saveFailure: createAction('[Event] Save failure', props()),
 };
 
 const eventFeatureKey = '@hvy/event';
 const eventInitialState = {
     events: [],
+    noMoreEvents: false,
     loading: false,
     filters: {},
     selectedIds: [],
-    details: {}
+    details: {},
 };
-const internalReducer$2 = createReducer(eventInitialState, on(EventActions.load, (state, action) => ({
-    ...state,
-    loading: true
-})), on(EventActions.loadSuccess, (state, { events }) => ({
+const internalReducer$1 = createReducer(eventInitialState, on(EventActions.load, (state, action) => ({
     ...state,
-    loading: false,
-    events
-})), on(EventActions.loadFailure, (state, action) => ({
+    loading: true,
+})), on(EventActions.loadSuccess, (state, { events, startingFrom }) => {
+    return ({
+        ...state,
+        loading: false,
+        noMoreEvents: events.length < 20,
+        events: [...state.events.slice(0, startingFrom), ...events],
+    });
+}), on(EventActions.loadFailure, (state, action) => ({
     ...state,
     loading: false,
-    events: []
+    events: [],
 })), on(EventActions.filter, (state, { filters }) => ({
     ...state,
-    filters
+    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), [])
+    selectedIds: !cumulative ? ids : [...state.selectedIds, ...ids].reduce((p, c) => p.indexOf(c) === -1 ? [...p, c] : p.filter(p1 => p1 !== c), []),
 })), on(EventActions.get, EventActions.getForProcedure, (state, _) => ({
     ...state,
-    details: {}
+    details: {},
 })), on(EventActions.getSuccess, (state, { event, procedure }) => ({
     ...state,
-    details: { event, procedure }
+    details: { event, procedure },
 })));
 function eventReducer(state, action) {
-    return internalReducer$2(state, action);
+    return internalReducer$1(state, action);
 }
 
-const feature$2 = createFeatureSelector(eventFeatureKey);
-const events = createSelector(feature$2, (state) => state.events);
-const selectedIds = createSelector(feature$2, (state) => state.selectedIds);
-const loading$1 = createSelector(feature$2, (state) => state.loading);
-const filters = createSelector(feature$2, (state) => state.filters);
-const details = createSelector(feature$2, (state) => state.details);
+const feature$1 = createFeatureSelector(eventFeatureKey);
+const events = createSelector(feature$1, (state) => state.events);
+const noMoreEvents = createSelector(feature$1, (state) => state.noMoreEvents);
+const selectedIds = createSelector(feature$1, (state) => state.selectedIds);
+const loading$1 = createSelector(feature$1, (state) => state.loading);
+const filters = createSelector(feature$1, (state) => state.filters);
+const details = createSelector(feature$1, (state) => state.details);
 const EventSelectors = {
-    feature: feature$2,
+    feature: feature$1,
     events,
     selectedIds,
     loading: loading$1,
     filters,
-    details
+    details,
+    noMoreEvents
 };
 
-const EVENT_TO_ICON = {
-    fn: (event, store) => of(DEFAULT_ICON_URL),
-};
-class EventIconPipe {
-    constructor(store) {
-        this.store = store;
-    }
-    transform(value, ...args) {
-        return EVENT_TO_ICON.fn(value, this.store);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventIconPipe, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: EventIconPipe, name: "eventIcon" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventIconPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'eventIcon'
-                }]
-        }], ctorParameters: () => [{ type: i1.Store }] });
-
-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$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.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,
-            args: [{ selector: 'hvy-icon-display', 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" }]
-        }], propDecorators: { event: [{
-                type: Input
-            }] } });
-
 const EVENT_LINK = {
     fn: (event, store) => ['./', event.id],
 };
-class EventListComponent {
-    constructor(store) {
+class EventListComponent extends SubscriptionnerDirective {
+    constructor(store, el) {
+        super();
         this.store = store;
+        this.el = el;
         this.EVENT_LINK = EVENT_LINK;
         this._store = this.store;
-        this.store.dispatch(EventActions.load());
+        this.store.dispatch(EventActions.load({}));
         this.events$ = this.store.select(EventSelectors.events);
         this.selectedIds$ = this.store.select(EventSelectors.selectedIds);
     }
+    ngAfterViewInit() {
+        this.subscriptions.add(fromEvent(this.el.nativeElement, 'scroll')
+            .pipe(
+        // Are we close to end
+        map((e) => {
+            const target = e.currentTarget;
+            return target.scrollHeight - target.offsetHeight - target.scrollTop;
+        }), withLatestFrom(this.store.select(EventSelectors.noMoreEvents)), filter(([remaningScroll, noMore]) => !noMore && remaningScroll < 200), auditTime(200)).subscribe(() => {
+            this.store.dispatch(EventActions.load({ next: true }));
+        }));
+    }
     select(event, $event) {
         this.store.dispatch(EventActions.select({ ids: [event.id], cumulative: true }));
         $event.preventDefault();
         $event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventListComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: EventListComponent, selector: "hvy-event-list", 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.type.name' | i18n }}</th>\n    <th>{{ '@hvy.event.address' | i18n }}</th>\n    <th>{{ '@hvy.event.date' | i18n }}</th>\n    <th>{{ '@hvy.event.dateM' | i18n }}</th>\n    <th>{{ '@hvy.event.status.name' | i18n }}</th>\n    <th>{{ '@hvy.procedure.name' | i18n }}</th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n  <tr class=\"o-hvy-events-table__line\" *ngFor=\"let event of events$|async\">\n    <td class=\"o-hvy-events-table__line__cell\" (click)=\"select(event, $event)\">\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__name__main\">{{ event.name }}</div>\n      <div>{{ event.equipmentReference ? event.equipmentReference : '' }}</div>\n    </td>\n    <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.type.' + event.type | 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 } }}</td>\n    <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.status.' + event.status | i18n }}</td>\n    <td class=\"o-hvy-events-table__line__cell\">{{ event.procedureProgress }} %</td>\n    <td class=\"o-hvy-events-table__line__cell\">\n      <a [routerLink]=\"EVENT_LINK.fn(event, _store)\"><th>{{ '@hvy.action.consult' | i18n }}</th></a>\n    </td>\n  </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }, { kind: "pipe", type: i8.PrySinceDatePipe, name: "sinceDate" }] }); }
+    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>{{ '@hvy.event.creationDate' | i18n }}</th>\n    <th>{{ '@hvy.event.lastModificationDate' | i18n }}</th>\n    <th>{{ '@hvy.event.status.name' | i18n }}</th>\n    <th>{{ '@hvy.procedure.progress' | i18n }}</th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n  <tr class=\"o-hvy-events-table__line\" *ngFor=\"let event of events$|async\" (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 } }}</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  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }, { kind: "pipe", type: i9.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.type.name' | i18n }}</th>\n    <th>{{ '@hvy.event.address' | i18n }}</th>\n    <th>{{ '@hvy.event.date' | i18n }}</th>\n    <th>{{ '@hvy.event.dateM' | i18n }}</th>\n    <th>{{ '@hvy.event.status.name' | i18n }}</th>\n    <th>{{ '@hvy.procedure.name' | i18n }}</th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n  <tr class=\"o-hvy-events-table__line\" *ngFor=\"let event of events$|async\">\n    <td class=\"o-hvy-events-table__line__cell\" (click)=\"select(event, $event)\">\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__name__main\">{{ event.name }}</div>\n      <div>{{ event.equipmentReference ? event.equipmentReference : '' }}</div>\n    </td>\n    <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.type.' + event.type | 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 } }}</td>\n    <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.status.' + event.status | i18n }}</td>\n    <td class=\"o-hvy-events-table__line__cell\">{{ event.procedureProgress }} %</td>\n    <td class=\"o-hvy-events-table__line__cell\">\n      <a [routerLink]=\"EVENT_LINK.fn(event, _store)\"><th>{{ '@hvy.action.consult' | i18n }}</th></a>\n    </td>\n  </tr>\n  </tbody>\n</table>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }] });
+            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>{{ '@hvy.event.creationDate' | i18n }}</th>\n    <th>{{ '@hvy.event.lastModificationDate' | i18n }}</th>\n    <th>{{ '@hvy.event.status.name' | i18n }}</th>\n    <th>{{ '@hvy.procedure.progress' | i18n }}</th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n  <tr class=\"o-hvy-events-table__line\" *ngFor=\"let event of events$|async\" (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 } }}</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  </tbody>\n</table>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.Store }, { type: i0.ElementRef }] });
 
 const EventSummaryActions = {
     load: createAction('[Event] Load Summaries'),
@@ -174,7 +435,7 @@ const eventSummaryInitialState = {
     summaries: { ...emptySummaries },
     loading: false,
 };
-const internalReducer$1 = createReducer(eventSummaryInitialState, on(EventSummaryActions.load, (state, action) => ({
+const internalReducer = createReducer(eventSummaryInitialState, on(EventSummaryActions.load, (state, action) => ({
     ...state,
     loading: true
 })), on(EventSummaryActions.loadSuccess, (state, { summaries }) => ({
@@ -186,33 +447,31 @@ const internalReducer$1 = createReducer(eventSummaryInitialState, on(EventSummar
     loading: false
 })));
 function eventSummaryReducer(state, action) {
-    return internalReducer$1(state, action);
+    return internalReducer(state, action);
 }
 
-const feature$1 = createFeatureSelector(eventSummaryFeatureKey);
-const summaries = createSelector(feature$1, (state) => state.summaries);
-const loading = createSelector(feature$1, (state) => state.loading);
+const feature = createFeatureSelector(eventSummaryFeatureKey);
+const summaries = createSelector(feature, (state) => state.summaries);
+const loading = createSelector(feature, (state) => state.loading);
 const EventSummarySelectors = {
-    feature: feature$1,
+    feature,
     summaries,
     loading
 };
 
 class EventSummaryItemComponent {
-    constructor() {
+    constructor(store) {
+        this.store = store;
         this.linkBase = [];
-        this.linkFragments = [];
-    }
-    ngOnInit() {
-        this.linkFragments = this.linkFragments.length > 0 ? [...this.linkBase, this.event.id] : ['list', this.event.id];
+        this.EVENT_LINK = EVENT_LINK;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryItemComponent, deps: [], 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]=\"linkFragments\">\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.interventionRequestTitle\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.interventionRequestCount }}</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$1.DatePipe, name: "date" }] }); }
+    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.interventionRequestTitle\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.interventionRequestCount }}</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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hvy-event-summary-item', template: "<div class=\"m-hvy-event-summary-item\" [routerLink]=\"linkFragments\">\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.interventionRequestTitle\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.interventionRequestCount }}</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" }]
-        }], propDecorators: { event: [{
+            args: [{ selector: 'hvy-event-summary-item', 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.interventionRequestTitle\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.interventionRequestCount }}</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" }]
+        }], ctorParameters: () => [{ type: i1$1.Store }], propDecorators: { event: [{
                 type: Input,
                 args: [{ required: true }]
             }], linkBase: [{
@@ -237,13 +496,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.Store }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    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: 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.Store }, { type: i2.Router }], propDecorators: { events: [{
+        }], ctorParameters: () => [{ type: i1$1.Store }, { type: i2$1.Router }], propDecorators: { events: [{
                 type: Input
             }], totalEventCount: [{
                 type: Input
@@ -267,7 +526,7 @@ class EventSummaryPageComponent extends SubscriptionnerDirective {
         };
         this.criticalityList = ["LOW", "MEDIUM", "HIGH", "ALL"];
         this.store.dispatch(EventSummaryActions.load());
-        this.selectedCriticality$ = this.store.select(EventSelectors.filters).pipe(map((filters) => filters['criticality']?.[0] ?? 'ALL'));
+        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) => {
             this.summaries = summaries;
         }));
@@ -280,13 +539,13 @@ class EventSummaryPageComponent extends SubscriptionnerDirective {
     asIsOrder() {
         return 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryPageComponent, deps: [{ token: i1.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' | 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: 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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }] }); }
+    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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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' | 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" }]
-        }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { pageTitle: [{
+            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" }]
+        }], ctorParameters: () => [{ type: i1$1.Store }], propDecorators: { pageTitle: [{
                 type: Input
             }] } });
 
@@ -299,9 +558,9 @@ const enTranslations = {
             name: 'Event',
             type: {
                 name: 'Event type',
-                ALERT: "Alert",
-                REPORT: "Report",
-                OPERATOR: "Operator",
+                ALERT: 'Alert',
+                REPORT: 'Report',
+                OPERATOR: 'Operator',
             },
             status: {
                 name: 'Status',
@@ -310,8 +569,42 @@ const enTranslations = {
                 DONE: 'Done',
             },
             address: 'Address',
-            date: 'Effect date',
-            dateM: 'Modification date',
+            source: 'External reference',
+            equipment: 'Equipment reference',
+            equipmentEntity: 'Equipment entity',
+            startDate: 'Start date',
+            endDate: 'End date',
+            creationDate: 'Creation date',
+            lastModificationDate: 'Modification date',
+            closeDate: 'Close date',
+            log: {
+                name: 'Events log',
+                event: {
+                    description: 'Description',
+                    address: 'Address',
+                    detail: 'Information',
+                    name: 'Name',
+                    category: 'Category',
+                    comments: {
+                        name: 'Event comments',
+                        placeholder: 'Write your comment',
+                    },
+                },
+                procedure: {
+                    delete: 'Delete procedure',
+                    progress: 'Progress',
+                    noAction: 'No actions',
+                    name: 'Common procedure',
+                    addAction: 'Add action'
+                },
+            },
+            category: {
+                ALERT: 'Dysfunction alert',
+                REPORT: 'GRC report',
+                OPERATOR_EVENT: 'Operator event',
+                ALERT_LIMIT: 'Limit alert',
+                MANIFESTATION: 'Manifestation',
+            },
         },
         eventSummary: {
             noContent: 'No event with given criticality',
@@ -324,38 +617,82 @@ const enTranslations = {
                 LOW: 'Low',
                 MEDIUM: 'Medium',
                 HIGH: 'High',
-                ALL: 'All'
+                ALL: 'All',
             },
         },
         procedure: {
             name: 'Procedure',
+            progress: 'Procedure progress %',
         },
         action: {
-            consult: "Consult"
-        }
+            consult: 'Consult',
+            close: 'Close',
+            send: 'Send',
+        },
     },
 };
 
 const frTranslations = {
     '@hvy': {
         event: {
-            criticality: 'Criticité',
             name: 'Évènement',
             type: {
                 name: 'Type d\'évènement',
-                ALERT: "Alerte",
-                REPORT: "Signalement",
-                OPERATOR: "Opérateur",
+                ALERT: 'Alerte',
+                REPORT: 'Signalement',
+                OPERATOR: 'Opérateur',
             },
             status: {
-                name: 'Statut',
+                name: 'Statut évènement',
                 NEW: 'Nouveau',
                 IN_PROGRESS: 'En cours',
                 DONE: 'Clôturé',
             },
             address: 'Adresse',
-            date: 'Date d\'effet',
-            dateM: 'Date de modification',
+            source: 'Référence externe',
+            equipment: 'Référence matériel',
+            equipmentEntity: 'Entité de l\'équipement',
+            startDate: 'Date de début',
+            endDate: 'Date de fin',
+            creationDate: 'Date de création',
+            lastModificationDate: 'Date dernières modifications',
+            closeDate: 'Date de clotûre',
+            log: {
+                name: 'Journal des évènements',
+                event: {
+                    description: 'Description',
+                    address: 'Adresse',
+                    detail: 'Informations',
+                    name: 'Nom',
+                    category: 'Catégorie',
+                    close: 'Clôturer tous ces évènements',
+                    comments: {
+                        name: 'Commentaires de l\'évènement',
+                        placeholder: 'Écrivez votre commentaire'
+                    }
+                },
+                procedure: {
+                    delete: 'Supprimer la procédure',
+                    progress: 'Progression',
+                    noAction: 'Pas d\'action',
+                    name: 'Procédure commune',
+                    addAction: 'Ajouter une action'
+                },
+            },
+            category: {
+                name: "Catégorie d'évènement",
+                ALERT_MALFUNCTION: 'Alerte Dysfonctionnement',
+                REPORT: 'Signalement GRC',
+                OPERATOR_EVENT: 'Evènement Opérateur',
+                ALERT_LIMIT: 'Alerte Seuil',
+                MANIFESTATION: 'Manifestation',
+            },
+            criticality: {
+                name: 'Criticité',
+                LOW: 'Bas',
+                MEDIUM: 'Moyen',
+                HIGH: 'Haut',
+            },
         },
         eventSummary: {
             noContent: 'Aucun évènement avec la criticité donnée',
@@ -368,24 +705,22 @@ const frTranslations = {
                 LOW: 'Bas',
                 MEDIUM: 'Moyen',
                 HIGH: 'Haut',
-                ALL: 'Tous'
+                ALL: 'Tous',
             },
         },
         procedure: {
             name: 'Procédure',
+            progress: '% avancement procédure'
         },
         action: {
-            consult: "Consulter"
-        }
-    }
+            consult: 'Consulter',
+            close: 'Clotûrer',
+            send: 'Envoyer'
+        },
+    },
 };
 
-var HypEventCriticality;
-(function (HypEventCriticality) {
-    HypEventCriticality[HypEventCriticality["LOW"] = 0] = "LOW";
-    HypEventCriticality[HypEventCriticality["MEDIUM"] = 1] = "MEDIUM";
-    HypEventCriticality[HypEventCriticality["HIGH"] = 2] = "HIGH";
-})(HypEventCriticality || (HypEventCriticality = {}));
+const HypEventStatus = ['NEW', 'IN_PROGRESS', 'DONE'];
 
 var HypEventType;
 (function (HypEventType) {
@@ -398,35 +733,12 @@ var HypEventType;
  * Public API Surface of hypervisor
  */
 
-const HypervisorActions = {
-    setUrl: createAction('[Event] Set Backend Url', props())
-};
-
-const hypFeatureKey = '@hvy/general';
-const hypInitialState = {
-    url: '/api/hypervisor',
-};
-const internalReducer = createReducer(hypInitialState, on(HypervisorActions.setUrl, (state, action) => ({
-    ...state,
-    url: action.url ?? state.url,
-})));
-function hypervisorReducer(state, action) {
-    return internalReducer(state, action);
-}
-
-const feature = createFeatureSelector(hypFeatureKey);
-const url = createSelector(feature, (state) => state.url);
-const HypSelectors = {
-    feature,
-    url
-};
-
 class EventService {
     constructor(httpClient, store) {
         this.httpClient = httpClient;
         this.store = store;
     }
-    list() {
+    list(startWith = 0) {
         return this.store
             .select(HypSelectors.url)
             .pipe(withLatestFrom(this.store.select(EventSelectors.filters)), mergeMap(([url, filters]) => {
@@ -436,6 +748,8 @@ class EventService {
                     params = params.set(filter, filterValue);
                 });
             });
+            const pageSize = 20;
+            params = params.set('page', (startWith / pageSize) + 1);
             return this.httpClient.get(encodeURI(`${url}/events`), { params });
         }));
     }
@@ -453,37 +767,54 @@ class EventService {
             return this.httpClient.get(encodeURI(`${url}/procedures/id/${id}`));
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    save(event) {
+        return this.store
+            .select(HypSelectors.url)
+            .pipe(mergeMap((url) => {
+            return this.httpClient.post(encodeURI(`${url}/events/${event.type.toLowerCase()}`), event);
+        }));
+    }
+    saveProcedure(procedure) {
+        return this.store
+            .select(HypSelectors.url)
+            .pipe(mergeMap((url) => {
+            return this.httpClient.post(encodeURI(`${url}/procedures`), procedure);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventService, deps: [{ token: i1.HttpClient }, { token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i1$1.Store }] });
 
 class EventEffects {
-    constructor(actions$, eventService) {
+    constructor(actions$, eventService, store) {
         this.actions$ = actions$;
         this.eventService = eventService;
-        this.loadEvents$ = createEffect(() => this.actions$.pipe(ofType(EventActions.load), debounceTime(200), mergeMap$1((action) => this.eventService.list().pipe(map((events) => EventActions.loadSuccess({ events })), catchError((error) => [EventActions.loadFailure({ error: error })])))));
-        this.getEvent$ = createEffect(() => this.actions$.pipe(ofType(EventActions.get), debounceTime(200), mergeMap$1((action) => this.eventService.get(action.id).pipe(map((event) => EventActions.getSuccess({ event })), catchError((error) => [EventActions.getFailure({ error: error })])))));
-        this.getForProcedureEvent$ = createEffect(() => this.actions$.pipe(ofType(EventActions.getForProcedure), debounceTime(200), mergeMap$1((action) => this.eventService.getProcedure(action.id).pipe(map((procedure) => EventActions.getSuccess({ procedure })), catchError((error) => [EventActions.getFailure({ error: error })])))));
+        this.store = store;
+        this.loadEvents$ = createEffect(() => this.actions$.pipe(ofType(EventActions.load), debounceTime(200), withLatestFrom(this.store.select(EventSelectors.events), this.store.select(EventSelectors.noMoreEvents)), filter(([action, events, noMore]) => !noMore), mergeMap$1(([action, stateEvents]) => this.eventService.list(action.next ? stateEvents.length : 0).pipe(map$1((events) => EventActions.loadSuccess({ events, startingFrom: action.next ? stateEvents.length : 0 })), catchError((error) => [EventActions.loadFailure({ error: error })])))));
+        this.getEvent$ = createEffect(() => this.actions$.pipe(ofType(EventActions.get), debounceTime(200), mergeMap$1((action) => this.eventService.get(action.id).pipe(map$1((event) => EventActions.getSuccess({ event })), catchError((error) => [EventActions.getFailure({ error: error })])))));
+        this.getForProcedureEvent$ = createEffect(() => this.actions$.pipe(ofType(EventActions.getForProcedure), debounceTime(200), mergeMap$1((action) => this.eventService.getProcedure(action.id).pipe(map$1((procedure) => EventActions.getSuccess({ procedure })), catchError((error) => [EventActions.getFailure({ error: error })])))));
+        this.saveEvent$ = createEffect(() => this.actions$.pipe(ofType(EventActions.save), debounceTime(200), mergeMap$1((action) => this.eventService.save(action.event).pipe(map$1((event) => EventActions.saveSuccess({ event })), catchError((error) => [EventActions.saveFailure({ error: error })])))));
+        this.saveProcedure$ = createEffect(() => this.actions$.pipe(ofType(EventActions.saveProcedure), debounceTime(200), mergeMap$1((action) => this.eventService.saveProcedure(action.procedure).pipe(map$1((procedure) => EventActions.saveSuccess({ procedure })), catchError((error) => [EventActions.saveFailure({ error: error })])))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventEffects, deps: [{ token: i1$3.Actions }, { token: EventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: EventService }] });
+        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: EventService }, { type: i1$1.Store }] });
 
 class HypervisorService {
     constructor(httpClient, store) {
         this.httpClient = httpClient;
         this.store = store;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: HypervisorService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: HypervisorService, deps: [{ token: i1.HttpClient }, { token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: HypervisorService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: HypervisorService, decorators: [{
@@ -491,7 +822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i1$1.Store }] });
 
 class HypervisorEffects {
     constructor(actions$, eventService) {
@@ -523,7 +854,7 @@ class EventSummaryService {
             return this.httpClient.get(encodeURI(`${url}/events/summary`), { params });
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryService, deps: [{ token: i1$2.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryService, deps: [{ token: i1.HttpClient }, { token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryService, decorators: [{
@@ -531,13 +862,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i1$1.Store }] });
 
 class EventSummaryEffects {
     constructor(actions$, eventSummaryService) {
         this.actions$ = actions$;
         this.eventSummaryService = eventSummaryService;
-        this.loadSummaries$ = createEffect(() => this.actions$.pipe(ofType(EventSummaryActions.load), debounceTime(200), mergeMap$1((action) => this.eventSummaryService.list().pipe(map((summaries) => EventSummaryActions.loadSuccess({ summaries })), catchError((error) => [EventSummaryActions.loadFailure({ error: error })])))));
+        this.loadSummaries$ = createEffect(() => this.actions$.pipe(ofType(EventSummaryActions.load), debounceTime(200), mergeMap$1((action) => this.eventSummaryService.list().pipe(map$1((summaries) => EventSummaryActions.loadSuccess({ summaries })), catchError((error) => [EventSummaryActions.loadFailure({ error: error })])))));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryEffects, deps: [{ token: i1$3.Actions }, { token: EventSummaryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: EventSummaryEffects }); }
@@ -553,7 +884,10 @@ const components = [
     EventSummaryItemComponent,
     EventSummaryListComponent,
     EventSummaryPageComponent,
-    EventIconPipe
+    EventIconPipe,
+    ForDatetimeLocalPipe,
+    StatusDisplayComponent,
+    ProgressDisplayComponent
 ];
 class PvyHypervisorModule {
     static forRoot(options) {
@@ -572,14 +906,17 @@ 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.Store }, { token: i3.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,
             EventSummaryItemComponent,
             EventSummaryListComponent,
             EventSummaryPageComponent,
-            EventIconPipe], imports: [i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1$3.EffectsFeatureModule, NgForOf,
+            EventIconPipe,
+            ForDatetimeLocalPipe,
+            StatusDisplayComponent,
+            ProgressDisplayComponent], imports: [i1$1.StoreFeatureModule, i1$1.StoreFeatureModule, i1$1.StoreFeatureModule, i1$3.EffectsFeatureModule, NgForOf,
             AsyncPipe,
             PryI18nModule,
             PryCoreModule,
@@ -594,13 +931,18 @@ class PvyHypervisorModule {
             PryIconModule,
             KeyValuePipe,
             PrySelectModule,
-            FormsModule], exports: [EventDetailComponent,
+            FormsModule,
+            JsonPipe,
+            PryDatePickerModule], exports: [EventDetailComponent,
             EventListComponent,
             IconDisplayComponent,
             EventSummaryItemComponent,
             EventSummaryListComponent,
             EventSummaryPageComponent,
-            EventIconPipe] }); }
+            EventIconPipe,
+            ForDatetimeLocalPipe,
+            StatusDisplayComponent,
+            ProgressDisplayComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PvyHypervisorModule, imports: [StoreModule.forFeature(hypFeatureKey, hypervisorReducer),
             StoreModule.forFeature(eventFeatureKey, eventReducer),
             StoreModule.forFeature(eventSummaryFeatureKey, eventSummaryReducer),
@@ -613,7 +955,8 @@ class PvyHypervisorModule {
             PrySinceDateModule,
             PryIconModule,
             PrySelectModule,
-            FormsModule] }); }
+            FormsModule,
+            PryDatePickerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PvyHypervisorModule, decorators: [{
             type: NgModule,
@@ -641,7 +984,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                         PryIconModule,
                         KeyValuePipe,
                         PrySelectModule,
-                        FormsModule
+                        FormsModule,
+                        JsonPipe,
+                        PryDatePickerModule,
                     ],
                     exports: [
                         ...components
@@ -650,7 +995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [HYP_BASE_CONFIG]
-                }] }, { type: i1.Store }, { type: i3.PryI18nService }] });
+                }] }, { type: i1$1.Store }, { type: i3.PryI18nService }] });
 
 /*
  * Public API Surface of hypervisor
@@ -660,5 +1005,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EVENT_LINK, EVENT_TO_ICON, EventActions, EventDetailComponent, EventEffects, EventIconPipe, EventListComponent, EventSelectors, EventSummaryActions, EventSummaryEffects, EventSummaryItemComponent, EventSummaryListComponent, EventSummaryPageComponent, EventSummarySelectors, HYP_BASE_CONFIG, HypEventCriticality, HypEventType, IconDisplayComponent, PvyHypervisorModule, enTranslations, eventFeatureKey, eventInitialState, eventReducer, eventSummaryFeatureKey, eventSummaryInitialState, eventSummaryReducer, frTranslations };
+export { EVENT_LINK, EVENT_TO_ICON, EquipmentService, EventActions, EventDetailComponent, EventEffects, EventIconPipe, EventListComponent, EventSelectors, EventService, EventSummaryActions, EventSummaryEffects, EventSummaryItemComponent, EventSummaryListComponent, EventSummaryPageComponent, EventSummarySelectors, ForDatetimeLocalPipe, HYP_BASE_CONFIG, HypEventCategory, HypEventCriticality, HypEventStatus, HypEventType, HypSelectors, HypervisorActions, HypervisorEffects, HypervisorService, IconDisplayComponent, ProgressDisplayComponent, PvyHypervisorModule, StatusDisplayComponent, enTranslations, eventFeatureKey, eventInitialState, eventReducer, eventSummaryFeatureKey, eventSummaryInitialState, eventSummaryReducer, frTranslations, hypFeatureKey, hypInitialState, hypervisorReducer };
 //# sourceMappingURL=provoly-hypervisor.mjs.map