@valtimo/plugin-management 5.3.0 → 5.7.0

package/fesm2020/valtimo-plugin-management.mjs

@@ -1,23 +1,22 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
-import { of, combineLatest, Subject, BehaviorSubject } from 'rxjs';
-import { delay, map, take, tap } from 'rxjs/operators';
-import * as i1 from '@valtimo/config';
-import { ROLE_ADMIN } from '@valtimo/config';
-import * as i2 from '@valtimo/plugin';
+import { Subject, BehaviorSubject, combineLatest, of } from 'rxjs';
+import { map, take, switchMap, tap } from 'rxjs/operators';
+import * as i1 from '@valtimo/plugin';
 import { PluginTranslatePipeModule, PluginConfigurationContainerModule } from '@valtimo/plugin';
-import * as i3 from '@angular/platform-browser';
-import * as i4 from '@angular/common/http';
+import * as i2 from '@angular/platform-browser';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i4$1 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { AuthGuardService } from '@valtimo/security';
-import * as i2$1 from '@ngx-translate/core';
+import { ROLE_ADMIN } from '@valtimo/config';
+import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i2$2 from '@valtimo/user-interface';
+import * as i2$1 from '@valtimo/user-interface';
 import { PageModule, ParagraphModule, TitleModule, TableModule, StepperModule, ModalModule, ButtonModule, CardModule } from '@valtimo/user-interface';
-import * as i5 from '@angular/flex-layout/flex';
+import * as i4 from 'ngx-logger';
+import * as i6 from '@angular/flex-layout/flex';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 /*
@@ -29,31 +28,11 @@ import { FlexLayoutModule } from '@angular/flex-layout';
  *
  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
  *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions and limitations under the License.
- */
-
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions and limitations under the License.
- */
-
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions and limitations under the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
 /*
@@ -71,89 +50,6 @@ import { FlexLayoutModule } from '@angular/flex-layout';
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class PluginManagementService {
-    constructor(configService, pluginService, sanitizer, http) {
-        this.configService = configService;
-        this.pluginService = pluginService;
-        this.sanitizer = sanitizer;
-        this.http = http;
-        this.VALTIMO_API_ENDPOINT_URI = this.configService.config.valtimoApi.endpointUri;
-        this.CONFIGURATIONS = [
-            {
-                definitionKey: 'openzaak',
-                key: '1ebdad87-3899-4ab7-b4ad-403237b17dbd',
-                title: 'Den Haag Open Zaak 1',
-            },
-            {
-                definitionKey: 'openzaak',
-                key: '1ebdad87-3899-4ab7-b4ad-403237b17dbe',
-                title: 'Den Haag Open Zaak 2',
-            },
-            {
-                definitionKey: 'smartdocuments',
-                key: '1ebdad87-3899-4ab7-b4ad-403237b17dbx',
-                title: 'Den Haag SmartDocuments 1',
-            },
-            {
-                definitionKey: 'smartdocuments',
-                key: '1ebdad87-3899-4ab7-b4ad-403237b17dby',
-                title: 'Den Haag SmartDocuments 2',
-            },
-        ];
-    }
-    getPluginDefinitions() {
-        return this.http.get(`${this.VALTIMO_API_ENDPOINT_URI}plugin/definition`);
-    }
-    getPluginConfigurations(pluginDefinitionId) {
-        return of(this.CONFIGURATIONS).pipe(delay(1500));
-    }
-    getPluginConfigurationsWithLogos(pluginDefinitionId) {
-        return this.returnPluginConfigurationsWithLogos(this.getPluginConfigurations(pluginDefinitionId));
-    }
-    getPluginFunctions(pluginDefinitionId) {
-        return of(pluginDefinitionId === 'openzaak'
-            ? [
-                {
-                    key: 'create-zaak',
-                },
-                {
-                    key: 'set-status',
-                },
-                {
-                    key: 'set-resultaat',
-                },
-                {
-                    key: 'set-besluit',
-                },
-            ]
-            : [{ key: 'generate-document' }]).pipe(delay(1500));
-    }
-    getAllPluginConfigurations() {
-        return of(this.CONFIGURATIONS).pipe(delay(1500));
-    }
-    getAllPluginConfigurationsWithLogos() {
-        return this.returnPluginConfigurationsWithLogos(this.getAllPluginConfigurations());
-    }
-    returnPluginConfigurationsWithLogos(pluginConfigurations$) {
-        return combineLatest([pluginConfigurations$, this.pluginService.pluginSpecifications$]).pipe(map(([pluginConfigurations, pluginSpecifications]) => pluginConfigurations?.map(pluginConfiguration => {
-            const pluginSpecification = pluginSpecifications.find(specification => specification.pluginId === pluginConfiguration.definitionKey);
-            return {
-                ...pluginConfiguration,
-                ...(pluginSpecification?.pluginLogoBase64 && {
-                    pluginLogoBase64: this.sanitizer.bypassSecurityTrustResourceUrl(pluginSpecification?.pluginLogoBase64),
-                }),
-            };
-        })));
-    }
-}
-PluginManagementService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementService, deps: [{ token: i1.ConfigService }, { token: i2.PluginService }, { token: i3.DomSanitizer }, { token: i4.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-PluginManagementService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1.ConfigService }, { type: i2.PluginService }, { type: i3.DomSanitizer }, { type: i4.HttpClient }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -164,7 +60,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  *
  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
  *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions and limitations under the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 class PluginManagementStateService {
     constructor(pluginService, sanitizer) {
@@ -173,9 +73,9 @@ class PluginManagementStateService {
         this._showModal$ = new Subject();
         this._hideModal$ = new Subject();
         this._inputDisabled$ = new BehaviorSubject(false);
-        this._saveButtonDisabled$ = new BehaviorSubject(true);
         this._refresh$ = new BehaviorSubject(null);
         this._save$ = new Subject();
+        this._saveEdit$ = new Subject();
         this._delete$ = new Subject();
         this._hideModalSaveButton$ = new BehaviorSubject(false);
         this._pluginDefinitions$ = new BehaviorSubject(undefined);
@@ -195,6 +95,7 @@ class PluginManagementStateService {
             };
         })));
         this._selectedPluginDefinition$ = new BehaviorSubject(undefined);
+        this._selectedPluginConfiguration$ = new BehaviorSubject(undefined);
     }
     get showModal$() {
         return this._showModal$.asObservable();
@@ -217,12 +118,15 @@ class PluginManagementStateService {
     get selectedPluginDefinition$() {
         return this._selectedPluginDefinition$.asObservable();
     }
-    get saveButtonDisabled$() {
-        return this._saveButtonDisabled$.asObservable();
+    get selectedPluginConfiguration$() {
+        return this._selectedPluginConfiguration$.asObservable();
     }
     get save$() {
         return this._save$.asObservable();
     }
+    get saveEdit$() {
+        return this._saveEdit$.asObservable();
+    }
     get delete$() {
         return this._delete$.asObservable();
     }
@@ -250,21 +154,20 @@ class PluginManagementStateService {
     selectPluginDefinition(definition) {
         this._selectedPluginDefinition$.next(definition);
     }
+    selectPluginConfiguration(configuration) {
+        this._selectedPluginConfiguration$.next(configuration);
+    }
     clearSelectedPluginDefinition() {
         this._selectedPluginDefinition$.next(undefined);
     }
-    enableSaveButton() {
-        this._saveButtonDisabled$.next(false);
-    }
-    disableSaveButton() {
-        this._saveButtonDisabled$.next(true);
+    clearSelectedPluginConfiguration() {
+        this._selectedPluginConfiguration$.next(undefined);
     }
     save() {
-        this._saveButtonDisabled$.pipe(take(1)).subscribe(saveButtonDisabled => {
-            if (!saveButtonDisabled) {
-                this._save$.next(null);
-            }
-        });
+        this._save$.next(null);
+    }
+    saveEdit() {
+        this._saveEdit$.next(null);
     }
     delete() {
         this._delete$.next(null);
@@ -276,17 +179,18 @@ class PluginManagementStateService {
         this._hideModalSaveButton$.next(false);
     }
     clear() {
-        this._selectedPluginDefinition$.next(undefined);
+        this.clearSelectedPluginDefinition();
+        this.clearSelectedPluginConfiguration();
     }
 }
-PluginManagementStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementStateService, deps: [{ token: i2.PluginService }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable });
-PluginManagementStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementStateService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementStateService, decorators: [{
+PluginManagementStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementStateService, deps: [{ token: i1.PluginService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable });
+PluginManagementStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementStateService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementStateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i2.PluginService }, { type: i3.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1.PluginService }, { type: i2.DomSanitizer }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -297,7 +201,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  *
  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
  *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions and limitations under the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
 /*
@@ -351,12 +259,12 @@ class PluginAddSelectComponent {
         });
     }
 }
-PluginAddSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginAddSelectComponent, deps: [{ token: PluginManagementService }, { token: PluginManagementStateService }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-PluginAddSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PluginAddSelectComponent, selector: "valtimo-plugin-add-select", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"pluginDefinitionsWithLogos$ | async as pluginDefinitions; else loading\">\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"22px grid\">\n    <ng-container\n      *ngTemplateOutlet=\"pluginDefinitionsTemplate; context: {pluginDefinitions: pluginDefinitions}\"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        noPluginDefinitionsTemplate;\n        context: {pluginDefinitions: pluginDefinitions}\n      \"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #noPluginDefinitionsTemplate let-pluginDefinitions=\"pluginDefinitions\">\n  <div fxFlex=\"100%\" *ngIf=\"pluginDefinitions?.length === 0\">\n    <v-paragraph [center]=\"true\" [fullWidth]=\"true\">{{\n      'pluginManagement.noDefinitions' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #pluginDefinitionsTemplate let-pluginDefinitions=\"pluginDefinitions\">\n  <div fxFlex=\"33.3%\" *ngFor=\"let pluginDefinition of pluginDefinitions\">\n    <v-card\n      [title]=\"'title' | pluginTranslate: pluginDefinition.key | async\"\n      [description]=\"'description' | pluginTranslate: pluginDefinition.key | async\"\n      [selectable]=\"true\"\n      [selected]=\"(selectedPluginDefinition$ | async)?.key === pluginDefinition.key\"\n      [fullHeight]=\"true\"\n      (selectEvent)=\"selectPluginDefinition(pluginDefinition)\"\n      (deselectEvent)=\"deselectPluginDefinition()\"\n    >\n      <div *ngIf=\"pluginDefinition.pluginLogoBase64\" role=\"header\">\n        <img\n          class=\"plugin-definition-logo\"\n          [title]=\"'title' | pluginTranslate: pluginDefinition.key | async\"\n          [src]=\"pluginDefinition.pluginLogoBase64\"\n        />\n      </div>\n    </v-card>\n  </div>\n</ng-template>\n\n<ng-template #loading>\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"22px grid\">\n    <ng-container *ngTemplateOutlet=\"loadingCard\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingCard\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingCard\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingCard>\n  <div fxFlex=\"33.3%\">\n    <v-card [loading]=\"true\" [loadingDescription]=\"true\" [loadingTitle]=\"true\"></v-card>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.btn-back{position:absolute}.cards-container{display:flex;flex-flow:row wrap;width:100%}.card{width:calc(33.3% - 20px);margin-right:30px}.card:nth-child(3n+3){margin-right:0}.card-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plugin-definition-logo{object-fit:contain;height:60px;width:100%}\n"], components: [{ type: i2$2.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth"] }, { type: i2$2.CardComponent, selector: "v-card", inputs: ["titleTranslationKey", "title", "descriptionTranslationKey", "description", "selectable", "selected", "fullHeight", "loading", "loadingTitle", "loadingDescription"], outputs: ["selectEvent", "deselectEvent"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i2$1.TranslatePipe, "pluginTranslate": i2.PluginTranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginAddSelectComponent, decorators: [{
+PluginAddSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginAddSelectComponent, deps: [{ token: i1.PluginManagementService }, { token: PluginManagementStateService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+PluginAddSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PluginAddSelectComponent, selector: "valtimo-plugin-add-select", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"pluginDefinitionsWithLogos$ | async as pluginDefinitions; else loading\">\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"22px grid\">\n    <ng-container\n      *ngTemplateOutlet=\"pluginDefinitionsTemplate; context: {pluginDefinitions: pluginDefinitions}\"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        noPluginDefinitionsTemplate;\n        context: {pluginDefinitions: pluginDefinitions}\n      \"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #noPluginDefinitionsTemplate let-pluginDefinitions=\"pluginDefinitions\">\n  <div fxFlex=\"100%\" *ngIf=\"pluginDefinitions?.length === 0\">\n    <v-paragraph [center]=\"true\" [fullWidth]=\"true\">{{\n      'pluginManagement.noDefinitions' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #pluginDefinitionsTemplate let-pluginDefinitions=\"pluginDefinitions\">\n  <div fxFlex=\"33.3%\" *ngFor=\"let pluginDefinition of pluginDefinitions\">\n    <v-card\n      [title]=\"'title' | pluginTranslate: pluginDefinition.key | async\"\n      [description]=\"'description' | pluginTranslate: pluginDefinition.key | async\"\n      [selectable]=\"true\"\n      [selected]=\"(selectedPluginDefinition$ | async)?.key === pluginDefinition.key\"\n      [fullHeight]=\"true\"\n      (selectEvent)=\"selectPluginDefinition(pluginDefinition)\"\n      (deselectEvent)=\"deselectPluginDefinition()\"\n    >\n      <div *ngIf=\"pluginDefinition.pluginLogoBase64\" role=\"header\">\n        <img\n          class=\"plugin-definition-logo\"\n          [title]=\"'title' | pluginTranslate: pluginDefinition.key | async\"\n          [src]=\"pluginDefinition.pluginLogoBase64\"\n        />\n      </div>\n    </v-card>\n  </div>\n</ng-template>\n\n<ng-template #loading>\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"22px grid\">\n    <ng-container *ngTemplateOutlet=\"loadingCard\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingCard\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingCard\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingCard>\n  <div fxFlex=\"33.3%\">\n    <v-card [loading]=\"true\" [loadingDescription]=\"true\" [loadingTitle]=\"true\"></v-card>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.btn-back{position:absolute}.cards-container{display:flex;flex-flow:row wrap;width:100%}.card{width:calc(33.3% - 20px);margin-right:30px}.card:nth-child(3n+3){margin-right:0}.card-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plugin-definition-logo{object-fit:contain;height:60px;width:100%}\n"], components: [{ type: i2$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { type: i2$1.CardComponent, selector: "v-card", inputs: ["titleTranslationKey", "title", "descriptionTranslationKey", "description", "selectable", "selected", "fullHeight", "loading", "loadingTitle", "loadingDescription"], outputs: ["selectEvent", "deselectEvent"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i5.AsyncPipe, "translate": i3.TranslatePipe, "pluginTranslate": i1.PluginTranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginAddSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-plugin-add-select', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"pluginDefinitionsWithLogos$ | async as pluginDefinitions; else loading\">\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"22px grid\">\n    <ng-container\n      *ngTemplateOutlet=\"pluginDefinitionsTemplate; context: {pluginDefinitions: pluginDefinitions}\"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        noPluginDefinitionsTemplate;\n        context: {pluginDefinitions: pluginDefinitions}\n      \"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #noPluginDefinitionsTemplate let-pluginDefinitions=\"pluginDefinitions\">\n  <div fxFlex=\"100%\" *ngIf=\"pluginDefinitions?.length === 0\">\n    <v-paragraph [center]=\"true\" [fullWidth]=\"true\">{{\n      'pluginManagement.noDefinitions' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #pluginDefinitionsTemplate let-pluginDefinitions=\"pluginDefinitions\">\n  <div fxFlex=\"33.3%\" *ngFor=\"let pluginDefinition of pluginDefinitions\">\n    <v-card\n      [title]=\"'title' | pluginTranslate: pluginDefinition.key | async\"\n      [description]=\"'description' | pluginTranslate: pluginDefinition.key | async\"\n      [selectable]=\"true\"\n      [selected]=\"(selectedPluginDefinition$ | async)?.key === pluginDefinition.key\"\n      [fullHeight]=\"true\"\n      (selectEvent)=\"selectPluginDefinition(pluginDefinition)\"\n      (deselectEvent)=\"deselectPluginDefinition()\"\n    >\n      <div *ngIf=\"pluginDefinition.pluginLogoBase64\" role=\"header\">\n        <img\n          class=\"plugin-definition-logo\"\n          [title]=\"'title' | pluginTranslate: pluginDefinition.key | async\"\n          [src]=\"pluginDefinition.pluginLogoBase64\"\n        />\n      </div>\n    </v-card>\n  </div>\n</ng-template>\n\n<ng-template #loading>\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"22px grid\">\n    <ng-container *ngTemplateOutlet=\"loadingCard\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingCard\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingCard\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingCard>\n  <div fxFlex=\"33.3%\">\n    <v-card [loading]=\"true\" [loadingDescription]=\"true\" [loadingTitle]=\"true\"></v-card>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.btn-back{position:absolute}.cards-container{display:flex;flex-flow:row wrap;width:100%}.card{width:calc(33.3% - 20px);margin-right:30px}.card:nth-child(3n+3){margin-right:0}.card-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plugin-definition-logo{object-fit:contain;height:60px;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: PluginManagementService }, { type: PluginManagementStateService }, { type: i2$1.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.PluginManagementService }, { type: PluginManagementStateService }, { type: i3.TranslateService }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -377,19 +285,28 @@ class PluginConfigureComponent {
     constructor(stateService) {
         this.stateService = stateService;
         this.valid = new EventEmitter();
+        this.configuration = new EventEmitter();
+        this.save$ = this.stateService.save$;
         this.pluginDefinitionKey$ = this.stateService.selectedPluginDefinition$.pipe(map(definition => definition?.key));
+        this.prefillConfiguration$ = of(undefined);
+        this.disabled$ = this.stateService.inputDisabled$;
     }
     onValid(valid) {
         this.valid.emit(valid);
     }
+    onFunctionConfiguration(configuration) {
+        this.configuration.emit(configuration);
+    }
 }
-PluginConfigureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginConfigureComponent, deps: [{ token: PluginManagementStateService }], target: i0.ɵɵFactoryTarget.Component });
-PluginConfigureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PluginConfigureComponent, selector: "valtimo-plugin-configure", outputs: { valid: "valid" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-plugin-configuration-container\n  [pluginDefinitionKey]=\"pluginDefinitionKey$ | async\"\n  (valid)=\"onValid($event)\"\n  type=\"configuration\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], components: [{ type: i2.PluginConfigurationContainerComponent, selector: "valtimo-plugin-configuration-container", inputs: ["type", "pluginDefinitionKey", "functionKey", "clear$", "save$", "disabled", "error"], outputs: ["valid", "configuration"] }], pipes: { "async": i4$1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginConfigureComponent, decorators: [{
+PluginConfigureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginConfigureComponent, deps: [{ token: PluginManagementStateService }], target: i0.ɵɵFactoryTarget.Component });
+PluginConfigureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PluginConfigureComponent, selector: "valtimo-plugin-configure", outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-plugin-configuration-container\n  *ngIf=\"pluginDefinitionKey$ | async as pluginDefinitionKey\"\n  [pluginDefinitionKey]=\"pluginDefinitionKey\"\n  [prefillConfiguration$]=\"prefillConfiguration$\"\n  [save$]=\"save$\"\n  [disabled$]=\"disabled$\"\n  (valid)=\"onValid($event)\"\n  (configuration)=\"onFunctionConfiguration($event)\"\n  type=\"configuration\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], components: [{ type: i1.PluginConfigurationContainerComponent, selector: "valtimo-plugin-configuration-container", inputs: ["type", "pluginDefinitionKey", "functionKey", "save$", "disabled$", "prefillConfiguration$"], outputs: ["valid", "configuration"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginConfigureComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-plugin-configure', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-plugin-configuration-container\n  [pluginDefinitionKey]=\"pluginDefinitionKey$ | async\"\n  (valid)=\"onValid($event)\"\n  type=\"configuration\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ selector: 'valtimo-plugin-configure', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-plugin-configuration-container\n  *ngIf=\"pluginDefinitionKey$ | async as pluginDefinitionKey\"\n  [pluginDefinitionKey]=\"pluginDefinitionKey\"\n  [prefillConfiguration$]=\"prefillConfiguration$\"\n  [save$]=\"save$\"\n  [disabled$]=\"disabled$\"\n  (valid)=\"onValid($event)\"\n  (configuration)=\"onFunctionConfiguration($event)\"\n  type=\"configuration\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: function () { return [{ type: PluginManagementStateService }]; }, propDecorators: { valid: [{
                 type: Output
+            }], configuration: [{
+                type: Output
             }] } });
 
 /*
@@ -408,9 +325,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  * limitations under the License.
  */
 class PluginAddModalComponent {
-    constructor(stateService, modalService) {
+    constructor(stateService, modalService, pluginManagementService, logger) {
         this.stateService = stateService;
         this.modalService = modalService;
+        this.pluginManagementService = pluginManagementService;
+        this.logger = logger;
         this.inputDisabled$ = this.stateService.inputDisabled$;
         this.selectedPluginDefinition$ = this.stateService.selectedPluginDefinition$;
         this.configurationValid$ = new BehaviorSubject(false);
@@ -422,25 +341,41 @@ class PluginAddModalComponent {
     }
     complete() {
         this.stateService.save();
-        this.hide();
     }
     delete() {
         this.stateService.delete();
     }
     hide() {
         this.stateService.disableInput();
-        this.modalService.closeModal();
-        this.modalService.appearingDelayMs$.pipe(take(1)).subscribe(appearingDelay => {
-            setTimeout(() => {
-                this.returnToFirstStep();
-                this.stateService.enableInput();
-                this.stateService.clear();
-            }, appearingDelay);
+        this.modalService.closeModal(() => {
+            this.returnToFirstStep();
+            this.stateService.enableInput();
+            this.stateService.clear();
         });
     }
     onValid(valid) {
         this.configurationValid$.next(valid);
     }
+    onConfiguration(configuration) {
+        const pluginConfiguration = { ...configuration };
+        delete pluginConfiguration['configurationTitle'];
+        this.stateService.disableInput();
+        this.stateService.selectedPluginDefinition$.pipe(take(1)).subscribe(selectedDefinition => {
+            this.pluginManagementService
+                .savePluginConfiguration({
+                definitionKey: selectedDefinition.key,
+                title: configuration.configurationTitle,
+                properties: pluginConfiguration,
+            })
+                .subscribe(response => {
+                this.stateService.refresh();
+                this.hide();
+            }, () => {
+                this.logger.error('Something went wrong with saving the plugin configuration.');
+                this.hide();
+            });
+        });
+    }
     openShowSubscription() {
         this.showSubscription = this.stateService.showModal$.subscribe(modalType => {
             if (modalType === 'add') {
@@ -460,16 +395,163 @@ class PluginAddModalComponent {
         this.modalService.openModal(this.pluginAddModal);
     }
 }
-PluginAddModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginAddModalComponent, deps: [{ token: PluginManagementStateService }, { token: i2$2.ModalService }], target: i0.ɵɵFactoryTarget.Component });
-PluginAddModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PluginAddModalComponent, selector: "valtimo-plugin-add-modal", viewQueries: [{ propertyName: "pluginAddModal", first: true, predicate: ["pluginAddModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-stepper-container\n  (completeEvent)=\"complete()\"\n  (cancelClickEvent)=\"hide()\"\n  [disabled]=\"inputDisabled$ | async\"\n  [returnToFirstStepSubject$]=\"returnToFirstStepSubject$\"\n>\n  <v-modal #pluginAddModal (closeEvent)=\"hide()\">\n    <div role=\"header\">\n      <v-stepper-header></v-stepper-header>\n    </div>\n    <div role=\"content\">\n      <v-stepper-content>\n        <v-stepper-step titleTranslationKey=\"pluginManagement.addSteps.step0\">\n          <valtimo-plugin-add-select></valtimo-plugin-add-select>\n        </v-stepper-step>\n        <v-stepper-step titleTranslationKey=\"pluginManagement.addSteps.step1\">\n          <valtimo-plugin-configure (valid)=\"onValid($event)\"></valtimo-plugin-configure>\n        </v-stepper-step>\n      </v-stepper-content>\n    </div>\n    <div role=\"footer\">\n      <v-stepper-footer>\n        <v-stepper-footer-step\n          nextButtonTranslationKey=\"pluginManagement.addSteps.step1\"\n          [nextButtonEnabled]=\"selectedPluginDefinition$ | async\"\n        ></v-stepper-footer-step>\n        <v-stepper-footer-step\n          completeButtonTranslationKey=\"pluginManagement.addSteps.complete\"\n          [completeButtonEnabled]=\"configurationValid$ | async\"\n        ></v-stepper-footer-step>\n      </v-stepper-footer>\n    </div>\n  </v-modal>\n</v-stepper-container>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], components: [{ type: i2$2.StepperContainerComponent, selector: "v-stepper-container", inputs: ["returnToFirstStepSubject$", "disabled"], outputs: ["cancelClickEvent", "completeEvent", "nextStepEvent"] }, { type: i2$2.ModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx"], outputs: ["closeEvent"] }, { type: i2$2.StepperHeaderComponent, selector: "v-stepper-header" }, { type: i2$2.StepperContentComponent, selector: "v-stepper-content" }, { type: i2$2.StepperStepComponent, selector: "v-stepper-step", inputs: ["titleTranslationKey"] }, { type: PluginAddSelectComponent, selector: "valtimo-plugin-add-select" }, { type: PluginConfigureComponent, selector: "valtimo-plugin-configure", outputs: ["valid"] }, { type: i2$2.StepperFooterComponent, selector: "v-stepper-footer" }, { type: i2$2.StepperFooterStepComponent, selector: "v-stepper-footer-step", inputs: ["nextButtonEnabled", "completeButtonEnabled", "nextButtonTranslationKey", "cancelButtonTranslationKey", "completeButtonTranslationKey", "completeButtonMdiIcon", "showCompleteButton"] }], pipes: { "async": i4$1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginAddModalComponent, decorators: [{
+PluginAddModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginAddModalComponent, deps: [{ token: PluginManagementStateService }, { token: i2$1.ModalService }, { token: i1.PluginManagementService }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
+PluginAddModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PluginAddModalComponent, selector: "valtimo-plugin-add-modal", viewQueries: [{ propertyName: "pluginAddModal", first: true, predicate: ["pluginAddModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-stepper-container\n  (completeEvent)=\"complete()\"\n  (cancelClickEvent)=\"hide()\"\n  [disabled]=\"inputDisabled$ | async\"\n  [returnToFirstStepSubject$]=\"returnToFirstStepSubject$\"\n>\n  <v-modal #pluginAddModal (closeEvent)=\"hide()\">\n    <div role=\"header\">\n      <v-stepper-header></v-stepper-header>\n    </div>\n    <div role=\"content\">\n      <v-stepper-content>\n        <v-stepper-step titleTranslationKey=\"pluginManagement.addSteps.step0\">\n          <valtimo-plugin-add-select></valtimo-plugin-add-select>\n        </v-stepper-step>\n        <v-stepper-step titleTranslationKey=\"pluginManagement.addSteps.step1\">\n          <valtimo-plugin-configure\n            (valid)=\"onValid($event)\"\n            (configuration)=\"onConfiguration($event)\"\n          ></valtimo-plugin-configure>\n        </v-stepper-step>\n      </v-stepper-content>\n    </div>\n    <div role=\"footer\">\n      <v-stepper-footer>\n        <v-stepper-footer-step\n          nextButtonTranslationKey=\"pluginManagement.addSteps.step1\"\n          [nextButtonEnabled]=\"selectedPluginDefinition$ | async\"\n        ></v-stepper-footer-step>\n        <v-stepper-footer-step\n          completeButtonTranslationKey=\"pluginManagement.addSteps.complete\"\n          [completeButtonEnabled]=\"configurationValid$ | async\"\n        ></v-stepper-footer-step>\n      </v-stepper-footer>\n    </div>\n  </v-modal>\n</v-stepper-container>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], components: [{ type: i2$1.StepperContainerComponent, selector: "v-stepper-container", inputs: ["returnToFirstStepSubject$", "disabled"], outputs: ["cancelClickEvent", "completeEvent", "nextStepEvent"] }, { type: i2$1.ModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx"], outputs: ["closeEvent"] }, { type: i2$1.StepperHeaderComponent, selector: "v-stepper-header" }, { type: i2$1.StepperContentComponent, selector: "v-stepper-content" }, { type: i2$1.StepperStepComponent, selector: "v-stepper-step", inputs: ["titleTranslationKey"] }, { type: PluginAddSelectComponent, selector: "valtimo-plugin-add-select" }, { type: PluginConfigureComponent, selector: "valtimo-plugin-configure", outputs: ["valid", "configuration"] }, { type: i2$1.StepperFooterComponent, selector: "v-stepper-footer" }, { type: i2$1.StepperFooterStepComponent, selector: "v-stepper-footer-step", inputs: ["nextButtonEnabled", "completeButtonEnabled", "nextButtonTranslationKey", "cancelButtonTranslationKey", "completeButtonTranslationKey", "completeButtonMdiIcon", "showCompleteButton"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginAddModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-plugin-add-modal', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-stepper-container\n  (completeEvent)=\"complete()\"\n  (cancelClickEvent)=\"hide()\"\n  [disabled]=\"inputDisabled$ | async\"\n  [returnToFirstStepSubject$]=\"returnToFirstStepSubject$\"\n>\n  <v-modal #pluginAddModal (closeEvent)=\"hide()\">\n    <div role=\"header\">\n      <v-stepper-header></v-stepper-header>\n    </div>\n    <div role=\"content\">\n      <v-stepper-content>\n        <v-stepper-step titleTranslationKey=\"pluginManagement.addSteps.step0\">\n          <valtimo-plugin-add-select></valtimo-plugin-add-select>\n        </v-stepper-step>\n        <v-stepper-step titleTranslationKey=\"pluginManagement.addSteps.step1\">\n          <valtimo-plugin-configure (valid)=\"onValid($event)\"></valtimo-plugin-configure>\n        </v-stepper-step>\n      </v-stepper-content>\n    </div>\n    <div role=\"footer\">\n      <v-stepper-footer>\n        <v-stepper-footer-step\n          nextButtonTranslationKey=\"pluginManagement.addSteps.step1\"\n          [nextButtonEnabled]=\"selectedPluginDefinition$ | async\"\n        ></v-stepper-footer-step>\n        <v-stepper-footer-step\n          completeButtonTranslationKey=\"pluginManagement.addSteps.complete\"\n          [completeButtonEnabled]=\"configurationValid$ | async\"\n        ></v-stepper-footer-step>\n      </v-stepper-footer>\n    </div>\n  </v-modal>\n</v-stepper-container>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: function () { return [{ type: PluginManagementStateService }, { type: i2$2.ModalService }]; }, propDecorators: { pluginAddModal: [{
+            args: [{ selector: 'valtimo-plugin-add-modal', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-stepper-container\n  (completeEvent)=\"complete()\"\n  (cancelClickEvent)=\"hide()\"\n  [disabled]=\"inputDisabled$ | async\"\n  [returnToFirstStepSubject$]=\"returnToFirstStepSubject$\"\n>\n  <v-modal #pluginAddModal (closeEvent)=\"hide()\">\n    <div role=\"header\">\n      <v-stepper-header></v-stepper-header>\n    </div>\n    <div role=\"content\">\n      <v-stepper-content>\n        <v-stepper-step titleTranslationKey=\"pluginManagement.addSteps.step0\">\n          <valtimo-plugin-add-select></valtimo-plugin-add-select>\n        </v-stepper-step>\n        <v-stepper-step titleTranslationKey=\"pluginManagement.addSteps.step1\">\n          <valtimo-plugin-configure\n            (valid)=\"onValid($event)\"\n            (configuration)=\"onConfiguration($event)\"\n          ></valtimo-plugin-configure>\n        </v-stepper-step>\n      </v-stepper-content>\n    </div>\n    <div role=\"footer\">\n      <v-stepper-footer>\n        <v-stepper-footer-step\n          nextButtonTranslationKey=\"pluginManagement.addSteps.step1\"\n          [nextButtonEnabled]=\"selectedPluginDefinition$ | async\"\n        ></v-stepper-footer-step>\n        <v-stepper-footer-step\n          completeButtonTranslationKey=\"pluginManagement.addSteps.complete\"\n          [completeButtonEnabled]=\"configurationValid$ | async\"\n        ></v-stepper-footer-step>\n      </v-stepper-footer>\n    </div>\n  </v-modal>\n</v-stepper-container>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: function () { return [{ type: PluginManagementStateService }, { type: i2$1.ModalService }, { type: i1.PluginManagementService }, { type: i4.NGXLogger }]; }, propDecorators: { pluginAddModal: [{
                 type: ViewChild,
                 args: ['pluginAddModal']
             }] } });
 
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class PluginEditComponent {
+    constructor(stateService) {
+        this.stateService = stateService;
+        this.valid = new EventEmitter();
+        this.configuration = new EventEmitter();
+        this.saveEdit$ = this.stateService.saveEdit$;
+        this.pluginDefinitionKey$ = this.stateService.selectedPluginConfiguration$.pipe(map(configuration => configuration?.pluginDefinition?.key));
+        this.prefillConfiguration$ = this.stateService.selectedPluginConfiguration$.pipe(map(configuration => configuration
+            ? { ...configuration.properties, configurationTitle: configuration.title }
+            : undefined));
+        this.disabled$ = this.stateService.inputDisabled$;
+    }
+    onValid(valid) {
+        this.valid.emit(valid);
+    }
+    onFunctionConfiguration(configuration) {
+        this.configuration.emit(configuration);
+    }
+}
+PluginEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginEditComponent, deps: [{ token: PluginManagementStateService }], target: i0.ɵɵFactoryTarget.Component });
+PluginEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PluginEditComponent, selector: "valtimo-plugin-edit", outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-plugin-configuration-container\n  *ngIf=\"pluginDefinitionKey$ | async as pluginDefinitionKey\"\n  [pluginDefinitionKey]=\"pluginDefinitionKey\"\n  [prefillConfiguration$]=\"prefillConfiguration$\"\n  [save$]=\"saveEdit$\"\n  [disabled$]=\"disabled$\"\n  (valid)=\"onValid($event)\"\n  (configuration)=\"onFunctionConfiguration($event)\"\n  type=\"configuration\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], components: [{ type: i1.PluginConfigurationContainerComponent, selector: "valtimo-plugin-configuration-container", inputs: ["type", "pluginDefinitionKey", "functionKey", "save$", "disabled$", "prefillConfiguration$"], outputs: ["valid", "configuration"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-plugin-edit', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-plugin-configuration-container\n  *ngIf=\"pluginDefinitionKey$ | async as pluginDefinitionKey\"\n  [pluginDefinitionKey]=\"pluginDefinitionKey\"\n  [prefillConfiguration$]=\"prefillConfiguration$\"\n  [save$]=\"saveEdit$\"\n  [disabled$]=\"disabled$\"\n  (valid)=\"onValid($event)\"\n  (configuration)=\"onFunctionConfiguration($event)\"\n  type=\"configuration\"\n></valtimo-plugin-configuration-container>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: function () { return [{ type: PluginManagementStateService }]; }, propDecorators: { valid: [{
+                type: Output
+            }], configuration: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class PluginEditModalComponent {
+    constructor(stateService, modalService, pluginManagementService, logger) {
+        this.stateService = stateService;
+        this.modalService = modalService;
+        this.pluginManagementService = pluginManagementService;
+        this.logger = logger;
+        this.inputDisabled$ = this.stateService.inputDisabled$;
+        this.selectedPluginConfiguration$ = this.stateService.selectedPluginConfiguration$;
+        this.configurationValid$ = new BehaviorSubject(false);
+    }
+    ngOnInit() {
+        this.openShowSubscription();
+        this.openHideSubscription();
+    }
+    save() {
+        this.stateService.saveEdit();
+    }
+    delete() {
+        this.stateService.disableInput();
+        this.stateService.selectedPluginConfiguration$
+            .pipe(take(1))
+            .subscribe(selectedPluginConfiguration => {
+            this.pluginManagementService
+                .deletePluginConfiguration(selectedPluginConfiguration.id)
+                .subscribe(() => {
+                this.stateService.refresh();
+                this.hide();
+            }, () => {
+                this.logger.error('Something went wrong with deleting the plugin configuration.');
+                this.stateService.enableInput();
+            });
+        });
+    }
+    hide() {
+        this.modalService.closeModal(() => {
+            this.stateService.enableInput();
+            this.stateService.clear();
+        });
+    }
+    onPluginValid(valid) {
+        this.configurationValid$.next(valid);
+    }
+    onPluginConfiguration(configuration) {
+        this.stateService.disableInput();
+        this.stateService.selectedPluginConfiguration$
+            .pipe(take(1))
+            .subscribe(selectedPluginConfiguration => {
+            const configurationTitle = configuration.configurationTitle;
+            const configurationData = { ...configuration };
+            delete configurationData['configurationTitle'];
+            this.pluginManagementService
+                .updatePluginConfiguration(selectedPluginConfiguration.id, configurationTitle, configurationData)
+                .subscribe(() => {
+                this.stateService.refresh();
+                this.hide();
+            }, () => {
+                this.logger.error('Something went wrong with updating the plugin configuration.');
+                this.stateService.enableInput();
+            });
+        });
+    }
+    openShowSubscription() {
+        this.showSubscription = this.stateService.showModal$.subscribe(modalType => {
+            if (modalType === 'edit') {
+                this.show();
+            }
+        });
+    }
+    openHideSubscription() {
+        this.hideSubscription = this.stateService.hideModal$.subscribe(() => {
+            this.hide();
+        });
+    }
+    show() {
+        this.modalService.openModal(this.pluginEditModal);
+    }
+}
+PluginEditModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginEditModalComponent, deps: [{ token: PluginManagementStateService }, { token: i2$1.ModalService }, { token: i1.PluginManagementService }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
+PluginEditModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PluginEditModalComponent, selector: "valtimo-plugin-edit-modal", viewQueries: [{ propertyName: "pluginEditModal", first: true, predicate: ["pluginEditModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-modal\n  #pluginEditModal\n  (closeEvent)=\"hide()\"\n  *ngIf=\"{selectedConfiguration: selectedPluginConfiguration$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"edit-configuration-title\">\n      <v-title [margin]=\"false\" type=\"h2\">{{\n        obs.selectedConfiguration?.title +\n          ' - ' +\n          ('title' | pluginTranslate: obs.selectedConfiguration?.pluginDefinition?.key | async)\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <valtimo-plugin-edit\n      (valid)=\"onPluginValid($event)\"\n      (configuration)=\"onPluginConfiguration($event)\"\n    ></valtimo-plugin-edit>\n  </div>\n  <div role=\"footer\">\n    <div class=\"edit-plugin-buttons\">\n      <v-button\n        [disabled]=\"inputDisabled$ | async\"\n        (clickEvent)=\"delete()\"\n        [mdiIcon]=\"'delete'\"\n        type=\"danger\"\n        >{{ 'pluginManagement.remove' | translate }}</v-button\n      >\n      <v-button\n        [disabled]=\"(configurationValid$ | async) === false || (inputDisabled$ | async)\"\n        (clickEvent)=\"save()\"\n        [mdiIcon]=\"'check'\"\n        type=\"success\"\n        >{{ 'pluginManagement.save' | translate }}</v-button\n      >\n    </div>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.edit-plugin-buttons{display:flex;width:100%;justify-content:space-between}.edit-configuration-title{display:flex;width:100%;justify-content:center}\n"], components: [{ type: i2$1.ModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx"], outputs: ["closeEvent"] }, { type: i2$1.TitleComponent, selector: "v-title", inputs: ["type", "margin"] }, { type: PluginEditComponent, selector: "valtimo-plugin-edit", outputs: ["valid", "configuration"] }, { type: i2$1.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe, "pluginTranslate": i1.PluginTranslatePipe, "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginEditModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-plugin-edit-modal', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-modal\n  #pluginEditModal\n  (closeEvent)=\"hide()\"\n  *ngIf=\"{selectedConfiguration: selectedPluginConfiguration$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"edit-configuration-title\">\n      <v-title [margin]=\"false\" type=\"h2\">{{\n        obs.selectedConfiguration?.title +\n          ' - ' +\n          ('title' | pluginTranslate: obs.selectedConfiguration?.pluginDefinition?.key | async)\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <valtimo-plugin-edit\n      (valid)=\"onPluginValid($event)\"\n      (configuration)=\"onPluginConfiguration($event)\"\n    ></valtimo-plugin-edit>\n  </div>\n  <div role=\"footer\">\n    <div class=\"edit-plugin-buttons\">\n      <v-button\n        [disabled]=\"inputDisabled$ | async\"\n        (clickEvent)=\"delete()\"\n        [mdiIcon]=\"'delete'\"\n        type=\"danger\"\n        >{{ 'pluginManagement.remove' | translate }}</v-button\n      >\n      <v-button\n        [disabled]=\"(configurationValid$ | async) === false || (inputDisabled$ | async)\"\n        (clickEvent)=\"save()\"\n        [mdiIcon]=\"'check'\"\n        type=\"success\"\n        >{{ 'pluginManagement.save' | translate }}</v-button\n      >\n    </div>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.edit-plugin-buttons{display:flex;width:100%;justify-content:space-between}.edit-configuration-title{display:flex;width:100%;justify-content:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: PluginManagementStateService }, { type: i2$1.ModalService }, { type: i1.PluginManagementService }, { type: i4.NGXLogger }]; }, propDecorators: { pluginEditModal: [{
+                type: ViewChild,
+                args: ['pluginEditModal']
+            }] } });
+
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
  *
@@ -486,8 +568,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  * limitations under the License.
  */
 class PluginManagementComponent {
-    constructor(pluginService, translateService, stateService, pluginTranslationService) {
-        this.pluginService = pluginService;
+    constructor(pluginManagementService, translateService, stateService, pluginTranslationService) {
+        this.pluginManagementService = pluginManagementService;
         this.translateService = translateService;
         this.stateService = stateService;
         this.pluginTranslationService = pluginTranslationService;
@@ -506,26 +588,31 @@ class PluginManagementComponent {
                 dataKey: 'title',
             },
         ]);
-        this.pluginConfigurations$ = combineLatest([
-            this.pluginService.getAllPluginConfigurations(),
+        this.pluginConfigurations$ = this.stateService.refresh$.pipe(switchMap(() => combineLatest([
+            this.pluginManagementService.getAllPluginConfigurations(),
             this.translateService.stream('key'),
         ]).pipe(map(([pluginConfigurations]) => pluginConfigurations.map(configuration => ({
             ...configuration,
-            pluginName: this.pluginTranslationService.instant('title', configuration.definitionKey),
+            pluginName: this.pluginTranslationService.instant('title', configuration.pluginDefinition.key),
+            definitionKey: configuration.pluginDefinition.key,
         }))), tap(() => {
             this.loading$.next(false);
-        }));
+        }))));
     }
     showAddModal() {
         this.stateService.showModal('add');
     }
+    rowClicked(configuration) {
+        this.stateService.selectPluginConfiguration(configuration);
+        this.stateService.showModal('edit');
+    }
 }
-PluginManagementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementComponent, deps: [{ token: PluginManagementService }, { token: i2$1.TranslateService }, { token: PluginManagementStateService }, { token: i2.PluginTranslationService }], target: i0.ɵɵFactoryTarget.Component });
-PluginManagementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PluginManagementComponent, selector: "valtimo-plugin-management", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-page-container\n  *ngIf=\"{\n    pluginConfigurations: pluginConfigurations$ | async,\n    columns: columns$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <v-page-header>\n    <v-page-header-introduction>\n      <v-title>{{ 'pages.plugins.title' | translate }}</v-title>\n      <v-paragraph>{{ 'pages.plugins.description' | translate }}</v-paragraph>\n    </v-page-header-introduction>\n    <v-page-header-actions>\n      <v-button\n        (clickEvent)=\"showAddModal()\"\n        type=\"primary\"\n        mdiIcon=\"plus\"\n        [disabled]=\"obs.loading\"\n      >\n        {{ 'pluginManagement.add' | translate }}\n      </v-button>\n    </v-page-header-actions>\n  </v-page-header>\n  <v-page-content>\n    <v-table\n      [loading]=\"obs.loading\"\n      [items]=\"obs.pluginConfigurations\"\n      [columns]=\"obs.columns\"\n      [showEditButtons]=\"false\"\n      [amountOfLoadingRows]=\"2\"\n      [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n      [showPagination]=\"false\"\n    ></v-table>\n  </v-page-content>\n</v-page-container>\n\n<valtimo-plugin-add-modal></valtimo-plugin-add-modal>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], components: [{ type: i2$2.PageContainerComponent, selector: "v-page-container" }, { type: i2$2.PageHeaderComponent, selector: "v-page-header" }, { type: i2$2.PageHeaderIntroductionComponent, selector: "v-page-header-introduction" }, { type: i2$2.TitleComponent, selector: "v-title", inputs: ["type", "margin"] }, { type: i2$2.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth"] }, { type: i2$2.PageHeaderActionsComponent, selector: "v-page-header-actions" }, { type: i2$2.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { type: i2$2.PageContentComponent, selector: "v-page-content" }, { type: i2$2.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "maxPaginationItemSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { type: PluginAddModalComponent, selector: "valtimo-plugin-add-modal" }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i2$1.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementComponent, decorators: [{
+PluginManagementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementComponent, deps: [{ token: i1.PluginManagementService }, { token: i3.TranslateService }, { token: PluginManagementStateService }, { token: i1.PluginTranslationService }], target: i0.ɵɵFactoryTarget.Component });
+PluginManagementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PluginManagementComponent, selector: "valtimo-plugin-management", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-page-container\n  *ngIf=\"{\n    pluginConfigurations: pluginConfigurations$ | async,\n    columns: columns$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <v-page-header>\n    <v-page-header-introduction>\n      <v-title>{{ 'pages.plugins.title' | translate }}</v-title>\n      <v-paragraph>{{ 'pages.plugins.description' | translate }}</v-paragraph>\n    </v-page-header-introduction>\n    <v-page-header-actions>\n      <v-button\n        (clickEvent)=\"showAddModal()\"\n        type=\"primary\"\n        mdiIcon=\"plus\"\n        [disabled]=\"obs.loading\"\n      >\n        {{ 'pluginManagement.add' | translate }}\n      </v-button>\n    </v-page-header-actions>\n  </v-page-header>\n  <v-page-content>\n    <v-table\n      [loading]=\"obs.loading\"\n      [items]=\"obs.pluginConfigurations\"\n      [columns]=\"obs.columns\"\n      [showEditButtons]=\"true\"\n      [amountOfLoadingRows]=\"2\"\n      [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n      [showPagination]=\"false\"\n      (editButtonClicked)=\"rowClicked($event)\"\n    ></v-table>\n  </v-page-content>\n</v-page-container>\n\n<valtimo-plugin-add-modal></valtimo-plugin-add-modal>\n\n<valtimo-plugin-edit-modal></valtimo-plugin-edit-modal>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], components: [{ type: i2$1.PageContainerComponent, selector: "v-page-container" }, { type: i2$1.PageHeaderComponent, selector: "v-page-header" }, { type: i2$1.PageHeaderIntroductionComponent, selector: "v-page-header-introduction" }, { type: i2$1.TitleComponent, selector: "v-title", inputs: ["type", "margin"] }, { type: i2$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { type: i2$1.PageHeaderActionsComponent, selector: "v-page-header-actions" }, { type: i2$1.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { type: i2$1.PageContentComponent, selector: "v-page-content" }, { type: i2$1.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "maxPaginationItemSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { type: PluginAddModalComponent, selector: "valtimo-plugin-add-modal" }, { type: PluginEditModalComponent, selector: "valtimo-plugin-edit-modal" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe, "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-plugin-management', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-page-container\n  *ngIf=\"{\n    pluginConfigurations: pluginConfigurations$ | async,\n    columns: columns$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <v-page-header>\n    <v-page-header-introduction>\n      <v-title>{{ 'pages.plugins.title' | translate }}</v-title>\n      <v-paragraph>{{ 'pages.plugins.description' | translate }}</v-paragraph>\n    </v-page-header-introduction>\n    <v-page-header-actions>\n      <v-button\n        (clickEvent)=\"showAddModal()\"\n        type=\"primary\"\n        mdiIcon=\"plus\"\n        [disabled]=\"obs.loading\"\n      >\n        {{ 'pluginManagement.add' | translate }}\n      </v-button>\n    </v-page-header-actions>\n  </v-page-header>\n  <v-page-content>\n    <v-table\n      [loading]=\"obs.loading\"\n      [items]=\"obs.pluginConfigurations\"\n      [columns]=\"obs.columns\"\n      [showEditButtons]=\"false\"\n      [amountOfLoadingRows]=\"2\"\n      [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n      [showPagination]=\"false\"\n    ></v-table>\n  </v-page-content>\n</v-page-container>\n\n<valtimo-plugin-add-modal></valtimo-plugin-add-modal>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: function () { return [{ type: PluginManagementService }, { type: i2$1.TranslateService }, { type: PluginManagementStateService }, { type: i2.PluginTranslationService }]; } });
+            args: [{ selector: 'valtimo-plugin-management', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-page-container\n  *ngIf=\"{\n    pluginConfigurations: pluginConfigurations$ | async,\n    columns: columns$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <v-page-header>\n    <v-page-header-introduction>\n      <v-title>{{ 'pages.plugins.title' | translate }}</v-title>\n      <v-paragraph>{{ 'pages.plugins.description' | translate }}</v-paragraph>\n    </v-page-header-introduction>\n    <v-page-header-actions>\n      <v-button\n        (clickEvent)=\"showAddModal()\"\n        type=\"primary\"\n        mdiIcon=\"plus\"\n        [disabled]=\"obs.loading\"\n      >\n        {{ 'pluginManagement.add' | translate }}\n      </v-button>\n    </v-page-header-actions>\n  </v-page-header>\n  <v-page-content>\n    <v-table\n      [loading]=\"obs.loading\"\n      [items]=\"obs.pluginConfigurations\"\n      [columns]=\"obs.columns\"\n      [showEditButtons]=\"true\"\n      [amountOfLoadingRows]=\"2\"\n      [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n      [showPagination]=\"false\"\n      (editButtonClicked)=\"rowClicked($event)\"\n    ></v-table>\n  </v-page-content>\n</v-page-container>\n\n<valtimo-plugin-add-modal></valtimo-plugin-add-modal>\n\n<valtimo-plugin-edit-modal></valtimo-plugin-edit-modal>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.PluginManagementService }, { type: i3.TranslateService }, { type: PluginManagementStateService }, { type: i1.PluginTranslationService }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -536,7 +623,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  *
  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
  *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions and limitations under the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 const routes = [
     {
@@ -548,10 +639,10 @@ const routes = [
 ];
 class PluginManagementRoutingModule {
 }
-PluginManagementRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PluginManagementRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementRoutingModule, imports: [CommonModule, i1$1.RouterModule], exports: [RouterModule] });
-PluginManagementRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementRoutingModule, imports: [[CommonModule, RouterModule.forChild(routes)], RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementRoutingModule, decorators: [{
+PluginManagementRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PluginManagementRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementRoutingModule, imports: [CommonModule, i1$1.RouterModule], exports: [RouterModule] });
+PluginManagementRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementRoutingModule, imports: [[CommonModule, RouterModule.forChild(routes)], RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -569,15 +660,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  *
  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
  *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions and limitations under the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 class PluginManagementModule {
 }
-PluginManagementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PluginManagementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementModule, declarations: [PluginManagementComponent,
+PluginManagementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PluginManagementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementModule, declarations: [PluginManagementComponent,
         PluginAddModalComponent,
         PluginAddSelectComponent,
-        PluginConfigureComponent], imports: [CommonModule,
+        PluginConfigureComponent,
+        PluginEditModalComponent,
+        PluginEditComponent], imports: [CommonModule,
         PluginManagementRoutingModule,
         TranslateModule,
         FlexLayoutModule,
@@ -593,8 +690,10 @@ PluginManagementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         PluginConfigurationContainerModule], exports: [PluginManagementComponent,
         PluginAddModalComponent,
         PluginAddSelectComponent,
-        PluginConfigureComponent] });
-PluginManagementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementModule, providers: [PluginManagementStateService], imports: [[
+        PluginConfigureComponent,
+        PluginEditModalComponent,
+        PluginEditComponent] });
+PluginManagementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementModule, providers: [PluginManagementStateService], imports: [[
             CommonModule,
             PluginManagementRoutingModule,
             TranslateModule,
@@ -610,7 +709,7 @@ PluginManagementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             PluginTranslatePipeModule,
             PluginConfigurationContainerModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PluginManagementModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PluginManagementModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [PluginManagementStateService],
@@ -619,6 +718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                         PluginAddModalComponent,
                         PluginAddSelectComponent,
                         PluginConfigureComponent,
+                        PluginEditModalComponent,
+                        PluginEditComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -641,6 +742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                         PluginAddModalComponent,
                         PluginAddSelectComponent,
                         PluginConfigureComponent,
+                        PluginEditModalComponent,
+                        PluginEditComponent,
                     ],
                 }]
         }] });
@@ -654,12 +757,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  *
  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
  *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions and limitations under the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { PluginAddModalComponent, PluginAddSelectComponent, PluginConfigureComponent, PluginManagementComponent, PluginManagementModule, PluginManagementService, PluginManagementStateService };
+export { PluginAddModalComponent, PluginAddSelectComponent, PluginConfigureComponent, PluginEditComponent, PluginEditModalComponent, PluginManagementComponent, PluginManagementModule, PluginManagementStateService };
 //# sourceMappingURL=valtimo-plugin-management.mjs.map