@provoly/dashboard 0.12.9 → 0.13.1

package/fesm2022/provoly-dashboard-pipeline.mjs

@@ -10,7 +10,7 @@ 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$2 from '@provoly/dashboard';
 import { SubscriptionnerDirective, DataSourceActions, ViewMode, ConfigActions, ConfigSelectors, PryCoreModule, PryIconModule, PryI18nModule, PrySortModule, PryToggleModule } from '@provoly/dashboard';
 import * as i6 from '@provoly/dashboard/components/sinceDate';
 import { PrySinceDateModule } from '@provoly/dashboard/components/sinceDate';
@@ -163,7 +163,7 @@ class PryPipelineDetailsComponent extends SubscriptionnerDirective {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineDetailsComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", 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: i6.PrySinceDatePipe, name: "sinceDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", 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: i3$2.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: i3$2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i6.PrySinceDatePipe, name: "sinceDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineDetailsComponent, decorators: [{
             type: Component,
@@ -376,11 +376,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
 
 class PryPipelineCssComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryPipelineCssComponent, selector: "pry-pipeline-css", ngImport: i0, template: '', isInline: true, styles: [".o-pipeline__menu .o-accordion__panel .o-pipeline__components{margin:0;padding:0}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li{list-style:none}.o-pipeline-layout{height:100%}.o-pipeline-layout__toolbox{display:flex;align-items:center;gap:1.25rem;padding:.8125rem 1.25rem;margin-bottom:1.25rem}.o-pipeline-layout__toolbox:first-of-type{padding-top:1.25rem;min-height:4.625rem}.o-pipeline-layout__toolbox .a-label{margin:0}.o-pipeline-layout__details{padding:1.25rem}.o-pipeline-layout__details .row{gap:2.8125rem}.o-pipeline-layout__details :first-child{flex:0 1 50%}.o-pipeline-layout__details .a-form-field{margin-bottom:.9375rem}.o-pipeline-layout__details .property-value{font-weight:400;font-size:1rem}.o-pipeline-layout .a-h1{margin:0 1.25rem}.o-pipeline-layout .a-table{margin-left:20px;width:calc(100% - 40px)}.o-pipeline-layout .a-table,.o-pipeline-layout .a-table td{cursor:default}.o-pipeline-layout .a-table .a-btn--secondary.-size-sm,.o-pipeline-layout .a-table td .a-btn--secondary.-size-sm{font-size:.875rem}.o-pipeline-layout .canvas{flex:1 1 auto}.o-pipeline-layout .litegraph.dialog{display:none}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li:before,.o-pipeline__menu .o-accordion__panel__head:before,.o-pipeline__menu .o-accordion__title:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px}.o-pipeline{display:flex;flex-direction:row;height:100%}.o-pipeline__menu{min-width:16.875rem;overflow-y:auto}.o-pipeline__menu .o-accordion{min-width:16.875rem}.o-pipeline__menu .o-accordion__title{position:relative;border-bottom-style:solid;border-bottom-width:.0625rem}.o-pipeline__menu .o-accordion__title:before{background-color:var(--border-color)}.o-pipeline__menu .o-accordion__title__btn{width:100%;height:70%;padding:0;text-transform:uppercase;text-align:left}.o-pipeline__menu .o-accordion__title.is-active{border-bottom:none}.o-pipeline__menu .o-accordion__panel{position:relative}.o-pipeline__menu .o-accordion__panel[aria-hidden=false]{border-bottom-style:solid;border-bottom-width:.0625rem}.o-pipeline__menu .o-accordion__panel__head{position:relative;padding:.125rem .625rem 1.25rem}.o-pipeline__menu .o-accordion__panel__head:before{background-color:var(--border-color)}.o-pipeline__menu .o-accordion__panel__head pry-icon{position:absolute;top:.75rem;left:1.4375rem}.o-pipeline__menu .o-accordion__panel__head .a-form-field{padding-left:2.5rem}.o-pipeline__menu .o-accordion__panel .o-pipeline__components{position:relative;z-index:1}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 .9375rem;border-top-width:1px;border-top-style:solid;cursor:grab}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li:before{background-color:var(--border-color)}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li:hover{background-color:#fff}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li:active{cursor:grabbing}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li .a-p{margin-bottom:0}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li .a-icon{transform:scale(2.2)}.o-pipeline__workspace{flex:1;display:flex;flex-direction:column;overflow:auto}.o-pipeline .o-pipeline-editor{flex:1;display:flex;flex-direction:row;margin:0 1.25rem;background-color:#fff}.o-pipeline .o-pipeline-editor__grid{flex:1}.o-pipeline .o-pipeline-editor__properties{display:flex;flex-direction:column;width:16.875rem;padding:1.5625rem 1.25rem}.o-pipeline .o-pipeline-editor__properties__node .a-h3{margin-bottom:.9375rem}.o-pipeline .o-pipeline-editor__properties__node .a-h4{margin-bottom:0;padding-bottom:.3125rem;text-transform:uppercase;font-size:.875rem;line-height:1.125rem}.o-pipeline .o-pipeline-editor__properties__node .a-p--type{padding-bottom:.625rem;font-size:.875rem;line-height:1.125rem;overflow-wrap:break-word}.o-pipeline .o-pipeline-editor__properties .a-label{font-weight:700;overflow-wrap:break-word}.o-pipeline .o-pipeline-editor__properties__detail{display:flex;flex-direction:column}.o-pipeline .o-pipeline-editor__properties__errors__title{display:flex;align-items:flex-end;gap:.625rem;margin-bottom:.9375rem}.o-pipeline .o-pipeline-editor__properties__errors__title .a-p{margin-bottom:0;font-weight:700;text-transform:uppercase}.o-pipeline .o-pipeline-editor__properties__errors ul li .type{display:inline-block;padding:.0625rem .3125rem;border-radius:.3125rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryPipelineCssComponent, selector: "pry-pipeline-css", ngImport: i0, template: '', isInline: true, styles: [".o-pipeline-layout{height:100%}.o-pipeline-layout__toolbox{display:flex;align-items:center;gap:1.25rem;padding:.8125rem 1.25rem;margin-bottom:1.25rem}.o-pipeline-layout__toolbox:first-of-type{padding-top:1.25rem;min-height:4.625rem}.o-pipeline-layout__toolbox .a-label{margin:0}.o-pipeline-layout__details{padding:1.25rem}.o-pipeline-layout__details .row{gap:2.8125rem}.o-pipeline-layout__details :first-child{flex:0 1 50%}.o-pipeline-layout__details .a-form-field{margin-bottom:.9375rem}.o-pipeline-layout__details .property-value{font-weight:400;font-size:1rem}.o-pipeline-layout .a-h1{margin:0 1.25rem}.o-pipeline-layout .a-table{margin-left:20px;width:calc(100% - 40px)}.o-pipeline-layout .a-table,.o-pipeline-layout .a-table td{cursor:default}.o-pipeline-layout .a-table .a-btn--secondary.-size-sm,.o-pipeline-layout .a-table td .a-btn--secondary.-size-sm{font-size:.875rem}.o-pipeline-layout .canvas{flex:1 1 auto}.o-pipeline-layout .litegraph.dialog{display:none}.o-pipeline{display:flex;flex-direction:row;height:100%}.o-pipeline__menu{min-width:16.875rem;overflow-y:auto}.o-pipeline__menu .o-accordion{min-width:16.875rem}.o-pipeline__workspace{flex:1;display:flex;flex-direction:column;overflow:auto}.o-pipeline .o-pipeline-editor{flex:1;display:flex;flex-direction:row;margin:0 1.25rem;background-color:#fff}.o-pipeline .o-pipeline-editor__grid{flex:1}.o-pipeline .o-pipeline-editor__properties{display:flex;flex-direction:column;width:16.875rem;padding:1.5625rem 1.25rem}.o-pipeline .o-pipeline-editor__properties__node .a-h3{margin-bottom:.9375rem}.o-pipeline .o-pipeline-editor__properties__node .a-h4{margin-bottom:0;padding-bottom:.3125rem;text-transform:uppercase;font-size:.875rem;line-height:1.125rem}.o-pipeline .o-pipeline-editor__properties__node .a-p--type{padding-bottom:.625rem;font-size:.875rem;line-height:1.125rem;overflow-wrap:break-word}.o-pipeline .o-pipeline-editor__properties .a-label{font-weight:700;overflow-wrap:break-word}.o-pipeline .o-pipeline-editor__properties__detail{display:flex;flex-direction:column}.o-pipeline .o-pipeline-editor__properties__errors__title{display:flex;align-items:flex-end;gap:.625rem;margin-bottom:.9375rem}.o-pipeline .o-pipeline-editor__properties__errors__title .a-p{margin-bottom:0;font-weight:700;text-transform:uppercase}.o-pipeline .o-pipeline-editor__properties__errors ul li .type{display:inline-block;padding:.0625rem .3125rem;border-radius:.3125rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineCssComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-pipeline-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".o-pipeline__menu .o-accordion__panel .o-pipeline__components{margin:0;padding:0}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li{list-style:none}.o-pipeline-layout{height:100%}.o-pipeline-layout__toolbox{display:flex;align-items:center;gap:1.25rem;padding:.8125rem 1.25rem;margin-bottom:1.25rem}.o-pipeline-layout__toolbox:first-of-type{padding-top:1.25rem;min-height:4.625rem}.o-pipeline-layout__toolbox .a-label{margin:0}.o-pipeline-layout__details{padding:1.25rem}.o-pipeline-layout__details .row{gap:2.8125rem}.o-pipeline-layout__details :first-child{flex:0 1 50%}.o-pipeline-layout__details .a-form-field{margin-bottom:.9375rem}.o-pipeline-layout__details .property-value{font-weight:400;font-size:1rem}.o-pipeline-layout .a-h1{margin:0 1.25rem}.o-pipeline-layout .a-table{margin-left:20px;width:calc(100% - 40px)}.o-pipeline-layout .a-table,.o-pipeline-layout .a-table td{cursor:default}.o-pipeline-layout .a-table .a-btn--secondary.-size-sm,.o-pipeline-layout .a-table td .a-btn--secondary.-size-sm{font-size:.875rem}.o-pipeline-layout .canvas{flex:1 1 auto}.o-pipeline-layout .litegraph.dialog{display:none}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li:before,.o-pipeline__menu .o-accordion__panel__head:before,.o-pipeline__menu .o-accordion__title:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px}.o-pipeline{display:flex;flex-direction:row;height:100%}.o-pipeline__menu{min-width:16.875rem;overflow-y:auto}.o-pipeline__menu .o-accordion{min-width:16.875rem}.o-pipeline__menu .o-accordion__title{position:relative;border-bottom-style:solid;border-bottom-width:.0625rem}.o-pipeline__menu .o-accordion__title:before{background-color:var(--border-color)}.o-pipeline__menu .o-accordion__title__btn{width:100%;height:70%;padding:0;text-transform:uppercase;text-align:left}.o-pipeline__menu .o-accordion__title.is-active{border-bottom:none}.o-pipeline__menu .o-accordion__panel{position:relative}.o-pipeline__menu .o-accordion__panel[aria-hidden=false]{border-bottom-style:solid;border-bottom-width:.0625rem}.o-pipeline__menu .o-accordion__panel__head{position:relative;padding:.125rem .625rem 1.25rem}.o-pipeline__menu .o-accordion__panel__head:before{background-color:var(--border-color)}.o-pipeline__menu .o-accordion__panel__head pry-icon{position:absolute;top:.75rem;left:1.4375rem}.o-pipeline__menu .o-accordion__panel__head .a-form-field{padding-left:2.5rem}.o-pipeline__menu .o-accordion__panel .o-pipeline__components{position:relative;z-index:1}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 .9375rem;border-top-width:1px;border-top-style:solid;cursor:grab}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li:before{background-color:var(--border-color)}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li:hover{background-color:#fff}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li:active{cursor:grabbing}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li .a-p{margin-bottom:0}.o-pipeline__menu .o-accordion__panel .o-pipeline__components li .a-icon{transform:scale(2.2)}.o-pipeline__workspace{flex:1;display:flex;flex-direction:column;overflow:auto}.o-pipeline .o-pipeline-editor{flex:1;display:flex;flex-direction:row;margin:0 1.25rem;background-color:#fff}.o-pipeline .o-pipeline-editor__grid{flex:1}.o-pipeline .o-pipeline-editor__properties{display:flex;flex-direction:column;width:16.875rem;padding:1.5625rem 1.25rem}.o-pipeline .o-pipeline-editor__properties__node .a-h3{margin-bottom:.9375rem}.o-pipeline .o-pipeline-editor__properties__node .a-h4{margin-bottom:0;padding-bottom:.3125rem;text-transform:uppercase;font-size:.875rem;line-height:1.125rem}.o-pipeline .o-pipeline-editor__properties__node .a-p--type{padding-bottom:.625rem;font-size:.875rem;line-height:1.125rem;overflow-wrap:break-word}.o-pipeline .o-pipeline-editor__properties .a-label{font-weight:700;overflow-wrap:break-word}.o-pipeline .o-pipeline-editor__properties__detail{display:flex;flex-direction:column}.o-pipeline .o-pipeline-editor__properties__errors__title{display:flex;align-items:flex-end;gap:.625rem;margin-bottom:.9375rem}.o-pipeline .o-pipeline-editor__properties__errors__title .a-p{margin-bottom:0;font-weight:700;text-transform:uppercase}.o-pipeline .o-pipeline-editor__properties__errors ul li .type{display:inline-block;padding:.0625rem .3125rem;border-radius:.3125rem}\n"] }]
+            args: [{ selector: 'pry-pipeline-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".o-pipeline-layout{height:100%}.o-pipeline-layout__toolbox{display:flex;align-items:center;gap:1.25rem;padding:.8125rem 1.25rem;margin-bottom:1.25rem}.o-pipeline-layout__toolbox:first-of-type{padding-top:1.25rem;min-height:4.625rem}.o-pipeline-layout__toolbox .a-label{margin:0}.o-pipeline-layout__details{padding:1.25rem}.o-pipeline-layout__details .row{gap:2.8125rem}.o-pipeline-layout__details :first-child{flex:0 1 50%}.o-pipeline-layout__details .a-form-field{margin-bottom:.9375rem}.o-pipeline-layout__details .property-value{font-weight:400;font-size:1rem}.o-pipeline-layout .a-h1{margin:0 1.25rem}.o-pipeline-layout .a-table{margin-left:20px;width:calc(100% - 40px)}.o-pipeline-layout .a-table,.o-pipeline-layout .a-table td{cursor:default}.o-pipeline-layout .a-table .a-btn--secondary.-size-sm,.o-pipeline-layout .a-table td .a-btn--secondary.-size-sm{font-size:.875rem}.o-pipeline-layout .canvas{flex:1 1 auto}.o-pipeline-layout .litegraph.dialog{display:none}.o-pipeline{display:flex;flex-direction:row;height:100%}.o-pipeline__menu{min-width:16.875rem;overflow-y:auto}.o-pipeline__menu .o-accordion{min-width:16.875rem}.o-pipeline__workspace{flex:1;display:flex;flex-direction:column;overflow:auto}.o-pipeline .o-pipeline-editor{flex:1;display:flex;flex-direction:row;margin:0 1.25rem;background-color:#fff}.o-pipeline .o-pipeline-editor__grid{flex:1}.o-pipeline .o-pipeline-editor__properties{display:flex;flex-direction:column;width:16.875rem;padding:1.5625rem 1.25rem}.o-pipeline .o-pipeline-editor__properties__node .a-h3{margin-bottom:.9375rem}.o-pipeline .o-pipeline-editor__properties__node .a-h4{margin-bottom:0;padding-bottom:.3125rem;text-transform:uppercase;font-size:.875rem;line-height:1.125rem}.o-pipeline .o-pipeline-editor__properties__node .a-p--type{padding-bottom:.625rem;font-size:.875rem;line-height:1.125rem;overflow-wrap:break-word}.o-pipeline .o-pipeline-editor__properties .a-label{font-weight:700;overflow-wrap:break-word}.o-pipeline .o-pipeline-editor__properties__detail{display:flex;flex-direction:column}.o-pipeline .o-pipeline-editor__properties__errors__title{display:flex;align-items:flex-end;gap:.625rem;margin-bottom:.9375rem}.o-pipeline .o-pipeline-editor__properties__errors__title .a-p{margin-bottom:0;font-weight:700;text-transform:uppercase}.o-pipeline .o-pipeline-editor__properties__errors ul li .type{display:inline-block;padding:.0625rem .3125rem;border-radius:.3125rem}\n"] }]
         }] });
 
 const MIME_TYPE_PIPELINE_COMPONENT = 'pipeline/component';
@@ -395,7 +395,6 @@ class PryPipelineEditorComponent extends SubscriptionnerDirective {
         this.lGraphs = [];
         this.actions = [];
         this.disableEditing = false;
-        this.categoryOpened = '';
         this.search$ = new BehaviorSubject({});
         BaseNode.store = store;
         BaseNode.check = () => this.check();
@@ -645,19 +644,16 @@ class PryPipelineEditorComponent extends SubscriptionnerDirective {
     goBack() {
         this.goToConsult.emit(this.pipeline);
     }
-    toggle(category) {
-        this.categoryOpened = this.categoryOpened === category ? '' : category;
+    search($event) {
+        this.search$.next({ ...$event });
     }
-    search(category, $event) {
-        this.search$.next({ ...this.search$.getValue(), [category]: $event });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", 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: "16.1.6", 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    <div class=\"o-accordion\" role=\"tablist\" aria-multiselectable=\"false\">\n      <ng-container *ngFor=\"let category of categories$ | async\">\n        <h2\n          class=\"o-accordion__title\"\n          [class.is-active]=\"categoryOpened === category\"\n          [style.--border-color]=\"(types$ | async)![category][0].color\"\n        >\n          <button\n            type=\"button\"\n            class=\"o-accordion__title__btn\"\n            [id]=\"'button_' + category\"\n            role=\"tab\"\n            [attr.aria-controls]=\"'panel_' + category\"\n            [attr.aria-selected]=\"categoryOpened === category\"\n            [attr.aria-expanded]=\"categoryOpened === category\"\n            (click)=\"toggle(category)\"\n          >\n            <span>{{ '@pry.pipeline.' + category | i18n }}</span>\n            <pry-icon\n              [width]=\"15\"\n              [height]=\"15\"\n              [iconSvg]=\"categoryOpened === category ? 'chevron_top_rounded' : 'chevron_bottom_rounded'\"\n            ></pry-icon>\n          </button>\n        </h2>\n        <div\n          class=\"o-accordion__panel\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'button_' + category\"\n          [id]=\"'panel_' + category\"\n          [attr.aria-hidden]=\"categoryOpened !== category\"\n          [style.--border-color]=\"(types$ | async)![category][0].color\"\n        >\n          <ng-container *ngIf=\"categoryOpened === category\">\n            <div class=\"o-accordion__panel__head\">\n              <input\n                type=\"text\"\n                class=\"a-form-field\"\n                [placeholder]=\"'@pry.toolbox.catalog.filter.name' | i18n\"\n                [ngModel]=\"(search$ | async)[category]\"\n                (ngModelChange)=\"search(category, $event)\"\n              />\n              <pry-icon iconSvg=\"search\" [width]=\"17\" [height]=\"17\"></pry-icon>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"categoryOpened === category\">\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          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"o-pipeline__workspace\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--secondary --size-md\" 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 --size-md\">\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.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: "16.1.6", ngImport: i0, type: PryPipelineEditorComponent, deps: [{ token: i1.Store }, { token: PipelineComponentFactoryService }, { token: i3$2.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", 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 --size-md\" 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 --size-md\">\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: i3$2.AccordionComponent, selector: "pry-accordion" }, { kind: "component", type: i3$2.AccordionItemComponent, selector: "pry-accordion-item", inputs: ["item", "borderColor", "index", "translationStringBase", "length", "showSearchBar", "search$"], outputs: ["search"] }, { kind: "component", type: i3$2.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: i3$2.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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    <div class=\"o-accordion\" role=\"tablist\" aria-multiselectable=\"false\">\n      <ng-container *ngFor=\"let category of categories$ | async\">\n        <h2\n          class=\"o-accordion__title\"\n          [class.is-active]=\"categoryOpened === category\"\n          [style.--border-color]=\"(types$ | async)![category][0].color\"\n        >\n          <button\n            type=\"button\"\n            class=\"o-accordion__title__btn\"\n            [id]=\"'button_' + category\"\n            role=\"tab\"\n            [attr.aria-controls]=\"'panel_' + category\"\n            [attr.aria-selected]=\"categoryOpened === category\"\n            [attr.aria-expanded]=\"categoryOpened === category\"\n            (click)=\"toggle(category)\"\n          >\n            <span>{{ '@pry.pipeline.' + category | i18n }}</span>\n            <pry-icon\n              [width]=\"15\"\n              [height]=\"15\"\n              [iconSvg]=\"categoryOpened === category ? 'chevron_top_rounded' : 'chevron_bottom_rounded'\"\n            ></pry-icon>\n          </button>\n        </h2>\n        <div\n          class=\"o-accordion__panel\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'button_' + category\"\n          [id]=\"'panel_' + category\"\n          [attr.aria-hidden]=\"categoryOpened !== category\"\n          [style.--border-color]=\"(types$ | async)![category][0].color\"\n        >\n          <ng-container *ngIf=\"categoryOpened === category\">\n            <div class=\"o-accordion__panel__head\">\n              <input\n                type=\"text\"\n                class=\"a-form-field\"\n                [placeholder]=\"'@pry.toolbox.catalog.filter.name' | i18n\"\n                [ngModel]=\"(search$ | async)[category]\"\n                (ngModelChange)=\"search(category, $event)\"\n              />\n              <pry-icon iconSvg=\"search\" [width]=\"17\" [height]=\"17\"></pry-icon>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"categoryOpened === category\">\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          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"o-pipeline__workspace\">\n    <div class=\"o-pipeline-layout__toolbox\">\n      <button class=\"a-btn a-btn--secondary --size-md\" 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 --size-md\">\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: function () { return [{ 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      <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 --size-md\" 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 --size-md\">\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: function () { return [{ type: i1.Store }, { type: PipelineComponentFactoryService }, { type: i3$2.PryI18nService }]; }, propDecorators: { pipeline: [{
                 type: Input
             }], goToConsult: [{
                 type: Output
@@ -803,7 +799,7 @@ class PryPipelineListComponent {
         this.confirm.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", 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: "16.1.6", 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\"\n              #actions\n              aria-controls=\"panelActions\"\n              [attr.aria-expanded]=\"!!this.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  >\n    <ul class=\"m-context-menu__list\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog panelActions\">\n      <li class=\"m-context-menu__list__item\" role=\"none\" tabindex=\"-1\">\n        <button\n          type=\"button\"\n          #toggleActions\n          class=\"a-btn\"\n          role=\"menuitem\"\n          (click)=\"toggleState(selectedTransfo)\"\n          (keydown.tab)=\"disableSelectedTranso()\"\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\" tabindex=\"-1\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          id=\"execute\"\n          class=\"a-btn\"\n          (keydown.tab)=\"closeDropdown()\"\n          [disabled]=\"selectedTransfo.active === false\"\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)=\"focusValidation()\"\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)=\"focusCrossElement()\"\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: "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: i6.PrySinceDatePipe, name: "sinceDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", 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\"\n              #actions\n              aria-controls=\"panelActions\"\n              [attr.aria-expanded]=\"!!this.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  >\n    <ul class=\"m-context-menu__list\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog panelActions\">\n      <li class=\"m-context-menu__list__item\" role=\"none\" tabindex=\"-1\">\n        <button\n          type=\"button\"\n          #toggleActions\n          class=\"a-btn\"\n          role=\"menuitem\"\n          (click)=\"toggleState(selectedTransfo)\"\n          (keydown.tab)=\"disableSelectedTranso()\"\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\" tabindex=\"-1\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          id=\"execute\"\n          class=\"a-btn\"\n          (keydown.tab)=\"closeDropdown()\"\n          [disabled]=\"selectedTransfo.active === false\"\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)=\"focusValidation()\"\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)=\"focusCrossElement()\"\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: i3$2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3$2.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3$2.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3$2.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { 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: i3$2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i3$2.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i6.PrySinceDatePipe, name: "sinceDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineListComponent, decorators: [{
             type: Component,
@@ -1079,12 +1075,12 @@ class PipelineEffects {
             .get(action.id)
             .pipe(map$1((transfo) => PipelineActions.getTransformationSuccess({ transfo }))))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", 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: "16.1.6", ngImport: i0, type: PipelineEffects, deps: [{ token: i1$2.Actions }, { token: PipelineService }, { token: i3$2.PrySnackbarService }, { token: i3$2.PryI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PipelineEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PipelineEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: PipelineService }, { type: i4.PrySnackbarService }, { type: i4.PryI18nService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: PipelineService }, { type: i3$2.PrySnackbarService }, { type: i3$2.PryI18nService }]; } });
 
 const components = [
     PryPipelineEditorComponent,
@@ -1098,7 +1094,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: "16.1.6", ngImport: i0, type: PryPipelineModule, deps: [{ token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineModule, deps: [{ token: i3$2.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineModule, declarations: [PryPipelineEditorComponent,
             PryPipelineCssComponent,
             PryPipelineListComponent,
@@ -1147,7 +1143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                     declarations: [...components],
                     exports: [...components]
                 }]
-        }], ctorParameters: function () { return [{ type: i4.PryI18nService }]; } });
+        }], ctorParameters: function () { return [{ type: i3$2.PryI18nService }]; } });
 
 class PipelinePropertiesPanelComponent {
     constructor() {