@provoly/dashboard 0.11.0

package/fesm2022/provoly-dashboard-pipeline.mjs

@@ -0,0 +1,1183 @@
+import * as i2 from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, InjectionToken, Injectable, ViewEncapsulation, ViewContainerRef, ViewChild, TemplateRef, NgModule } from '@angular/core';
+import * as i3$1 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 { 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';
+import { map, combineLatestWith, startWith, BehaviorSubject, combineLatest, fromEvent, auditTime, mergeMap, of } from 'rxjs';
+import { v4 } from 'uuid';
+import * as i5 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 i1$1 from '@angular/common/http';
+
+const PipelineActions = {
+    select: createAction('[Pipeline] select', props()),
+    setResponse: createAction('[Pipeline] set response', props()),
+    check: createAction('[Pipeline] check', props()),
+    fetchTransfosList: createAction('[Pipeline] fetching available transfos'),
+    fetchTransfosListSuccess: createAction('[Pipeline] received transfos', props()),
+    fetchTransfosListFailure: createAction('[Pipeline] failure transfos', props()),
+    toggleActivation: createAction('[Pipeline] toggle transfo activation', props()),
+    activationError: createAction('[Pipeline] Error on toggle activate', props()),
+    executeTransfo: createAction('[Pipeline] execute transfo', props()),
+    getTransformation: createAction('[Pipeline] get transformation by id', props()),
+    getTransformationSuccess: createAction('[Pipeline] get transformation by id success', props())
+};
+
+const pipelineFeatureKey = '@pry/pipeline';
+const initialPipelineState = {
+    selectedNode: '',
+    checkResponse: undefined,
+    transfos: [],
+    error: undefined,
+    activeError: undefined,
+    loading: false
+};
+const pipelineReducer = createReducer(initialPipelineState, on(PipelineActions.select, (state, action) => ({
+    ...state,
+    selectedNode: action.id
+})), on(PipelineActions.setResponse, (state, action) => ({
+    ...state,
+    checkResponse: action.response
+})), on(PipelineActions.fetchTransfosList, (state) => ({
+    ...state,
+    loading: true
+})), on(PipelineActions.fetchTransfosListSuccess, (state, action) => ({
+    ...state,
+    transfos: action.transfos,
+    loading: false
+})), on(PipelineActions.fetchTransfosListFailure, (state, action) => ({
+    ...state,
+    error: action.error,
+    loading: false
+})), on(PipelineActions.toggleActivation, (state, action) => ({
+    ...state,
+    activeError: undefined,
+    loading: action.transfo.active
+})), on(PipelineActions.activationError, (state, action) => ({
+    ...state,
+    activeError: {
+        id: action.id,
+        error: action.error
+    },
+    loading: false
+})));
+
+const feature = createFeatureSelector(pipelineFeatureKey);
+const selectedNodeId = createSelector(feature, (state) => state?.selectedNode);
+const checkResponse = createSelector(feature, (state) => state?.checkResponse);
+const transfos = createSelector(feature, (state) => state?.transfos);
+const activeError = createSelector(feature, (state) => state?.activeError);
+const transfo = (id) => createSelector(feature, (state) => {
+    return state.transfos.find((transfo) => transfo.id === id);
+});
+const PipelineSelectors = {
+    selectedNodeId,
+    checkResponse,
+    transfos,
+    transfo,
+    activeError
+};
+
+class PryPipelineDetailsComponent extends SubscriptionnerDirective {
+    constructor(store) {
+        super();
+        this.store = store;
+        this.pipeline = {
+            id: v4(),
+            links: [],
+            nodes: [],
+            title: '',
+            description: '',
+            creationDate: new Date().toDateString(),
+            version: '',
+            active: false,
+            lastJobExecution: null
+        };
+        this.goToList = new EventEmitter();
+        this.goToConsult = new EventEmitter();
+        this.goToEditor = new EventEmitter();
+        this.executeConfirm = new EventEmitter();
+        this.form = new FormGroup({
+            title: new FormControl(null, [Validators.required, Validators.maxLength(30)]),
+            description: new FormControl(null, [Validators.maxLength(200)])
+        });
+    }
+    ngOnInit() {
+        this.form.setValue({ title: this.pipeline.title, description: this.pipeline.description });
+        this.pipeline$ = this.store.select(PipelineSelectors.transfo(this.pipeline.id));
+        this.isSaved$ = this.pipeline$.pipe(map((pipeline) => !!pipeline));
+        this.isSavingDisabled$ = this.pipeline$.pipe(combineLatestWith(this.form.valueChanges.pipe(startWith({ title: this.form.value.title, description: this.form.value.description }))), map(([pipeline, form]) => {
+            return !!pipeline && form.title === pipeline?.title && form.description === pipeline?.description;
+        }));
+        this.subscriptions.add(this.store.select(PipelineSelectors.activeError).subscribe((error) => {
+            if (error && error.id === this.pipeline.id) {
+                this.pipeline = {
+                    ...this.pipeline,
+                    active: false
+                };
+            }
+        }));
+    }
+    save() {
+        this.setFormDataInPipeline();
+        this.store.dispatch(PipelineActions.check({
+            graph: {
+                id: this.pipeline.id,
+                title: this.pipeline.title,
+                description: this.pipeline.description,
+                links: this.pipeline.links,
+                nodes: this.pipeline.nodes
+            },
+            fetch: true
+        }));
+    }
+    setFormDataInPipeline() {
+        this.pipeline = {
+            ...this.pipeline,
+            title: this.form.value.title,
+            description: this.form.value.description
+        };
+    }
+    openEditor() {
+        this.setFormDataInPipeline();
+        this.goToEditor.emit(this.pipeline);
+    }
+    toggleActivation() {
+        this.store.dispatch(PipelineActions.toggleActivation({ transfo: this.pipeline }));
+        this.pipeline = {
+            ...this.pipeline,
+            active: !this.pipeline.active
+        };
+    }
+    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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { pipeline: [{
+                type: Input
+            }], goToList: [{
+                type: Output
+            }], goToConsult: [{
+                type: Output
+            }], goToEditor: [{
+                type: Output
+            }], executeConfirm: [{
+                type: Output
+            }] } });
+
+LiteGraph.NODE_DEFAULT_BGCOLOR = '#FFFFFF';
+LiteGraph.NODE_TITLE_COLOR = 'transparent';
+class BaseNode extends LGraphNode {
+    constructor(title, ...other) {
+        super();
+        this.properties['id'] = v4();
+        this.color = BaseNode.getNodeTitleColor();
+        this.titleColor = '#FFFFFF';
+        this.title = (this.type ?? '?').split('.')[(this.type ?? '?').split('.').length - 1] ?? '?';
+    }
+    static getNodeTitleColor() {
+        return '#4E92E4';
+    }
+    onSelected() {
+        BaseNode.store.dispatch(PipelineActions.select({ id: this.properties['id'] }));
+    }
+    onPropertyChanged(property, value, prevValue) {
+        BaseNode.check();
+    }
+    onConnectionsChange() {
+        BaseNode.check();
+    }
+    onDrawTitleText(ctx, title_height, size, scale, title_text_font, selected) {
+        ctx.font = title_text_font;
+        const title = this.getTitle();
+        if (title) {
+            ctx.fillStyle = this.titleColor;
+            if (this.flags.collapsed) {
+                ctx.textAlign = 'center';
+                const measure = ctx.measureText(title);
+                ctx.fillText(title, title_height + measure.width * 0.5, LiteGraph.NODE_TITLE_TEXT_Y - title_height);
+                ctx.textAlign = 'left';
+            }
+            else {
+                ctx.textAlign = 'left';
+                ctx.fillText(title, title_height, LiteGraph.NODE_TITLE_TEXT_Y - title_height);
+            }
+        }
+    }
+}
+
+class GraphSerializerUtils {
+    static serialize(lgraph, id) {
+        const output = {
+            id: id,
+            links: [],
+            nodes: []
+        };
+        if (!!lgraph) {
+            const baseLiteGraph = JSON.parse(JSON.stringify(lgraph.serialize()));
+            const translated = GraphSerializerUtils.translateFromSerializedLGraphToPryModel(baseLiteGraph);
+            output.nodes = translated.nodes;
+            output.links = translated.links;
+        }
+        return output;
+    }
+    static translateFromSerializedLGraphToPryModel(graph) {
+        return {
+            nodes: graph.nodes.map((node) => {
+                const output = {
+                    id: node.properties['id'],
+                    type: node.type,
+                    title: node.title ?? node.type,
+                    spec: {
+                        ...node.properties
+                    },
+                    gui: {
+                        pos: [node.pos[0], node.pos[1]],
+                        size: [node.size[0], node.size[1]]
+                    }
+                };
+                delete output.spec['subgraph'];
+                delete output.spec['id'];
+                delete output.spec['type'];
+                delete output.spec['_label'];
+                if (node.type === 'SubGraphNode') {
+                    output.subgraph = GraphSerializerUtils.translateFromSerializedLGraphToPryModel(node.properties['subgraph']);
+                }
+                return output;
+            }),
+            links: graph.links.map((linkArray) => ({
+                start: {
+                    id: graph.nodes.find((node) => node.id === linkArray[1]).properties['id'],
+                    slot: linkArray[2]
+                },
+                end: {
+                    id: graph.nodes.find((node) => node.id === linkArray[3]).properties['id'],
+                    slot: linkArray[4]
+                }
+            }))
+        };
+    }
+    static hydrate(serializedGraph, lgraph) {
+        const hydratedNodes = serializedGraph.nodes
+            .map((node) => GraphSerializerUtils.createNode(node))
+            .filter((node) => !!node);
+        hydratedNodes.forEach((node) => lgraph.add(node));
+        serializedGraph.links.forEach((link) => {
+            const startNode = hydratedNodes.find((hNode) => link.start.id === hNode.properties['id']);
+            const endNode = hydratedNodes.find((hNode) => link.end.id === hNode.properties['id']);
+            if (startNode && endNode) {
+                startNode.connect(link.start.slot, endNode, link.end.slot);
+            }
+            else {
+                if (!startNode) {
+                    console.error(`Missing node id ${link.start.id} for link hydratation`);
+                }
+                if (!endNode) {
+                    console.error(`Missing node id ${link.end.id} for link hydratation`);
+                }
+            }
+        });
+    }
+    static createNode(serializedNode) {
+        const node_const = LiteGraph.createNode(serializedNode.type, serializedNode.title, {});
+        if (!node_const) {
+            console.error(`Node with type ${serializedNode.type} could not have been created (id ${serializedNode.id}).`);
+        }
+        else {
+            node_const.title = serializedNode.title;
+            for (let i = 0; i < 2; i++) {
+                node_const.pos[i] = serializedNode.gui.pos[i];
+                node_const.size[i] = serializedNode.gui.size[i];
+            }
+            Object.keys(serializedNode.spec).forEach((key) => (node_const.properties[key] = serializedNode.spec[key]));
+            node_const.properties['id'] = serializedNode.id;
+            if (serializedNode.type === 'SubGraphNode') {
+                const subGraphNode = node_const; // type is SubGRaphNode, but we don't want to introduce a dependency to optional module Subgraph
+                for (let i = 0; i < subGraphNode.properties['inputs']; i++) {
+                    subGraphNode.createInput(serializedNode.subgraph.nodes.filter((node) => node.type === 'SubGraphInput')[i].id);
+                }
+                for (let i = 0; i < subGraphNode.properties['outputs']; i++) {
+                    subGraphNode.createOutput(serializedNode.subgraph.nodes.filter((node) => node.type === 'SubGraphOutput')[i].id);
+                }
+                GraphSerializerUtils.hydrate({ ...serializedNode.subgraph }, subGraphNode.subGraph);
+            }
+        }
+        return node_const;
+    }
+}
+
+const PIPELINE_COMPONENT_MODULES = new InjectionToken('Pipeline components modules');
+class PipelineComponentFactoryService {
+    constructor() {
+        this.referential$ = new BehaviorSubject([]);
+        this.typesByCategories$ = this.referential$.pipe(map$1((ref) => ref.filter((component) => component.draggable)), map$1((ref) => {
+            const categories = {};
+            ref.forEach((componentDef) => {
+                if (!categories[componentDef.category]) {
+                    categories[componentDef.category] = [];
+                }
+                categories[componentDef.category].push(componentDef);
+            });
+            Object.keys(categories).forEach((category) => categories[category].sort((a, b) => a.label.localeCompare(b.label)));
+            return categories;
+        }));
+        this.categories$ = this.typesByCategories$.pipe(map$1((typesByCategories) => Object.keys(typesByCategories).sort()));
+    }
+    addType(type, component, nodeClass, category = 'operation', label = '', draggable = true, additionalProperties = {}) {
+        this.referential$.next([
+            ...this.referential$.getValue(),
+            {
+                type,
+                component,
+                nodeClass,
+                draggable,
+                category,
+                label: label.length > 0 ? label : type.split('.')[type.split('.').length - 1],
+                additionalProperties,
+                // @ts-ignore
+                color: nodeClass.getNodeTitleColor()
+            }
+        ]);
+        if (LiteGraph.getNodeType(type)) {
+            LiteGraph.unregisterNodeType(type);
+        }
+        LiteGraph.registerNodeType(type, nodeClass);
+    }
+    removeType(type) {
+        this.referential$.next([...this.referential$.getValue().filter((component) => component.type !== type)]);
+    }
+    get(type) {
+        return this.referential$.getValue().find((component) => component.type === type);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PipelineComponentFactoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PipelineComponentFactoryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PipelineComponentFactoryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+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 }); }
+}
+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"] }]
+        }] });
+
+const MIME_TYPE_PIPELINE_COMPONENT = 'pipeline/component';
+const MIME_TYPE_PIPELINE_PROPERTIES = 'pipeline/properties';
+class PryPipelineEditorComponent extends SubscriptionnerDirective {
+    constructor(store, pipelineComponentFactoryService, translateService) {
+        super();
+        this.store = store;
+        this.pipelineComponentFactoryService = pipelineComponentFactoryService;
+        this.translateService = translateService;
+        this.goToConsult = new EventEmitter();
+        this.lGraphs = [];
+        this.actions = [];
+        this.disableEditing = false;
+        this.categoryOpened = '';
+        this.search$ = new BehaviorSubject({});
+        BaseNode.store = store;
+        BaseNode.check = () => this.check();
+        this.store.dispatch(DataSourceActions.namedQuery.load());
+        this.store.dispatch(DataSourceActions.dataset.loadDataset());
+        this.types$ = combineLatest([pipelineComponentFactoryService.typesByCategories$, this.search$]).pipe(map$1(([typesByCategory, search]) => {
+            const result = {};
+            Object.keys(typesByCategory).forEach((cat) => {
+                result[cat] = typesByCategory[cat].filter((type) => type.label.toLocaleLowerCase().includes((search[cat] ?? '').toLocaleLowerCase()));
+            });
+            return result;
+        }));
+        this.categories$ = pipelineComponentFactoryService.categories$;
+        this.selectedNode$ = this.store.select(PipelineSelectors.selectedNodeId).pipe(map$1((id) => this.findNodeById(id)));
+        this.response$ = this.store.select(PipelineSelectors.checkResponse);
+        this.subscriptions.add(this.response$.subscribe((response) => {
+            this.allNodes.forEach((errorNode) => {
+                // @ts-ignore
+                delete errorNode?.bgcolor;
+            });
+            (response?.status.map((status) => status.errors).reduce((p, c) => [...p, ...c], []) ?? [])
+                ?.map((error) => this.findNodeById(error.nodeId))
+                .filter((errorNode) => !!errorNode)
+                .forEach((errorNode) => (errorNode.bgcolor = '#d93535'));
+            this.refresh();
+        }));
+        this.selectedNode$.pipe(combineLatestWith(this.response$)).subscribe(([node, response]) => {
+            if (this.instanciatedComponent) {
+                this.componentRef.clear();
+            }
+            this.removeAction('down');
+            if (node) {
+                const module = this.pipelineComponentFactoryService.get(node?.type ?? '');
+                if (module) {
+                    this.instanciatedComponent = this.componentRef.createComponent(module.component);
+                    this.instanciatedComponent.instance.node = node;
+                    this.instanciatedComponent.instance.checkFn = () => { };
+                    this.instanciatedComponent.instance.disabled = this.disableEditing;
+                    setTimeout(() => {
+                        this.instanciatedComponent.instance.checkFn = () => this.check();
+                    }, 100);
+                    if (response) {
+                        const matchingStatus = response.status.find((status) => status.nodeId === node.properties['id']);
+                        if (matchingStatus) {
+                            this.instanciatedComponent.instance.model = matchingStatus.outModel;
+                        }
+                    }
+                }
+                if (node.type === 'SubGraphNode') {
+                    this.addAction({ icon: 'eye-arrow-down', type: 'down' });
+                }
+                this.addAction({ icon: 'delete', type: 'delete' });
+            }
+            else {
+                this.removeAction('delete');
+            }
+        });
+        this.subscriptions.add(this.selectedNode$.subscribe((node) => (this.selectedNode = node)));
+        this.errors$ = combineLatest([this.response$, this.selectedNode$]).pipe(map$1(([response, selectedNode]) => [
+            ...(response?.errors ?? []).map((error) => ({ ...error, nodeId: '-' })),
+            ...(response?.status.find((status) => status.nodeId === (selectedNode?.properties['id'] ?? '-----'))?.errors ??
+                [])
+        ]), map$1((errors) => errors.map((error) => ({
+            ...error,
+            translated: this.translateService.instant('@pry.pipeline.codes.' + error.code, error)
+        }))));
+        this.subscriptions.add(fromEvent(window, 'resize')
+            .pipe(auditTime(100))
+            .subscribe(() => {
+            this.onResize();
+        }));
+        this.images = {
+            start: new Image(),
+            after: new Image()
+        };
+        this.images.start.src = '/assets/backgrounds/img_processus.png';
+        this.images.after.src = '';
+    }
+    get currentGraph() {
+        return this.lGraphs[this.lGraphs.length - 1];
+    }
+    get allNodes() {
+        // @ts-ignore
+        return this.currentGraph?._nodes ?? [];
+    }
+    get backgroundImage() {
+        return (this.pipeline?.nodes ?? []).length > 0 ? this.images.after : this.images.start;
+    }
+    findNodeById(id) {
+        return this.allNodes.find((node) => node.properties['id'] === id);
+    }
+    ngAfterViewInit() {
+        this.lGraphs.push(new LGraph());
+        this.lGraphCanvas = new LGraphCanvas(this.canvas.nativeElement, this.currentGraph);
+        this.lGraphCanvas.allow_searchbox = false;
+        this.lGraphCanvas.title_text_font = 'bold 14px Ubuntu';
+        this.lGraphCanvas.inner_text_font = 'normal 12px Ubuntu';
+        this.lGraphCanvas.default_link_color = '#000000';
+        // @ts-ignore
+        this.lGraphCanvas.background_image = undefined;
+        this.lGraphCanvas.onDrawBackground = (ctx, vector) => {
+            const rect = this.canvas.nativeElement.getBoundingClientRect();
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, rect.width, rect.height);
+            const imgSize = [306, 171];
+            ctx.drawImage(this.backgroundImage, (rect.width - imgSize[0]) / 2, (rect.height - imgSize[1]) / 2, imgSize[0], imgSize[1]);
+        };
+        this.lGraphCanvas.onNodeDeselected = () => {
+            this.store.dispatch(PipelineActions.select({ id: '' }));
+        };
+        this.currentGraph.start();
+        if (this.pipeline) {
+            GraphSerializerUtils.hydrate(this.pipeline, this.currentGraph);
+            this.disableEditing = this.pipeline.active;
+        }
+        this.onResize();
+    }
+    onResize() {
+        // Make canvas so little that it doesn't impact css size calculation
+        this.canvas.nativeElement.width = 10;
+        this.canvas.nativeElement.height = 10;
+        this.lGraphCanvas.resize(10, 10);
+        // Later, make it grow to proper size
+        setTimeout(() => {
+            const rect = this.canvasParent.nativeElement.getBoundingClientRect();
+            this.canvas.nativeElement.width = rect.width;
+            this.canvas.nativeElement.height = rect.height;
+            this.lGraphCanvas.resize(rect.width, rect.height);
+            this.refresh();
+        }, 10);
+    }
+    displayGraph(graph) {
+        this.currentGraph.stop();
+        this.lGraphs.push(graph);
+        this.lGraphCanvas.setGraph(graph);
+        graph.start();
+    }
+    popGraph() {
+        this.currentGraph.stop();
+        this.lGraphs.length = this.lGraphs.length - 1;
+        this.currentGraph.start();
+        this.lGraphCanvas.setGraph(this.currentGraph);
+        this.store.dispatch(PipelineActions.select({ id: '' }));
+        this.lGraphCanvas.deselectAllNodes();
+        if (this.lGraphs.length === 1) {
+            this.removeAction('up');
+        }
+    }
+    pupGraph(node) {
+        // @ts-ignore
+        if (!!node.subGraph) {
+            // @ts-ignore
+            this.displayGraph(node.subGraph);
+            this.store.dispatch(PipelineActions.select({ id: '' }));
+            this.lGraphCanvas.deselectAllNodes();
+            this.addAction({ icon: 'eye-arrow-up', type: 'up' });
+        }
+    }
+    check() {
+        if (!this.disableEditing) {
+            this.pipeline = {
+                ...this.pipeline,
+                ...GraphSerializerUtils.serialize(this.lGraphs[0], this.pipeline?.id)
+            };
+            setTimeout(() => {
+                this.store.dispatch(PipelineActions.check({
+                    graph: {
+                        id: this.pipeline?.id,
+                        nodes: this.pipeline?.nodes,
+                        links: this.pipeline?.links,
+                        title: this.pipeline?.title,
+                        description: this.pipeline?.description
+                    }
+                }));
+            }, 100);
+        }
+    }
+    refresh() {
+        this.currentGraph?.change();
+    }
+    createNode(type, position, additionalProperties) {
+        const title = additionalProperties._label ?? type.split('.')[type.split('.').length - 1] ?? '?';
+        const node_const = LiteGraph.createNode(type, title, {});
+        if (node_const !== null) {
+            node_const.title = title;
+            node_const.pos = position;
+            Object.keys(additionalProperties).forEach((key) => {
+                node_const.properties[key] = additionalProperties[key];
+            });
+            this.currentGraph.add(node_const);
+        }
+        else {
+            console.error(`Cannot create node of type ${type}`);
+        }
+    }
+    onDragStart($event, component) {
+        if (!!$event && !!$event.dataTransfer && !$event.dataTransfer.types.includes(MIME_TYPE_PIPELINE_COMPONENT)) {
+            $event.dataTransfer.dropEffect = 'copy';
+            $event.dataTransfer.effectAllowed = 'copy';
+            $event.dataTransfer.setData(MIME_TYPE_PIPELINE_COMPONENT, component.type);
+            $event.dataTransfer.setData(MIME_TYPE_PIPELINE_PROPERTIES, JSON.stringify({ ...component.additionalProperties }));
+        }
+    }
+    onDrop($event) {
+        $event.preventDefault();
+        if (!!$event && !!$event.dataTransfer) {
+            if ($event.dataTransfer.types.includes(MIME_TYPE_PIPELINE_COMPONENT)) {
+                const componentType = $event.dataTransfer.getData(MIME_TYPE_PIPELINE_COMPONENT);
+                const additionalProperties = JSON.parse($event.dataTransfer.getData(MIME_TYPE_PIPELINE_PROPERTIES));
+                const convertedEvent = this.lGraphCanvas.convertEventToCanvasOffset($event);
+                this.createNode(componentType, [convertedEvent[0], convertedEvent[1]], additionalProperties);
+                this.check();
+                $event.stopPropagation();
+            }
+        }
+    }
+    changeTitle(node, $event) {
+        // @ts-ignore
+        node.title = $event.target?.value;
+        this.refresh();
+    }
+    clickedAction(action) {
+        switch (action.type) {
+            case 'up':
+                this.popGraph();
+                break;
+            case 'down':
+                this.pupGraph(this.selectedNode);
+                break;
+            case 'delete':
+                this.currentGraph.remove(this.selectedNode);
+                this.removeAction('delete');
+                this.check();
+                break;
+        }
+        this.store.dispatch(PipelineActions.select({ id: '' }));
+    }
+    addAction(add) {
+        if (!this.actions.find((action) => action.type === add.type)) {
+            this.actions.push(add);
+        }
+        this.actions.sort((a, b) => a.type.localeCompare(b.type));
+    }
+    removeAction(type) {
+        this.actions = this.actions.filter((action) => action.type !== type);
+    }
+    goBack() {
+        this.goToConsult.emit(this.pipeline);
+    }
+    toggle(category) {
+        this.categoryOpened = this.categoryOpened === category ? '' : category;
+    }
+    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" }] }); }
+}
+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: [{
+                type: Input
+            }], goToConsult: [{
+                type: Output
+            }], canvas: [{
+                type: ViewChild,
+                args: ['canvas']
+            }], canvasParent: [{
+                type: ViewChild,
+                args: ['canvasParent']
+            }], componentRef: [{
+                type: ViewChild,
+                args: ['specific', { read: ViewContainerRef, static: false }]
+            }] } });
+
+var ExecutionState;
+(function (ExecutionState) {
+    ExecutionState["STARTED"] = "started";
+    ExecutionState["TERMINATED"] = "terminated";
+    ExecutionState["ERROR"] = "error";
+})(ExecutionState || (ExecutionState = {}));
+
+class PryPipelineListComponent {
+    constructor(store, overlay, viewContainerRef) {
+        this.store = store;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.sortActive = 'creationDate';
+        this.sortDirection = 'desc';
+        this.selectedMode = ViewMode.CATALOG;
+        this.ViewMode = ViewMode;
+        this.connectedPosition = {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top'
+        };
+        this.ExecutionState = ExecutionState;
+        this.store.dispatch(PipelineActions.fetchTransfosList());
+        this.transformation$ = this.store.select(PipelineSelectors.transfos);
+        this.selectedMode = ViewMode.CATALOG;
+    }
+    toggleMoreDropdown($event, index, transfo) {
+        if (this.toggleIndex !== index) {
+            this.selectedTransfo = transfo;
+            this.toggleIndex = index;
+            this.overlayRef = this.overlay.create(new OverlayConfig({
+                hasBackdrop: true,
+                panelClass: ['modal'],
+                backdropClass: 'backdrop'
+            }));
+            this.store.dispatch(ConfigActions.addingOverlay({ id: this.constructor.name }));
+            this.overlayRef.backdropClick().subscribe(() => this.toggleMoreDropdown($event, index, transfo));
+            this.overlayRef.attach(new TemplatePortal(this.templateDropdown, this.viewContainerRef));
+            setTimeout(() => {
+                this.toggleActions.nativeElement.focus();
+            }, 10);
+            const modal = document.querySelector('div.modal');
+            // const displayedElement = document.querySelector('div.pipelineList-dropdown__actions') as HTMLDivElement;
+            const displayedElement = document.querySelector('.m-context-menu');
+            if (!!modal) {
+                modal.style.left =
+                    Math.max(0, Math.min(window.innerWidth - displayedElement.clientWidth, $event.clientX - 150)) + 'px';
+                modal.style.top =
+                    Math.max(0, Math.min(window.innerHeight - displayedElement.clientHeight, $event.clientY - 10)) + 'px';
+            }
+        }
+        else {
+            this.overlayRef?.dispose();
+            this.closeDropdown();
+        }
+    }
+    closeDropdown() {
+        this.overlayRef?.dispose();
+        this.toggleIndex = undefined;
+        this.overlayRef = undefined;
+        this.actions.nativeElement.focus();
+    }
+    toggleState(selectedTransfo) {
+        if (selectedTransfo) {
+            this.store.dispatch(PipelineActions.toggleActivation({ transfo: selectedTransfo }));
+        }
+        this.closeDropdown();
+    }
+    toggleExecuteConfirm() {
+        if (!this.confirmExecutionRef) {
+            this.confirmExecutionRef = this.overlay.create(new OverlayConfig({
+                hasBackdrop: true,
+                panelClass: ['o-modal-wrapper'],
+                backdropClass: 'backdrop'
+            }));
+            this.store.dispatch(ConfigActions.addingOverlay({ id: this.constructor.name }));
+            this.confirmExecutionRef.attach(new TemplatePortal(this.templateModal, this.viewContainerRef));
+            this.confirmExecutionRef.backdropClick().subscribe(() => this.toggleExecuteConfirm());
+            const panel = document.querySelector('div.o-modal-wrapper');
+            if (!!panel) {
+                panel.style.position = 'fixed';
+                panel.style.top = '50%';
+                panel.style.left = '50%';
+                panel.style.transform = 'translate(-50%, -50%)';
+            }
+            setTimeout(() => {
+                this.cancel.nativeElement.focus();
+            }, 10);
+        }
+        else {
+            this.confirmExecutionRef.dispose();
+            this.confirmExecutionRef = undefined;
+            this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name }));
+            this.actions.nativeElement.focus();
+            this.closeDropdown();
+        }
+    }
+    cancelRemoveConfirm() {
+        this.confirmExecutionRef?.dispose();
+        this.confirmExecutionRef = undefined;
+        this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name }));
+        this.closeDropdown();
+    }
+    confirmExecution(selectedTransfo) {
+        if (selectedTransfo?.jobInstanceId) {
+            this.store.dispatch(PipelineActions.executeTransfo({ id: selectedTransfo.jobInstanceId }));
+        }
+        this.cancelRemoveConfirm();
+    }
+    list() {
+        this.store.dispatch(PipelineActions.fetchTransfosList());
+        this.selectedMode = ViewMode.CATALOG;
+    }
+    create() {
+        this.selectedMode = ViewMode.CREATION;
+    }
+    consult(transfo) {
+        this.selectedTransfo = transfo;
+        this.selectedMode = ViewMode.CONSULT;
+    }
+    savePipeline(transfo) {
+        this.selectedTransfo = transfo;
+        this.selectedMode = ViewMode.EDITOR;
+    }
+    disableSelectedTranso() {
+        if (this.selectedTransfo?.active === false) {
+            this.closeDropdown();
+        }
+    }
+    focusCrossElement() {
+        this.cross.nativeElement.focus();
+    }
+    focusValidation() {
+        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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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\"\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" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { templateDropdown: [{
+                type: ViewChild,
+                args: ['dropdown', { read: TemplateRef }]
+            }], templateModal: [{
+                type: ViewChild,
+                args: ['templateModal', { read: TemplateRef }]
+            }], actions: [{
+                type: ViewChild,
+                args: ['actions']
+            }], toggleActions: [{
+                type: ViewChild,
+                args: ['toggleActions']
+            }], cancel: [{
+                type: ViewChild,
+                args: ['cancel']
+            }], cross: [{
+                type: ViewChild,
+                args: ['cross']
+            }], confirm: [{
+                type: ViewChild,
+                args: ['confirm']
+            }] } });
+
+const enTranslations = {
+    '@pry': {
+        pipeline: {
+            codes: {
+                LOOP_IN_TASK: 'A loop is present in the task model, using following nodes: {{ids}}',
+                MISSING_NODE: 'A link to a non-existent node is present : {{value}}',
+                DUPLICATE_NODE: 'Node with id {{id}} is present twice in the model',
+                NO_INPUT: 'A node input is not link even though it is mandatory',
+                NO_INPUT_MODEL: 'Previous node in graph has not provided a model',
+                GRAPH_CANNOT_BE_PARSED: 'Serialized graph cannot be parsed.',
+                GENERIC_ERROR: 'Server validation error ({{error}})',
+                MISSING_PROPERTY: 'Property {{propertyName}} is mandatory',
+                BAD_ATTRIBUTE_TYPE: 'Attribute {{attributeName}} has wrong type.',
+                DATASET_CONFLICT: 'Following datasets ({{datasetIds}}) are inputs and outputs of the pipeline'
+            },
+            activateError: 'Error on activate',
+            deactivateError: 'Error on deactivate',
+            editor: 'Go to process',
+            errors: 'Errors',
+            global: 'Global',
+            node: 'Node',
+            consult: 'Consult',
+            execute: 'Execute',
+            execution_date: 'Execution date',
+            version: 'Version',
+            execution: 'Execution state',
+            title: 'Component title',
+            activity: 'Activity',
+            action: 'Action',
+            transformation_catalog: 'Transformation catalog',
+            activate: 'Activate',
+            activated: 'Activated',
+            deactivate: 'Deactivate',
+            deactivated: 'Deactivated',
+            backToDescription: 'Back to description',
+            selectedTask: 'Selected task',
+            type: 'Type',
+            ok: 'OK',
+            ko: 'KO',
+            create: 'Create transformation',
+            save: 'Save',
+            cancel: 'Cancel',
+            goBack: 'Back to catalog',
+            details: {
+                consult: 'Consultation',
+                transformation: 'Transformation',
+                detail: 'Detail',
+                title: 'Title',
+                description: 'Description',
+                version: 'Version',
+                creation_date: 'Creation date',
+                state: 'State',
+                execution: 'Execution',
+                execution_status: 'Execution status',
+                execution_date: 'Execution date',
+                last_execution_date: 'Last execution date',
+                required: 'This field is required',
+                maxLength: 'Number of characters allowed: {{len}}'
+            },
+            input: 'Incoming data sources',
+            operation: 'Operation list',
+            output: 'Outgoing dataset',
+            delete: 'Delete component',
+            down: 'Display sub-graph',
+            up: 'Exit sub-graph',
+            status: {
+                terminated: 'Completed',
+                started: 'In progress',
+                error: 'Error'
+            }
+        }
+    }
+};
+
+const frTranslations = {
+    '@pry': {
+        pipeline: {
+            codes: {
+                LOOP_IN_TASK: "Une boucle est présente dans le modèle des tâches, en utilisant les noeuds d'id suivants: {{ids}}",
+                MISSING_NODE: "Un lien pointe vers un noeud qui n'existe pas : {{value}}",
+                DUPLICATE_NODE: "Le noeud d'id {{id}} est présent deux fois dans le modèle envoyé",
+                NO_INPUT: "Une entrée de noeud n'est pas liée alors que c'est nécessaire",
+                NO_INPUT_MODEL: "Le noeud précédent dans le graphe n'a pas généré son modèle",
+                GRAPH_CANNOT_BE_PARSED: "Le graphe serialisé n'a pas pu être lu par le serveur",
+                GENERIC_ERROR: 'Problème de validation du serveur ({{error}})',
+                MISSING_PROPERTY: 'La propriété {{propertyName}} est obligatoire',
+                BAD_ATTRIBUTE_TYPE: "L'attribut {{attributeName}} a un type incorrect.",
+                DATASET_CONFLICT: 'Les jeux de données suivants ({{datasetDefIds}}) sont en entrée et en sortie de la transformation'
+            },
+            activateError: "Erreur lors de l'activation",
+            deactivateError: 'Erreur lors de la désactivation',
+            editor: 'Accéder au processus',
+            errors: 'Erreurs',
+            global: 'Global',
+            node: 'Noeud',
+            consult: 'Consulter',
+            execute: 'Exécuter',
+            execution_date: 'Date exécution',
+            version: 'Version',
+            execution: 'Status exécution',
+            title: 'Titre du composant',
+            activity: 'Activité',
+            action: 'Action',
+            transformation_catalog: 'Catalogue des transformations',
+            activate: 'Activer',
+            activated: 'Activée',
+            deactivate: 'Désactiver',
+            deactivated: 'Désactivée',
+            backToDescription: 'Retour à la description',
+            selectedTask: 'Tâche sélectionnée',
+            type: 'Type',
+            ok: 'OK',
+            ko: 'KO',
+            create: 'Créer une transformation',
+            save: 'Enregistrer',
+            cancel: 'Annuler',
+            goBack: 'Retour au catalogue',
+            details: {
+                consult: 'Consultation',
+                transformation: 'Transformation',
+                detail: 'Détail',
+                title: 'Titre',
+                description: 'Description',
+                version: 'Version',
+                creation_date: 'Date de création',
+                state: 'Etat',
+                execution: 'Exécution',
+                execution_status: 'Status exécution',
+                execution_date: 'Date exécution',
+                last_execution_date: 'Date de la dernière exécution',
+                required: 'Le champs est requis',
+                maxLength: 'Nombre de caractères autorisé : {{len}}'
+            },
+            input: 'Sources de données entrantes',
+            operation: 'Liste des opérations',
+            output: 'Jeux de données sortants',
+            delete: 'Supprimer le composant',
+            down: 'Afficher le contenu du sous-graphe',
+            up: 'Sortir du sous-graphe',
+            status: {
+                terminated: 'Terminé',
+                started: 'En cours',
+                error: 'Erreur'
+            }
+        }
+    }
+};
+
+class PipelineService {
+    constructor(httpClient, store) {
+        this.httpClient = httpClient;
+        this.store = store;
+    }
+    check(graph) {
+        return this.store
+            .select(ConfigSelectors.transfoUrl)
+            .pipe(mergeMap((url) => this.httpClient.put(`${url}/transfos`, graph)));
+    }
+    list() {
+        return this.store
+            .select(ConfigSelectors.transfoUrl)
+            .pipe(mergeMap((url) => this.httpClient.get(encodeURI(`${url}/transfos`))));
+    }
+    get(id) {
+        return this.store
+            .select(ConfigSelectors.transfoUrl)
+            .pipe(mergeMap((url) => this.httpClient.get(encodeURI(`${url}/transfos/id/${id}`))));
+    }
+    activate(id) {
+        return this.store
+            .select(ConfigSelectors.transfoUrl)
+            .pipe(mergeMap((url) => this.httpClient.post(encodeURI(`${url}/transfos/id/${id}/activation`), null)));
+    }
+    deactivate(id) {
+        return this.store
+            .select(ConfigSelectors.transfoUrl)
+            .pipe(mergeMap((url) => this.httpClient.delete(encodeURI(`${url}/transfos/id/${id}/activation`))));
+    }
+    execute(id) {
+        return this.store
+            .select(ConfigSelectors.execUrl)
+            .pipe(mergeMap((url) => this.httpClient.put(encodeURI(`${url}/job/instances/id/${id}/start`), null)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PipelineService, deps: [{ token: i1$1.HttpClient }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PipelineService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PipelineService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i1.Store }]; } });
+
+class PipelineEffects {
+    constructor(actions$, pipelineService, snackBar, translate) {
+        this.actions$ = actions$;
+        this.pipelineService = pipelineService;
+        this.snackBar = snackBar;
+        this.translate = translate;
+        this.callCheck$ = createEffect(() => this.actions$.pipe(ofType(PipelineActions.check), debounceTime(100), mergeMap$1((action) => this.pipelineService.check(action.graph).pipe(map$1((response) => {
+            if (action.fetch) {
+                return PipelineActions.fetchTransfosList();
+            }
+            else {
+                return PipelineActions.setResponse({ response });
+            }
+        }), catchError((response) => {
+            let code = 'GENERIC_ERROR';
+            const params = {};
+            switch (response.status) {
+                case 404:
+                    code = 'GRAPH_CANNOT_BE_PARSED';
+                    break;
+                default:
+                    params['error'] = `${response.status} - ${response.message}`;
+            }
+            return of(PipelineActions.setResponse({
+                response: {
+                    id: action.graph.id,
+                    errors: [{ code, params }],
+                    status: []
+                }
+            }));
+        })))));
+        this.listTransfo$ = createEffect(() => this.actions$.pipe(ofType(PipelineActions.fetchTransfosList), mergeMap$1((action) => this.pipelineService.list().pipe(map$1((transfos) => PipelineActions.fetchTransfosListSuccess({ transfos })), catchError((error) => [PipelineActions.fetchTransfosListFailure({ error: error })])))));
+        this.toggleTransfoActivation$ = createEffect(() => this.actions$.pipe(ofType(PipelineActions.toggleActivation), mergeMap$1((action) => {
+            if (action.transfo.active) {
+                return this.pipelineService.deactivate(action.transfo.id).pipe(map$1(() => PipelineActions.fetchTransfosList()), catchError((error) => {
+                    this.snackBar.open({
+                        message: this.translate.instant('@pry.pipeline.deactivateError'),
+                        type: 'error'
+                    });
+                    return [PipelineActions.activationError({ id: action.transfo.id, error: error })];
+                }));
+            }
+            return this.pipelineService.activate(action.transfo.id).pipe(map$1(() => PipelineActions.fetchTransfosList()), catchError((error) => {
+                this.snackBar.open({
+                    message: this.translate.instant('@pry.pipeline.activateError'),
+                    type: 'error'
+                });
+                return [PipelineActions.activationError({ id: action.transfo.id, error: error })];
+            }));
+        })));
+        this.executeTransfo$ = createEffect(() => this.actions$.pipe(ofType(PipelineActions.executeTransfo), mergeMap$1((action) => this.pipelineService.execute(action.id).pipe(map$1(() => PipelineActions.fetchTransfosList())))));
+        this.getTransformation$ = createEffect(() => this.actions$.pipe(ofType(PipelineActions.getTransformation), mergeMap$1((action) => this.pipelineService
+            .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.ɵ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 }]; } });
+
+const components = [
+    PryPipelineEditorComponent,
+    PryPipelineCssComponent,
+    PryPipelineListComponent,
+    PryPipelineDetailsComponent
+];
+class PryPipelineModule {
+    constructor(pryTranslateService) {
+        this.pryTranslateService = pryTranslateService;
+        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.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineModule, declarations: [PryPipelineEditorComponent,
+            PryPipelineCssComponent,
+            PryPipelineListComponent,
+            PryPipelineDetailsComponent], imports: [CommonModule,
+            PryCoreModule, i1.StoreFeatureModule, i1$2.EffectsFeatureModule, PryIconModule,
+            PryI18nModule,
+            PrySortModule,
+            FormsModule,
+            PryToggleModule,
+            PrySinceDateModule,
+            ReactiveFormsModule,
+            OverlayModule], exports: [PryPipelineEditorComponent,
+            PryPipelineCssComponent,
+            PryPipelineListComponent,
+            PryPipelineDetailsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineModule, imports: [CommonModule,
+            PryCoreModule,
+            StoreModule.forFeature(pipelineFeatureKey, pipelineReducer),
+            EffectsModule.forFeature([PipelineEffects]),
+            PryIconModule,
+            PryI18nModule,
+            PrySortModule,
+            FormsModule,
+            PryToggleModule,
+            PrySinceDateModule,
+            ReactiveFormsModule,
+            OverlayModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryPipelineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        PryCoreModule,
+                        StoreModule.forFeature(pipelineFeatureKey, pipelineReducer),
+                        EffectsModule.forFeature([PipelineEffects]),
+                        PryIconModule,
+                        PryI18nModule,
+                        PrySortModule,
+                        FormsModule,
+                        PryToggleModule,
+                        PrySinceDateModule,
+                        ReactiveFormsModule,
+                        OverlayModule
+                    ],
+                    declarations: [...components],
+                    exports: [...components]
+                }]
+        }], ctorParameters: function () { return [{ type: i4.PryI18nService }]; } });
+
+class PipelinePropertiesPanelComponent {
+    constructor() {
+        this.disabled = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PipelinePropertiesPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PipelinePropertiesPanelComponent, selector: "pry-properties-panel", inputs: { node: "node", checkFn: "checkFn", model: "model", disabled: "disabled" }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PipelinePropertiesPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-properties-panel', template: '' }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], checkFn: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseNode, GraphSerializerUtils, MIME_TYPE_PIPELINE_COMPONENT, MIME_TYPE_PIPELINE_PROPERTIES, PIPELINE_COMPONENT_MODULES, PipelineActions, PipelineComponentFactoryService, PipelineEffects, PipelinePropertiesPanelComponent, PipelineSelectors, PipelineService, PryPipelineCssComponent, PryPipelineDetailsComponent, PryPipelineEditorComponent, PryPipelineListComponent, PryPipelineModule, enTranslations, frTranslations, initialPipelineState, pipelineFeatureKey, pipelineReducer };
+//# sourceMappingURL=provoly-dashboard-pipeline.mjs.map