@valtimo/plugin-management 12.0.0 → 12.1.0

package/fesm2022/valtimo-plugin-management.mjs

@@ -1,23 +1,23 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
+import { Injectable, Component, EventEmitter, Output, Input, NgModule } from '@angular/core';
 import { Subject, BehaviorSubject, combineLatest, of } from 'rxjs';
 import { map, take, switchMap, tap } from 'rxjs/operators';
-import * as i3 from '@valtimo/plugin';
+import * as i2 from '@valtimo/plugin';
 import { PluginTranslatePipeModule, PluginConfigurationContainerModule } from '@valtimo/plugin';
-import * as i2 from '@angular/platform-browser';
+import * as i2$1 from '@angular/platform-browser';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i5 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { AuthGuardService } from '@valtimo/security';
 import { ROLE_ADMIN } from '@valtimo/config';
-import * as i2$1 from '@valtimo/components';
+import * as i4$1 from '@valtimo/components';
 import { ViewType, PageModule, ParagraphModule, TitleModule, TableModule, StepperModule, VModalModule, ButtonModule, VCardModule, CarbonListModule } from '@valtimo/components';
-import * as i4 from 'ngx-logger';
-import * as i3$1 from '@ngx-translate/core';
+import * as i3$1 from 'ngx-logger';
+import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i6 from 'carbon-components-angular';
-import { ButtonModule as ButtonModule$1, IconModule } from 'carbon-components-angular';
+import * as i5 from 'carbon-components-angular';
+import { ButtonModule as ButtonModule$1, ModalModule, IconModule } from 'carbon-components-angular';
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -182,7 +182,7 @@ class PluginManagementStateService {
         this.clearSelectedPluginDefinition();
         this.clearSelectedPluginConfiguration();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginManagementStateService, deps: [{ token: i3.PluginService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginManagementStateService, deps: [{ token: i2.PluginService }, { token: i2$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginManagementStateService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginManagementStateService, decorators: [{
@@ -190,7 +190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i3.PluginService }, { type: i2.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i2.PluginService }, { type: i2$1.DomSanitizer }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -258,13 +258,13 @@ class PluginAddSelectComponent {
             this.stateService.clearSelectedPluginDefinition();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginAddSelectComponent, deps: [{ token: i3.PluginManagementService }, { token: PluginManagementStateService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginAddSelectComponent, selector: "valtimo-plugin-add-select", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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 class=\"plugin-definition__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 *ngIf=\"pluginDefinitions?.length === 0\" class=\"plugin-definition__no-results\">\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 *ngFor=\"let pluginDefinition of pluginDefinitions\" class=\"plugin-definition__item\">\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 class=\"plugin-definition__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 class=\"plugin-definition__item\">\n    <v-card [loading]=\"true\" [loadingDescription]=\"true\" [loadingTitle]=\"true\"></v-card>\n  </div>\n</ng-template>\n", styles: [".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%}.plugin-definition__grid{flex-flow:wrap;box-sizing:border-box;display:flex;margin:0 -22px -22px 0}.plugin-definition__item{flex:1 1 33.3%;box-sizing:border-box;max-width:33.3%;padding:0 22px 22px 0}.plugin-definition__no-results{box-sizing:border-box;flex:1 1 100%;padding:0 22px 22px 0}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i2$1.VCardComponent, selector: "v-card", inputs: ["titleTranslationKey", "title", "descriptionTranslationKey", "description", "selectable", "selected", "fullHeight", "loading", "loadingTitle", "loadingDescription"], outputs: ["selectEvent", "deselectEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3.PluginTranslatePipe, name: "pluginTranslate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginAddSelectComponent, deps: [{ token: i2.PluginManagementService }, { token: PluginManagementStateService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginAddSelectComponent, selector: "valtimo-plugin-add-select", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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 class=\"plugin-definition__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 *ngIf=\"pluginDefinitions?.length === 0\" class=\"plugin-definition__no-results\">\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 *ngFor=\"let pluginDefinition of pluginDefinitions\" class=\"plugin-definition__item\">\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 class=\"plugin-definition__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 class=\"plugin-definition__item\">\n    <v-card [loading]=\"true\" [loadingDescription]=\"true\" [loadingTitle]=\"true\"></v-card>\n  </div>\n</ng-template>\n", styles: [".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%}.plugin-definition__grid{flex-flow:wrap;box-sizing:border-box;display:flex;margin:0 -22px -22px 0}.plugin-definition__item{flex:1 1 33.3%;box-sizing:border-box;max-width:33.3%;padding:0 22px 22px 0}.plugin-definition__no-results{box-sizing:border-box;flex:1 1 100%;padding:0 22px 22px 0}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i4$1.VCardComponent, selector: "v-card", inputs: ["titleTranslationKey", "title", "descriptionTranslationKey", "description", "selectable", "selected", "fullHeight", "loading", "loadingTitle", "loadingDescription"], outputs: ["selectEvent", "deselectEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.PluginTranslatePipe, name: "pluginTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginAddSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-plugin-add-select', template: "<!--\n  ~ Copyright 2015-2024 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 class=\"plugin-definition__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 *ngIf=\"pluginDefinitions?.length === 0\" class=\"plugin-definition__no-results\">\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 *ngFor=\"let pluginDefinition of pluginDefinitions\" class=\"plugin-definition__item\">\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 class=\"plugin-definition__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 class=\"plugin-definition__item\">\n    <v-card [loading]=\"true\" [loadingDescription]=\"true\" [loadingTitle]=\"true\"></v-card>\n  </div>\n</ng-template>\n", styles: [".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%}.plugin-definition__grid{flex-flow:wrap;box-sizing:border-box;display:flex;margin:0 -22px -22px 0}.plugin-definition__item{flex:1 1 33.3%;box-sizing:border-box;max-width:33.3%;padding:0 22px 22px 0}.plugin-definition__no-results{box-sizing:border-box;flex:1 1 100%;padding:0 22px 22px 0}\n/*!\n * Copyright 2015-2024 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: () => [{ type: i3.PluginManagementService }, { type: PluginManagementStateService }, { type: i3$1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i2.PluginManagementService }, { type: PluginManagementStateService }, { type: i3.TranslateService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -298,7 +298,7 @@ class PluginConfigureComponent {
         this.configuration.emit(configuration);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginConfigureComponent, deps: [{ token: PluginManagementStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginConfigureComponent, selector: "valtimo-plugin-configure", outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-2024 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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PluginConfigurationContainerComponent, selector: "valtimo-plugin-configuration-container", inputs: ["type", "pluginDefinitionKey", "functionKey", "save$", "disabled$", "prefillConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginConfigureComponent, selector: "valtimo-plugin-configure", outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-2024 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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PluginConfigurationContainerComponent, selector: "valtimo-plugin-configuration-container", inputs: ["type", "pluginDefinitionKey", "functionKey", "save$", "disabled$", "prefillConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginConfigureComponent, decorators: [{
             type: Component,
@@ -325,20 +325,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 class PluginAddModalComponent {
-    constructor(stateService, modalService, pluginManagementService, logger) {
+    constructor(stateService, pluginManagementService, logger) {
         this.stateService = stateService;
-        this.modalService = modalService;
         this.pluginManagementService = pluginManagementService;
         this.logger = logger;
+        this.open = false;
+        this.closeModal = new EventEmitter();
         this.inputDisabled$ = this.stateService.inputDisabled$;
         this.selectedPluginDefinition$ = this.stateService.selectedPluginDefinition$;
         this.configurationValid$ = new BehaviorSubject(false);
         this.returnToFirstStepSubject$ = new Subject();
     }
-    ngOnInit() {
-        this.openShowSubscription();
-        this.openHideSubscription();
-    }
     complete() {
         this.stateService.save();
     }
@@ -346,12 +343,10 @@ class PluginAddModalComponent {
         this.stateService.delete();
     }
     hide() {
-        this.stateService.disableInput();
-        this.modalService.closeModal(() => {
-            this.returnToFirstStep();
-            this.stateService.enableInput();
-            this.stateService.clear();
-        });
+        this.closeModal.emit();
+        this.returnToFirstStep();
+        this.stateService.enableInput();
+        this.stateService.clear();
     }
     onValid(valid) {
         this.configurationValid$.next(valid);
@@ -380,33 +375,19 @@ class PluginAddModalComponent {
             });
         });
     }
-    openShowSubscription() {
-        this.showSubscription = this.stateService.showModal$.subscribe(modalType => {
-            if (modalType === 'add') {
-                this.show();
-            }
-        });
-    }
-    openHideSubscription() {
-        this.hideSubscription = this.stateService.hideModal$.subscribe(() => {
-            this.hide();
-        });
-    }
     returnToFirstStep() {
         this.returnToFirstStepSubject$.next(true);
     }
-    show() {
-        this.modalService.openModal(this.pluginAddModal);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginAddModalComponent, deps: [{ token: PluginManagementStateService }, { token: i2$1.ModalService }, { token: i3.PluginManagementService }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginAddModalComponent, selector: "valtimo-plugin-add-modal", viewQueries: [{ propertyName: "pluginAddModal", first: true, predicate: ["pluginAddModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-2024 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"], dependencies: [{ kind: "component", type: i2$1.StepperContainerComponent, selector: "v-stepper-container", inputs: ["returnToFirstStepSubject$", "disabled"], outputs: ["cancelClickEvent", "completeEvent", "nextStepEvent"] }, { kind: "component", type: i2$1.StepperContentComponent, selector: "v-stepper-content" }, { kind: "component", type: i2$1.StepperFooterComponent, selector: "v-stepper-footer" }, { kind: "component", type: i2$1.StepperHeaderComponent, selector: "v-stepper-header" }, { kind: "component", type: i2$1.StepperStepComponent, selector: "v-stepper-step", inputs: ["titleTranslationKey"] }, { kind: "component", type: i2$1.StepperFooterStepComponent, selector: "v-stepper-footer-step", inputs: ["nextButtonEnabled", "completeButtonEnabled", "nextButtonTranslationKey", "cancelButtonTranslationKey", "completeButtonTranslationKey", "completeButtonMdiIcon", "showCompleteButton"] }, { kind: "component", type: i2$1.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "component", type: PluginAddSelectComponent, selector: "valtimo-plugin-add-select" }, { kind: "component", type: PluginConfigureComponent, selector: "valtimo-plugin-configure", outputs: ["valid", "configuration"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginAddModalComponent, deps: [{ token: PluginManagementStateService }, { token: i2.PluginManagementService }, { token: i3$1.NGXLogger }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginAddModalComponent, selector: "valtimo-plugin-add-modal", inputs: { open: "open" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  <cds-modal #pluginAddModal [open]=\"open\">\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"hide()\">\n      <v-stepper-header></v-stepper-header>\n    </cds-modal-header>\n    <section cdsModalContent>\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    </section>\n    <cds-modal-footer>\n      <v-stepper-footer class=\"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    </cds-modal-footer>\n  </cds-modal>\n</v-stepper-container>\n", styles: [".stepper-footer{width:100%}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "component", type: i4$1.StepperContainerComponent, selector: "v-stepper-container", inputs: ["returnToFirstStepSubject$", "disabled"], outputs: ["cancelClickEvent", "completeEvent", "nextStepEvent"] }, { kind: "component", type: i4$1.StepperContentComponent, selector: "v-stepper-content" }, { kind: "component", type: i4$1.StepperFooterComponent, selector: "v-stepper-footer" }, { kind: "component", type: i4$1.StepperHeaderComponent, selector: "v-stepper-header" }, { kind: "component", type: i4$1.StepperStepComponent, selector: "v-stepper-step", inputs: ["titleTranslationKey"] }, { kind: "component", type: i4$1.StepperFooterStepComponent, selector: "v-stepper-footer-step", inputs: ["nextButtonEnabled", "completeButtonEnabled", "nextButtonTranslationKey", "cancelButtonTranslationKey", "completeButtonTranslationKey", "completeButtonMdiIcon", "showCompleteButton"] }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i5.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "component", type: PluginAddSelectComponent, selector: "valtimo-plugin-add-select" }, { kind: "component", type: PluginConfigureComponent, selector: "valtimo-plugin-configure", outputs: ["valid", "configuration"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginAddModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-plugin-add-modal', template: "<!--\n  ~ Copyright 2015-2024 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-2024 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: () => [{ type: PluginManagementStateService }, { type: i2$1.ModalService }, { type: i3.PluginManagementService }, { type: i4.NGXLogger }], propDecorators: { pluginAddModal: [{
-                type: ViewChild,
-                args: ['pluginAddModal']
+            args: [{ selector: 'valtimo-plugin-add-modal', template: "<!--\n  ~ Copyright 2015-2024 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  <cds-modal #pluginAddModal [open]=\"open\">\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"hide()\">\n      <v-stepper-header></v-stepper-header>\n    </cds-modal-header>\n    <section cdsModalContent>\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    </section>\n    <cds-modal-footer>\n      <v-stepper-footer class=\"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    </cds-modal-footer>\n  </cds-modal>\n</v-stepper-container>\n", styles: [".stepper-footer{width:100%}\n/*!\n * Copyright 2015-2024 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: () => [{ type: PluginManagementStateService }, { type: i2.PluginManagementService }, { type: i3$1.NGXLogger }], propDecorators: { open: [{
+                type: Input
+            }], closeModal: [{
+                type: Output
             }] } });
 
 /*
@@ -447,7 +428,7 @@ class PluginEditComponent {
         this.configuration.emit(configuration);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginEditComponent, deps: [{ token: PluginManagementStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginEditComponent, selector: "valtimo-plugin-edit", outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-2024 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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PluginConfigurationContainerComponent, selector: "valtimo-plugin-configuration-container", inputs: ["type", "pluginDefinitionKey", "functionKey", "save$", "disabled$", "prefillConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginEditComponent, selector: "valtimo-plugin-edit", outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-2024 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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PluginConfigurationContainerComponent, selector: "valtimo-plugin-configuration-container", inputs: ["type", "pluginDefinitionKey", "functionKey", "save$", "disabled$", "prefillConfiguration$"], outputs: ["valid", "configuration"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginEditComponent, decorators: [{
             type: Component,
@@ -474,19 +455,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 class PluginEditModalComponent {
-    constructor(stateService, modalService, pluginManagementService, logger) {
+    constructor(stateService, pluginManagementService, logger) {
         this.stateService = stateService;
-        this.modalService = modalService;
         this.pluginManagementService = pluginManagementService;
         this.logger = logger;
+        this.open = false;
+        this.closeModal = new EventEmitter();
         this.inputDisabled$ = this.stateService.inputDisabled$;
         this.selectedPluginConfiguration$ = this.stateService.selectedPluginConfiguration$;
         this.configurationValid$ = new BehaviorSubject(false);
     }
-    ngOnInit() {
-        this.openShowSubscription();
-        this.openHideSubscription();
-    }
     save() {
         this.stateService.saveEdit();
     }
@@ -507,10 +485,8 @@ class PluginEditModalComponent {
         });
     }
     hide() {
-        this.modalService.closeModal(() => {
-            this.stateService.enableInput();
-            this.stateService.clear();
-        });
+        this.closeModal.emit();
+        this.stateService.enableInput();
     }
     onPluginValid(valid) {
         this.configurationValid$.next(valid);
@@ -535,30 +511,16 @@ class PluginEditModalComponent {
             });
         });
     }
-    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);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginEditModalComponent, deps: [{ token: PluginManagementStateService }, { token: i2$1.ModalService }, { token: i3.PluginManagementService }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginEditModalComponent, selector: "valtimo-plugin-edit-modal", viewQueries: [{ propertyName: "pluginEditModal", first: true, predicate: ["pluginEditModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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: [".edit-plugin-buttons{display:flex;width:100%;justify-content:space-between}.edit-configuration-title{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i2$1.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: PluginEditComponent, selector: "valtimo-plugin-edit", outputs: ["valid", "configuration"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3.PluginTranslatePipe, name: "pluginTranslate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginEditModalComponent, deps: [{ token: PluginManagementStateService }, { token: i2.PluginManagementService }, { token: i3$1.NGXLogger }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginEditModalComponent, selector: "valtimo-plugin-edit-modal", inputs: { open: "open" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal\n  #pluginEditModal\n  [open]=\"open\"\n  (close)=\"hide()\"\n  *ngIf=\"{selectedConfiguration: selectedPluginConfiguration$ | async} as obs\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"hide()\">\n    {{\n      obs.selectedConfiguration?.title +\n        ' - ' +\n        ('title' | pluginTranslate: obs.selectedConfiguration?.pluginDefinition?.key | async)\n    }}\n  </cds-modal-header>\n  <section cdsModalContent>\n    <valtimo-plugin-edit\n      (valid)=\"onPluginValid($event)\"\n      (configuration)=\"onPluginConfiguration($event)\"\n    ></valtimo-plugin-edit>\n  </section>\n  <cds-modal-footer>\n    <button cdsButton=\"danger\" (click)=\"delete()\" [disabled]=\"inputDisabled$ | async\">\n      {{ 'pluginManagement.remove' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"(configurationValid$ | async) === false || (inputDisabled$ | async)\"\n      (click)=\"save()\"\n    >\n      {{ 'pluginManagement.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i5.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "component", type: PluginEditComponent, selector: "valtimo-plugin-edit", outputs: ["valid", "configuration"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.PluginTranslatePipe, name: "pluginTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginEditModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-plugin-edit-modal', template: "<!--\n  ~ Copyright 2015-2024 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: [".edit-plugin-buttons{display:flex;width:100%;justify-content:space-between}.edit-configuration-title{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2024 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: () => [{ type: PluginManagementStateService }, { type: i2$1.ModalService }, { type: i3.PluginManagementService }, { type: i4.NGXLogger }], propDecorators: { pluginEditModal: [{
-                type: ViewChild,
-                args: ['pluginEditModal']
+            args: [{ selector: 'valtimo-plugin-edit-modal', template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal\n  #pluginEditModal\n  [open]=\"open\"\n  (close)=\"hide()\"\n  *ngIf=\"{selectedConfiguration: selectedPluginConfiguration$ | async} as obs\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"hide()\">\n    {{\n      obs.selectedConfiguration?.title +\n        ' - ' +\n        ('title' | pluginTranslate: obs.selectedConfiguration?.pluginDefinition?.key | async)\n    }}\n  </cds-modal-header>\n  <section cdsModalContent>\n    <valtimo-plugin-edit\n      (valid)=\"onPluginValid($event)\"\n      (configuration)=\"onPluginConfiguration($event)\"\n    ></valtimo-plugin-edit>\n  </section>\n  <cds-modal-footer>\n    <button cdsButton=\"danger\" (click)=\"delete()\" [disabled]=\"inputDisabled$ | async\">\n      {{ 'pluginManagement.remove' | translate }}\n    </button>\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"(configurationValid$ | async) === false || (inputDisabled$ | async)\"\n      (click)=\"save()\"\n    >\n      {{ 'pluginManagement.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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: () => [{ type: PluginManagementStateService }, { type: i2.PluginManagementService }, { type: i3$1.NGXLogger }], propDecorators: { open: [{
+                type: Input
+            }], closeModal: [{
+                type: Output
             }] } });
 
 /*
@@ -612,6 +574,8 @@ class PluginManagementComponent {
             },
         ];
         this.loading$ = new BehaviorSubject(true);
+        this.showEditModal$ = new BehaviorSubject(false);
+        this.showAddModal$ = new BehaviorSubject(false);
         this.pluginConfigurations$ = this.stateService.refresh$.pipe(switchMap(() => combineLatest([
             this.pluginManagementService.getAllPluginConfigurations(),
             this.translateService.stream('key'),
@@ -624,11 +588,11 @@ class PluginManagementComponent {
         }))));
     }
     showAddModal() {
-        this.stateService.showModal('add');
+        this.showAddModal$.next(true);
     }
     editConfiguration(configuration) {
+        this.showEditModal$.next(true);
         this.stateService.selectPluginConfiguration(configuration);
-        this.stateService.showModal('edit');
     }
     deleteConfiguration(configuration) {
         if (!configuration.id) {
@@ -646,13 +610,19 @@ class PluginManagementComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginManagementComponent, deps: [{ token: i4.NGXLogger }, { token: i3.PluginManagementService }, { token: i3.PluginTranslationService }, { token: PluginManagementStateService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginManagementComponent, selector: "valtimo-plugin-management", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<ng-container\n  *ngIf=\"{\n    pluginConfigurations: pluginConfigurations$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loading\"\n    [items]=\"obs.pluginConfigurations\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    (rowClicked)=\"editConfiguration($event)\"\n  >\n    <ng-container carbonToolbarContent [ngTemplateOutlet]=\"configurePluginButton\"></ng-container>\n\n    <valtimo-no-results\n      [action]=\"configurePluginButton\"\n      [title]=\"'pages.plugins.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #configurePluginButton>\n    <button cdsButton=\"primary\" [disabled]=\"obs.loading\" (click)=\"showAddModal()\">\n      {{ 'pluginManagement.add' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-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-2024 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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i2$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "directive", type: i6.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: PluginAddModalComponent, selector: "valtimo-plugin-add-modal" }, { kind: "component", type: PluginEditModalComponent, selector: "valtimo-plugin-edit-modal" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+    closeEditModal() {
+        this.showEditModal$.next(false);
+    }
+    closeAddModal() {
+        this.showAddModal$.next(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginManagementComponent, deps: [{ token: i3$1.NGXLogger }, { token: i2.PluginManagementService }, { token: i2.PluginTranslationService }, { token: PluginManagementStateService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: PluginManagementComponent, selector: "valtimo-plugin-management", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<ng-container\n  *ngIf=\"{\n    pluginConfigurations: pluginConfigurations$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loading\"\n    [items]=\"obs.pluginConfigurations\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    (rowClicked)=\"editConfiguration($event)\"\n  >\n    <ng-container carbonToolbarContent [ngTemplateOutlet]=\"configurePluginButton\"></ng-container>\n\n    <valtimo-no-results\n      [action]=\"configurePluginButton\"\n      [title]=\"'pages.plugins.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #configurePluginButton>\n    <button cdsButton=\"primary\" [disabled]=\"obs.loading\" (click)=\"showAddModal()\">\n      {{ 'pluginManagement.add' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<valtimo-plugin-add-modal\n  [open]=\"showAddModal$ | async\"\n  (closeModal)=\"closeAddModal()\"\n></valtimo-plugin-add-modal>\n\n<valtimo-plugin-edit-modal\n  [open]=\"showEditModal$ | async\"\n  (closeModal)=\"closeEditModal()\"\n></valtimo-plugin-edit-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i4$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i4$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: PluginAddModalComponent, selector: "valtimo-plugin-add-modal", inputs: ["open"], outputs: ["closeModal"] }, { kind: "component", type: PluginEditModalComponent, selector: "valtimo-plugin-edit-modal", inputs: ["open"], outputs: ["closeModal"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginManagementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-plugin-management', template: "<!--\n  ~ Copyright 2015-2024 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<ng-container\n  *ngIf=\"{\n    pluginConfigurations: pluginConfigurations$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loading\"\n    [items]=\"obs.pluginConfigurations\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    (rowClicked)=\"editConfiguration($event)\"\n  >\n    <ng-container carbonToolbarContent [ngTemplateOutlet]=\"configurePluginButton\"></ng-container>\n\n    <valtimo-no-results\n      [action]=\"configurePluginButton\"\n      [title]=\"'pages.plugins.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #configurePluginButton>\n    <button cdsButton=\"primary\" [disabled]=\"obs.loading\" (click)=\"showAddModal()\">\n      {{ 'pluginManagement.add' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-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-2024 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: () => [{ type: i4.NGXLogger }, { type: i3.PluginManagementService }, { type: i3.PluginTranslationService }, { type: PluginManagementStateService }, { type: i3$1.TranslateService }] });
+            args: [{ selector: 'valtimo-plugin-management', template: "<!--\n  ~ Copyright 2015-2024 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<ng-container\n  *ngIf=\"{\n    pluginConfigurations: pluginConfigurations$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loading\"\n    [items]=\"obs.pluginConfigurations\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    (rowClicked)=\"editConfiguration($event)\"\n  >\n    <ng-container carbonToolbarContent [ngTemplateOutlet]=\"configurePluginButton\"></ng-container>\n\n    <valtimo-no-results\n      [action]=\"configurePluginButton\"\n      [title]=\"'pages.plugins.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #configurePluginButton>\n    <button cdsButton=\"primary\" [disabled]=\"obs.loading\" (click)=\"showAddModal()\">\n      {{ 'pluginManagement.add' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<valtimo-plugin-add-modal\n  [open]=\"showAddModal$ | async\"\n  (closeModal)=\"closeAddModal()\"\n></valtimo-plugin-add-modal>\n\n<valtimo-plugin-edit-modal\n  [open]=\"showEditModal$ | async\"\n  (closeModal)=\"closeEditModal()\"\n></valtimo-plugin-edit-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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: () => [{ type: i3$1.NGXLogger }, { type: i2.PluginManagementService }, { type: i2.PluginTranslationService }, { type: PluginManagementStateService }, { type: i3.TranslateService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -728,6 +698,7 @@ class PluginManagementModule {
             PluginConfigurationContainerModule,
             ButtonModule$1,
             CarbonListModule,
+            ModalModule,
             IconModule], exports: [PluginManagementComponent,
             PluginAddModalComponent,
             PluginAddSelectComponent,
@@ -749,6 +720,7 @@ class PluginManagementModule {
             PluginConfigurationContainerModule,
             ButtonModule$1,
             CarbonListModule,
+            ModalModule,
             IconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: PluginManagementModule, decorators: [{
@@ -779,6 +751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         PluginConfigurationContainerModule,
                         ButtonModule$1,
                         CarbonListModule,
+                        ModalModule,
                         IconModule,
                     ],
                     exports: [