npm - @provoly/dashboard - Versions diffs - 1.4.14 → 1.4.16 - Mend

@provoly/dashboard 1.4.14 → 1.4.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (203) hide show

package/fesm2022/provoly-dashboard-pipeline.mjs CHANGED Viewed

@@ -1,24 +1,24 @@
-import * as i2 from '@angular/cdk/overlay';
+import * as i2$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i3 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, Injectable, ViewEncapsulation, ViewContainerRef, ViewChild, TemplateRef, NgModule } from '@angular/core';
-import * as i3$1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
 import * as i1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, StoreModule } from '@ngrx/store';
-import * as i4 from '@provoly/dashboard';
+import * as i3 from '@provoly/dashboard';
 import { SubscriptionnerDirective, DataSourceActions, ViewMode, ConfigActions, ConfigSelectors, PryCoreModule, PryIconModule, PryI18nModule, PrySortModule, PryToggleModule, PrySinceDateModule } from '@provoly/dashboard';
 import { map, combineLatestWith, startWith, BehaviorSubject, combineLatest, fromEvent, auditTime, mergeMap, of } from 'rxjs';
 import { v4 } from 'uuid';
-import * as i5 from '@angular/cdk/bidi';
+import * as i4 from '@angular/cdk/bidi';
 import { LiteGraph, LGraphNode, LGraph, LGraphCanvas } from 'litegraph.js';
 import { map as map$1, debounceTime, mergeMap as mergeMap$1, catchError } from 'rxjs/operators';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i5$1 from '@angular/cdk/a11y';
+import * as i4$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i1$1 from '@angular/common/http';
@@ -163,11 +163,11 @@ class PryPipelineDetailsComponent extends SubscriptionnerDirective {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryPipelineDetailsComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryPipelineDetailsComponent, selector: "pry-pipeline-details", inputs: { pipeline: "pipeline" }, outputs: { goToList: "goToList", goToConsult: "goToConsult", goToEditor: "goToEditor", executeConfirm: "executeConfirm" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-pipeline-layout__toolbox\">\n  <button\n    class=\"a-btn a-btn--primary a-btn--icon-text\"\n    type=\"button\"\n    [disabled]=\"!(isSaved$ | async) || !pipeline.active\"\n    (click)=\"executeConfirm.emit()\"\n  >\n    {{ '@pry.pipeline.execute' | i18n }}\n  </button>\n  <button class=\"a-btn a-btn--secondary a-btn--icon-text\" type=\"button\" (click)=\"goToList.emit()\">\n    {{ '@pry.pipeline.goBack' | i18n }}\n  </button>\n  <div class=\"\" *ngIf=\"isSaved$ | async\">\n    <pry-toggle [ngModel]=\"pipeline.active\" (ngModelChange)=\"toggleActivation()\" dir=\"ltr\" mode=\"action\">{{\n      '@pry.pipeline.activated' | i18n\n    }}</pry-toggle>\n  </div>\n</div>\n<div class=\"o-pipeline-layout__details\">\n  <h2>{{ '@pry.pipeline.details.transformation' | i18n }} {{ pipeline.title }}</h2>\n  <div class=\"row\">\n    <form id=\"detailForm\" [formGroup]=\"form\" (ngSubmit)=\"save()\">\n      <label for=\"title\" class=\"a-label\">{{ '@pry.pipeline.details.title' | i18n }}</label>\n      <input type=\"text\" id=\"title\" name=\"title\" class=\"a-form-field\" formControlName=\"title\" />\n      <label\n        for=\"title\"\n        *ngIf=\"form.get('title')?.touched && form.get('title')?.hasError('required')\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.pipeline.details.required' | i18n }}\n      </label>\n      <label for=\"title\" *ngIf=\"form.get('title')?.hasError('maxlength')\" class=\"a-label a-label--help -error\">\n        {{ '@pry.pipeline.details.maxLength' | i18n: { len: '30' } }}\n      </label>\n      <label for=\"description\" class=\"a-label\">{{ '@pry.pipeline.details.description' | i18n }}</label>\n      <textarea id=\"description\" name=\"description\" class=\"a-form-field\" formControlName=\"description\"></textarea>\n      <label\n        for=\"description\"\n        *ngIf=\"form.get('description')?.hasError('maxlength')\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.pipeline.details.maxLength' | i18n: { len: '200' } }}\n      </label>\n    </form>\n    <div>\n      <h4 class=\"a-h4\">\n        {{ '@pry.pipeline.details.creation_date' | i18n }} :\n        <span class=\"property-value\"> {{ pipeline.creationDate | sinceDate }}</span>\n      </h4>\n      <div *ngIf=\"pipeline.lastJobExecution\">\n        <h4 class=\"a-h4\">\n          {{ '@pry.pipeline.details.execution_status' | i18n }} :\n          <span class=\"property-value\"> {{ '@pry.pipeline.status.' + pipeline.lastJobExecution.status | i18n }}</span>\n        </h4>\n        <h4 class=\"a-h4\">\n          {{ '@pry.pipeline.details.last_execution_date' | i18n }} :\n          <span class=\"property-value\"> {{ pipeline.lastJobExecution.executionDate | sinceDate }}</span>\n        </h4>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"o-pipeline-layout__toolbox\">\n  <button\n    type=\"submit\"\n    form=\"detailForm\"\n    [disabled]=\"form.invalid || (isSavingDisabled$ | async)\"\n    class=\"a-btn a-btn--primary a-btn--icon-text\"\n  >\n    {{ '@pry.pipeline.save' | i18n }}\n  </button>\n  <button (click)=\"openEditor()\" [disabled]=\"form.invalid\" class=\"a-btn a-btn--secondary\">\n    {{ '@pry.pipeline.editor' | i18n }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }, { kind: "pipe", type: i4.SinceDatePipe, name: "sinceDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryPipelineDetailsComponent, selector: "pry-pipeline-details", inputs: { pipeline: "pipeline" }, outputs: { goToList: "goToList", goToConsult: "goToConsult", goToEditor: "goToEditor", executeConfirm: "executeConfirm" }, usesInheritance: true, ngImport: i0, template: "<div class=\"o-pipeline-layout__toolbox\">\n  <button\n    class=\"a-btn a-btn--primary a-btn--icon-text\"\n    type=\"button\"\n    [disabled]=\"!(isSaved$ | async) || !pipeline.active\"\n    (click)=\"executeConfirm.emit()\"\n    >\n    {{ '@pry.pipeline.execute' | i18n }}\n  </button>\n  <button class=\"a-btn a-btn--secondary a-btn--icon-text\" type=\"button\" (click)=\"goToList.emit()\">\n    {{ '@pry.pipeline.goBack' | i18n }}\n  </button>\n  @if (isSaved$ | async) {\n    <div class=\"\">\n      <pry-toggle [ngModel]=\"pipeline.active\" (ngModelChange)=\"toggleActivation()\" dir=\"ltr\" mode=\"action\">{{\n        '@pry.pipeline.activated' | i18n\n      }}</pry-toggle>\n    </div>\n  }\n</div>\n<div class=\"o-pipeline-layout__details\">\n  <h2>{{ '@pry.pipeline.details.transformation' | i18n }} {{ pipeline.title }}</h2>\n  <div class=\"row\">\n    <form id=\"detailForm\" [formGroup]=\"form\" (ngSubmit)=\"save()\">\n      <label for=\"title\" class=\"a-label\">{{ '@pry.pipeline.details.title' | i18n }}</label>\n      <input type=\"text\" id=\"title\" name=\"title\" class=\"a-form-field\" formControlName=\"title\" />\n      @if (form.get('title')?.touched && form.get('title')?.hasError('required')) {\n        <label\n          for=\"title\"\n          class=\"a-label a-label--help -error\"\n          >\n          {{ '@pry.pipeline.details.required' | i18n }}\n        </label>\n      }\n      @if (form.get('title')?.hasError('maxlength')) {\n        <label for=\"title\" class=\"a-label a-label--help -error\">\n          {{ '@pry.pipeline.details.maxLength' | i18n: { len: '30' } }}\n        </label>\n      }\n      <label for=\"description\" class=\"a-label\">{{ '@pry.pipeline.details.description' | i18n }}</label>\n      <textarea id=\"description\" name=\"description\" class=\"a-form-field\" formControlName=\"description\"></textarea>\n      @if (form.get('description')?.hasError('maxlength')) {\n        <label\n          for=\"description\"\n          class=\"a-label a-label--help -error\"\n          >\n          {{ '@pry.pipeline.details.maxLength' | i18n: { len: '200' } }}\n        </label>\n      }\n    </form>\n    <div>\n      <h4 class=\"a-h4\">\n        {{ '@pry.pipeline.details.creation_date' | i18n }} :\n        <span class=\"property-value\"> {{ pipeline.creationDate | sinceDate }}</span>\n      </h4>\n      @if (pipeline.lastJobExecution) {\n        <div>\n          <h4 class=\"a-h4\">\n            {{ '@pry.pipeline.details.execution_status' | i18n }} :\n            <span class=\"property-value\"> {{ '@pry.pipeline.status.' + pipeline.lastJobExecution.status | i18n }}</span>\n          </h4>\n          <h4 class=\"a-h4\">\n            {{ '@pry.pipeline.details.last_execution_date' | i18n }} :\n            <span class=\"property-value\"> {{ pipeline.lastJobExecution.executionDate | sinceDate }}</span>\n          </h4>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"o-pipeline-layout__toolbox\">\n  <button\n    type=\"submit\"\n    form=\"detailForm\"\n    [disabled]=\"form.invalid || (isSavingDisabled$ | async)\"\n    class=\"a-btn a-btn--primary a-btn--icon-text\"\n    >\n    {{ '@pry.pipeline.save' | i18n }}\n  </button>\n  <button (click)=\"openEditor()\" [disabled]=\"form.invalid\" class=\"a-btn a-btn--secondary\">\n    {{ '@pry.pipeline.editor' | i18n }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }, { kind: "pipe", type: i3.SinceDatePipe, name: "sinceDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryPipelineDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-pipeline-details', template: "<div class=\"o-pipeline-layout__toolbox\">\n  <button\n    class=\"a-btn a-btn--primary a-btn--icon-text\"\n    type=\"button\"\n    [disabled]=\"!(isSaved$ | async) || !pipeline.active\"\n    (click)=\"executeConfirm.emit()\"\n  >\n    {{ '@pry.pipeline.execute' | i18n }}\n  </button>\n  <button class=\"a-btn a-btn--secondary a-btn--icon-text\" type=\"button\" (click)=\"goToList.emit()\">\n    {{ '@pry.pipeline.goBack' | i18n }}\n  </button>\n  <div class=\"\" *ngIf=\"isSaved$ | async\">\n    <pry-toggle [ngModel]=\"pipeline.active\" (ngModelChange)=\"toggleActivation()\" dir=\"ltr\" mode=\"action\">{{\n      '@pry.pipeline.activated' | i18n\n    }}</pry-toggle>\n  </div>\n</div>\n<div class=\"o-pipeline-layout__details\">\n  <h2>{{ '@pry.pipeline.details.transformation' | i18n }} {{ pipeline.title }}</h2>\n  <div class=\"row\">\n    <form id=\"detailForm\" [formGroup]=\"form\" (ngSubmit)=\"save()\">\n      <label for=\"title\" class=\"a-label\">{{ '@pry.pipeline.details.title' | i18n }}</label>\n      <input type=\"text\" id=\"title\" name=\"title\" class=\"a-form-field\" formControlName=\"title\" />\n      <label\n        for=\"title\"\n        *ngIf=\"form.get('title')?.touched && form.get('title')?.hasError('required')\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.pipeline.details.required' | i18n }}\n      </label>\n      <label for=\"title\" *ngIf=\"form.get('title')?.hasError('maxlength')\" class=\"a-label a-label--help -error\">\n        {{ '@pry.pipeline.details.maxLength' | i18n: { len: '30' } }}\n      </label>\n      <label for=\"description\" class=\"a-label\">{{ '@pry.pipeline.details.description' | i18n }}</label>\n      <textarea id=\"description\" name=\"description\" class=\"a-form-field\" formControlName=\"description\"></textarea>\n      <label\n        for=\"description\"\n        *ngIf=\"form.get('description')?.hasError('maxlength')\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.pipeline.details.maxLength' | i18n: { len: '200' } }}\n      </label>\n    </form>\n    <div>\n      <h4 class=\"a-h4\">\n        {{ '@pry.pipeline.details.creation_date' | i18n }} :\n        <span class=\"property-value\"> {{ pipeline.creationDate | sinceDate }}</span>\n      </h4>\n      <div *ngIf=\"pipeline.lastJobExecution\">\n        <h4 class=\"a-h4\">\n          {{ '@pry.pipeline.details.execution_status' | i18n }} :\n          <span class=\"property-value\"> {{ '@pry.pipeline.status.' + pipeline.lastJobExecution.status | i18n }}</span>\n        </h4>\n        <h4 class=\"a-h4\">\n          {{ '@pry.pipeline.details.last_execution_date' | i18n }} :\n          <span class=\"property-value\"> {{ pipeline.lastJobExecution.executionDate | sinceDate }}</span>\n        </h4>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"o-pipeline-layout__toolbox\">\n  <button\n    type=\"submit\"\n    form=\"detailForm\"\n    [disabled]=\"form.invalid || (isSavingDisabled$ | async)\"\n    class=\"a-btn a-btn--primary a-btn--icon-text\"\n  >\n    {{ '@pry.pipeline.save' | i18n }}\n  </button>\n  <button (click)=\"openEditor()\" [disabled]=\"form.invalid\" class=\"a-btn a-btn--secondary\">\n    {{ '@pry.pipeline.editor' | i18n }}\n  </button>\n</div>\n" }]
+            args: [{ selector: 'pry-pipeline-details', template: "<div class=\"o-pipeline-layout__toolbox\">\n  <button\n    class=\"a-btn a-btn--primary a-btn--icon-text\"\n    type=\"button\"\n    [disabled]=\"!(isSaved$ | async) || !pipeline.active\"\n    (click)=\"executeConfirm.emit()\"\n    >\n    {{ '@pry.pipeline.execute' | i18n }}\n  </button>\n  <button class=\"a-btn a-btn--secondary a-btn--icon-text\" type=\"button\" (click)=\"goToList.emit()\">\n    {{ '@pry.pipeline.goBack' | i18n }}\n  </button>\n  @if (isSaved$ | async) {\n    <div class=\"\">\n      <pry-toggle [ngModel]=\"pipeline.active\" (ngModelChange)=\"toggleActivation()\" dir=\"ltr\" mode=\"action\">{{\n        '@pry.pipeline.activated' | i18n\n      }}</pry-toggle>\n    </div>\n  }\n</div>\n<div class=\"o-pipeline-layout__details\">\n  <h2>{{ '@pry.pipeline.details.transformation' | i18n }} {{ pipeline.title }}</h2>\n  <div class=\"row\">\n    <form id=\"detailForm\" [formGroup]=\"form\" (ngSubmit)=\"save()\">\n      <label for=\"title\" class=\"a-label\">{{ '@pry.pipeline.details.title' | i18n }}</label>\n      <input type=\"text\" id=\"title\" name=\"title\" class=\"a-form-field\" formControlName=\"title\" />\n      @if (form.get('title')?.touched && form.get('title')?.hasError('required')) {\n        <label\n          for=\"title\"\n          class=\"a-label a-label--help -error\"\n          >\n          {{ '@pry.pipeline.details.required' | i18n }}\n        </label>\n      }\n      @if (form.get('title')?.hasError('maxlength')) {\n        <label for=\"title\" class=\"a-label a-label--help -error\">\n          {{ '@pry.pipeline.details.maxLength' | i18n: { len: '30' } }}\n        </label>\n      }\n      <label for=\"description\" class=\"a-label\">{{ '@pry.pipeline.details.description' | i18n }}</label>\n      <textarea id=\"description\" name=\"description\" class=\"a-form-field\" formControlName=\"description\"></textarea>\n      @if (form.get('description')?.hasError('maxlength')) {\n        <label\n          for=\"description\"\n          class=\"a-label a-label--help -error\"\n          >\n          {{ '@pry.pipeline.details.maxLength' | i18n: { len: '200' } }}\n        </label>\n      }\n    </form>\n    <div>\n      <h4 class=\"a-h4\">\n        {{ '@pry.pipeline.details.creation_date' | i18n }} :\n        <span class=\"property-value\"> {{ pipeline.creationDate | sinceDate }}</span>\n      </h4>\n      @if (pipeline.lastJobExecution) {\n        <div>\n          <h4 class=\"a-h4\">\n            {{ '@pry.pipeline.details.execution_status' | i18n }} :\n            <span class=\"property-value\"> {{ '@pry.pipeline.status.' + pipeline.lastJobExecution.status | i18n }}</span>\n          </h4>\n          <h4 class=\"a-h4\">\n            {{ '@pry.pipeline.details.last_execution_date' | i18n }} :\n            <span class=\"property-value\"> {{ pipeline.lastJobExecution.executionDate | sinceDate }}</span>\n          </h4>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"o-pipeline-layout__toolbox\">\n  <button\n    type=\"submit\"\n    form=\"detailForm\"\n    [disabled]=\"form.invalid || (isSavingDisabled$ | async)\"\n    class=\"a-btn a-btn--primary a-btn--icon-text\"\n    >\n    {{ '@pry.pipeline.save' | i18n }}\n  </button>\n  <button (click)=\"openEditor()\" [disabled]=\"form.invalid\" class=\"a-btn a-btn--secondary\">\n    {{ '@pry.pipeline.editor' | i18n }}\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { pipeline: [{
                 type: Input
             }], goToList: [{
@@ -229,7 +229,7 @@ class GraphSerializerUtils {
             nodes: []
         };
         if (!!lgraph) {
-            const baseLiteGraph = JSON.parse(JSON.stringify(lgraph.serialize()));
+            const baseLiteGraph = structuredClone(lgraph.serialize());
             const translated = GraphSerializerUtils.translateFromSerializedLGraphToPryModel(baseLiteGraph);
             output.nodes = translated.nodes;
             output.links = translated.links;
@@ -647,13 +647,13 @@ class PryPipelineEditorComponent extends SubscriptionnerDirective {
     search($event) {
         this.search$.next({ ...$event });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryPipelineEditorComponent, deps: [{ token: i1.Store }, { token: PipelineComponentFactoryService }, { token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryPipelineEditorComponent, selector: "pry-pipeline-editor", inputs: { pipeline: "pipeline" }, outputs: { goToConsult: "goToConsult" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "canvasParent", first: true, predicate: ["canvasParent"], descendants: true }, { propertyName: "componentRef", first: true, predicate: ["specific"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline\">\n  <div class=\"o-pipeline__menu\">\n    <pry-accordion>\n      <pry-accordion-item\n        *ngFor=\"let category of categories$ | async; let index = index\"\n        [item]=\"category\"\n        [borderColor]=\"(types$ | async)![category][0].color\"\n        [index]=\"index\"\n        [showSearchBar]=\"true\"\n        [search$]=\"search$\"\n        (search)=\"search($event)\"\n        translationStringBase=\"@pry.pipeline.\"\n      >\n        <ul class=\"o-pipeline__components\">\n          <ng-container *ngFor=\"let type of (types$ | async)![category]\">\n            <li [draggable]=\"!this.disableEditing\" (dragstart)=\"onDragStart($event, type)\">\n              <p class=\"a-p\">{{ type.label }}</p>\n              <pry-icon [width]=\"2\" [height]=\"20\" iconSvg=\"info\"></pry-icon>\n            </li>\n          </ng-container>\n        </ul>\n      </pry-accordion-item>\n    </pry-accordion>\n  </div>\n\n  <div class=\"o-pipeline__workspace\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--secondary\" type=\"button\" (click)=\"goBack()\">\n        {{ '@pry.pipeline.backToDescription' | i18n }}\n      </button>\n      <ng-container *ngFor=\"let action of actions\">\n        <button type=\"button\" (click)=\"clickedAction(action)\" class=\"a-btn a-btn--secondary\">\n          {{ '@pry.pipeline.' + action.type | i18n }}\n          <pry-icon [iconSvg]=\"action.icon\"></pry-icon>\n        </button>\n      </ng-container>\n    </div>\n    <div>\n      <h1 class=\"a-h1\">{{ this.pipeline?.title }}</h1>\n    </div>\n    <div class=\"o-pipeline-editor\">\n      <div (drop)=\"onDrop($event)\" class=\"o-pipeline-editor__grid\" #canvasParent>\n        <canvas #canvas class=\"canvas\"></canvas>\n      </div>\n      <div class=\"o-pipeline-editor__properties\">\n        <div\n          class=\"o-pipeline-editor__properties__node\"\n          *ngIf=\"selectedNode$ | async as node\"\n          [title]=\"node.properties['id']\"\n        >\n          <h3 class=\"a-h3\">{{ '@pry.pipeline.selectedTask' | i18n }}</h3>\n          <h4 class=\"a-h4\">{{ '@pry.pipeline.type' | i18n }}</h4>\n          <p class=\"a-p a-p--type\">{{ node.type }}</p>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"{{ node.id }}\">{{ '@pry.pipeline.title' | i18n }}</label>\n            <input\n              class=\"a-form-field\"\n              id=\"{{ node.id }}\"\n              type=\"text\"\n              [value]=\"node.title\"\n              [disabled]=\"disableEditing\"\n              (change)=\"changeTitle(node, $event)\"\n            />\n          </div>\n        </div>\n        <div class=\"o-pipeline-editor__properties__detail\" [class.is-empty]=\"!selectedNode\">\n          <div>\n            <div #specific></div>\n          </div>\n        </div>\n        <div *ngIf=\"((errors$ | async)?.length ?? 0) > 0\" class=\"o-pipeline-editor__properties__errors\">\n          <div class=\"o-pipeline-editor__properties__errors__title\">\n            <pry-icon iconSvg=\"warning-triangle\"></pry-icon>\n            <p class=\"a-p\">{{ '@pry.pipeline.errors' | i18n }}:</p>\n          </div>\n          <ul>\n            <li *ngFor=\"let error of errors$ | async\">\n              <span class=\"type\">{{\n                (error?.nodeId === '-' ? '@pry.pipeline.global' : '@pry.pipeline.node') | i18n\n              }}</span>\n              {{ error.translated }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.AccordionComponent, selector: "pry-accordion" }, { kind: "component", type: i4.AccordionItemComponent, selector: "pry-accordion-item", inputs: ["item", "borderColor", "index", "translationStringBase", "length", "showSearchBar", "search$"], outputs: ["search"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryPipelineCssComponent, selector: "pry-pipeline-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryPipelineEditorComponent, deps: [{ token: i1.Store }, { token: PipelineComponentFactoryService }, { token: i3.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryPipelineEditorComponent, selector: "pry-pipeline-editor", inputs: { pipeline: "pipeline" }, outputs: { goToConsult: "goToConsult" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "canvasParent", first: true, predicate: ["canvasParent"], descendants: true }, { propertyName: "componentRef", first: true, predicate: ["specific"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline\">\n  <div class=\"o-pipeline__menu\">\n    <pry-accordion>\n      @for (category of categories$ | async; track category; let index = $index) {\n        <pry-accordion-item\n          [item]=\"category\"\n          [borderColor]=\"(types$ | async)![category][0].color\"\n          [index]=\"index\"\n          [showSearchBar]=\"true\"\n          [search$]=\"search$\"\n          (search)=\"search($event)\"\n          translationStringBase=\"@pry.pipeline.\"\n          >\n          <ul class=\"o-pipeline__components\">\n            @for (type of (types$ | async)![category]; track type) {\n              <li [draggable]=\"!this.disableEditing\" (dragstart)=\"onDragStart($event, type)\">\n                <p class=\"a-p\">{{ type.label }}</p>\n                <pry-icon [width]=\"2\" [height]=\"20\" iconSvg=\"info\"></pry-icon>\n              </li>\n            }\n          </ul>\n        </pry-accordion-item>\n      }\n    </pry-accordion>\n  </div>\n\n  <div class=\"o-pipeline__workspace\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--secondary\" type=\"button\" (click)=\"goBack()\">\n        {{ '@pry.pipeline.backToDescription' | i18n }}\n      </button>\n      @for (action of actions; track action) {\n        <button type=\"button\" (click)=\"clickedAction(action)\" class=\"a-btn a-btn--secondary\">\n          {{ '@pry.pipeline.' + action.type | i18n }}\n          <pry-icon [iconSvg]=\"action.icon\"></pry-icon>\n        </button>\n      }\n    </div>\n    <div>\n      <h1 class=\"a-h1\">{{ this.pipeline?.title }}</h1>\n    </div>\n    <div class=\"o-pipeline-editor\">\n      <div (drop)=\"onDrop($event)\" class=\"o-pipeline-editor__grid\" #canvasParent>\n        <canvas #canvas class=\"canvas\"></canvas>\n      </div>\n      <div class=\"o-pipeline-editor__properties\">\n        @if (selectedNode$ | async; as node) {\n          <div\n            class=\"o-pipeline-editor__properties__node\"\n            [title]=\"node.properties['id']\"\n            >\n            <h3 class=\"a-h3\">{{ '@pry.pipeline.selectedTask' | i18n }}</h3>\n            <h4 class=\"a-h4\">{{ '@pry.pipeline.type' | i18n }}</h4>\n            <p class=\"a-p a-p--type\">{{ node.type }}</p>\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"{{ node.id }}\">{{ '@pry.pipeline.title' | i18n }}</label>\n              <input\n                class=\"a-form-field\"\n                id=\"{{ node.id }}\"\n                type=\"text\"\n                [value]=\"node.title\"\n                [disabled]=\"disableEditing\"\n                (change)=\"changeTitle(node, $event)\"\n                />\n            </div>\n          </div>\n        }\n        <div class=\"o-pipeline-editor__properties__detail\" [class.is-empty]=\"!selectedNode\">\n          <div>\n            <div #specific></div>\n          </div>\n        </div>\n        @if (((errors$ | async)?.length ?? 0) > 0) {\n          <div class=\"o-pipeline-editor__properties__errors\">\n            <div class=\"o-pipeline-editor__properties__errors__title\">\n              <pry-icon iconSvg=\"warning-triangle\"></pry-icon>\n              <p class=\"a-p\">{{ '@pry.pipeline.errors' | i18n }}:</p>\n            </div>\n            <ul>\n              @for (error of errors$ | async; track error) {\n                <li>\n                  <span class=\"type\">{{\n                    (error?.nodeId === '-' ? '@pry.pipeline.global' : '@pry.pipeline.node') | i18n\n                  }}</span>\n                  {{ error.translated }}\n                </li>\n              }\n            </ul>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.AccordionComponent, selector: "pry-accordion" }, { kind: "component", type: i3.AccordionItemComponent, selector: "pry-accordion-item", inputs: ["item", "borderColor", "index", "translationStringBase", "length", "showSearchBar", "search$"], outputs: ["search"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryPipelineCssComponent, selector: "pry-pipeline-css" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryPipelineEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-pipeline-editor', template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline\">\n  <div class=\"o-pipeline__menu\">\n    <pry-accordion>\n      <pry-accordion-item\n        *ngFor=\"let category of categories$ | async; let index = index\"\n        [item]=\"category\"\n        [borderColor]=\"(types$ | async)![category][0].color\"\n        [index]=\"index\"\n        [showSearchBar]=\"true\"\n        [search$]=\"search$\"\n        (search)=\"search($event)\"\n        translationStringBase=\"@pry.pipeline.\"\n      >\n        <ul class=\"o-pipeline__components\">\n          <ng-container *ngFor=\"let type of (types$ | async)![category]\">\n            <li [draggable]=\"!this.disableEditing\" (dragstart)=\"onDragStart($event, type)\">\n              <p class=\"a-p\">{{ type.label }}</p>\n              <pry-icon [width]=\"2\" [height]=\"20\" iconSvg=\"info\"></pry-icon>\n            </li>\n          </ng-container>\n        </ul>\n      </pry-accordion-item>\n    </pry-accordion>\n  </div>\n\n  <div class=\"o-pipeline__workspace\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--secondary\" type=\"button\" (click)=\"goBack()\">\n        {{ '@pry.pipeline.backToDescription' | i18n }}\n      </button>\n      <ng-container *ngFor=\"let action of actions\">\n        <button type=\"button\" (click)=\"clickedAction(action)\" class=\"a-btn a-btn--secondary\">\n          {{ '@pry.pipeline.' + action.type | i18n }}\n          <pry-icon [iconSvg]=\"action.icon\"></pry-icon>\n        </button>\n      </ng-container>\n    </div>\n    <div>\n      <h1 class=\"a-h1\">{{ this.pipeline?.title }}</h1>\n    </div>\n    <div class=\"o-pipeline-editor\">\n      <div (drop)=\"onDrop($event)\" class=\"o-pipeline-editor__grid\" #canvasParent>\n        <canvas #canvas class=\"canvas\"></canvas>\n      </div>\n      <div class=\"o-pipeline-editor__properties\">\n        <div\n          class=\"o-pipeline-editor__properties__node\"\n          *ngIf=\"selectedNode$ | async as node\"\n          [title]=\"node.properties['id']\"\n        >\n          <h3 class=\"a-h3\">{{ '@pry.pipeline.selectedTask' | i18n }}</h3>\n          <h4 class=\"a-h4\">{{ '@pry.pipeline.type' | i18n }}</h4>\n          <p class=\"a-p a-p--type\">{{ node.type }}</p>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"{{ node.id }}\">{{ '@pry.pipeline.title' | i18n }}</label>\n            <input\n              class=\"a-form-field\"\n              id=\"{{ node.id }}\"\n              type=\"text\"\n              [value]=\"node.title\"\n              [disabled]=\"disableEditing\"\n              (change)=\"changeTitle(node, $event)\"\n            />\n          </div>\n        </div>\n        <div class=\"o-pipeline-editor__properties__detail\" [class.is-empty]=\"!selectedNode\">\n          <div>\n            <div #specific></div>\n          </div>\n        </div>\n        <div *ngIf=\"((errors$ | async)?.length ?? 0) > 0\" class=\"o-pipeline-editor__properties__errors\">\n          <div class=\"o-pipeline-editor__properties__errors__title\">\n            <pry-icon iconSvg=\"warning-triangle\"></pry-icon>\n            <p class=\"a-p\">{{ '@pry.pipeline.errors' | i18n }}:</p>\n          </div>\n          <ul>\n            <li *ngFor=\"let error of errors$ | async\">\n              <span class=\"type\">{{\n                (error?.nodeId === '-' ? '@pry.pipeline.global' : '@pry.pipeline.node') | i18n\n              }}</span>\n              {{ error.translated }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: PipelineComponentFactoryService }, { type: i4.PryI18nService }], propDecorators: { pipeline: [{
+            args: [{ selector: 'pry-pipeline-editor', template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline\">\n  <div class=\"o-pipeline__menu\">\n    <pry-accordion>\n      @for (category of categories$ | async; track category; let index = $index) {\n        <pry-accordion-item\n          [item]=\"category\"\n          [borderColor]=\"(types$ | async)![category][0].color\"\n          [index]=\"index\"\n          [showSearchBar]=\"true\"\n          [search$]=\"search$\"\n          (search)=\"search($event)\"\n          translationStringBase=\"@pry.pipeline.\"\n          >\n          <ul class=\"o-pipeline__components\">\n            @for (type of (types$ | async)![category]; track type) {\n              <li [draggable]=\"!this.disableEditing\" (dragstart)=\"onDragStart($event, type)\">\n                <p class=\"a-p\">{{ type.label }}</p>\n                <pry-icon [width]=\"2\" [height]=\"20\" iconSvg=\"info\"></pry-icon>\n              </li>\n            }\n          </ul>\n        </pry-accordion-item>\n      }\n    </pry-accordion>\n  </div>\n\n  <div class=\"o-pipeline__workspace\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--secondary\" type=\"button\" (click)=\"goBack()\">\n        {{ '@pry.pipeline.backToDescription' | i18n }}\n      </button>\n      @for (action of actions; track action) {\n        <button type=\"button\" (click)=\"clickedAction(action)\" class=\"a-btn a-btn--secondary\">\n          {{ '@pry.pipeline.' + action.type | i18n }}\n          <pry-icon [iconSvg]=\"action.icon\"></pry-icon>\n        </button>\n      }\n    </div>\n    <div>\n      <h1 class=\"a-h1\">{{ this.pipeline?.title }}</h1>\n    </div>\n    <div class=\"o-pipeline-editor\">\n      <div (drop)=\"onDrop($event)\" class=\"o-pipeline-editor__grid\" #canvasParent>\n        <canvas #canvas class=\"canvas\"></canvas>\n      </div>\n      <div class=\"o-pipeline-editor__properties\">\n        @if (selectedNode$ | async; as node) {\n          <div\n            class=\"o-pipeline-editor__properties__node\"\n            [title]=\"node.properties['id']\"\n            >\n            <h3 class=\"a-h3\">{{ '@pry.pipeline.selectedTask' | i18n }}</h3>\n            <h4 class=\"a-h4\">{{ '@pry.pipeline.type' | i18n }}</h4>\n            <p class=\"a-p a-p--type\">{{ node.type }}</p>\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"{{ node.id }}\">{{ '@pry.pipeline.title' | i18n }}</label>\n              <input\n                class=\"a-form-field\"\n                id=\"{{ node.id }}\"\n                type=\"text\"\n                [value]=\"node.title\"\n                [disabled]=\"disableEditing\"\n                (change)=\"changeTitle(node, $event)\"\n                />\n            </div>\n          </div>\n        }\n        <div class=\"o-pipeline-editor__properties__detail\" [class.is-empty]=\"!selectedNode\">\n          <div>\n            <div #specific></div>\n          </div>\n        </div>\n        @if (((errors$ | async)?.length ?? 0) > 0) {\n          <div class=\"o-pipeline-editor__properties__errors\">\n            <div class=\"o-pipeline-editor__properties__errors__title\">\n              <pry-icon iconSvg=\"warning-triangle\"></pry-icon>\n              <p class=\"a-p\">{{ '@pry.pipeline.errors' | i18n }}:</p>\n            </div>\n            <ul>\n              @for (error of errors$ | async; track error) {\n                <li>\n                  <span class=\"type\">{{\n                    (error?.nodeId === '-' ? '@pry.pipeline.global' : '@pry.pipeline.node') | i18n\n                  }}</span>\n                  {{ error.translated }}\n                </li>\n              }\n            </ul>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: PipelineComponentFactoryService }, { type: i3.PryI18nService }], propDecorators: { pipeline: [{
                 type: Input
             }], goToConsult: [{
                 type: Output
@@ -806,13 +806,13 @@ class PryPipelineListComponent {
             button.tabIndex = -1;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryPipelineListComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryPipelineListComponent, selector: "pry-pipeline-list", viewQueries: [{ propertyName: "templateDropdown", first: true, predicate: ["dropdown"], descendants: true, read: TemplateRef }, { propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }, { propertyName: "toggleActions", first: true, predicate: ["toggleActions"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "confirm", first: true, predicate: ["confirm"], descendants: true }], ngImport: i0, template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline-layout\" [ngSwitch]=\"selectedMode\">\n  <ng-container *ngSwitchCase=\"ViewMode.CATALOG\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--primary a-btn--icon-text\" type=\"button\" (click)=\"create()\">\n        {{ '@pry.pipeline.create' | i18n }}\n      </button>\n    </div>\n    <h1 class=\"a-h1\">{{ '@pry.pipeline.transformation_catalog' | i18n }}</h1>\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"date\"\n      prySortDirection=\"desc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.pipeline.transformation_catalog' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th prySortHeader=\"state\">{{ '@pry.pipeline.details.state' | i18n }}</th>\n          <th prySortHeader=\"title\">{{ '@pry.pipeline.details.title' | i18n }}</th>\n          <th prySortHeader=\"date\">{{ '@pry.pipeline.details.last_execution_date' | i18n }}</th>\n          <th>\n            <div class=\"u-display-flex -align-center -column\">\n              {{ '@pry.pipeline.details.execution_status' | i18n }}\n            </div>\n          </th>\n          <th>{{ '@pry.pipeline.action' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let transfo of transformation$ | async | prySortData : sortActive : sortDirection; let index = index\"\n        >\n          <td>\n            <div *ngIf=\"transfo.active; else deactivated\" class=\"container-state\">\n              <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"check\" class=\"check\"></pry-icon>\n              <span> {{ '@pry.pipeline.activated' | i18n }}</span>\n            </div>\n            <ng-template #deactivated>\n              <div class=\"container-state\">\n                <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"stop\" class=\"stop\"></pry-icon>\n                <span>{{ '@pry.pipeline.deactivated' | i18n }}</span>\n              </div>\n            </ng-template>\n          </td>\n          <td>{{ transfo.title }}</td>\n          <td>{{ transfo?.lastJobExecution?.executionDate | sinceDate }}</td>\n          <td *ngIf=\"transfo.lastJobExecution\" class=\"u-display-flex -align-center -column\">\n            <div [ngSwitch]=\"transfo.lastJobExecution.status\">\n              <ng-container *ngSwitchCase=\"ExecutionState.TERMINATED\">\n                <pry-icon iconSvg=\"check\" [height]=\"25\" [width]=\"25\" class=\"check\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.STARTED\">\n                <pry-icon iconSvg=\"synchro\" [height]=\"25\" [width]=\"25\" class=\"warning\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.ERROR\">\n                <pry-icon iconSvg=\"close\" [height]=\"25\" [width]=\"25\" class=\"danger\"></pry-icon>\n              </ng-container>\n            </div>\n          </td>\n          <td>\n            <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"consult(transfo)\">\n              {{ '@pry.pipeline.consult' | i18n }}\n              <span class=\"u-visually-hidden\"> {{ transfo.title }} </span>\n            </button>\n          </td>\n          <td>\n            <button\n              class=\"a-btn a-btn--more\"\n              type=\"button\"\n              id=\"actions-{{ index }}\"\n              #actions\n              aria-controls=\"panelActions\"\n              [attr.aria-expanded]=\"!!overlayRef\"\n              (click)=\"toggleMoreDropdown($event, index, transfo)\"\n            >\n              <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CONSULT\">\n    <ng-container *ngIf=\"selectedTransfo\">\n      <pry-pipeline-details\n        [pipeline]=\"selectedTransfo\"\n        (goToList)=\"list()\"\n        (goToEditor)=\"savePipeline($event)\"\n        (executeConfirm)=\"toggleExecuteConfirm()\"\n      ></pry-pipeline-details>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CREATION\">\n    <pry-pipeline-details (goToList)=\"list()\" (goToEditor)=\"savePipeline($event)\"></pry-pipeline-details>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.EDITOR\">\n    <pry-pipeline-editor [pipeline]=\"selectedTransfo\" (goToConsult)=\"consult($event)\"></pry-pipeline-editor>\n  </ng-container>\n</div>\n<ng-template #noExecution>\n  <div class=\"container-state\">\n    <span>{{ '@pry.pipeline.ko' | i18n }}</span>\n    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"danger\" class=\"danger\"></pry-icon>\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <div\n    class=\"m-context-menu\"\n    id=\"panelActions\"\n    *ngIf=\"selectedTransfo\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.escape)=\"closeDropdown()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog panelActions\"\n  >\n    <ul class=\"m-context-menu__list\">\n      <li class=\"m-context-menu__list__item\" role=\"none\">\n        <button\n          #toggleActions\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          (click)=\"toggleState(selectedTransfo)\"\n          (keydown.arrowDown)=\"navigateContextMenu(activate, execute)\"\n          (keydown.arrowUp)=\"navigateContextMenu(activate, execute)\"\n          tabindex=\"0\"\n          #activate\n        >\n          <span>{{ (selectedTransfo.active ? '@pry.pipeline.deactivate' : '@pry.pipeline.activate') | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\">\n        <button\n          #execute\n          type=\"button\"\n          role=\"menuitem\"\n          id=\"execute\"\n          class=\"a-btn\"\n          tabindex=\"-1\"\n          (keydown.arrowDown)=\"navigateContextMenu(execute, activate)\"\n          (keydown.arrowUp)=\"navigateContextMenu(execute, activate)\"\n          [disabled]=\"!selectedTransfo.active\"\n          (click)=\"toggleExecuteConfirm()\"\n        >\n          <span>{{ '@pry.pipeline.execute' | i18n }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    *ngIf=\"selectedTransfo\"\n    (keydown.escape)=\"toggleExecuteConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          #cross\n          (keydown.shift.tab)=\"focusElement(confirm)\"\n          (click)=\"cancelRemoveConfirm()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" #cancel (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #confirm\n        id=\"confirm\"\n        class=\"a-btn a-btn--primary\"\n        (click)=\"confirmExecution(selectedTransfo)\"\n        (keydown.tab)=\"focusElement(cross)\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "directive", type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: PryPipelineEditorComponent, selector: "pry-pipeline-editor", inputs: ["pipeline"], outputs: ["goToConsult"] }, { kind: "component", type: PryPipelineCssComponent, selector: "pry-pipeline-css" }, { kind: "component", type: PryPipelineDetailsComponent, selector: "pry-pipeline-details", inputs: ["pipeline"], outputs: ["goToList", "goToConsult", "goToEditor", "executeConfirm"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.SinceDatePipe, name: "sinceDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryPipelineListComponent, deps: [{ token: i1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryPipelineListComponent, selector: "pry-pipeline-list", viewQueries: [{ propertyName: "templateDropdown", first: true, predicate: ["dropdown"], descendants: true, read: TemplateRef }, { propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }, { propertyName: "toggleActions", first: true, predicate: ["toggleActions"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "confirm", first: true, predicate: ["confirm"], descendants: true }], ngImport: i0, template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline-layout\">\n  @switch (selectedMode) {\n    @case (ViewMode.CATALOG) {\n      <div class=\"o-pipeline-layout__toolbox\">\n        <button class=\"a-btn a-btn--primary a-btn--icon-text\" type=\"button\" (click)=\"create()\">\n          {{ '@pry.pipeline.create' | i18n }}\n        </button>\n      </div>\n      <h1 class=\"a-h1\">{{ '@pry.pipeline.transformation_catalog' | i18n }}</h1>\n      <table\n        class=\"a-table\"\n        prySortTable\n        prySortActive=\"date\"\n        prySortDirection=\"desc\"\n        (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n        >\n        <caption>\n          {{\n          '@pry.pipeline.transformation_catalog' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th prySortHeader=\"state\">{{ '@pry.pipeline.details.state' | i18n }}</th>\n            <th prySortHeader=\"title\">{{ '@pry.pipeline.details.title' | i18n }}</th>\n            <th prySortHeader=\"date\">{{ '@pry.pipeline.details.last_execution_date' | i18n }}</th>\n            <th>\n              <div class=\"u-display-flex -align-center -column\">\n                {{ '@pry.pipeline.details.execution_status' | i18n }}\n              </div>\n            </th>\n            <th>{{ '@pry.pipeline.action' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (transfo of transformation$ | async | prySortData : sortActive : sortDirection; track transfo; let index = $index) {\n            <tr\n              >\n              <td>\n                @if (transfo.active) {\n                  <div class=\"container-state\">\n                    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"check\" class=\"check\"></pry-icon>\n                    <span> {{ '@pry.pipeline.activated' | i18n }}</span>\n                  </div>\n                } @else {\n                  <div class=\"container-state\">\n                    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"stop\" class=\"stop\"></pry-icon>\n                    <span>{{ '@pry.pipeline.deactivated' | i18n }}</span>\n                  </div>\n                }\n                <ng-template #deactivated>\n                  <div class=\"container-state\">\n                    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"stop\" class=\"stop\"></pry-icon>\n                    <span>{{ '@pry.pipeline.deactivated' | i18n }}</span>\n                  </div>\n                </ng-template>\n              </td>\n              <td>{{ transfo.title }}</td>\n              <td>{{ transfo?.lastJobExecution?.executionDate | sinceDate }}</td>\n              @if (transfo.lastJobExecution) {\n                <td class=\"u-display-flex -align-center -column\">\n                  <div>\n                    @switch (transfo.lastJobExecution.status) {\n                      @case (ExecutionState.TERMINATED) {\n                        <pry-icon iconSvg=\"check\" [height]=\"25\" [width]=\"25\" class=\"check\"></pry-icon>\n                      }\n                      @case (ExecutionState.STARTED) {\n                        <pry-icon iconSvg=\"synchro\" [height]=\"25\" [width]=\"25\" class=\"warning\"></pry-icon>\n                      }\n                      @case (ExecutionState.ERROR) {\n                        <pry-icon iconSvg=\"close\" [height]=\"25\" [width]=\"25\" class=\"danger\"></pry-icon>\n                      }\n                    }\n                  </div>\n                </td>\n              }\n              <td>\n                <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"consult(transfo)\">\n                  {{ '@pry.pipeline.consult' | i18n }}\n                  <span class=\"u-visually-hidden\"> {{ transfo.title }} </span>\n                </button>\n              </td>\n              <td>\n                <button\n                  class=\"a-btn a-btn--more\"\n                  type=\"button\"\n                  id=\"actions-{{ index }}\"\n                  #actions\n                  aria-controls=\"panelActions\"\n                  [attr.aria-expanded]=\"!!overlayRef\"\n                  (click)=\"toggleMoreDropdown($event, index, transfo)\"\n                  >\n                  <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n                </button>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n    @case (ViewMode.CONSULT) {\n      @if (selectedTransfo) {\n        <pry-pipeline-details\n          [pipeline]=\"selectedTransfo\"\n          (goToList)=\"list()\"\n          (goToEditor)=\"savePipeline($event)\"\n          (executeConfirm)=\"toggleExecuteConfirm()\"\n        ></pry-pipeline-details>\n      }\n    }\n    @case (ViewMode.CREATION) {\n      <pry-pipeline-details (goToList)=\"list()\" (goToEditor)=\"savePipeline($event)\"></pry-pipeline-details>\n    }\n    @case (ViewMode.EDITOR) {\n      <pry-pipeline-editor [pipeline]=\"selectedTransfo\" (goToConsult)=\"consult($event)\"></pry-pipeline-editor>\n    }\n  }\n</div>\n<ng-template #noExecution>\n  <div class=\"container-state\">\n    <span>{{ '@pry.pipeline.ko' | i18n }}</span>\n    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"danger\" class=\"danger\"></pry-icon>\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  @if (selectedTransfo) {\n    <div\n      class=\"m-context-menu\"\n      id=\"panelActions\"\n      (click)=\"$event.stopPropagation()\"\n      (keydown.escape)=\"closeDropdown()\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog panelActions\"\n      >\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\" role=\"none\">\n          <button\n            #toggleActions\n            type=\"button\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            (click)=\"toggleState(selectedTransfo)\"\n            (keydown.arrowDown)=\"navigateContextMenu(activate, execute)\"\n            (keydown.arrowUp)=\"navigateContextMenu(activate, execute)\"\n            tabindex=\"0\"\n            #activate\n            >\n            <span>{{ (selectedTransfo.active ? '@pry.pipeline.deactivate' : '@pry.pipeline.activate') | i18n }}</span>\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\" role=\"none\">\n          <button\n            #execute\n            type=\"button\"\n            role=\"menuitem\"\n            id=\"execute\"\n            class=\"a-btn\"\n            tabindex=\"-1\"\n            (keydown.arrowDown)=\"navigateContextMenu(execute, activate)\"\n            (keydown.arrowUp)=\"navigateContextMenu(execute, activate)\"\n            [disabled]=\"!selectedTransfo.active\"\n            (click)=\"toggleExecuteConfirm()\"\n            >\n            <span>{{ '@pry.pipeline.execute' | i18n }}</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  }\n</ng-template>\n<ng-template #templateModal>\n  @if (selectedTransfo) {\n    <div\n      class=\"o-modal\"\n      (keydown.escape)=\"toggleExecuteConfirm()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog confirm delete presentation\"\n      >\n      <div class=\"o-modal__top\">\n        <div class=\"o-modal__top__title\">\n          <h2 class=\"a-h2\" id=\"dialog_title\">\n            {{ '@pry.widget.modalTitle' | i18n }}\n          </h2>\n        </div>\n        <div class=\"o-modal__top__close\">\n          <button\n            class=\"a-btn a-btn--icon-only\"\n            #cross\n            (keydown.shift.tab)=\"focusElement(confirm)\"\n            (click)=\"cancelRemoveConfirm()\"\n            >\n            <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n            <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"m-btn-group\">\n        <button type=\"button\" #cancel (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n          {{ '@pry.toolbox.manifest.close' | i18n }}\n        </button>\n        <button\n          type=\"submit\"\n          #confirm\n          id=\"confirm\"\n          class=\"a-btn a-btn--primary\"\n          (click)=\"confirmExecution(selectedTransfo)\"\n          (keydown.tab)=\"focusElement(cross)\"\n          >\n          {{ '@pry.toolbox.manifest.validate' | i18n }}\n        </button>\n      </div>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: PryPipelineEditorComponent, selector: "pry-pipeline-editor", inputs: ["pipeline"], outputs: ["goToConsult"] }, { kind: "component", type: PryPipelineCssComponent, selector: "pry-pipeline-css" }, { kind: "component", type: PryPipelineDetailsComponent, selector: "pry-pipeline-details", inputs: ["pipeline"], outputs: ["goToList", "goToConsult", "goToEditor", "executeConfirm"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.SinceDatePipe, name: "sinceDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryPipelineListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-pipeline-list', template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline-layout\" [ngSwitch]=\"selectedMode\">\n  <ng-container *ngSwitchCase=\"ViewMode.CATALOG\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--primary a-btn--icon-text\" type=\"button\" (click)=\"create()\">\n        {{ '@pry.pipeline.create' | i18n }}\n      </button>\n    </div>\n    <h1 class=\"a-h1\">{{ '@pry.pipeline.transformation_catalog' | i18n }}</h1>\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"date\"\n      prySortDirection=\"desc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.pipeline.transformation_catalog' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th prySortHeader=\"state\">{{ '@pry.pipeline.details.state' | i18n }}</th>\n          <th prySortHeader=\"title\">{{ '@pry.pipeline.details.title' | i18n }}</th>\n          <th prySortHeader=\"date\">{{ '@pry.pipeline.details.last_execution_date' | i18n }}</th>\n          <th>\n            <div class=\"u-display-flex -align-center -column\">\n              {{ '@pry.pipeline.details.execution_status' | i18n }}\n            </div>\n          </th>\n          <th>{{ '@pry.pipeline.action' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let transfo of transformation$ | async | prySortData : sortActive : sortDirection; let index = index\"\n        >\n          <td>\n            <div *ngIf=\"transfo.active; else deactivated\" class=\"container-state\">\n              <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"check\" class=\"check\"></pry-icon>\n              <span> {{ '@pry.pipeline.activated' | i18n }}</span>\n            </div>\n            <ng-template #deactivated>\n              <div class=\"container-state\">\n                <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"stop\" class=\"stop\"></pry-icon>\n                <span>{{ '@pry.pipeline.deactivated' | i18n }}</span>\n              </div>\n            </ng-template>\n          </td>\n          <td>{{ transfo.title }}</td>\n          <td>{{ transfo?.lastJobExecution?.executionDate | sinceDate }}</td>\n          <td *ngIf=\"transfo.lastJobExecution\" class=\"u-display-flex -align-center -column\">\n            <div [ngSwitch]=\"transfo.lastJobExecution.status\">\n              <ng-container *ngSwitchCase=\"ExecutionState.TERMINATED\">\n                <pry-icon iconSvg=\"check\" [height]=\"25\" [width]=\"25\" class=\"check\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.STARTED\">\n                <pry-icon iconSvg=\"synchro\" [height]=\"25\" [width]=\"25\" class=\"warning\"></pry-icon>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"ExecutionState.ERROR\">\n                <pry-icon iconSvg=\"close\" [height]=\"25\" [width]=\"25\" class=\"danger\"></pry-icon>\n              </ng-container>\n            </div>\n          </td>\n          <td>\n            <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"consult(transfo)\">\n              {{ '@pry.pipeline.consult' | i18n }}\n              <span class=\"u-visually-hidden\"> {{ transfo.title }} </span>\n            </button>\n          </td>\n          <td>\n            <button\n              class=\"a-btn a-btn--more\"\n              type=\"button\"\n              id=\"actions-{{ index }}\"\n              #actions\n              aria-controls=\"panelActions\"\n              [attr.aria-expanded]=\"!!overlayRef\"\n              (click)=\"toggleMoreDropdown($event, index, transfo)\"\n            >\n              <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CONSULT\">\n    <ng-container *ngIf=\"selectedTransfo\">\n      <pry-pipeline-details\n        [pipeline]=\"selectedTransfo\"\n        (goToList)=\"list()\"\n        (goToEditor)=\"savePipeline($event)\"\n        (executeConfirm)=\"toggleExecuteConfirm()\"\n      ></pry-pipeline-details>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.CREATION\">\n    <pry-pipeline-details (goToList)=\"list()\" (goToEditor)=\"savePipeline($event)\"></pry-pipeline-details>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ViewMode.EDITOR\">\n    <pry-pipeline-editor [pipeline]=\"selectedTransfo\" (goToConsult)=\"consult($event)\"></pry-pipeline-editor>\n  </ng-container>\n</div>\n<ng-template #noExecution>\n  <div class=\"container-state\">\n    <span>{{ '@pry.pipeline.ko' | i18n }}</span>\n    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"danger\" class=\"danger\"></pry-icon>\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <div\n    class=\"m-context-menu\"\n    id=\"panelActions\"\n    *ngIf=\"selectedTransfo\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown.escape)=\"closeDropdown()\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog panelActions\"\n  >\n    <ul class=\"m-context-menu__list\">\n      <li class=\"m-context-menu__list__item\" role=\"none\">\n        <button\n          #toggleActions\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          (click)=\"toggleState(selectedTransfo)\"\n          (keydown.arrowDown)=\"navigateContextMenu(activate, execute)\"\n          (keydown.arrowUp)=\"navigateContextMenu(activate, execute)\"\n          tabindex=\"0\"\n          #activate\n        >\n          <span>{{ (selectedTransfo.active ? '@pry.pipeline.deactivate' : '@pry.pipeline.activate') | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\">\n        <button\n          #execute\n          type=\"button\"\n          role=\"menuitem\"\n          id=\"execute\"\n          class=\"a-btn\"\n          tabindex=\"-1\"\n          (keydown.arrowDown)=\"navigateContextMenu(execute, activate)\"\n          (keydown.arrowUp)=\"navigateContextMenu(execute, activate)\"\n          [disabled]=\"!selectedTransfo.active\"\n          (click)=\"toggleExecuteConfirm()\"\n        >\n          <span>{{ '@pry.pipeline.execute' | i18n }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    *ngIf=\"selectedTransfo\"\n    (keydown.escape)=\"toggleExecuteConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          #cross\n          (keydown.shift.tab)=\"focusElement(confirm)\"\n          (click)=\"cancelRemoveConfirm()\"\n        >\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" #cancel (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #confirm\n        id=\"confirm\"\n        class=\"a-btn a-btn--primary\"\n        (click)=\"confirmExecution(selectedTransfo)\"\n        (keydown.tab)=\"focusElement(cross)\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { templateDropdown: [{
+            args: [{ selector: 'pry-pipeline-list', template: "<pry-pipeline-css></pry-pipeline-css>\n<div class=\"o-pipeline-layout\">\n  @switch (selectedMode) {\n    @case (ViewMode.CATALOG) {\n      <div class=\"o-pipeline-layout__toolbox\">\n        <button class=\"a-btn a-btn--primary a-btn--icon-text\" type=\"button\" (click)=\"create()\">\n          {{ '@pry.pipeline.create' | i18n }}\n        </button>\n      </div>\n      <h1 class=\"a-h1\">{{ '@pry.pipeline.transformation_catalog' | i18n }}</h1>\n      <table\n        class=\"a-table\"\n        prySortTable\n        prySortActive=\"date\"\n        prySortDirection=\"desc\"\n        (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n        >\n        <caption>\n          {{\n          '@pry.pipeline.transformation_catalog' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th prySortHeader=\"state\">{{ '@pry.pipeline.details.state' | i18n }}</th>\n            <th prySortHeader=\"title\">{{ '@pry.pipeline.details.title' | i18n }}</th>\n            <th prySortHeader=\"date\">{{ '@pry.pipeline.details.last_execution_date' | i18n }}</th>\n            <th>\n              <div class=\"u-display-flex -align-center -column\">\n                {{ '@pry.pipeline.details.execution_status' | i18n }}\n              </div>\n            </th>\n            <th>{{ '@pry.pipeline.action' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (transfo of transformation$ | async | prySortData : sortActive : sortDirection; track transfo; let index = $index) {\n            <tr\n              >\n              <td>\n                @if (transfo.active) {\n                  <div class=\"container-state\">\n                    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"check\" class=\"check\"></pry-icon>\n                    <span> {{ '@pry.pipeline.activated' | i18n }}</span>\n                  </div>\n                } @else {\n                  <div class=\"container-state\">\n                    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"stop\" class=\"stop\"></pry-icon>\n                    <span>{{ '@pry.pipeline.deactivated' | i18n }}</span>\n                  </div>\n                }\n                <ng-template #deactivated>\n                  <div class=\"container-state\">\n                    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"stop\" class=\"stop\"></pry-icon>\n                    <span>{{ '@pry.pipeline.deactivated' | i18n }}</span>\n                  </div>\n                </ng-template>\n              </td>\n              <td>{{ transfo.title }}</td>\n              <td>{{ transfo?.lastJobExecution?.executionDate | sinceDate }}</td>\n              @if (transfo.lastJobExecution) {\n                <td class=\"u-display-flex -align-center -column\">\n                  <div>\n                    @switch (transfo.lastJobExecution.status) {\n                      @case (ExecutionState.TERMINATED) {\n                        <pry-icon iconSvg=\"check\" [height]=\"25\" [width]=\"25\" class=\"check\"></pry-icon>\n                      }\n                      @case (ExecutionState.STARTED) {\n                        <pry-icon iconSvg=\"synchro\" [height]=\"25\" [width]=\"25\" class=\"warning\"></pry-icon>\n                      }\n                      @case (ExecutionState.ERROR) {\n                        <pry-icon iconSvg=\"close\" [height]=\"25\" [width]=\"25\" class=\"danger\"></pry-icon>\n                      }\n                    }\n                  </div>\n                </td>\n              }\n              <td>\n                <button type=\"button\" class=\"a-btn a-btn--secondary -size-sm\" (click)=\"consult(transfo)\">\n                  {{ '@pry.pipeline.consult' | i18n }}\n                  <span class=\"u-visually-hidden\"> {{ transfo.title }} </span>\n                </button>\n              </td>\n              <td>\n                <button\n                  class=\"a-btn a-btn--more\"\n                  type=\"button\"\n                  id=\"actions-{{ index }}\"\n                  #actions\n                  aria-controls=\"panelActions\"\n                  [attr.aria-expanded]=\"!!overlayRef\"\n                  (click)=\"toggleMoreDropdown($event, index, transfo)\"\n                  >\n                  <pry-icon iconSvg=\"more_horiz\"></pry-icon>\n                </button>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n    @case (ViewMode.CONSULT) {\n      @if (selectedTransfo) {\n        <pry-pipeline-details\n          [pipeline]=\"selectedTransfo\"\n          (goToList)=\"list()\"\n          (goToEditor)=\"savePipeline($event)\"\n          (executeConfirm)=\"toggleExecuteConfirm()\"\n        ></pry-pipeline-details>\n      }\n    }\n    @case (ViewMode.CREATION) {\n      <pry-pipeline-details (goToList)=\"list()\" (goToEditor)=\"savePipeline($event)\"></pry-pipeline-details>\n    }\n    @case (ViewMode.EDITOR) {\n      <pry-pipeline-editor [pipeline]=\"selectedTransfo\" (goToConsult)=\"consult($event)\"></pry-pipeline-editor>\n    }\n  }\n</div>\n<ng-template #noExecution>\n  <div class=\"container-state\">\n    <span>{{ '@pry.pipeline.ko' | i18n }}</span>\n    <pry-icon [height]=\"15\" [width]=\"15\" iconSvg=\"danger\" class=\"danger\"></pry-icon>\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  @if (selectedTransfo) {\n    <div\n      class=\"m-context-menu\"\n      id=\"panelActions\"\n      (click)=\"$event.stopPropagation()\"\n      (keydown.escape)=\"closeDropdown()\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog panelActions\"\n      >\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\" role=\"none\">\n          <button\n            #toggleActions\n            type=\"button\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            (click)=\"toggleState(selectedTransfo)\"\n            (keydown.arrowDown)=\"navigateContextMenu(activate, execute)\"\n            (keydown.arrowUp)=\"navigateContextMenu(activate, execute)\"\n            tabindex=\"0\"\n            #activate\n            >\n            <span>{{ (selectedTransfo.active ? '@pry.pipeline.deactivate' : '@pry.pipeline.activate') | i18n }}</span>\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\" role=\"none\">\n          <button\n            #execute\n            type=\"button\"\n            role=\"menuitem\"\n            id=\"execute\"\n            class=\"a-btn\"\n            tabindex=\"-1\"\n            (keydown.arrowDown)=\"navigateContextMenu(execute, activate)\"\n            (keydown.arrowUp)=\"navigateContextMenu(execute, activate)\"\n            [disabled]=\"!selectedTransfo.active\"\n            (click)=\"toggleExecuteConfirm()\"\n            >\n            <span>{{ '@pry.pipeline.execute' | i18n }}</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  }\n</ng-template>\n<ng-template #templateModal>\n  @if (selectedTransfo) {\n    <div\n      class=\"o-modal\"\n      (keydown.escape)=\"toggleExecuteConfirm()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog confirm delete presentation\"\n      >\n      <div class=\"o-modal__top\">\n        <div class=\"o-modal__top__title\">\n          <h2 class=\"a-h2\" id=\"dialog_title\">\n            {{ '@pry.widget.modalTitle' | i18n }}\n          </h2>\n        </div>\n        <div class=\"o-modal__top__close\">\n          <button\n            class=\"a-btn a-btn--icon-only\"\n            #cross\n            (keydown.shift.tab)=\"focusElement(confirm)\"\n            (click)=\"cancelRemoveConfirm()\"\n            >\n            <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n            <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"m-btn-group\">\n        <button type=\"button\" #cancel (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n          {{ '@pry.toolbox.manifest.close' | i18n }}\n        </button>\n        <button\n          type=\"submit\"\n          #confirm\n          id=\"confirm\"\n          class=\"a-btn a-btn--primary\"\n          (click)=\"confirmExecution(selectedTransfo)\"\n          (keydown.tab)=\"focusElement(cross)\"\n          >\n          {{ '@pry.toolbox.manifest.validate' | i18n }}\n        </button>\n      </div>\n    </div>\n  }\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { templateDropdown: [{
                 type: ViewChild,
                 args: ['dropdown', { read: TemplateRef }]
             }], templateModal: [{
@@ -1083,12 +1083,12 @@ class PipelineEffects {
             .get(action.id)
             .pipe(map$1((transfo) => PipelineActions.getTransformationSuccess({ transfo }))))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PipelineEffects, deps: [{ token: i1$2.Actions }, { token: PipelineService }, { token: i4.PrySnackbarService }, { token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PipelineEffects, deps: [{ token: i1$2.Actions }, { token: PipelineService }, { token: i3.PrySnackbarService }, { token: i3.PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PipelineEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PipelineEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: PipelineService }, { type: i4.PrySnackbarService }, { type: i4.PryI18nService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: PipelineService }, { type: i3.PrySnackbarService }, { type: i3.PryI18nService }] });
 const components = [
     PryPipelineEditorComponent,
@@ -1102,7 +1102,7 @@ class PryPipelineModule {
         this.pryTranslateService.addLangObject('fr', 'pipeline', frTranslations);
         this.pryTranslateService.addLangObject('en', 'pipeline', enTranslations);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryPipelineModule, deps: [{ token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryPipelineModule, deps: [{ token: i3.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: PryPipelineModule, declarations: [PryPipelineEditorComponent,
             PryPipelineCssComponent,
             PryPipelineListComponent,
@@ -1154,7 +1154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     declarations: [...components],
                     exports: [...components]
                 }]
-        }], ctorParameters: () => [{ type: i4.PryI18nService }] });
+        }], ctorParameters: () => [{ type: i3.PryI18nService }] });
 class PipelinePropertiesPanelComponent {
     constructor() {