@provoly/hypervisor 0.0.29 → 0.0.31

package/fesm2022/provoly-hypervisor.mjs

@@ -7,7 +7,7 @@ import { createAction, props, createReducer, on, createFeatureSelector, createSe
 import * as i3$1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { mergeMap, of, fromEvent, combineLatest, map, withLatestFrom, filter, auditTime, BehaviorSubject } from 'rxjs';
+import { mergeMap, of, fromEvent, withLatestFrom, filter, auditTime, combineLatest, map as map$1, BehaviorSubject, Subject, debounceTime, switchMap, distinctUntilChanged } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
 import * as i4 from '@provoly/dashboard/components/checkbox';
@@ -18,9 +18,9 @@ import * as i1$2 from '@angular/common';
 import { NgForOf, AsyncPipe, NgStyle, DatePipe, KeyValuePipe, JsonPipe } from '@angular/common';
 import * as i2 from '@angular/router';
 import { RouterLink } from '@angular/router';
-import * as i10 from '@provoly/dashboard/components/sinceDate';
+import { map, startWith, catchError, debounceTime as debounceTime$1, mergeMap as mergeMap$1 } from 'rxjs/operators';
+import * as i11 from '@provoly/dashboard/components/sinceDate';
 import { PrySinceDateModule } from '@provoly/dashboard/components/sinceDate';
-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';
 
@@ -60,7 +60,9 @@ const EventActions = {
     status: createAction('[Event] Close Event or Procedure', props()),
     statusSuccess: createAction('[Event] Close success'),
     statusFailure: createAction('[Event] Close failure', props()),
-    sort: createAction('[Event] set log event sorting', props())
+    sort: createAction('[Event] set log event sorting', props()),
+    associateProcedure: createAction('[Event] Associate Procedure to Event', props()),
+    associateProcedureFailure: createAction('[Event] Associate Procedure to Event Failure', props())
 };
 
 const HypervisorActions = {
@@ -71,18 +73,18 @@ const hypFeatureKey = '@hvy/general';
 const hypInitialState = {
     url: '/api/hypervisor',
 };
-const internalReducer$2 = createReducer(hypInitialState, on(HypervisorActions.setUrl, (state, action) => ({
+const internalReducer$3 = createReducer(hypInitialState, on(HypervisorActions.setUrl, (state, action) => ({
     ...state,
     url: action.url ?? state.url,
 })));
 function hypervisorReducer(state, action) {
-    return internalReducer$2(state, action);
+    return internalReducer$3(state, action);
 }
 
-const feature$2 = createFeatureSelector(hypFeatureKey);
-const url = createSelector(feature$2, (state) => state.url);
+const feature$3 = createFeatureSelector(hypFeatureKey);
+const url = createSelector(feature$3, (state) => state.url);
 const HypSelectors = {
-    feature: feature$2,
+    feature: feature$3,
     url
 };
 
@@ -542,7 +544,7 @@ const eventInitialState = {
     selectedIds: [],
     details: {}
 };
-const internalReducer$1 = createReducer(eventInitialState, on(EventActions.load, (state, action) => ({
+const internalReducer$2 = createReducer(eventInitialState, on(EventActions.load, (state, action) => ({
     ...state,
     loading: true
 })), on(EventActions.loadSuccess, (state, { events, startingFrom }) => {
@@ -579,77 +581,107 @@ const internalReducer$1 = createReducer(eventInitialState, on(EventActions.load,
     filters: { ...state.filters, [filterSet]: filters }
 })));
 function eventReducer(state, action) {
-    return internalReducer$1(state, action);
+    return internalReducer$2(state, action);
 }
 
-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 sort = createSelector(feature$1, (state) => state.sort);
+const feature$2 = createFeatureSelector(eventFeatureKey);
+const events = createSelector(feature$2, (state) => state.events);
+const noMoreEvents = createSelector(feature$2, (state) => state.noMoreEvents);
+const selectedIds = createSelector(feature$2, (state) => state.selectedIds);
+const selectedEvents = createSelector(feature$2, (state) => state.events.filter((event) => state.selectedIds.includes(event.id)));
+const loading$2 = createSelector(feature$2, (state) => state.loading);
+const filters = createSelector(feature$2, (state) => state.filters);
+const details = createSelector(feature$2, (state) => state.details);
+const sort$1 = createSelector(feature$2, (state) => state.sort);
 const EventSelectors = {
-    feature: feature$1,
+    feature: feature$2,
     events,
     selectedIds,
-    loading: loading$1,
+    selectedEvents,
+    loading: loading$2,
     filters,
     details,
     noMoreEvents,
-    sort
+    sort: sort$1
 };
 
+const SCROLL_PX_TO_TRIGGER_FETCH_PAGE = { value: 200 };
+class InfiniteScrollService {
+    constructor(store) {
+        this.store = store;
+        this.isEndOfPage = (scrollContainer, noMoreSelector) => {
+            return fromEvent((scrollContainer), 'scroll').pipe(map((e) => {
+                const target = e.currentTarget;
+                return target.scrollHeight - target.offsetHeight - target.scrollTop;
+            }), withLatestFrom(this.store.select(noMoreSelector)), filter(([remaningScroll, noMore]) => !noMore && remaningScroll < SCROLL_PX_TO_TRIGGER_FETCH_PAGE.value), auditTime(200));
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: InfiniteScrollService, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: InfiniteScrollService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: InfiniteScrollService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Store }] });
+
 class ColumnOrderComponent extends SubscriptionnerDirective {
     constructor(store) {
         super();
         this.store = store;
         this.field = 'no-field-defined';
-        this.subscriptions.add(this.store.select(EventSelectors.sort).subscribe(sort => this.sortValue = sort));
-    }
-    sort(order) {
-        this.store.dispatch(EventActions.sort({ field: this.field, order }));
     }
+    sort(order) { }
     isActive(order) {
         return this.field === this.sortValue?.field && order === this.sortValue.order;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ColumnOrderComponent, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ColumnOrderComponent, selector: "hvy-column-order", inputs: { field: "field" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-column-order\">\n  <div>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"o-hvy-column-order__chevrons\">\n    <pry-icon iconSvg=\"caret_top\" (click)=\"sort('ASC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('ASC')\"></pry-icon>\n    <pry-icon iconSvg=\"caret_bottom\" (click)=\"sort('DESC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('DESC')\"></pry-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ColumnOrderComponent, selector: "hvy-column-order", inputs: { field: "field" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-column-order\">\n  <div class=\"o-hvy-column-order__content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"o-hvy-column-order__chevrons\">\n    <pry-icon iconSvg=\"caret_top\" (click)=\"sort('ASC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('ASC')\"></pry-icon>\n    <pry-icon iconSvg=\"caret_bottom\" (click)=\"sort('DESC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('DESC')\"></pry-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ColumnOrderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hvy-column-order', template: "<div class=\"o-hvy-column-order\">\n  <div>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"o-hvy-column-order__chevrons\">\n    <pry-icon iconSvg=\"caret_top\" (click)=\"sort('ASC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('ASC')\"></pry-icon>\n    <pry-icon iconSvg=\"caret_bottom\" (click)=\"sort('DESC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('DESC')\"></pry-icon>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'hvy-column-order', template: "<div class=\"o-hvy-column-order\">\n  <div class=\"o-hvy-column-order__content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"o-hvy-column-order__chevrons\">\n    <pry-icon iconSvg=\"caret_top\" (click)=\"sort('ASC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('ASC')\"></pry-icon>\n    <pry-icon iconSvg=\"caret_bottom\" (click)=\"sort('DESC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('DESC')\"></pry-icon>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.Store }], propDecorators: { field: [{
                 type: Input
             }] } });
 
+class EventColumnOrderComponent extends ColumnOrderComponent {
+    constructor(store) {
+        super(store);
+        this.subscriptions.add(this.store.select(EventSelectors.sort).subscribe(sort => this.sortValue = sort));
+    }
+    sort(order) {
+        this.store.dispatch(EventActions.sort({ field: this.field, order }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: EventColumnOrderComponent, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: EventColumnOrderComponent, selector: "hvy-event-column-order", usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-column-order\">\n  <div class=\"o-hvy-column-order__content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"o-hvy-column-order__chevrons\">\n    <pry-icon iconSvg=\"caret_top\" (click)=\"sort('ASC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('ASC')\"></pry-icon>\n    <pry-icon iconSvg=\"caret_bottom\" (click)=\"sort('DESC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('DESC')\"></pry-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: EventColumnOrderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hvy-event-column-order', template: "<div class=\"o-hvy-column-order\">\n  <div class=\"o-hvy-column-order__content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"o-hvy-column-order__chevrons\">\n    <pry-icon iconSvg=\"caret_top\" (click)=\"sort('ASC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('ASC')\"></pry-icon>\n    <pry-icon iconSvg=\"caret_bottom\" (click)=\"sort('DESC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('DESC')\"></pry-icon>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.Store }] });
+
 const EVENT_LINK = {
     fn: (event, store) => ['./', event.id]
 };
-const SCROLL_PX_TO_TRIGGER_FETCH_PAGE = { value: 200 };
 class EventListComponent extends SubscriptionnerDirective {
-    constructor(store, el, router) {
+    constructor(store, el, router, scroll) {
         super();
         this.store = store;
         this.el = el;
         this.router = router;
+        this.scroll = scroll;
         this.EVENT_LINK = EVENT_LINK;
         this._store = this.store;
         this._inhibate = true;
         this.store.dispatch(EventActions.load({}));
         this.events$ = this.store.select(EventSelectors.events);
         this.selectedIds$ = this.store.select(EventSelectors.selectedIds);
-        this.allSelected$ = combineLatest([this.events$, this.selectedIds$]).pipe(map(([events, selectedIds]) => events.filter((ev) => !selectedIds.includes(ev.id)).length === 0));
+        this.allSelected$ = combineLatest([this.events$, this.selectedIds$]).pipe(map$1(([events, selectedIds]) => events.filter((ev) => !selectedIds.includes(ev.id)).length === 0));
     }
     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 < SCROLL_PX_TO_TRIGGER_FETCH_PAGE.value), auditTime(200))
+        this.subscriptions.add(this.scroll.isEndOfPage(this.el.nativeElement, EventSelectors.noMoreEvents)
             .subscribe(() => {
             this.store.dispatch(EventActions.load({ next: true }));
         }));
@@ -673,16 +705,16 @@ class EventListComponent extends SubscriptionnerDirective {
         this._inhibate = true;
         setTimeout(() => (this._inhibate = false), 100);
     }
-    goto(event) {
+    goTo(event) {
         return this.router.navigate(this.EVENT_LINK.fn(event, this.store));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: EventListComponent, deps: [{ token: i1$1.Store }, { token: i0.ElementRef }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: EventListComponent, selector: "hvy-event-list", usesInheritance: true, ngImport: i0, template: "<table class=\"o-hvy-events-table\">\n  <thead>\n  <tr class=\"o-hvy-events-table__header\">\n    <th>\n      <pry-checkbox [ngModel]=\"allSelected$|async\" (ngModelChange)=\"selectAll($event)\"></pry-checkbox>\n    </th>\n    <th>{{ '@hvy.event.criticality.name' | i18n }}</th>\n    <th>{{ '@hvy.event.name' | i18n }}</th>\n    <th>{{ '@hvy.event.category.name' | i18n }}</th>\n    <th>{{ '@hvy.event.address' | i18n }}</th>\n    <th>\n      <hvy-column-order field=\"creationDate\">{{ '@hvy.event.creationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"lastModificationDate\">{{ '@hvy.event.lastModificationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"status\">{{ '@hvy.event.status.name' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"procedureProgress\">{{ '@hvy.procedure.progress' | i18n }}</hvy-column-order>\n    </th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n    @for (event of events$|async; track event.id) {\n      <tr class=\"o-hvy-events-table__line\" (click)=\"goto(event)\">\n        <td class=\"o-hvy-events-table__line__cell\">\n          <pry-checkbox [ngModel]=\"(selectedIds$|async)!.includes(event.id)\"\n                        (click)=\"select(event, $event)\"></pry-checkbox>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <div class=\"o-hvy-events-table__line__cell__name__main\">{{ event.name }}</div>\n          <div\n            class=\"o-hvy-events-table__line__cell__name__sub\">{{ event.equipment?.name ? event.equipment?.name : '' }}\n          </div>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.category.' + event.category | i18n }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.address }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.creationDate| sinceDate: { onlyLocale: true } }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.lastModificationDate | sinceDate: { onlyLocale: true } }}\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-status-display [event]=\"event\"></hvy-status-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          {{ event.procedureProgress }} %\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <a [routerLink]=\"EVENT_LINK.fn(event, _store)\">\n            > {{ '@hvy.action.consult' | i18n }} @if (event.linkedEvents > 1) {\n            ({{ event.linkedEvents }})\n          }\n          </a>\n        </td>\n      </tr>\n    } @empty {\n      <tr>\n        <td class=\"o-hvy-events-table__empty\" colspan=\"50\">\n          <div>{{ '@hvy.event.log.empty' | i18n }}.</div>\n          <div>\n            <ng-content></ng-content>\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: i4.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconDisplayComponent, selector: "hvy-icon-display", inputs: ["event"] }, { kind: "component", type: StatusDisplayComponent, selector: "hvy-status-display", inputs: ["event", "modifiable"], outputs: ["modified"] }, { kind: "component", type: ColumnOrderComponent, selector: "hvy-column-order", inputs: ["field"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }, { kind: "pipe", type: i10.PrySinceDatePipe, name: "sinceDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: EventListComponent, deps: [{ token: i1$1.Store }, { token: i0.ElementRef }, { token: i2.Router }, { token: InfiniteScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", 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 class=\"-checkbox\">\n      <pry-checkbox [ngModel]=\"allSelected$|async\" (ngModelChange)=\"selectAll($event)\"></pry-checkbox>\n    </th>\n    <th>{{ '@hvy.event.criticality.name' | i18n }}</th>\n    <th>{{ '@hvy.event.name' | i18n }}</th>\n    <th>{{ '@hvy.event.category.name' | i18n }}</th>\n    <th>{{ '@hvy.event.address' | i18n }}</th>\n    <th>\n      <hvy-event-column-order field=\"creationDate\">{{ '@hvy.event.creationDate' | i18n }}</hvy-event-column-order>\n    </th>\n    <th>\n      <hvy-event-column-order field=\"lastModificationDate\">{{ '@hvy.event.lastModificationDate' | i18n }}</hvy-event-column-order>\n    </th>\n    <th>\n      <hvy-event-column-order field=\"status\">{{ '@hvy.event.status.name' | i18n }}</hvy-event-column-order>\n    </th>\n    <th>\n      <hvy-event-column-order field=\"procedureProgress\">{{ '@hvy.procedure.progress' | i18n }}</hvy-event-column-order>\n    </th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n    @for (event of events$|async; track event.id) {\n      <tr class=\"o-hvy-events-table__line\" (click)=\"goTo(event)\">\n        <td class=\"o-hvy-events-table__line__cell\">\n          <pry-checkbox [ngModel]=\"(selectedIds$|async)!.includes(event.id)\"\n                        (click)=\"select(event, $event)\"></pry-checkbox>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <div class=\"o-hvy-events-table__line__cell__name__main\">{{ event.name }}</div>\n          <div\n            class=\"o-hvy-events-table__line__cell__name__sub\">{{ event.equipment?.name ? event.equipment?.name : '' }}\n          </div>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.category.' + event.category | i18n }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.address }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.creationDate| sinceDate: { onlyLocale: true } }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.lastModificationDate | sinceDate: { onlyLocale: true } }}\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-status-display [event]=\"event\"></hvy-status-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          {{ event.procedureProgress }} %\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <a [routerLink]=\"EVENT_LINK.fn(event, _store)\">\n            > {{ '@hvy.action.consult' | i18n }} @if (event.linkedEvents > 1) {\n            ({{ event.linkedEvents }})\n          }\n          </a>\n        </td>\n      </tr>\n    } @empty {\n      <tr>\n        <td class=\"o-hvy-events-table__empty\" colspan=\"50\">\n          <div>{{ '@hvy.event.log.empty' | i18n }}.</div>\n          <div>\n            <ng-content></ng-content>\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: i4.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EventColumnOrderComponent, selector: "hvy-event-column-order" }, { 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: i11.PrySinceDatePipe, name: "sinceDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", 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>\n      <pry-checkbox [ngModel]=\"allSelected$|async\" (ngModelChange)=\"selectAll($event)\"></pry-checkbox>\n    </th>\n    <th>{{ '@hvy.event.criticality.name' | i18n }}</th>\n    <th>{{ '@hvy.event.name' | i18n }}</th>\n    <th>{{ '@hvy.event.category.name' | i18n }}</th>\n    <th>{{ '@hvy.event.address' | i18n }}</th>\n    <th>\n      <hvy-column-order field=\"creationDate\">{{ '@hvy.event.creationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"lastModificationDate\">{{ '@hvy.event.lastModificationDate' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"status\">{{ '@hvy.event.status.name' | i18n }}</hvy-column-order>\n    </th>\n    <th>\n      <hvy-column-order field=\"procedureProgress\">{{ '@hvy.procedure.progress' | i18n }}</hvy-column-order>\n    </th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n    @for (event of events$|async; track event.id) {\n      <tr class=\"o-hvy-events-table__line\" (click)=\"goto(event)\">\n        <td class=\"o-hvy-events-table__line__cell\">\n          <pry-checkbox [ngModel]=\"(selectedIds$|async)!.includes(event.id)\"\n                        (click)=\"select(event, $event)\"></pry-checkbox>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <div class=\"o-hvy-events-table__line__cell__name__main\">{{ event.name }}</div>\n          <div\n            class=\"o-hvy-events-table__line__cell__name__sub\">{{ event.equipment?.name ? event.equipment?.name : '' }}\n          </div>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.category.' + event.category | i18n }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.address }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.creationDate| sinceDate: { onlyLocale: true } }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.lastModificationDate | sinceDate: { onlyLocale: true } }}\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-status-display [event]=\"event\"></hvy-status-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          {{ event.procedureProgress }} %\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <a [routerLink]=\"EVENT_LINK.fn(event, _store)\">\n            > {{ '@hvy.action.consult' | i18n }} @if (event.linkedEvents > 1) {\n            ({{ event.linkedEvents }})\n          }\n          </a>\n        </td>\n      </tr>\n    } @empty {\n      <tr>\n        <td class=\"o-hvy-events-table__empty\" colspan=\"50\">\n          <div>{{ '@hvy.event.log.empty' | i18n }}.</div>\n          <div>\n            <ng-content></ng-content>\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.Store }, { type: i0.ElementRef }, { type: i2.Router }] });
+            args: [{ selector: 'hvy-event-list', template: "<table class=\"o-hvy-events-table\">\n  <thead>\n  <tr class=\"o-hvy-events-table__header\">\n    <th class=\"-checkbox\">\n      <pry-checkbox [ngModel]=\"allSelected$|async\" (ngModelChange)=\"selectAll($event)\"></pry-checkbox>\n    </th>\n    <th>{{ '@hvy.event.criticality.name' | i18n }}</th>\n    <th>{{ '@hvy.event.name' | i18n }}</th>\n    <th>{{ '@hvy.event.category.name' | i18n }}</th>\n    <th>{{ '@hvy.event.address' | i18n }}</th>\n    <th>\n      <hvy-event-column-order field=\"creationDate\">{{ '@hvy.event.creationDate' | i18n }}</hvy-event-column-order>\n    </th>\n    <th>\n      <hvy-event-column-order field=\"lastModificationDate\">{{ '@hvy.event.lastModificationDate' | i18n }}</hvy-event-column-order>\n    </th>\n    <th>\n      <hvy-event-column-order field=\"status\">{{ '@hvy.event.status.name' | i18n }}</hvy-event-column-order>\n    </th>\n    <th>\n      <hvy-event-column-order field=\"procedureProgress\">{{ '@hvy.procedure.progress' | i18n }}</hvy-event-column-order>\n    </th>\n    <th></th>\n  </tr>\n  </thead>\n  <tbody>\n    @for (event of events$|async; track event.id) {\n      <tr class=\"o-hvy-events-table__line\" (click)=\"goTo(event)\">\n        <td class=\"o-hvy-events-table__line__cell\">\n          <pry-checkbox [ngModel]=\"(selectedIds$|async)!.includes(event.id)\"\n                        (click)=\"select(event, $event)\"></pry-checkbox>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <div class=\"o-hvy-events-table__line__cell__name__main\">{{ event.name }}</div>\n          <div\n            class=\"o-hvy-events-table__line__cell__name__sub\">{{ event.equipment?.name ? event.equipment?.name : '' }}\n          </div>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">{{ '@hvy.event.category.' + event.category | i18n }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.address }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.creationDate| sinceDate: { onlyLocale: true } }}</td>\n        <td class=\"o-hvy-events-table__line__cell\">{{ event.lastModificationDate | sinceDate: { onlyLocale: true } }}\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          <hvy-status-display [event]=\"event\"></hvy-status-display>\n        </td>\n        <td class=\"o-hvy-events-table__line__cell -centered\">\n          {{ event.procedureProgress }} %\n        </td>\n        <td class=\"o-hvy-events-table__line__cell\">\n          <a [routerLink]=\"EVENT_LINK.fn(event, _store)\">\n            > {{ '@hvy.action.consult' | i18n }} @if (event.linkedEvents > 1) {\n            ({{ event.linkedEvents }})\n          }\n          </a>\n        </td>\n      </tr>\n    } @empty {\n      <tr>\n        <td class=\"o-hvy-events-table__empty\" colspan=\"50\">\n          <div>{{ '@hvy.event.log.empty' | i18n }}.</div>\n          <div>\n            <ng-content></ng-content>\n          </div>\n        </td>\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.Store }, { type: i0.ElementRef }, { type: i2.Router }, { type: InfiniteScrollService }] });
 
 class EventFiltersComponent extends SubscriptionnerDirective {
     constructor(store) {
@@ -902,6 +934,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 args: ['template', { read: TemplateRef }]
             }] } });
 
+const ProcedureActions = {
+    load: createAction('[Procedure] Load Procedures', props()),
+    loadSuccess: createAction('[Procedure] (bus) Load Procedure Success', props()),
+    loadFailure: createAction('[Procedure] Load Procedures Failure', props()),
+    sort: createAction('[Procedure] Set Procedure List Sorting', props()),
+    search: createAction('[Procedure] Set Search Query Value', props()),
+    setCategory: createAction('[Procedure] Set Category Value', props())
+};
+
+const procedureFeatureKey = '@hvy/procedure';
+const procedureInitialState = {
+    procedures: [],
+    noMoreProcedures: false,
+    loading: false,
+};
+const internalReducer$1 = createReducer(procedureInitialState, on(ProcedureActions.load, (state) => ({
+    ...state,
+    loading: true
+})), on(ProcedureActions.loadSuccess, (state, { procedures, startingFrom }) => {
+    return {
+        ...state,
+        loading: false,
+        noMoreProcedures: procedures.length < 20,
+        procedures: [...state.procedures.slice(0, startingFrom), ...procedures]
+    };
+}), on(ProcedureActions.loadFailure, (state) => ({
+    ...state,
+    loading: false,
+    procedures: []
+})), on(ProcedureActions.search, (state, { search }) => ({
+    ...state,
+    events: [],
+    noMoreProcedures: false,
+    search
+})), on(ProcedureActions.sort, (state, { field, order }) => ({
+    ...state,
+    events: [],
+    noMoreProcedures: false,
+    sort: { field, order }
+})));
+function procedureReducer(state, action) {
+    return internalReducer$1(state, action);
+}
+
+const feature$1 = createFeatureSelector(procedureFeatureKey);
+const procedures = createSelector(feature$1, (state) => state.procedures);
+const noMoreProcedures = createSelector(feature$1, (state) => state.noMoreProcedures);
+const loading$1 = createSelector(feature$1, (state) => state.loading);
+const search = createSelector(feature$1, (state) => state.search);
+const sort = createSelector(feature$1, (state) => state.sort);
+const ProcedureSelectors = {
+    feature: feature$1,
+    procedures,
+    loading: loading$1,
+    noMoreProcedures,
+    search,
+    sort
+};
+
+const PROCEDURE_PAGE_SIZE_FETCH = { value: 20 };
+class ProcedureService {
+    constructor(httpClient, store) {
+        this.httpClient = httpClient;
+        this.store = store;
+    }
+    list(startWith = 0, pageSize = PROCEDURE_PAGE_SIZE_FETCH.value) {
+        return this.store.select(HypSelectors.url).pipe(withLatestFrom(this.store.select(ProcedureSelectors.sort), this.store.select(ProcedureSelectors.search)), mergeMap(([url, sort, search]) => {
+            let params = new HttpParams();
+            params = params.set('page', startWith / pageSize + 1);
+            if (search)
+                params = params.set('search', search);
+            if (sort)
+                params = params.set('sort', sort.field).set('order', sort.order);
+            return this.httpClient.get(encodeURI(`${url}/procedures/catalog`), { params });
+        }));
+    }
+    getTop10ByUsage(domain, nameSearch) {
+        return this.store.select(HypSelectors.url).pipe(mergeMap((url) => {
+            let params = new HttpParams();
+            params = params
+                .set('sort', 'useCount')
+                .set('order', 'desc')
+                .set('pageSize', '10');
+            if (nameSearch)
+                params = params.set('name', nameSearch);
+            if (domain)
+                params = params.set('domain', domain);
+            return this.httpClient.get(encodeURI(`${url}/procedures/catalog`), { params });
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureService, deps: [{ token: i1.HttpClient }, { token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i1$1.Store }] });
+
+class ProcedureAssociationModalComponent extends SubscriptionnerDirective {
+    constructor(store, procedureService, dialog) {
+        super();
+        this.store = store;
+        this.procedureService = procedureService;
+        this.dialog = dialog;
+        this.onDomainSelect$ = new Subject;
+        this.onProcedureSearch$ = new Subject;
+        this.DOMAINS = DOMAINS.values;
+        this.selectedEvents$ = this.store.select(EventSelectors.selectedEvents);
+        this.procedures$ = combineLatest([
+            this.onDomainSelect$.pipe(startWith()),
+            this.onProcedureSearch$.pipe(startWith(), debounceTime(500)),
+        ]).pipe(switchMap(([_, __]) => {
+            const search = typeof this.procedureSelectValue === 'string' && this.procedureSelectValue.length > 2 ? this.procedureSelectValue : undefined;
+            return this.procedureService.getTop10ByUsage(this.selectedDomain, search);
+        }), catchError(() => {
+            throw new Error('Procedure catalog not implemented yet');
+        }));
+    }
+    onDomainChange() {
+        this.onDomainSelect$.next();
+        this.procedureSelectValue = undefined;
+    }
+    selectedProcedureChange($event) {
+        this.procedureSelectValue = $event;
+        this.onProcedureSearch$.next();
+    }
+    associateProcedure() {
+        this.store.dispatch(EventActions.associateProcedure({ procedureId: this.procedureSelectValue.id }));
+        this.closeModal();
+    }
+    isProcedureSelected() {
+        return typeof this.procedureSelectValue === 'object';
+    }
+    closeModal() {
+        this.dialog.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureAssociationModalComponent, deps: [{ token: i1$1.Store }, { token: ProcedureService }, { token: i3.PryDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ProcedureAssociationModalComponent, selector: "hvy-procedure-association-modal", usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-association-modal u-display-flex -column -align-center\">\n  <h3>{{ '@hvy.associationModal.title' | i18n }}</h3>\n  <span class=\"o-hvy-association-modal__description\">{{ '@hvy.associationModal.description' | i18n }}</span>\n  <div class=\"o-hvy-association-modal__content u-display-flex -justify-space-between\">\n    @if (selectedEvents$ | async; as selectedEvents) {\n      <div>\n        <label>\u00C9v\u00E9nements li\u00E9s ({{ selectedEvents.length }}) :</label>\n        <ul class=\"o-hvy-association-modal__events\">\n          @for (event of selectedEvents; track event.id) {\n            <li class=\"o-hvy-association-modal__event u-display-flex -align-center\">\n              <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n              <div class=\"o-hvy-association-modal__event-detail u-display-flex -column\">\n                <span class=\"o-hvy-association-modal__event-name\">{{ event.name }}</span>\n                @if (event.equipment) {\n                  <span class=\"o-hvy-association-modal__equipment-name\">{{ event.equipment.name }}</span>\n                }\n              </div>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n    <div class=\"o-hvy-association-modal__form\">\n      <div class=\"m-form-label-field\">\n        <label>{{ '@hvy.associationModal.categoryFilter' | i18n }}</label>\n        <pry-select\n          [items]=\"DOMAINS\"\n          [(ngModel)]=\"selectedDomain\"\n          (ngModelChange)=\"onDomainChange()\"\n          [placeholder]=\"'@hvy.associationModal.domainPlaceholder' | i18n\"\n          i18nPrefix=\"@hvy.event.domain.\"\n          id=\"category-filter\"></pry-select>\n      </div>\n      <div class=\"m-form-label-field\">\n        <label for=\"procedure-filter\">{{ '@hvy.associationModal.searchProcedure' | i18n }}<span class=\"text-error\">*</span> : </label>\n        <pry-select\n          [items]=\"procedures$ | async\"\n          bindLabel=\"name\"\n          [(ngModel)]=\"procedureSelectValue\"\n          (ngModelChange)=\"selectedProcedureChange($event)\"\n          [autocomplete]=\"true\"\n          [externalAutocompleteService]=\"true\"\n          [placeholder]=\"'@hvy.associationModal.procedurePlaceholder' | i18n\"\n          id=\"procedure-filter\"></pry-select>\n      </div>\n    </div>\n  </div>\n  <div class=\"o-hvy-association-modal__buttons u-display-flex -justify-center\">\n    <button class=\"a-btn a-btn--primary\" [disabled]=\"!isProcedureSelected()\" (click)=\"associateProcedure()\">{{ '@hvy.action.validate' | i18n }}</button>\n    <button class=\"a-btn a-btn--secondary\" (click)=\"closeModal()\">{{ '@hvy.action.cancel' | i18n }}</button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "component", type: IconDisplayComponent, selector: "hvy-icon-display", inputs: ["event"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureAssociationModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hvy-procedure-association-modal', template: "<div class=\"o-hvy-association-modal u-display-flex -column -align-center\">\n  <h3>{{ '@hvy.associationModal.title' | i18n }}</h3>\n  <span class=\"o-hvy-association-modal__description\">{{ '@hvy.associationModal.description' | i18n }}</span>\n  <div class=\"o-hvy-association-modal__content u-display-flex -justify-space-between\">\n    @if (selectedEvents$ | async; as selectedEvents) {\n      <div>\n        <label>\u00C9v\u00E9nements li\u00E9s ({{ selectedEvents.length }}) :</label>\n        <ul class=\"o-hvy-association-modal__events\">\n          @for (event of selectedEvents; track event.id) {\n            <li class=\"o-hvy-association-modal__event u-display-flex -align-center\">\n              <hvy-icon-display [event]=\"event\"></hvy-icon-display>\n              <div class=\"o-hvy-association-modal__event-detail u-display-flex -column\">\n                <span class=\"o-hvy-association-modal__event-name\">{{ event.name }}</span>\n                @if (event.equipment) {\n                  <span class=\"o-hvy-association-modal__equipment-name\">{{ event.equipment.name }}</span>\n                }\n              </div>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n    <div class=\"o-hvy-association-modal__form\">\n      <div class=\"m-form-label-field\">\n        <label>{{ '@hvy.associationModal.categoryFilter' | i18n }}</label>\n        <pry-select\n          [items]=\"DOMAINS\"\n          [(ngModel)]=\"selectedDomain\"\n          (ngModelChange)=\"onDomainChange()\"\n          [placeholder]=\"'@hvy.associationModal.domainPlaceholder' | i18n\"\n          i18nPrefix=\"@hvy.event.domain.\"\n          id=\"category-filter\"></pry-select>\n      </div>\n      <div class=\"m-form-label-field\">\n        <label for=\"procedure-filter\">{{ '@hvy.associationModal.searchProcedure' | i18n }}<span class=\"text-error\">*</span> : </label>\n        <pry-select\n          [items]=\"procedures$ | async\"\n          bindLabel=\"name\"\n          [(ngModel)]=\"procedureSelectValue\"\n          (ngModelChange)=\"selectedProcedureChange($event)\"\n          [autocomplete]=\"true\"\n          [externalAutocompleteService]=\"true\"\n          [placeholder]=\"'@hvy.associationModal.procedurePlaceholder' | i18n\"\n          id=\"procedure-filter\"></pry-select>\n      </div>\n    </div>\n  </div>\n  <div class=\"o-hvy-association-modal__buttons u-display-flex -justify-center\">\n    <button class=\"a-btn a-btn--primary\" [disabled]=\"!isProcedureSelected()\" (click)=\"associateProcedure()\">{{ '@hvy.action.validate' | i18n }}</button>\n    <button class=\"a-btn a-btn--secondary\" (click)=\"closeModal()\">{{ '@hvy.action.cancel' | i18n }}</button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.Store }, { type: ProcedureService }, { type: i3.PryDialogRef }] });
+
 const EventSummaryActions = {
     load: createAction('[Event] Load Summaries'),
     loadSuccess: createAction('[Event Api] Load Summaries Success', props()),
@@ -1009,6 +1187,11 @@ class EventService {
             return this.httpClient.put(encodeURI(`${url}/procedures/id/${procedure.id}/close`), { status, comment });
         }));
     }
+    associateProcedure(procedureId) {
+        return this.store.select(HypSelectors.url).pipe(withLatestFrom(this.store.select(EventSelectors.selectedIds)), mergeMap(([url, selectedIds]) => {
+            return this.httpClient.put(encodeURI(`${url}/procedures/catalog/id/${procedureId}`), { id: procedureId, events: selectedIds });
+        }));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", 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.3.4", ngImport: i0, type: EventService, providedIn: 'root' }); }
 }
@@ -1094,7 +1277,7 @@ class EventSummaryPageComponent extends SubscriptionnerDirective {
         this.store.dispatch(EventSummaryActions.load());
         this.selectedCriticality$ = this.store
             .select(EventSelectors.filters)
-            .pipe(map$1((filters) => (filters[KNOWN_FILTER_SETS.EVENTS] ?? {})['criticality']?.[0] ?? 'ALL'));
+            .pipe(map((filters) => (filters[KNOWN_FILTER_SETS.EVENTS] ?? {})['criticality']?.[0] ?? 'ALL'));
         this.subscriptions.add(this.store.select(EventSummarySelectors.summaries).subscribe((summaries) => {
             this.summaries = summaries;
         }));
@@ -1120,6 +1303,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Input
             }] } });
 
+class ProcedureColumnOrderComponent extends ColumnOrderComponent {
+    constructor(store) {
+        super(store);
+        this.subscriptions.add(this.store.select(ProcedureSelectors.sort).subscribe(sort => this.sortValue = sort));
+    }
+    sort(order) {
+        throw Error('Sort not implemented.');
+        this.store.dispatch(ProcedureActions.sort({ field: this.field, order }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureColumnOrderComponent, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ProcedureColumnOrderComponent, selector: "hvy-procedure-column-order", usesInheritance: true, ngImport: i0, template: "<div class=\"o-hvy-column-order\">\n  <div class=\"o-hvy-column-order__content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"o-hvy-column-order__chevrons\">\n    <pry-icon iconSvg=\"caret_top\" (click)=\"sort('ASC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('ASC')\"></pry-icon>\n    <pry-icon iconSvg=\"caret_bottom\" (click)=\"sort('DESC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('DESC')\"></pry-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureColumnOrderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hvy-procedure-column-order', template: "<div class=\"o-hvy-column-order\">\n  <div class=\"o-hvy-column-order__content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"o-hvy-column-order__chevrons\">\n    <pry-icon iconSvg=\"caret_top\" (click)=\"sort('ASC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('ASC')\"></pry-icon>\n    <pry-icon iconSvg=\"caret_bottom\" (click)=\"sort('DESC')\" [height]=\"10\" [width]=\"10\" [class.-active]=\"isActive('DESC')\"></pry-icon>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.Store }] });
+
+const PROCEDURE_LINK = {
+    fn: (procedure, store) => ['./', procedure.id]
+};
+class ProcedureListComponent extends SubscriptionnerDirective {
+    constructor(store, el, router, scroll) {
+        super();
+        this.store = store;
+        this.el = el;
+        this.router = router;
+        this.scroll = scroll;
+        this.PROCEDURE_LINK = PROCEDURE_LINK;
+        this.search = '';
+        this.search$ = new Subject;
+        this.store.dispatch(ProcedureActions.load({}));
+        this.procedures$ = this.store.select(ProcedureSelectors.procedures);
+        this.subscriptions.add(this.search$.pipe(debounceTime$1(300), distinctUntilChanged()).subscribe((search) => {
+            throw Error('Search not implemented.');
+            this.store.dispatch(ProcedureActions.search({ search }));
+        }));
+    }
+    ngAfterViewInit() {
+        this.subscriptions.add(this.scroll.isEndOfPage(this.el.nativeElement, ProcedureSelectors.noMoreProcedures)
+            .subscribe(() => {
+            this.store.dispatch(ProcedureActions.load({ next: true }));
+        }));
+    }
+    emitSearch() {
+        this.search$.next(this.search);
+    }
+    goTo(procedure) {
+        return this.router.navigate(this.PROCEDURE_LINK.fn(procedure, this.store));
+    }
+    ngOnDestroy() {
+        this.store.dispatch(ProcedureActions.search({ search: undefined }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureListComponent, deps: [{ token: i1$1.Store }, { token: i0.ElementRef }, { token: i2.Router }, { token: InfiniteScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ProcedureListComponent, selector: "hvy-procedure-list", usesInheritance: true, ngImport: i0, template: "<div class=\"o-procedure-list\">\n  <div class=\"m-form-label-field o-procedure-list__search\">\n    <input class=\"a-form-field o-procedure-list__search-input\" type=\"text\" [(ngModel)]=\"search\" (ngModelChange)=\"emitSearch()\" placeholder=\"{{ '@hvy.action.search' | i18n }}...\">\n    <pry-icon iconSvg=\"search\" class=\"o-procedure-list__search-icon\"></pry-icon>\n  </div>\n  <table class=\"o-hvy-events-table\">\n    <thead>\n    <tr class=\"o-hvy-events-table__header\">\n      <th>\n        <hvy-procedure-column-order field=\"useCount\">{{ '@hvy.procedure.useCount' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"title\">{{ '@hvy.procedure.title' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"domain\">{{ '@hvy.procedure.domain' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"creator\">{{ '@hvy.procedure.author' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"id\">{{ '@hvy.procedure.id' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"creationDate\">{{ '@hvy.event.creationDate' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"lastModificationDate\"><span>{{ '@hvy.event.lastModificationDate' | i18n }}</span></hvy-procedure-column-order>\n      </th>\n      <th></th>\n    </tr>\n    </thead>\n    <tbody>\n      @for (procedure of procedures$ | async; track procedure.id) {\n        <tr class=\"o-hvy-events-table__line\" (click)=\"goTo(procedure)\">\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.useCount }}</td>\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.name }}</td>\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.domain }}</td>\n          <td class=\"o-hvy-events-table__line__cell -centered\">{{ procedure.creator }}</td>\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.id }}</td>\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.creationDate| date : 'dd/mm/YYYY HH:MM' }}</td>\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.lastModificationDate | date : 'dd/mm/YYYY HH:MM' }}\n          </td>\n          <td class=\"o-hvy-events-table__line__cell\">\n            <a [routerLink]=\"PROCEDURE_LINK.fn(procedure, store)\">> {{ '@hvy.action.consult' | i18n }}</a>\n          </td>\n        </tr>\n      } @empty {\n        <tr>\n          <td class=\"o-hvy-events-table__empty\" colspan=\"50\">\n            <div>{{ '@hvy.procedure.noContent' | i18n }}</div>\n            <div>\n              <ng-content></ng-content>\n            </div>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: ProcedureColumnOrderComponent, selector: "hvy-procedure-column-order" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hvy-procedure-list', template: "<div class=\"o-procedure-list\">\n  <div class=\"m-form-label-field o-procedure-list__search\">\n    <input class=\"a-form-field o-procedure-list__search-input\" type=\"text\" [(ngModel)]=\"search\" (ngModelChange)=\"emitSearch()\" placeholder=\"{{ '@hvy.action.search' | i18n }}...\">\n    <pry-icon iconSvg=\"search\" class=\"o-procedure-list__search-icon\"></pry-icon>\n  </div>\n  <table class=\"o-hvy-events-table\">\n    <thead>\n    <tr class=\"o-hvy-events-table__header\">\n      <th>\n        <hvy-procedure-column-order field=\"useCount\">{{ '@hvy.procedure.useCount' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"title\">{{ '@hvy.procedure.title' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"domain\">{{ '@hvy.procedure.domain' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"creator\">{{ '@hvy.procedure.author' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"id\">{{ '@hvy.procedure.id' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"creationDate\">{{ '@hvy.event.creationDate' | i18n }}</hvy-procedure-column-order>\n      </th>\n      <th>\n        <hvy-procedure-column-order field=\"lastModificationDate\"><span>{{ '@hvy.event.lastModificationDate' | i18n }}</span></hvy-procedure-column-order>\n      </th>\n      <th></th>\n    </tr>\n    </thead>\n    <tbody>\n      @for (procedure of procedures$ | async; track procedure.id) {\n        <tr class=\"o-hvy-events-table__line\" (click)=\"goTo(procedure)\">\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.useCount }}</td>\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.name }}</td>\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.domain }}</td>\n          <td class=\"o-hvy-events-table__line__cell -centered\">{{ procedure.creator }}</td>\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.id }}</td>\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.creationDate| date : 'dd/mm/YYYY HH:MM' }}</td>\n          <td class=\"o-hvy-events-table__line__cell\">{{ procedure.lastModificationDate | date : 'dd/mm/YYYY HH:MM' }}\n          </td>\n          <td class=\"o-hvy-events-table__line__cell\">\n            <a [routerLink]=\"PROCEDURE_LINK.fn(procedure, store)\">> {{ '@hvy.action.consult' | i18n }}</a>\n          </td>\n        </tr>\n      } @empty {\n        <tr>\n          <td class=\"o-hvy-events-table__empty\" colspan=\"50\">\n            <div>{{ '@hvy.procedure.noContent' | i18n }}</div>\n            <div>\n              <ng-content></ng-content>\n            </div>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.Store }, { type: i0.ElementRef }, { type: i2.Router }, { type: InfiniteScrollService }] });
+
 const HYP_BASE_CONFIG = new InjectionToken('base config');
 
 const enTranslations = {
@@ -1228,7 +1471,24 @@ const enTranslations = {
         },
         procedure: {
             name: 'Procedure',
-            progress: 'Procedure progress %'
+            progress: 'Procedure progress %',
+            useCount: 'Usage',
+            title: 'Title',
+            category: 'Category',
+            author: 'Author',
+            id: 'Id',
+            missingProperty: 'Missing property',
+            noContent: 'No existing procedures found',
+            domain: "Domain"
+        },
+        "associationModal": {
+            "title": "Link a procedure",
+            "description": "Adding a procedure to selected events allows for selecting a list of actions to be performed to treat the events.",
+            "linkedEvents": "Linked events",
+            "categoryFilter": "Filter by category",
+            "searchProcedure": "Search procedures",
+            "domainPlaceholder": "Select a domain",
+            "procedurePlaceholder": "Input procedure title"
         },
         action: {
             consult: 'Consult',
@@ -1237,7 +1497,8 @@ const enTranslations = {
             comment: 'Comment',
             associate: 'Link to procedure',
             validate: 'Validate',
-            cancel: 'Cancel'
+            cancel: 'Cancel',
+            search: 'Search'
         }
     }
 };
@@ -1348,7 +1609,24 @@ const frTranslations = {
         },
         procedure: {
             name: 'Procédure',
-            progress: '% avancement procédure'
+            progress: '% avancement procédure',
+            useCount: 'Usage',
+            title: 'Titre',
+            category: 'Métier',
+            author: 'Créateur',
+            id: 'Identifiant',
+            missingProperty: 'Propriété manquante',
+            noContent: 'Aucune procédure n\'a été créée.',
+            domain: "Métier",
+        },
+        associationModal: {
+            title: "Associer à une procédure",
+            description: "Ajouter une procédure à des événements permet de sélectionner la liste d'actions à exécuter pour traiter ces événement",
+            linkedEvents: "Événements liés",
+            categoryFilter: "Filtrer par métier",
+            searchProcedure: "Rechercher une procédure",
+            domainPlaceholder: "Sélectionner un métier",
+            procedurePlaceholder: "Saisissez le titre de la procédure"
         },
         action: {
             consult: 'Consulter',
@@ -1357,7 +1635,8 @@ const frTranslations = {
             comment: 'Commenter',
             associate: 'Associer à une procédure',
             validate: 'Valider',
-            cancel: 'Annuler'
+            cancel: 'Annuler',
+            search: 'Rechercher'
         }
     }
 };
@@ -1373,20 +1652,22 @@ class EventEffects {
         this.actions$ = actions$;
         this.eventService = eventService;
         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: action.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: action.procedure })), catchError((error) => [EventActions.saveFailure({ error: error })])))));
-        this.close$ = createEffect(() => this.actions$.pipe(ofType(EventActions.status), debounceTime(200), mergeMap$1((action) => {
+        this.loadEvents$ = createEffect(() => this.actions$.pipe(ofType(EventActions.load), debounceTime$1(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((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$1(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$1(200), mergeMap$1((action) => this.eventService.getProcedure(action.id).pipe(map((procedure) => EventActions.getSuccess({ procedure })), catchError((error) => [EventActions.getFailure({ error: error })])))));
+        this.saveEvent$ = createEffect(() => this.actions$.pipe(ofType(EventActions.save), debounceTime$1(200), mergeMap$1((action) => this.eventService.save(action.event).pipe(map((event) => EventActions.saveSuccess({ event: action.event })), catchError((error) => [EventActions.saveFailure({ error: error })])))));
+        this.saveProcedure$ = createEffect(() => this.actions$.pipe(ofType(EventActions.saveProcedure), debounceTime$1(200), mergeMap$1((action) => this.eventService.saveProcedure(action.procedure).pipe(map((procedure) => EventActions.saveSuccess({ procedure: action.procedure })), catchError((error) => [EventActions.saveFailure({ error: error })])))));
+        this.close$ = createEffect(() => this.actions$.pipe(ofType(EventActions.status), debounceTime$1(200), mergeMap$1((action) => {
             if (!!action.event) {
-                return this.eventService.status(action.event, action.targetStatus, action.comment).pipe(map$1((event) => EventActions.statusSuccess()), catchError((error) => [EventActions.statusFailure({ error: error })]));
+                return this.eventService.status(action.event, action.targetStatus, action.comment).pipe(map((event) => EventActions.statusSuccess()), catchError((error) => [EventActions.statusFailure({ error: error })]));
             }
             else {
-                return this.eventService.statusProcedure(action.procedure, action.targetStatus, action.comment).pipe(map$1((event) => EventActions.statusSuccess()), catchError((error) => [EventActions.statusFailure({ error: error })]));
+                return this.eventService.statusProcedure(action.procedure, action.targetStatus, action.comment).pipe(map((event) => EventActions.statusSuccess()), catchError((error) => [EventActions.statusFailure({ error: error })]));
             }
         })));
-        this.sort$ = createEffect(() => this.actions$.pipe(ofType(EventActions.sort, EventActions.filter), debounceTime(200), map$1(() => EventActions.load({}))));
+        this.sort$ = createEffect(() => this.actions$.pipe(ofType(EventActions.sort), debounceTime$1(200), map(() => EventActions.load({}))));
+        this.filter$ = createEffect(() => this.actions$.pipe(ofType(EventActions.filter), filter((action) => action.filterSet === KNOWN_FILTER_SETS.EVENTS), debounceTime$1(200), map(() => EventActions.load({}))));
+        this.associateProcedure$ = createEffect(() => this.actions$.pipe(ofType(EventActions.associateProcedure), mergeMap$1((action) => this.eventService.associateProcedure(action.procedureId).pipe(map(() => EventActions.load({})), catchError((error) => [EventActions.associateProcedureFailure({ error: error })])))));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", 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.3.4", ngImport: i0, type: EventEffects }); }
@@ -1453,7 +1734,7 @@ 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$1((summaries) => EventSummaryActions.loadSuccess({ summaries })), catchError((error) => [EventSummaryActions.loadFailure({ error: error })])))));
+        this.loadSummaries$ = createEffect(() => this.actions$.pipe(ofType(EventSummaryActions.load), debounceTime$1(200), mergeMap$1((action) => this.eventSummaryService.list().pipe(map((summaries) => EventSummaryActions.loadSuccess({ summaries })), catchError((error) => [EventSummaryActions.loadFailure({ error: error })])))));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", 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.3.4", ngImport: i0, type: EventSummaryEffects }); }
@@ -1462,9 +1743,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1$3.Actions }, { type: EventSummaryService }] });
 
+class ProcedureEffects {
+    constructor(actions$, procedureService, store) {
+        this.actions$ = actions$;
+        this.procedureService = procedureService;
+        this.store = store;
+        this.loadProcedures$ = createEffect(() => this.actions$.pipe(ofType(ProcedureActions.load), debounceTime$1(200), withLatestFrom(this.store.select(ProcedureSelectors.procedures), this.store.select(ProcedureSelectors.noMoreProcedures)), filter(([action, stateProcedures, noMore]) => !noMore), mergeMap$1(([action, stateProcedures]) => this.procedureService.list(action.next ? stateProcedures.length : 0).pipe(map((procedures) => ProcedureActions.loadSuccess({ procedures, startingFrom: action.next ? stateProcedures.length : 0 })), catchError((error) => [ProcedureActions.loadFailure({ error: error })])))));
+        this.sort$ = createEffect(() => this.actions$.pipe(ofType(ProcedureActions.sort), debounceTime$1(200), map(() => ProcedureActions.load({}))));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureEffects, deps: [{ token: i1$3.Actions }, { token: ProcedureService }, { token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureEffects }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ProcedureEffects, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: ProcedureService }, { type: i1$1.Store }] });
+
 const components = [
     EventDetailComponent,
     EventListComponent,
+    EventColumnOrderComponent,
     IconDisplayComponent,
     EventSummaryItemComponent,
     EventSummaryListComponent,
@@ -1476,7 +1773,10 @@ const components = [
     ColumnOrderComponent,
     EventFiltersComponent,
     DateFilterComponent,
-    ChoiceFilterComponent
+    ChoiceFilterComponent,
+    ProcedureListComponent,
+    ProcedureColumnOrderComponent,
+    ProcedureAssociationModalComponent
 ];
 class PvyHypervisorModule {
     static forRoot(options) {
@@ -1498,6 +1798,7 @@ class PvyHypervisorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", 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.3.4", ngImport: i0, type: PvyHypervisorModule, declarations: [EventDetailComponent,
             EventListComponent,
+            EventColumnOrderComponent,
             IconDisplayComponent,
             EventSummaryItemComponent,
             EventSummaryListComponent,
@@ -1509,12 +1810,13 @@ class PvyHypervisorModule {
             ColumnOrderComponent,
             EventFiltersComponent,
             DateFilterComponent,
-            ChoiceFilterComponent], imports: [i1$1.StoreFeatureModule, i1$1.StoreFeatureModule, i1$1.StoreFeatureModule, i1$3.EffectsFeatureModule, NgForOf,
+            ChoiceFilterComponent,
+            ProcedureListComponent,
+            ProcedureColumnOrderComponent,
+            ProcedureAssociationModalComponent], imports: [i1$1.StoreFeatureModule, i1$1.StoreFeatureModule, i1$1.StoreFeatureModule, i1$1.StoreFeatureModule, i1$3.EffectsFeatureModule, NgForOf,
             AsyncPipe,
             PryI18nModule,
             PryCoreModule,
-            AsyncPipe,
-            PryCoreModule,
             NgStyle,
             PryCheckboxModule,
             FormsModule,
@@ -1524,15 +1826,10 @@ class PvyHypervisorModule {
             PryIconModule,
             KeyValuePipe,
             PrySelectModule,
-            FormsModule,
             JsonPipe,
-            PryDatePickerModule,
-            PryI18nModule,
-            PryIconModule,
-            PryI18nModule,
-            AsyncPipe,
-            PryI18nModule], exports: [EventDetailComponent,
+            PryDatePickerModule], exports: [EventDetailComponent,
             EventListComponent,
+            EventColumnOrderComponent,
             IconDisplayComponent,
             EventSummaryItemComponent,
             EventSummaryListComponent,
@@ -1544,25 +1841,23 @@ class PvyHypervisorModule {
             ColumnOrderComponent,
             EventFiltersComponent,
             DateFilterComponent,
-            ChoiceFilterComponent] }); }
+            ChoiceFilterComponent,
+            ProcedureListComponent,
+            ProcedureColumnOrderComponent,
+            ProcedureAssociationModalComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PvyHypervisorModule, imports: [StoreModule.forFeature(hypFeatureKey, hypervisorReducer),
             StoreModule.forFeature(eventFeatureKey, eventReducer),
             StoreModule.forFeature(eventSummaryFeatureKey, eventSummaryReducer),
-            EffectsModule.forFeature([EventEffects, EventSummaryEffects, HypervisorEffects]),
+            StoreModule.forFeature(procedureFeatureKey, procedureReducer),
+            EffectsModule.forFeature([EventEffects, EventSummaryEffects, ProcedureEffects, HypervisorEffects]),
             PryI18nModule,
             PryCoreModule,
-            PryCoreModule,
             PryCheckboxModule,
             FormsModule,
             PrySinceDateModule,
             PryIconModule,
             PrySelectModule,
-            FormsModule,
-            PryDatePickerModule,
-            PryI18nModule,
-            PryIconModule,
-            PryI18nModule,
-            PryI18nModule] }); }
+            PryDatePickerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PvyHypervisorModule, decorators: [{
             type: NgModule,
@@ -1574,13 +1869,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         StoreModule.forFeature(hypFeatureKey, hypervisorReducer),
                         StoreModule.forFeature(eventFeatureKey, eventReducer),
                         StoreModule.forFeature(eventSummaryFeatureKey, eventSummaryReducer),
-                        EffectsModule.forFeature([EventEffects, EventSummaryEffects, HypervisorEffects]),
+                        StoreModule.forFeature(procedureFeatureKey, procedureReducer),
+                        EffectsModule.forFeature([EventEffects, EventSummaryEffects, ProcedureEffects, HypervisorEffects]),
                         NgForOf,
                         AsyncPipe,
                         PryI18nModule,
                         PryCoreModule,
-                        AsyncPipe,
-                        PryCoreModule,
                         NgStyle,
                         PryCheckboxModule,
                         FormsModule,
@@ -1590,14 +1884,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         PryIconModule,
                         KeyValuePipe,
                         PrySelectModule,
-                        FormsModule,
                         JsonPipe,
                         PryDatePickerModule,
-                        PryI18nModule,
-                        PryIconModule,
-                        PryI18nModule,
-                        AsyncPipe,
-                        PryI18nModule,
                     ],
                     exports: [
                         ...components,
@@ -1616,5 +1904,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CATEGORIES_BY_TYPE, ChoiceFilterComponent, ColumnOrderComponent, DOMAINS, DateFilterComponent, EVENT_LINK, EVENT_TO_ICON, EquipmentService, EventActions, EventDetailComponent, EventEffects, EventFiltersComponent, EventIconPipe, EventListComponent, EventSelectors, EventService, EventSummaryActions, EventSummaryEffects, EventSummaryItemComponent, EventSummaryListComponent, EventSummaryPageComponent, EventSummarySelectors, ForDatetimeLocalPipe, HYP_BASE_CONFIG, HypEventCategory, HypEventCriticality, HypEventStatus, HypEventType, HypSelectors, HypervisorActions, HypervisorEffects, HypervisorService, IconDisplayComponent, KNOWN_FILTER_SETS, PAGE_SIZE_FETCH, ProgressDisplayComponent, PvyHypervisorModule, SCROLL_PX_TO_TRIGGER_FETCH_PAGE, StatusDisplayComponent, enTranslations, eventFeatureKey, eventForWriteAPI, eventInitialState, eventReducer, eventSummaryFeatureKey, eventSummaryInitialState, eventSummaryReducer, frTranslations, hypFeatureKey, hypInitialState, hypervisorReducer, procedureForWriteAPI };
+export { CATEGORIES_BY_TYPE, ChoiceFilterComponent, ColumnOrderComponent, DOMAINS, DateFilterComponent, EVENT_LINK, EVENT_TO_ICON, EquipmentService, EventActions, EventColumnOrderComponent, EventDetailComponent, EventEffects, EventFiltersComponent, EventIconPipe, EventListComponent, EventSelectors, EventService, EventSummaryActions, EventSummaryEffects, EventSummaryItemComponent, EventSummaryListComponent, EventSummaryPageComponent, EventSummarySelectors, ForDatetimeLocalPipe, HYP_BASE_CONFIG, HypEventCategory, HypEventCriticality, HypEventStatus, HypEventType, HypSelectors, HypervisorActions, HypervisorEffects, HypervisorService, IconDisplayComponent, KNOWN_FILTER_SETS, PAGE_SIZE_FETCH, PROCEDURE_LINK, PROCEDURE_PAGE_SIZE_FETCH, ProcedureActions, ProcedureAssociationModalComponent, ProcedureColumnOrderComponent, ProcedureEffects, ProcedureListComponent, ProcedureSelectors, ProcedureService, ProgressDisplayComponent, PvyHypervisorModule, StatusDisplayComponent, enTranslations, eventFeatureKey, eventForWriteAPI, eventInitialState, eventReducer, eventSummaryFeatureKey, eventSummaryInitialState, eventSummaryReducer, frTranslations, hypFeatureKey, hypInitialState, hypervisorReducer, procedureFeatureKey, procedureForWriteAPI, procedureInitialState, procedureReducer };
 //# sourceMappingURL=provoly-hypervisor.mjs.map