@valtimo/connector-management 4.15.2 → 4.16.0-next-main.19

package/fesm2015/valtimo-connector-management.js

@@ -2,18 +2,35 @@ import { ɵɵdefineInjectable, ɵɵinject, Injectable, Component, NgModule, View
 import { RouterModule, ActivatedRoute } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { AuthGuardService } from '@valtimo/security';
-import { ROLE_ADMIN, Extension, BasicExtensionPoint } from '@valtimo/contract';
+import { ConfigService, ROLE_ADMIN, Extension, BasicExtensionPoint } from '@valtimo/config';
 import { BehaviorSubject, combineLatest, of, Subject } from 'rxjs';
 import { map, tap, switchMap, take, catchError } from 'rxjs/operators';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { HttpClient } from '@angular/common/http';
-import { ConfigService } from '@valtimo/config';
 import { AlertService, WidgetModule, ListModule, SpinnerModule, ModalModule, FormIoModule } from '@valtimo/components';
 import { get, set, cloneDeep } from 'lodash';
 import { FormTranslationService, FormMappingService } from '@valtimo/form';
 import { DocumentService } from '@valtimo/document';
 import { NGXLogger } from 'ngx-logger';
 
+/*
+ *
+ *  * 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 2020 Dimpact.
  *
@@ -60,7 +77,7 @@ class ConnectorManagementService {
 ConnectorManagementService.ɵprov = ɵɵdefineInjectable({ factory: function ConnectorManagementService_Factory() { return new ConnectorManagementService(ɵɵinject(HttpClient), ɵɵinject(ConfigService)); }, token: ConnectorManagementService, providedIn: "root" });
 ConnectorManagementService.decorators = [
     { type: Injectable, args: [{
-                providedIn: 'root'
+                providedIn: 'root',
             },] }
 ];
 ConnectorManagementService.ctorParameters = () => [
@@ -144,7 +161,7 @@ class ConnectorManagementStateService {
 ConnectorManagementStateService.ɵprov = ɵɵdefineInjectable({ factory: function ConnectorManagementStateService_Factory() { return new ConnectorManagementStateService(); }, token: ConnectorManagementStateService, providedIn: "root" });
 ConnectorManagementStateService.decorators = [
     { type: Injectable, args: [{
-                providedIn: 'root'
+                providedIn: 'root',
             },] }
 ];
 
@@ -176,21 +193,29 @@ class ConnectorManagementComponent {
         });
         this.pageSizes$ = new BehaviorSubject({
             collectionSize: 0,
-            maxPaginationItemSize: 5
+            maxPaginationItemSize: 5,
         });
-        this.pagination$ = combineLatest([this.currentPageAndSize$, this.pageSizes$])
-            .pipe(map(([currentPage, sizes]) => (Object.assign(Object.assign(Object.assign({}, currentPage), sizes), { page: currentPage.page + 1 }))));
-        this.connectorInstances$ = combineLatest([this.currentPageAndSize$, this.translateService.stream('key'), this.stateService.refresh$])
-            .pipe(tap(() => this.setFields()), switchMap(([currentPage]) => combineLatest([
-            this.connectorManagementService.getConnectorInstances({ page: currentPage.page, size: currentPage.size }),
-            this.connectorManagementService.getConnectorTypes()
+        this.pagination$ = combineLatest([
+            this.currentPageAndSize$,
+            this.pageSizes$,
+        ]).pipe(map(([currentPage, sizes]) => (Object.assign(Object.assign(Object.assign({}, currentPage), sizes), { page: currentPage.page + 1 }))));
+        this.connectorInstances$ = combineLatest([
+            this.currentPageAndSize$,
+            this.translateService.stream('key'),
+            this.stateService.refresh$,
+        ]).pipe(tap(() => this.setFields()), switchMap(([currentPage]) => combineLatest([
+            this.connectorManagementService.getConnectorInstances({
+                page: currentPage.page,
+                size: currentPage.size,
+            }),
+            this.connectorManagementService.getConnectorTypes(),
         ])), tap(([instanceRes]) => {
-            this.pageSizes$.pipe(take(1)).subscribe((sizes) => {
+            this.pageSizes$.pipe(take(1)).subscribe(sizes => {
                 this.pageSizes$.next(Object.assign(Object.assign({}, sizes), { collectionSize: instanceRes.totalElements }));
             });
-        }), map(([instanceRes, typesRes]) => instanceRes.content.map((instance) => {
+        }), map(([instanceRes, typesRes]) => instanceRes.content.map(instance => {
             var _a;
-            return Object.assign(Object.assign({}, instance), { typeName: (_a = typesRes.find((type) => type.id === instance.type.id)) === null || _a === void 0 ? void 0 : _a.name });
+            return Object.assign(Object.assign({}, instance), { typeName: (_a = typesRes.find(type => type.id === instance.type.id)) === null || _a === void 0 ? void 0 : _a.name });
         })), tap(() => this.loading$.next(false)));
         this.modalType$ = new BehaviorSubject('add');
     }
@@ -198,13 +223,13 @@ class ConnectorManagementComponent {
         this.stateService.hideModal();
     }
     paginationClicked(newPageNumber) {
-        this.currentPageAndSize$.pipe(take(1)).subscribe((currentPage) => {
+        this.currentPageAndSize$.pipe(take(1)).subscribe(currentPage => {
             this.currentPageAndSize$.next(Object.assign(Object.assign({}, currentPage), { page: newPageNumber - 1 }));
         });
     }
     paginationSet(newPageSize) {
         if (newPageSize) {
-            this.currentPageAndSize$.pipe(take(1)).subscribe((currentPage) => {
+            this.currentPageAndSize$.pipe(take(1)).subscribe(currentPage => {
                 this.currentPageAndSize$.next(Object.assign(Object.assign({}, currentPage), { size: newPageSize }));
             });
         }
@@ -221,13 +246,13 @@ class ConnectorManagementComponent {
     setFields() {
         const getTranslatedLabel = (key) => this.translateService.instant(`connectorManagement.labels.${key}`);
         const keys = ['name', 'typeName'];
-        this.fields$.next(keys.map((key) => ({ label: getTranslatedLabel(key), key })));
+        this.fields$.next(keys.map(key => ({ label: getTranslatedLabel(key), key })));
     }
 }
 ConnectorManagementComponent.decorators = [
     { type: Component, args: [{
                 selector: 'valtimo-connector-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<div class=\"main-content pt-0\" *ngIf=\"{\n    connectorInstances: connectorInstances$ | async,\n    fields: fields$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async\n  } as obs\">\n  <div class=\"container-fluid\">\n    <ng-container *ngTemplateOutlet=\"buttons;context:{loading: obs.loading}\"></ng-container>\n    <valtimo-widget *ngIf=\"obs.loading === false; else loading\">\n      <valtimo-list\n        [items]=\"obs.connectorInstances\"\n        [fields]=\"obs.fields\"\n        [header]=\"true\"\n        [viewMode]=\"true\"\n        [isSearchable]=\"false\"\n        [pagination]=\"obs.pagination\"\n        paginationIdentifier=\"connectorManagementList\"\n        (paginationClicked)=\"paginationClicked($event)\"\n        (paginationSet)=\"paginationSet($event)\"\n        (rowClicked)=\"rowClicked($event)\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">{{ 'connectorManagement.title' | translate }}</h3>\n          <h5 class=\"list-header-description\">{{ 'connectorManagement.subtitle' | translate }}</h5>\n        </div>\n      </valtimo-list>\n    </valtimo-widget>\n  </div>\n</div>\n\n<valtimo-connector-modal [modalType]=\"modalType$ | async\">\n</valtimo-connector-modal>\n\n<ng-template #buttons let-loading=\"loading\">\n  <div class=\"btn-group mt-m3px mb-3 float-right\">\n    <button class=\"btn btn-primary btn-space mr-0\" [disabled]=\"loading\" (click)=\"showAddModal()\">\n      <i class=\"icon mdi mdi-plus\"></i>&nbsp;\n      {{ 'connectorManagement.add' | translate }}\n    </button>\n  </div>\n  <div class=\"clearfix\"></div>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n",
+                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<div\n  class=\"main-content pt-0\"\n  *ngIf=\"{\n    connectorInstances: connectorInstances$ | async,\n    fields: fields$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid\">\n    <ng-container *ngTemplateOutlet=\"buttons; context: {loading: obs.loading}\"></ng-container>\n    <valtimo-widget *ngIf=\"obs.loading === false; else loading\">\n      <valtimo-list\n        [items]=\"obs.connectorInstances\"\n        [fields]=\"obs.fields\"\n        [header]=\"true\"\n        [viewMode]=\"true\"\n        [isSearchable]=\"false\"\n        [pagination]=\"obs.pagination\"\n        paginationIdentifier=\"connectorManagementList\"\n        (paginationClicked)=\"paginationClicked($event)\"\n        (paginationSet)=\"paginationSet($event)\"\n        (rowClicked)=\"rowClicked($event)\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">{{ 'connectorManagement.title' | translate }}</h3>\n          <h5 class=\"list-header-description\">{{ 'connectorManagement.subtitle' | translate }}</h5>\n        </div>\n      </valtimo-list>\n    </valtimo-widget>\n  </div>\n</div>\n\n<valtimo-connector-modal [modalType]=\"modalType$ | async\"> </valtimo-connector-modal>\n\n<ng-template #buttons let-loading=\"loading\">\n  <div class=\"btn-group mt-m3px mb-3 float-right\">\n    <button class=\"btn btn-primary btn-space mr-0\" [disabled]=\"loading\" (click)=\"showAddModal()\">\n      <i class=\"icon mdi mdi-plus\"></i>&nbsp;\n      {{ 'connectorManagement.add' | translate }}\n    </button>\n  </div>\n  <div class=\"clearfix\"></div>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\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 */"]
             },] }
 ];
@@ -258,7 +283,7 @@ const routes = [
         path: 'connectors',
         component: ConnectorManagementComponent,
         canActivate: [AuthGuardService],
-        data: ɵ0
+        data: ɵ0,
     },
 ];
 class ConnectorManagementRoutingModule {
@@ -266,11 +291,8 @@ class ConnectorManagementRoutingModule {
 ConnectorManagementRoutingModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [],
-                imports: [
-                    CommonModule,
-                    RouterModule.forChild(routes),
-                ],
-                exports: [RouterModule]
+                imports: [CommonModule, RouterModule.forChild(routes)],
+                exports: [RouterModule],
             },] }
 ];
 
@@ -311,7 +333,7 @@ class ObjectApiSyncService {
 ObjectApiSyncService.ɵprov = ɵɵdefineInjectable({ factory: function ObjectApiSyncService_Factory() { return new ObjectApiSyncService(ɵɵinject(HttpClient), ɵɵinject(ConfigService)); }, token: ObjectApiSyncService, providedIn: "root" });
 ObjectApiSyncService.decorators = [
     { type: Injectable, args: [{
-                providedIn: 'root'
+                providedIn: 'root',
             },] }
 ];
 ObjectApiSyncService.ctorParameters = () => [
@@ -350,26 +372,27 @@ class ConnectorLinkExtensionModalComponent {
         });
         this.pageSizes$ = new BehaviorSubject({
             collectionSize: 0,
-            maxPaginationItemSize: 5
+            maxPaginationItemSize: 5,
         });
-        this.pagination$ = combineLatest([this.currentPageAndSize$, this.pageSizes$])
-            .pipe(map(([currentPage, sizes]) => (Object.assign(Object.assign(Object.assign({}, currentPage), sizes), { page: currentPage.page + 1 }))));
+        this.pagination$ = combineLatest([
+            this.currentPageAndSize$,
+            this.pageSizes$,
+        ]).pipe(map(([currentPage, sizes]) => (Object.assign(Object.assign(Object.assign({}, currentPage), sizes), { page: currentPage.page + 1 }))));
         this.connectorInstances$ = combineLatest([
             this.currentPageAndSize$,
             this.connectorManagementService.getConnectorTypes(),
             this.translateService.stream('key'),
-            this.stateService.refresh$
-        ])
-            .pipe(tap(() => this.setFields()), switchMap(([currentPage, types]) => this.connectorManagementService.getConnectorInstancesByType(types.find((type) => type.name.toLowerCase().includes('objectsapi')).id, { page: currentPage.page, size: currentPage.size })), tap((instanceRes) => {
-            this.pageSizes$.pipe(take(1)).subscribe((sizes) => {
+            this.stateService.refresh$,
+        ]).pipe(tap(() => this.setFields()), switchMap(([currentPage, types]) => this.connectorManagementService.getConnectorInstancesByType(types.find(type => type.name.toLowerCase().includes('objectsapi')).id, { page: currentPage.page, size: currentPage.size })), tap(instanceRes => {
+            this.pageSizes$.pipe(take(1)).subscribe(sizes => {
                 this.pageSizes$.next(Object.assign(Object.assign({}, sizes), { collectionSize: instanceRes.totalElements }));
             });
-        }), map((res) => res.content), tap(() => this.loading$.next(false)));
-        this.noObjectsApiConnectors$ = this.connectorInstances$.pipe(map((instances) => !instances || instances.length === 0));
+        }), map(res => res.content), tap(() => this.loading$.next(false)));
+        this.noObjectsApiConnectors$ = this.connectorInstances$.pipe(map(instances => !instances || instances.length === 0));
         this.disabled$ = this.stateService.inputDisabled$;
     }
     ngAfterViewInit() {
-        this.showSubscription = this.stateService.showExtensionModal$.subscribe((show) => {
+        this.showSubscription = this.stateService.showExtensionModal$.subscribe(show => {
             if (show) {
                 this.show();
             }
@@ -383,13 +406,13 @@ class ConnectorLinkExtensionModalComponent {
         (_a = this.showSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
     paginationClicked(newPageNumber) {
-        this.currentPageAndSize$.pipe(take(1)).subscribe((currentPage) => {
+        this.currentPageAndSize$.pipe(take(1)).subscribe(currentPage => {
             this.currentPageAndSize$.next(Object.assign(Object.assign({}, currentPage), { page: newPageNumber - 1 }));
         });
     }
     paginationSet(newPageSize) {
         if (newPageSize) {
-            this.currentPageAndSize$.pipe(take(1)).subscribe((currentPage) => {
+            this.currentPageAndSize$.pipe(take(1)).subscribe(currentPage => {
                 this.currentPageAndSize$.next(Object.assign(Object.assign({}, currentPage), { size: newPageSize }));
             });
         }
@@ -403,8 +426,9 @@ class ConnectorLinkExtensionModalComponent {
         const splitObjectTypeUrl = objectTypeUrl === null || objectTypeUrl === void 0 ? void 0 : objectTypeUrl.split('/');
         const objectTypeId = splitObjectTypeUrl[splitObjectTypeUrl.length - 1];
         this.stateService.disableInput();
-        this.objectApiSyncService.createObjectSyncConfig({ connectorInstanceId, enabled, documentDefinitionName, objectTypeId })
-            .subscribe((res) => {
+        this.objectApiSyncService
+            .createObjectSyncConfig({ connectorInstanceId, enabled, documentDefinitionName, objectTypeId })
+            .subscribe(res => {
             this.alertService.success(this.translateService.instant('connectorManagement.extension.addSyncSuccess'));
             this.stateService.hideExtensionModal();
             this.stateService.enableInput();
@@ -417,7 +441,7 @@ class ConnectorLinkExtensionModalComponent {
     setFields() {
         const getTranslatedLabel = (key) => this.translateService.instant(`connectorManagement.labels.${key}`);
         const keys = ['name'];
-        this.fields$.next(keys.map((key) => ({ label: getTranslatedLabel(key), key })));
+        this.fields$.next(keys.map(key => ({ label: getTranslatedLabel(key), key })));
     }
     show() {
         this.modal.show();
@@ -429,7 +453,7 @@ class ConnectorLinkExtensionModalComponent {
 ConnectorLinkExtensionModalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'valtimo-connector-link-extension-modal',
-                template: "<valtimo-modal #modal [title]=\"'connectorManagement.extension.buttonText'| translate\">\n  <div class=\"mt-2\" body *ngIf=\"{\n    connectorInstances: connectorInstances$ | async,\n    fields: fields$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async,\n    noConnectors: noObjectsApiConnectors$ | async\n  } as obs\">\n    <div *ngIf=\"obs.loading === false; else loading\" [ngClass]=\"{disabled: obs.disabled }\">\n      <ng-container *ngIf=\"!obs.noConnectors; else noConnectors\">\n        <p class=\"lead\">{{'connectorManagement.extension.clickToSync' | translate}}</p>\n        <valtimo-widget>\n          <valtimo-list\n                  [items]=\"obs.connectorInstances\"\n                  [fields]=\"obs.fields\"\n                  [header]=\"false\"\n                  [viewMode]=\"false\"\n                  [isSearchable]=\"false\"\n                  [pagination]=\"obs.pagination\"\n                  paginationIdentifier=\"connectorManagementList\"\n                  (paginationClicked)=\"paginationClicked($event)\"\n                  (paginationSet)=\"paginationSet($event)\"\n                  (rowClicked)=\"rowClicked($event)\"\n          >\n            <div header>\n              <h3 class=\"list-header-title\">{{ 'connectorManagement.title' | translate }}</h3>\n              <h5 class=\"list-header-description\">{{ 'connectorManagement.subtitle' | translate }}</h5>\n            </div>\n          </valtimo-list>\n        </valtimo-widget>\n      </ng-container>\n    </div>\n  </div>\n</valtimo-modal>\n\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #noConnectors>\n  <p class=\"lead\">{{'connectorManagement.extension.noConnectors' | translate}}</p>\n</ng-template>\n",
+                template: "<valtimo-modal #modal [title]=\"'connectorManagement.extension.buttonText' | translate\">\n  <div\n    class=\"mt-2\"\n    body\n    *ngIf=\"{\n      connectorInstances: connectorInstances$ | async,\n      fields: fields$ | async,\n      pagination: pagination$ | async,\n      loading: loading$ | async,\n      disabled: disabled$ | async,\n      noConnectors: noObjectsApiConnectors$ | async\n    } as obs\"\n  >\n    <div *ngIf=\"obs.loading === false; else loading\" [ngClass]=\"{disabled: obs.disabled}\">\n      <ng-container *ngIf=\"!obs.noConnectors; else noConnectors\">\n        <p class=\"lead\">{{ 'connectorManagement.extension.clickToSync' | translate }}</p>\n        <valtimo-widget>\n          <valtimo-list\n            [items]=\"obs.connectorInstances\"\n            [fields]=\"obs.fields\"\n            [header]=\"false\"\n            [viewMode]=\"false\"\n            [isSearchable]=\"false\"\n            [pagination]=\"obs.pagination\"\n            paginationIdentifier=\"connectorManagementList\"\n            (paginationClicked)=\"paginationClicked($event)\"\n            (paginationSet)=\"paginationSet($event)\"\n            (rowClicked)=\"rowClicked($event)\"\n          >\n            <div header>\n              <h3 class=\"list-header-title\">{{ 'connectorManagement.title' | translate }}</h3>\n              <h5 class=\"list-header-description\">\n                {{ 'connectorManagement.subtitle' | translate }}\n              </h5>\n            </div>\n          </valtimo-list>\n        </valtimo-widget>\n      </ng-container>\n    </div>\n  </div>\n</valtimo-modal>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #noConnectors>\n  <p class=\"lead\">{{ 'connectorManagement.extension.noConnectors' | translate }}</p>\n</ng-template>\n",
                 styles: [".disabled{filter:grayscale(1);opacity:.8;pointer-events:none}"]
             },] }
 ];
@@ -471,8 +495,10 @@ class AddConnectorComponent {
         this.disabled$ = this.stateService.inputDisabled$;
     }
     ngOnInit() {
-        this.refreshSubscription = combineLatest([this.stateService.showModal$, this.stateService.refresh$])
-            .subscribe(() => {
+        this.refreshSubscription = combineLatest([
+            this.stateService.showModal$,
+            this.stateService.refresh$,
+        ]).subscribe(() => {
             this.goBack();
         });
     }
@@ -487,12 +513,14 @@ class AddConnectorComponent {
         this.selectedConnector$.next(undefined);
     }
     onSave(event) {
-        this.selectedConnector$.pipe(take(1)).subscribe((selectedConnectorType) => {
-            this.connectorManagementService.createConnectorInstance({
+        this.selectedConnector$.pipe(take(1)).subscribe(selectedConnectorType => {
+            this.connectorManagementService
+                .createConnectorInstance({
                 name: event.name,
                 typeId: selectedConnectorType.id,
-                connectorProperties: event.properties
-            }).subscribe(() => {
+                connectorProperties: event.properties,
+            })
+                .subscribe(() => {
                 this.alertService.success(this.translateService.instant('connectorManagement.messages.addSuccess'));
                 this.stateService.hideModal();
                 this.stateService.enableInput();
@@ -506,7 +534,7 @@ class AddConnectorComponent {
 AddConnectorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'valtimo-add-connector',
-                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=\"connectorTypes$ | async as connectorTypes; else loading\">\n  <ng-container *ngIf=\"(selectedConnector$ | async) === undefined; else configure\">\n    <p class=\"lead\">\n      {{'connectorManagement.' + (connectorTypes?.length > 0 ? 'addHeader' : 'noConnectorsAvailable') | translate}}\n    </p>\n    <div class=\"cards-container mt-3\">\n      <div *ngFor=\"let connectorType of connectorTypes\" class=\"card card-border text-center\">\n        <div class=\"card-header\">{{connectorType.name}}</div>\n        <div class=\"card-body\">\n          <button class=\"btn btn-primary\" (click)=\"selectConnector(connectorType)\">\n            {{'connectorManagement.configureButton' | translate}}\n          </button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #configure>\n  <ng-container *ngIf=\"selectedConnector$ | async as connector\">\n    <button class=\"btn btn-outline-secondary btn-sm btn-back\" (click)=\"goBack()\" [disabled]=\"disabled$ | async\">\n      <i class=\"icon mdi mdi-arrow-left mr-1\"></i>\n      {{'connectorManagement.goBack' | translate}}\n    </button>\n    <p class=\"lead text-center mb-3 pb-3 border-bottom\">\n      {{('connectorManagement.configureWith' | translate) + ' ' + connector.name}}\n    </p>\n    <valtimo-edit-connector-form\n      [connectorName]=\"connector.name\"\n      [properties]=\"(selectedConnector$ | async).properties\"\n      (propertiesSave)=\"onSave($event)\"\n    >\n    </valtimo-edit-connector-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n",
+                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=\"connectorTypes$ | async as connectorTypes; else loading\">\n  <ng-container *ngIf=\"(selectedConnector$ | async) === undefined; else configure\">\n    <p class=\"lead\">\n      {{\n        'connectorManagement.' +\n          (connectorTypes?.length > 0 ? 'addHeader' : 'noConnectorsAvailable') | translate\n      }}\n    </p>\n    <div class=\"cards-container mt-3\">\n      <div *ngFor=\"let connectorType of connectorTypes\" class=\"card card-border text-center\">\n        <div class=\"card-header\">{{ connectorType.name }}</div>\n        <div class=\"card-body\">\n          <button class=\"btn btn-primary\" (click)=\"selectConnector(connectorType)\">\n            {{ 'connectorManagement.configureButton' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #configure>\n  <ng-container *ngIf=\"selectedConnector$ | async as connector\">\n    <button\n      class=\"btn btn-outline-secondary btn-sm btn-back\"\n      (click)=\"goBack()\"\n      [disabled]=\"disabled$ | async\"\n    >\n      <i class=\"icon mdi mdi-arrow-left mr-1\"></i>\n      {{ 'connectorManagement.goBack' | translate }}\n    </button>\n    <p class=\"lead text-center mb-3 pb-3 border-bottom\">\n      {{ ('connectorManagement.configureWith' | translate) + ' ' + connector.name }}\n    </p>\n    <valtimo-edit-connector-form\n      [connectorName]=\"connector.name\"\n      [properties]=\"(selectedConnector$ | async).properties\"\n      (propertiesSave)=\"onSave($event)\"\n    >\n    </valtimo-edit-connector-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\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{margin-right:30px;width:calc(33.3% - 20px)}.card:nth-child(3n+3){margin-right:0}.card-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}"]
             },] }
 ];
@@ -541,13 +569,15 @@ class ModifyConnectorComponent {
         this.instance$ = this.stateService.selectedInstance$;
     }
     onSave(event) {
-        this.instance$.pipe(take(1)).subscribe((instance) => {
-            this.connectorManagementService.updateConnectorInstance({
+        this.instance$.pipe(take(1)).subscribe(instance => {
+            this.connectorManagementService
+                .updateConnectorInstance({
                 name: event.name,
                 typeId: instance.type.id,
                 id: instance.id,
-                connectorProperties: event.properties
-            }).subscribe(() => {
+                connectorProperties: event.properties,
+            })
+                .subscribe(() => {
                 this.alertService.success(this.translateService.instant('connectorManagement.messages.modifySuccess'));
                 this.stateService.hideModal();
                 this.stateService.enableInput();
@@ -558,7 +588,7 @@ class ModifyConnectorComponent {
         });
     }
     onDelete() {
-        this.instance$.pipe(take(1)).subscribe((instance) => {
+        this.instance$.pipe(take(1)).subscribe(instance => {
             this.connectorManagementService.deleteConnectorInstance(instance.id).subscribe(() => {
                 this.alertService.success(this.translateService.instant('connectorManagement.messages.deleteSuccess'));
                 this.stateService.hideModal();
@@ -573,7 +603,7 @@ class ModifyConnectorComponent {
 ModifyConnectorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'valtimo-modify-connector',
-                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=\"instance$ | async as instance\">\n  <p class=\"lead text-center mb-3 pb-3 border-bottom\">\n    {{('connectorManagement.modifyWith' | translate) + ' ' + instance.type.name}}\n  </p>\n  <valtimo-edit-connector-form\n    [properties]=\"instance.properties\"\n    [withDefaults]=\"true\"\n    [defaultName]=\"instance.name\"\n    [showDeleteButton]=\"true\"\n    [connectorName]=\"instance.type.name\"\n    (propertiesSave)=\"onSave($event)\"\n    (connectorDelete)=\"onDelete()\"\n  >\n  </valtimo-edit-connector-form>\n</ng-container>\n",
+                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=\"instance$ | async as instance\">\n  <p class=\"lead text-center mb-3 pb-3 border-bottom\">\n    {{ ('connectorManagement.modifyWith' | translate) + ' ' + instance.type.name }}\n  </p>\n  <valtimo-edit-connector-form\n    [properties]=\"instance.properties\"\n    [withDefaults]=\"true\"\n    [defaultName]=\"instance.name\"\n    [showDeleteButton]=\"true\"\n    [connectorName]=\"instance.type.name\"\n    (propertiesSave)=\"onSave($event)\"\n    (connectorDelete)=\"onDelete()\"\n  >\n  </valtimo-edit-connector-form>\n</ng-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 */"]
             },] }
 ];
@@ -604,7 +634,7 @@ class ConnectorModalComponent {
         this.stateService = stateService;
     }
     ngAfterViewInit() {
-        this.showSubscription = this.stateService.showModal$.subscribe((show) => {
+        this.showSubscription = this.stateService.showModal$.subscribe(show => {
             if (show) {
                 this.show();
             }
@@ -664,10 +694,14 @@ class EditConnectorPropertiesComponent {
         this.modifiedProperties$ = new BehaviorSubject(undefined);
         this.editFields$ = new BehaviorSubject([]);
         this.connectorName$ = new BehaviorSubject('');
-        this.saveButtonDisabled$ = combineLatest([this.editFields$, this.modifiedProperties$, this.connectorName$]).pipe(map(([editFields, modifiedProperties, connectorName]) => {
-            const values = editFields.map((field) => get(modifiedProperties, field.key));
-            const validValues = values.filter((value) => Array.isArray(value) ? value.length > 0 : value === 0 || value);
-            return (editFields.length !== validValues.length) || !connectorName;
+        this.saveButtonDisabled$ = combineLatest([
+            this.editFields$,
+            this.modifiedProperties$,
+            this.connectorName$,
+        ]).pipe(map(([editFields, modifiedProperties, connectorName]) => {
+            const values = editFields.map(field => get(modifiedProperties, field.key));
+            const validValues = values.filter(value => Array.isArray(value) ? value.length > 0 : value === 0 || value);
+            return editFields.length !== validValues.length || !connectorName;
         }));
         this.disabled$ = this.stateService.inputDisabled$;
     }
@@ -680,13 +714,13 @@ class EditConnectorPropertiesComponent {
         this.setName();
     }
     multiFieldValuesSet(event) {
-        this.modifiedProperties$.pipe(take(1)).subscribe((properties) => {
+        this.modifiedProperties$.pipe(take(1)).subscribe(properties => {
             set(properties, event.editFieldKey, event.values);
             this.modifiedProperties$.next(properties);
         });
     }
     onSingleValueChange(value, editField) {
-        this.modifiedProperties$.pipe(take(1)).subscribe((properties) => {
+        this.modifiedProperties$.pipe(take(1)).subscribe(properties => {
             set(properties, editField.key, editField.editType === 'string' ? value.trim() : parseInt(value, 10));
             this.modifiedProperties$.next(properties);
         });
@@ -697,7 +731,8 @@ class EditConnectorPropertiesComponent {
     onSave() {
         this.stateService.disableInput();
         combineLatest([this.modifiedProperties$, this.connectorName$])
-            .pipe(take(1)).subscribe(([properties, name]) => {
+            .pipe(take(1))
+            .subscribe(([properties, name]) => {
             this.propertiesSave.emit({ properties, name });
         });
     }
@@ -716,7 +751,7 @@ class EditConnectorPropertiesComponent {
     setModifiedProperties(editFields) {
         const propertiesCopy = cloneDeep(this.properties);
         if (!this.withDefaults) {
-            editFields.forEach((editField) => {
+            editFields.forEach(editField => {
                 set(propertiesCopy, editField.key, undefined);
             });
         }
@@ -726,9 +761,8 @@ class EditConnectorPropertiesComponent {
         const editFields = [];
         const keysToFilter = ['className'];
         const handlePropertyLevel = (propertyLevel, previousKeys) => {
-            const propertyLevelKeys = Object.keys(propertyLevel)
-                .filter((key) => !keysToFilter.includes(key));
-            propertyLevelKeys.forEach((key) => {
+            const propertyLevelKeys = Object.keys(propertyLevel).filter(key => !keysToFilter.includes(key));
+            propertyLevelKeys.forEach(key => {
                 const propertyValue = propertyLevel[key];
                 const baseEditField = Object.assign({ key: previousKeys + key }, (this.withDefaults && { defaultValue: propertyValue }));
                 if (typeof propertyValue === 'number') {
@@ -758,7 +792,7 @@ class EditConnectorPropertiesComponent {
 EditConnectorPropertiesComponent.decorators = [
     { type: Component, args: [{
                 selector: 'valtimo-edit-connector-properties',
-                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<div class=\"edit-fields\" *ngIf=\"{editFields: editFields$ | async, disabled: disabled$ | async} as obs\">\n  <ng-container *ngTemplateOutlet=\"nameInput;context:{disabled: obs.disabled}\"></ng-container>\n  <ng-container *ngFor=\"let editField of obs.editFields\">\n    <ng-container *ngIf=\"editField.editType === 'string' || editField.editType === 'number'\">\n      <ng-container *ngTemplateOutlet=\"singleInput;context:{editField: editField, disabled: obs.disabled}\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"editField.editType === 'string[]' || editField.editType === 'number[]'\">\n      <valtimo-multi-value-connector-property\n        [editField]=\"editField\"\n        (valuesSet)=\"multiFieldValuesSet($event)\"\n        [disabled]=\"obs.disabled\"\n        [defaultValue]=\"withDefaults && editField.defaultValue\"\n      >\n      </valtimo-multi-value-connector-property>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngTemplateOutlet=\"buttons;context:{disabled: obs.disabled}\"></ng-container>\n</div>\n\n<ng-template #nameInput let-disabled=\"disabled\">\n  <div class=\"form-group row\">\n    <label class=\"col-3 col-form-label text-sm-right\">\n      {{'connectorManagement.inputLabels.connectorName' | translate}}\n    </label>\n    <div class=\"col-7\">\n      <input\n        class=\"form-control\"\n        type=\"text\"\n        (input)=\"onNameValueChange($event.target.value)\"\n        [disabled]=\"disabled\"\n        [value]=\"(withDefaults && defaultName) ? defaultName : ''\"\n      >\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #singleInput let-editField=\"editField\" let-disabled=\"disabled\">\n  <div class=\"form-group row\">\n    <label class=\"col-3 col-form-label text-sm-right\">\n      {{'connectorManagement.inputLabels.' + editField.key | translate}}\n    </label>\n    <div class=\"col-7\">\n      <input\n        *ngIf=\"editField.editType === 'string'\"\n        class=\"form-control\"\n        type=\"text\"\n        (input)=\"onSingleValueChange($event.target.value, editField)\"\n        [disabled]=\"disabled\"\n        [value]=\"withDefaults ? editField.defaultValue : ''\"\n      >\n      <input\n        *ngIf=\"editField.editType === 'number'\"\n        class=\"form-control\"\n        type=\"number\"\n        step=\"1\"\n        min=\"0\"\n        oninput=\"validity.valid||(value='');\"\n        (input)=\"onSingleValueChange($event.target.value, editField)\"\n        [disabled]=\"disabled\"\n        [value]=\"withDefaults ? editField.defaultValue : ''\"\n      >\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #buttons let-disabled=\"disabled\">\n  <div class=\"border-top mt-3 pt-6\">\n    <div class=\"button-container\">\n      <button class=\"btn btn-primary\" [disabled]=\"disabled || (saveButtonDisabled$ | async)\" (click)=\"onSave()\">\n        <i class=\"icon mdi mdi-save mr-1\"></i>\n        {{'connectorManagement.save' | translate}}\n      </button>\n      <button *ngIf=\"showDeleteButton\" class=\"btn btn-danger btn-space\" (click)=\"onDelete()\" [disabled]=\"disabled\">\n        <i class=\"icon mdi mdi-delete mr-1\"></i>\n        {{'connectorManagement.remove' | translate}}\n      </button>\n    </div>\n  </div>\n</ng-template>\n",
+                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<div\n  class=\"edit-fields\"\n  *ngIf=\"{editFields: editFields$ | async, disabled: disabled$ | async} as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"nameInput; context: {disabled: obs.disabled}\"></ng-container>\n  <ng-container *ngFor=\"let editField of obs.editFields\">\n    <ng-container *ngIf=\"editField.editType === 'string' || editField.editType === 'number'\">\n      <ng-container\n        *ngTemplateOutlet=\"singleInput; context: {editField: editField, disabled: obs.disabled}\"\n      ></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"editField.editType === 'string[]' || editField.editType === 'number[]'\">\n      <valtimo-multi-value-connector-property\n        [editField]=\"editField\"\n        (valuesSet)=\"multiFieldValuesSet($event)\"\n        [disabled]=\"obs.disabled\"\n        [defaultValue]=\"withDefaults && editField.defaultValue\"\n      >\n      </valtimo-multi-value-connector-property>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngTemplateOutlet=\"buttons; context: {disabled: obs.disabled}\"></ng-container>\n</div>\n\n<ng-template #nameInput let-disabled=\"disabled\">\n  <div class=\"form-group row\">\n    <label class=\"col-3 col-form-label text-sm-right\">\n      {{ 'connectorManagement.inputLabels.connectorName' | translate }}\n    </label>\n    <div class=\"col-7\">\n      <input\n        class=\"form-control\"\n        type=\"text\"\n        (input)=\"onNameValueChange($event.target.value)\"\n        [disabled]=\"disabled\"\n        [value]=\"withDefaults && defaultName ? defaultName : ''\"\n      />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #singleInput let-editField=\"editField\" let-disabled=\"disabled\">\n  <div class=\"form-group row\">\n    <label class=\"col-3 col-form-label text-sm-right\">\n      {{ 'connectorManagement.inputLabels.' + editField.key | translate }}\n    </label>\n    <div class=\"col-7\">\n      <input\n        *ngIf=\"editField.editType === 'string'\"\n        class=\"form-control\"\n        type=\"text\"\n        (input)=\"onSingleValueChange($event.target.value, editField)\"\n        [disabled]=\"disabled\"\n        [value]=\"withDefaults ? editField.defaultValue : ''\"\n      />\n      <input\n        *ngIf=\"editField.editType === 'number'\"\n        class=\"form-control\"\n        type=\"number\"\n        step=\"1\"\n        min=\"0\"\n        oninput=\"validity.valid||(value='');\"\n        (input)=\"onSingleValueChange($event.target.value, editField)\"\n        [disabled]=\"disabled\"\n        [value]=\"withDefaults ? editField.defaultValue : ''\"\n      />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #buttons let-disabled=\"disabled\">\n  <div class=\"border-top mt-3 pt-6\">\n    <div class=\"button-container\">\n      <button\n        class=\"btn btn-primary\"\n        [disabled]=\"disabled || (saveButtonDisabled$ | async)\"\n        (click)=\"onSave()\"\n      >\n        <i class=\"icon mdi mdi-save mr-1\"></i>\n        {{ 'connectorManagement.save' | translate }}\n      </button>\n      <button\n        *ngIf=\"showDeleteButton\"\n        class=\"btn btn-danger btn-space\"\n        (click)=\"onDelete()\"\n        [disabled]=\"disabled\"\n      >\n        <i class=\"icon mdi mdi-delete mr-1\"></i>\n        {{ 'connectorManagement.remove' | translate }}\n      </button>\n    </div>\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 */.button-container{display:flex;flex-flow:row-reverse;justify-content:space-between;width:100%}"]
             },] }
 ];
@@ -798,16 +832,23 @@ class ConnectorLinkExtensionComponent {
         this.alertService = alertService;
         this.connectorManagementService = connectorManagementService;
         this.loading$ = new BehaviorSubject(true);
-        this.objectApiSyncConfig$ = combineLatest([this.route.params, this.translateService.stream('key'), this.stateService.refresh$]).pipe(switchMap(([params]) => this.objectApiSyncService.getObjectSyncConfigs(params.name)), switchMap((configs) => combineLatest([of(configs),
-            ...configs.map((config) => this.connectorManagementService.getConnectorInstanceById(config.connectorInstanceId).pipe(catchError(() => of(''))))
-        ])), map((results) => {
-            const [, ...instances] = results.filter((result) => result);
-            return results[0]
-                .map((syncConfig) => {
+        this.objectApiSyncConfig$ = combineLatest([
+            this.route.params,
+            this.translateService.stream('key'),
+            this.stateService.refresh$,
+        ]).pipe(switchMap(([params]) => this.objectApiSyncService.getObjectSyncConfigs(params.name)), switchMap(configs => combineLatest([
+            of(configs),
+            ...configs.map(config => this.connectorManagementService
+                .getConnectorInstanceById(config.connectorInstanceId)
+                .pipe(catchError(() => of('')))),
+        ])), map(results => {
+            const [, ...instances] = results.filter(result => result);
+            return results[0].map(syncConfig => {
                 var _a;
-                return (Object.assign(Object.assign({}, syncConfig), { title: ((_a = instances.find((instance) => instance.id === syncConfig.connectorInstanceId)) === null || _a === void 0 ? void 0 : _a.name) || 'Objects API' }));
+                return (Object.assign(Object.assign({}, syncConfig), { title: ((_a = instances.find(instance => instance.id === syncConfig.connectorInstanceId)) === null || _a === void 0 ? void 0 : _a.name) ||
+                        'Objects API' }));
             });
-        }), map((results) => Array.isArray(results) && results.length > 0 ? results[0] : null), tap(() => {
+        }), map(results => (Array.isArray(results) && results.length > 0 ? results[0] : null)), tap(() => {
             this.loading$.next(false);
         }));
         this.disabled$ = this.stateService.inputDisabled$;
@@ -820,7 +861,9 @@ class ConnectorLinkExtensionComponent {
     }
     toggleSync(config) {
         this.stateService.disableInput();
-        this.objectApiSyncService.modifyObjectSyncConfig(Object.assign(Object.assign({}, config), { enabled: !config.enabled })).subscribe(() => {
+        this.objectApiSyncService
+            .modifyObjectSyncConfig(Object.assign(Object.assign({}, config), { enabled: !config.enabled }))
+            .subscribe(() => {
             if (!config.enabled) {
                 this.alertService.success(this.translateService.instant('connectorManagement.extension.addSyncSuccess'));
             }
@@ -847,8 +890,8 @@ class ConnectorLinkExtensionComponent {
 ConnectorLinkExtensionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'valtimo-connector-link-extension',
-                template: "<h2 class=\"mb-4 mt-6\">{{'connectorManagement.extension.title' | translate}}</h2>\n\n<ng-container *ngIf=\"{\n    syncConfig: objectApiSyncConfig$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <ng-container *ngIf=\"obs.syncConfig; else addSync\">\n      <div class=\"card card-border\">\n        <div class=\"card-body\">\n          <h4 class=\"connector-name mr-2\" [ngClass]=\"{'text-success': obs.syncConfig.enabled, 'text-warning': !obs.syncConfig.enabled}\">\n            {{obs.syncConfig.title}}\n          </h4>\n          <div class=\"controls\">\n            <div class=\"switch-button switch-button-success\">\n              <input type=\"checkbox\" [checked]=\"obs.syncConfig.enabled\" [disabled]=\"obs.disabled\" name=\"sync\" id=\"sync\" (click)=\"toggleSync(obs.syncConfig)\">\n              <span><label for=\"sync\"></label></span>\n            </div>\n            <button class=\"btn btn-danger ml-3\" [disabled]=\"obs.disabled\" (click)=\"deleteSync(obs.syncConfig.id)\">\n              <i class=\"fa fa-trash\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<valtimo-connector-link-extension-modal></valtimo-connector-link-extension-modal>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #addSync>\n  <div class=\"text-right mt-5\">\n    <button class=\"btn btn-primary\" (click)=\"openModal()\" [disabled]=\"disabled$ | async\">\n      <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n      {{'connectorManagement.extension.buttonText' | translate}}\n    </button>\n  </div>\n</ng-template>\n",
-                styles: [".card-body{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.connector-name{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{align-items:center;display:flex}"]
+                template: "<h2 class=\"mb-4 mt-6\">{{ 'connectorManagement.extension.title' | translate }}</h2>\n\n<ng-container\n  *ngIf=\"{\n    syncConfig: objectApiSyncConfig$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <ng-container *ngIf=\"obs.syncConfig; else addSync\">\n      <div class=\"card card-border card-contrast\">\n        <div class=\"card-header card-header-contrast card-header-featured\">\n          <div>\n            {{ obs.syncConfig.title }}\n          </div>\n          <div class=\"controls\">\n            <button\n              class=\"btn btn-danger ml-3\"\n              [disabled]=\"obs.disabled\"\n              (click)=\"deleteSync(obs.syncConfig.id)\"\n            >\n              <i class=\"fa fa-trash\"></i>\n            </button>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"setting-row\">\n            Automatisch zaakdetails synchroniseren\n            <div class=\"controls\">\n              <div class=\"switch-button switch-button-success\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"obs.syncConfig.enabled\"\n                  [disabled]=\"obs.disabled\"\n                  name=\"sync\"\n                  id=\"sync\"\n                  (click)=\"toggleSync(obs.syncConfig)\"\n                />\n                <span><label for=\"sync\"></label></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<valtimo-connector-link-extension-modal></valtimo-connector-link-extension-modal>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #addSync>\n  <div class=\"text-right mt-5\">\n    <button class=\"btn btn-primary\" (click)=\"openModal()\" [disabled]=\"disabled$ | async\">\n      <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n      {{ 'connectorManagement.extension.buttonText' | translate }}\n    </button>\n  </div>\n</ng-template>\n",
+                styles: [".card-header,.setting-row{flex-direction:row;justify-content:space-between}.card-header,.controls,.setting-row{align-items:center;display:flex}"]
             },] }
 ];
 ConnectorLinkExtensionComponent.ctorParameters = () => [
@@ -879,11 +922,11 @@ class MultiValueConnectorPropertyComponent {
     constructor() {
         this.valuesSet = new EventEmitter();
         this.amountOfValues$ = new BehaviorSubject([null]);
-        this.removeButtonDisabled$ = this.amountOfValues$.pipe(map((amountOfValues) => amountOfValues.length === 1));
+        this.removeButtonDisabled$ = this.amountOfValues$.pipe(map(amountOfValues => amountOfValues.length === 1));
         this.values$ = new BehaviorSubject({});
         this.addButtonDisabled$ = combineLatest([this.values$, this.amountOfValues$]).pipe(map(([values, amountOfValues]) => {
             const objectValues = Object.values(values);
-            const validObjectValues = objectValues.filter((value) => value === 0 || value);
+            const validObjectValues = objectValues.filter(value => value === 0 || value);
             return amountOfValues.length !== validObjectValues.length;
         }));
     }
@@ -896,17 +939,21 @@ class MultiValueConnectorPropertyComponent {
         (_a = this.valuesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
     onValueChange(value, editField, index) {
-        this.values$.pipe(take(1)).subscribe((values) => {
-            this.values$.next(Object.assign(Object.assign({}, values), { [index]: editField.editType === 'string[]' ? value.trim() : parseInt(value, 10) }));
+        this.values$.pipe(take(1)).subscribe(values => {
+            this.values$.next(Object.assign(Object.assign({}, values), { [index]: editField.editType === 'string[]'
+                    ? value.trim()
+                    : parseInt(value, 10) }));
         });
     }
     addRow() {
-        this.amountOfValues$.pipe(take(1)).subscribe((amountOfValues) => {
+        this.amountOfValues$.pipe(take(1)).subscribe(amountOfValues => {
             this.amountOfValues$.next([...amountOfValues, null]);
         });
     }
     removeRow() {
-        combineLatest([this.values$, this.amountOfValues$]).pipe(take(1)).subscribe(([values, amountOfValues]) => {
+        combineLatest([this.values$, this.amountOfValues$])
+            .pipe(take(1))
+            .subscribe(([values, amountOfValues]) => {
             const lastValueIndex = amountOfValues.length - 1;
             const valuesCopy = Object.assign({}, values);
             delete valuesCopy[lastValueIndex];
@@ -915,16 +962,16 @@ class MultiValueConnectorPropertyComponent {
         });
     }
     openValuesSubscription() {
-        this.valuesSubscription = this.values$.subscribe((values) => {
+        this.valuesSubscription = this.values$.subscribe(values => {
             this.valuesSet.emit({
                 editFieldKey: this.editField.key,
-                values: Object.values(values).filter((value) => value === 0 || value)
+                values: Object.values(values).filter(value => value === 0 || value),
             });
         });
     }
     setDefaults() {
         const defaultValue = this.defaultValue;
-        const validValues = Array.isArray(defaultValue) && defaultValue.filter((value) => value === 0 || value);
+        const validValues = Array.isArray(defaultValue) && defaultValue.filter(value => value === 0 || value);
         if (validValues && validValues.length > 0) {
             const valuesObject = {};
             validValues.forEach((value, index) => {
@@ -938,7 +985,7 @@ class MultiValueConnectorPropertyComponent {
 MultiValueConnectorPropertyComponent.decorators = [
     { type: Component, args: [{
                 selector: 'valtimo-multi-value-connector-property',
-                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<div\n  class=\"form-group row\"\n  *ngIf=\"{amountOfValues: amountOfValues$ | async, values: values$ | async} as obs\"\n>\n  <label class=\"col-3 col-form-label text-sm-right\">\n    {{'connectorManagement.inputLabels.' + editField.key | translate}}\n  </label>\n  <div class=\"col-7\">\n    <ng-container *ngFor=\"let value of obs.amountOfValues; let index = index\">\n      <ng-container *ngTemplateOutlet=\"input;context:{index: index, disabled: disabled, values: obs.values}\">\n      </ng-container>\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"buttons;context:{disabled: disabled}\"></ng-container>\n  </div>\n</div>\n\n<ng-template #input let-index=\"index\" let-disabled=\"disabled\" let-values=\"values\">\n  <input\n    *ngIf=\"editField.editType === 'string[]'\"\n    class=\"form-control mb-2\"\n    type=\"text\"\n    (input)=\"onValueChange($event.target.value, editField, index)\"\n    [disabled]=\"disabled\"\n    [value]=\"(defaultValue && values[index]) ? values[index] : ''\"\n  >\n  <input\n    *ngIf=\"editField.editType === 'number[]'\"\n    class=\"form-control mb-2\"\n    type=\"number\"\n    step=\"1\"\n    min=\"0\"\n    oninput=\"validity.valid||(value='');\"\n    (input)=\"onValueChange($event.target.value, editField, index)\"\n    [disabled]=\"disabled\"\n    [value]=\"(defaultValue && values[index]) ? values[index] : ''\"\n  >\n</ng-template>\n\n<ng-template #buttons let-disabled=\"disabled\">\n  <div class=\"button-container mt-1\">\n    <button class=\"btn btn-danger btn-space btn-sm\" (click)=\"removeRow()\" [disabled]=\"disabled || (removeButtonDisabled$ | async)\">\n      <i class=\"icon mdi mdi-delete mr-1\"></i>\n      {{'connectorManagement.removeValue' | translate}}\n    </button>\n    <button class=\"btn btn-secondary btn-space mr-0 btn-sm\" (click)=\"addRow()\" [disabled]=\"disabled || (addButtonDisabled$ | async)\">\n      <i class=\"icon mdi mdi-plus mr-1\"></i>\n      {{'connectorManagement.addValue' | translate}}\n    </button>\n  </div>\n</ng-template>\n",
+                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<div\n  class=\"form-group row\"\n  *ngIf=\"{amountOfValues: amountOfValues$ | async, values: values$ | async} as obs\"\n>\n  <label class=\"col-3 col-form-label text-sm-right\">\n    {{ 'connectorManagement.inputLabels.' + editField.key | translate }}\n  </label>\n  <div class=\"col-7\">\n    <ng-container *ngFor=\"let value of obs.amountOfValues; let index = index\">\n      <ng-container\n        *ngTemplateOutlet=\"input; context: {index: index, disabled: disabled, values: obs.values}\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"buttons; context: {disabled: disabled}\"></ng-container>\n  </div>\n</div>\n\n<ng-template #input let-index=\"index\" let-disabled=\"disabled\" let-values=\"values\">\n  <input\n    *ngIf=\"editField.editType === 'string[]'\"\n    class=\"form-control mb-2\"\n    type=\"text\"\n    (input)=\"onValueChange($event.target.value, editField, index)\"\n    [disabled]=\"disabled\"\n    [value]=\"defaultValue && values[index] ? values[index] : ''\"\n  />\n  <input\n    *ngIf=\"editField.editType === 'number[]'\"\n    class=\"form-control mb-2\"\n    type=\"number\"\n    step=\"1\"\n    min=\"0\"\n    oninput=\"validity.valid||(value='');\"\n    (input)=\"onValueChange($event.target.value, editField, index)\"\n    [disabled]=\"disabled\"\n    [value]=\"defaultValue && values[index] ? values[index] : ''\"\n  />\n</ng-template>\n\n<ng-template #buttons let-disabled=\"disabled\">\n  <div class=\"button-container mt-1\">\n    <button\n      class=\"btn btn-danger btn-space btn-sm\"\n      (click)=\"removeRow()\"\n      [disabled]=\"disabled || (removeButtonDisabled$ | async)\"\n    >\n      <i class=\"icon mdi mdi-delete mr-1\"></i>\n      {{ 'connectorManagement.removeValue' | translate }}\n    </button>\n    <button\n      class=\"btn btn-secondary btn-space mr-0 btn-sm\"\n      (click)=\"addRow()\"\n      [disabled]=\"disabled || (addButtonDisabled$ | async)\"\n    >\n      <i class=\"icon mdi mdi-plus mr-1\"></i>\n      {{ 'connectorManagement.addValue' | translate }}\n    </button>\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 */.button-container{display:flex;justify-content:flex-end;width:100%}"]
             },] }
 ];
@@ -949,13 +996,16 @@ MultiValueConnectorPropertyComponent.propDecorators = {
     valuesSet: [{ type: Output }]
 };
 
+const ɵ0$1 = {
+    custom: "values = window['productRequestDefinitions'][row.caseDefinitionKey] || []",
+};
 const editProductAanvragenConnectorForm = {
     display: 'wizard',
     settings: {
         pdf: {
             id: '1ec0f8ee-6685-5d98-a847-26f67b67d6f0',
-            src: 'https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0'
-        }
+            src: 'https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0',
+        },
     },
     components: [
         {
@@ -964,7 +1014,7 @@ const editProductAanvragenConnectorForm = {
             buttonSettings: {
                 previous: true,
                 cancel: true,
-                next: true
+                next: true,
             },
             navigateOnEnter: false,
             saveOnEnter: false,
@@ -981,35 +1031,35 @@ const editProductAanvragenConnectorForm = {
                     attrs: [
                         {
                             attr: '',
-                            value: ''
-                        }
+                            value: '',
+                        },
                     ],
                     content: 'connectorForm.productaanvraag.step0.tip',
                     refreshOnChange: false,
                     key: 'html4',
                     type: 'htmlelement',
                     input: false,
-                    tableView: false
+                    tableView: false,
                 },
                 {
-                    title: 'connectorForm.productaanvraag.step0.typeMapping.panelTitle',
-                    collapsible: false,
-                    key: 'connectorFormProductaanvraagStep0TypeMappingsPanelTitle',
-                    type: 'panel',
-                    label: 'Panel',
-                    input: false,
-                    tableView: false,
+                    key: 'productAanvraagTypes',
+                    type: 'editgrid',
+                    input: true,
+                    validate: {
+                        minLength: 1,
+                    },
+                    customClass: 'edit-grid-component',
                     components: [
                         {
                             label: 'connectorForm.productaanvraag.step0.typeMapping.productAanvraagType.label',
                             tooltip: 'connectorForm.productaanvraag.step0.typeMapping.productAanvraagType.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'productAanvraagType',
                             type: 'textfield',
-                            input: true
+                            input: true,
                         },
                         {
                             label: 'connectorForm.productaanvraag.step0.typeMapping.caseDefinitionKey.label',
@@ -1017,30 +1067,32 @@ const editProductAanvragenConnectorForm = {
                             placeholder: 'connectorForm.productaanvraag.step0.typeMapping.caseDefinitionKey.placeholder',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'caseDefinitionKey',
                             type: 'select',
-                            input: true
+                            input: true,
                         },
                         {
                             label: 'connectorForm.productaanvraag.step0.typeMapping.processDefinitionKey.label',
                             widget: 'choicesjs',
-                            placeholder: 'connectorForm.productaanvraag.step0.typeMapping.processDefinitionKey.placeholder',
                             tableView: true,
-                            validate: {
-                                required: true
-                            },
+                            dataSrc: 'custom',
+                            data: ɵ0$1,
+                            dataType: 'string',
+                            refreshOn: 'row.caseDefinitionKey',
+                            clearOnRefresh: true,
                             key: 'processDefinitionKey',
                             type: 'select',
                             input: true,
-                            refreshOn: 'caseDefinitionKey',
-                            clearOnRefresh: true,
-                            disabled: true
-                        }
-                    ]
-                }
-            ]
+                            validate: {
+                                required: true,
+                            },
+                            placeholder: 'connectorForm.productaanvraag.step0.typeMapping.processDefinitionKey.placeholder',
+                        },
+                    ],
+                },
+            ],
         },
         {
             title: 'connectorForm.productaanvraag.step1.title',
@@ -1048,7 +1100,7 @@ const editProductAanvragenConnectorForm = {
             buttonSettings: {
                 previous: true,
                 cancel: true,
-                next: true
+                next: true,
             },
             navigateOnEnter: false,
             saveOnEnter: false,
@@ -1065,15 +1117,15 @@ const editProductAanvragenConnectorForm = {
                     attrs: [
                         {
                             attr: '',
-                            value: ''
-                        }
+                            value: '',
+                        },
                     ],
                     content: 'connectorForm.productaanvraag.step1.tip',
                     refreshOnChange: false,
                     key: 'html',
                     type: 'htmlelement',
                     input: false,
-                    tableView: false
+                    tableView: false,
                 },
                 {
                     title: 'connectorForm.productaanvraag.step1.objectsApi.panelTitle',
@@ -1089,24 +1141,24 @@ const editProductAanvragenConnectorForm = {
                             tooltip: 'connectorForm.productaanvraag.step1.objectsApi.url.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'objectsApiUrl',
                             type: 'textfield',
-                            input: true
+                            input: true,
                         },
                         {
                             label: 'connectorForm.productaanvraag.step1.objectsApi.token.label',
                             tooltip: 'connectorForm.productaanvraag.step1.objectsApi.token.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'objectsApiToken',
                             type: 'textfield',
-                            input: true
-                        }
-                    ]
+                            input: true,
+                        },
+                    ],
                 },
                 {
                     title: 'connectorForm.productaanvraag.step1.objectTypesApi.panelTitle',
@@ -1122,26 +1174,26 @@ const editProductAanvragenConnectorForm = {
                             tooltip: 'connectorForm.productaanvraag.step1.objectTypesApi.url.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'objectTypesApiUrl',
                             type: 'textfield',
-                            input: true
+                            input: true,
                         },
                         {
                             label: 'connectorForm.productaanvraag.step1.objectTypesApi.token.label',
                             tooltip: 'connectorForm.productaanvraag.step1.objectTypesApi.token.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'objectTypesApiToken',
                             type: 'textfield',
-                            input: true
-                        }
-                    ]
-                }
-            ]
+                            input: true,
+                        },
+                    ],
+                },
+            ],
         },
         {
             title: 'connectorForm.productaanvraag.step2.title',
@@ -1149,7 +1201,7 @@ const editProductAanvragenConnectorForm = {
             buttonSettings: {
                 previous: true,
                 cancel: true,
-                next: true
+                next: true,
             },
             navigateOnEnter: false,
             saveOnEnter: false,
@@ -1166,15 +1218,15 @@ const editProductAanvragenConnectorForm = {
                     attrs: [
                         {
                             attr: '',
-                            value: ''
-                        }
+                            value: '',
+                        },
                     ],
                     content: 'connectorForm.productaanvraag.step2.tip',
                     refreshOnChange: false,
                     key: 'html2',
                     type: 'htmlelement',
                     input: false,
-                    tableView: false
+                    tableView: false,
                 },
                 {
                     title: 'connectorForm.productaanvraag.step2.objectType.panelTitle',
@@ -1190,48 +1242,48 @@ const editProductAanvragenConnectorForm = {
                             tooltip: 'connectorForm.productaanvraag.step2.objectType.name.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'objectTypeName',
                             type: 'textfield',
-                            input: true
+                            input: true,
                         },
                         {
                             label: 'connectorForm.productaanvraag.step2.objectType.title.label',
                             tooltip: 'connectorForm.productaanvraag.step2.objectType.title.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'objectTypeTitle',
                             type: 'textfield',
-                            input: true
+                            input: true,
                         },
                         {
                             label: 'connectorForm.productaanvraag.step2.objectType.url.label',
                             tooltip: 'connectorForm.productaanvraag.step2.objectType.url.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'objectTypeUrl',
                             type: 'textfield',
-                            input: true
+                            input: true,
                         },
                         {
                             label: 'connectorForm.productaanvraag.step2.objectType.typeVersion.label',
                             tooltip: 'connectorForm.productaanvraag.step2.objectType.typeVersion.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'objectTypeVersion',
                             type: 'textfield',
-                            input: true
-                        }
-                    ]
-                }
-            ]
+                            input: true,
+                        },
+                    ],
+                },
+            ],
         },
         {
             title: 'connectorForm.productaanvraag.step3.title',
@@ -1239,7 +1291,7 @@ const editProductAanvragenConnectorForm = {
             buttonSettings: {
                 previous: true,
                 cancel: true,
-                next: true
+                next: true,
             },
             navigateOnEnter: false,
             saveOnEnter: false,
@@ -1256,15 +1308,15 @@ const editProductAanvragenConnectorForm = {
                     attrs: [
                         {
                             attr: '',
-                            value: ''
-                        }
+                            value: '',
+                        },
                     ],
                     content: 'connectorForm.productaanvraag.step3.tip',
                     refreshOnChange: false,
                     key: 'html1',
                     type: 'htmlelement',
                     input: false,
-                    tableView: false
+                    tableView: false,
                 },
                 {
                     title: 'connectorForm.productaanvraag.step3.openNotifications.panelTitle',
@@ -1280,48 +1332,48 @@ const editProductAanvragenConnectorForm = {
                             tooltip: 'connectorForm.productaanvraag.step3.openNotifications.baseUrl.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'openNotificationsBaseUrl',
                             type: 'textfield',
-                            input: true
+                            input: true,
                         },
                         {
                             label: 'connectorForm.productaanvraag.step3.openNotifications.clientId.label',
                             tooltip: 'connectorForm.productaanvraag.step3.openNotifications.clientId.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'openNotificationsClientId',
                             type: 'textfield',
-                            input: true
+                            input: true,
                         },
                         {
                             label: 'connectorForm.productaanvraag.step3.openNotifications.secret.label',
                             tooltip: 'connectorForm.productaanvraag.step3.openNotifications.secret.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'openNotificationsSecret',
                             type: 'textfield',
-                            input: true
+                            input: true,
                         },
                         {
                             label: 'connectorForm.productaanvraag.step3.openNotifications.callbackBaseUrl.label',
                             tooltip: 'connectorForm.productaanvraag.step3.openNotifications.callbackBaseUrl.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'openNotificationsCallbackBaseUrl',
                             type: 'textfield',
-                            input: true
-                        }
-                    ]
-                }
-            ]
+                            input: true,
+                        },
+                    ],
+                },
+            ],
         },
         {
             title: 'connectorForm.productaanvraag.step4.title',
@@ -1329,7 +1381,7 @@ const editProductAanvragenConnectorForm = {
             buttonSettings: {
                 previous: true,
                 cancel: true,
-                next: true
+                next: true,
             },
             navigateOnEnter: false,
             saveOnEnter: false,
@@ -1346,15 +1398,15 @@ const editProductAanvragenConnectorForm = {
                     attrs: [
                         {
                             attr: '',
-                            value: ''
-                        }
+                            value: '',
+                        },
                     ],
                     content: 'connectorForm.productaanvraag.step4.tip',
                     refreshOnChange: false,
                     key: 'html3',
                     type: 'htmlelement',
                     input: false,
-                    tableView: false
+                    tableView: false,
                 },
                 {
                     title: 'connectorForm.productaanvraag.step4.applicant.panelTitle',
@@ -1370,30 +1422,30 @@ const editProductAanvragenConnectorForm = {
                             attrs: [
                                 {
                                     attr: '',
-                                    value: ''
-                                }
+                                    value: '',
+                                },
                             ],
                             content: 'connectorForm.productaanvraag.step4.applicant.tip',
                             refreshOnChange: false,
                             key: 'html5',
                             type: 'htmlelement',
                             input: false,
-                            tableView: false
+                            tableView: false,
                         },
                         {
                             label: 'connectorForm.productaanvraag.step4.applicant.roleTypeUrl.label',
                             tooltip: 'connectorForm.productaanvraag.step4.applicant.roleTypeUrl.tooltip',
                             tableView: true,
                             validate: {
-                                required: true
+                                required: true,
                             },
                             key: 'applicantRoleTypeUrl',
                             type: 'textfield',
-                            input: true
-                        }
-                    ]
-                }
-            ]
+                            input: true,
+                        },
+                    ],
+                },
+            ],
         },
         {
             title: 'connectorForm.productaanvraag.step5.title',
@@ -1401,7 +1453,7 @@ const editProductAanvragenConnectorForm = {
             buttonSettings: {
                 previous: true,
                 cancel: true,
-                next: true
+                next: true,
             },
             navigateOnEnter: false,
             saveOnEnter: false,
@@ -1418,29 +1470,29 @@ const editProductAanvragenConnectorForm = {
                     attrs: [
                         {
                             attr: '',
-                            value: ''
-                        }
+                            value: '',
+                        },
                     ],
                     content: 'connectorForm.productaanvraag.step5.tip',
                     refreshOnChange: false,
                     key: 'html6',
                     type: 'htmlelement',
                     input: false,
-                    tableView: false
+                    tableView: false,
                 },
                 {
                     label: 'connectorForm.productaanvraag.step5.name',
                     tableView: true,
                     validate: {
-                        required: true
+                        required: true,
                     },
                     key: 'connectorName',
                     type: 'textfield',
-                    input: true
-                }
-            ]
-        }
-    ]
+                    input: true,
+                },
+            ],
+        },
+    ],
 };
 
 /*
@@ -1469,56 +1521,30 @@ class EditProductAanvragenConnectorComponent {
         this.connectorDelete = new EventEmitter();
         this.formRefresh$ = new Subject();
         this.formDefinition$ = new BehaviorSubject(undefined);
-        this.translatedFormDefinition$ = this.formDefinition$.pipe(map((definition) => this.formTranslationService.translateForm(definition)));
-        this.caseDefinitionId$ = new BehaviorSubject('');
+        this.translatedFormDefinition$ = this.formDefinition$.pipe(map(definition => this.formTranslationService.translateForm(definition)));
+        this.caseDefinitionOptions = [];
+        this.processDocumentDefinitionOptions = {};
         this.options = {
-            disableAlerts: true
+            disableAlerts: true,
         };
         this.mapCaseDefinitionKeyComponent = (component) => {
-            var _a;
             if (component.key === 'caseDefinitionKey') {
-                const definitionOptions = (_a = this.documentDefinitions) === null || _a === void 0 ? void 0 : _a.content.map((definition) => ({ label: definition.id.name, value: definition.id.name }));
-                return Object.assign(Object.assign({}, component), { disabled: false, data: { values: definitionOptions } });
-            }
-            return component;
-        };
-        this.mapProcessDefinitionKeyComponent = (component) => {
-            var _a;
-            if (component.key === 'processDefinitionKey') {
-                const processOptions = this.processDocumentDefinitions.map((definition) => ({ label: definition.processName, value: definition.id.processDefinitionKey }));
-                if (((_a = this.processDocumentDefinitions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                    return Object.assign(Object.assign({}, component), { disabled: false, data: { values: processOptions } });
-                }
-                else {
-                    return Object.assign(Object.assign({}, component), { disabled: true, data: { values: [] } });
-                }
+                return Object.assign(Object.assign({}, component), { disabled: false, data: { values: this.caseDefinitionOptions } });
             }
             return component;
         };
     }
     ngOnInit() {
+        window['productRequestDefinitions'] = {};
         this.openFormDefinitionSubscription();
         this.formDefinition$.next(editProductAanvragenConnectorForm);
-        this.loadDocumentDefinitions();
+        this.loadDefinitions();
     }
     ngOnDestroy() {
         var _a, _b;
         (_a = this.formDefinitionSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         (_b = this.translateSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
     }
-    onChange(object) {
-        var _a;
-        const caseDefinitionKeyValue = (_a = object === null || object === void 0 ? void 0 : object.data) === null || _a === void 0 ? void 0 : _a.caseDefinitionKey;
-        const currentCaseDefinitionId = this.caseDefinitionId$.getValue();
-        if (caseDefinitionKeyValue && caseDefinitionKeyValue !== currentCaseDefinitionId) {
-            this.documentService.findProcessDocumentDefinitions(caseDefinitionKeyValue).subscribe((processDocumentDefinitions) => {
-                this.processDocumentDefinitions = processDocumentDefinitions;
-                const definitionWithProcessDefinitionKeyValues = this.formMappingService.mapComponents(this.formDefinition$.getValue(), this.mapProcessDefinitionKeyComponent);
-                this.formDefinition$.next(definitionWithProcessDefinitionKeyValues);
-                this.caseDefinitionId$.next(caseDefinitionKeyValue);
-            });
-        }
-    }
     onSubmit(event) {
         const submission = event.data;
         const properties = cloneDeep(this.properties);
@@ -1533,23 +1559,20 @@ class EditProductAanvragenConnectorComponent {
         properties.openNotificatieProperties.baseUrl = submission.openNotificationsBaseUrl;
         properties.openNotificatieProperties.clientId = submission.openNotificationsClientId;
         properties.openNotificatieProperties.secret = submission.openNotificationsSecret;
-        properties.openNotificatieProperties.callbackBaseUrl = submission.openNotificationsCallbackBaseUrl;
+        properties.openNotificatieProperties.callbackBaseUrl =
+            submission.openNotificationsCallbackBaseUrl;
         properties.aanvragerRolTypeUrl = submission.applicantRoleTypeUrl;
-        properties.typeMapping = [
-            {
-                productAanvraagType: submission.productAanvraagType,
-                caseDefinitionKey: submission.caseDefinitionKey,
-                processDefinitionKey: submission.processDefinitionKey
-            }
-        ];
+        properties.typeMapping = submission.productAanvraagTypes;
         this.propertiesSave.emit({ properties, name: submission.connectorName });
     }
     onDelete() {
         this.connectorDelete.emit();
     }
     openFormDefinitionSubscription() {
-        this.formDefinitionSubscription = combineLatest([this.formDefinition$, this.translateService.stream('key')])
-            .subscribe(([form]) => {
+        this.formDefinitionSubscription = combineLatest([
+            this.formDefinition$,
+            this.translateService.stream('key'),
+        ]).subscribe(([form]) => {
             const translatedForm = this.formTranslationService.translateForm(form);
             this.refreshForm({ form: translatedForm });
         });
@@ -1568,34 +1591,43 @@ class EditProductAanvragenConnectorComponent {
         submission.openNotificationsBaseUrl = properties.openNotificatieProperties.baseUrl;
         submission.openNotificationsClientId = properties.openNotificatieProperties.clientId;
         submission.openNotificationsSecret = properties.openNotificatieProperties.secret;
-        submission.openNotificationsCallbackBaseUrl = properties.openNotificatieProperties.callbackBaseUrl;
+        submission.openNotificationsCallbackBaseUrl =
+            properties.openNotificatieProperties.callbackBaseUrl;
         submission.applicantRoleTypeUrl = properties.aanvragerRolTypeUrl;
-        submission.productAanvraagType = properties.typeMapping[0].productAanvraagType;
-        submission.caseDefinitionKey = properties.typeMapping[0].caseDefinitionKey;
-        submission.processDefinitionKey = properties.typeMapping[0].processDefinitionKey;
+        submission.productAanvraagTypes = properties.typeMapping;
         submission.connectorName = this.defaultName;
         this.refreshForm({ submission: { data: submission } });
     }
     refreshForm(refreshValue) {
         this.formRefresh$.next(refreshValue);
     }
-    loadDocumentDefinitions() {
-        this.documentService.getAllDefinitions().subscribe((definitions) => {
+    loadDefinitions() {
+        let documentDefinitions;
+        this.documentService
+            .getAllDefinitions()
+            .pipe(tap(resDocumentDefinitions => (documentDefinitions = resDocumentDefinitions.content)), switchMap(resDocumentDefinitions => combineLatest(resDocumentDefinitions.content.map(definition => this.documentService.findProcessDocumentDefinitions(definition.id.name)))), tap(res => {
             var _a;
-            this.documentDefinitions = definitions;
-            const definitionWithCaseDefinitionKeyValues = this.formMappingService.mapComponents(this.formDefinition$.getValue(), this.mapCaseDefinitionKeyComponent);
-            this.formDefinition$.next(definitionWithCaseDefinitionKeyValues);
+            this.caseDefinitionOptions = documentDefinitions.map(documentDefinition => {
+                return { label: documentDefinition.id.name, value: documentDefinition.id.name };
+            });
+            documentDefinitions.forEach((documentDefinition, index) => {
+                this.processDocumentDefinitionOptions[documentDefinition.id.name] = res[index].map(processDocumentDefinition => processDocumentDefinition.id.processDefinitionKey);
+            });
+            window['productRequestDefinitions'] = this.processDocumentDefinitionOptions;
+            const definitionWithCaseDefinitionOptions = this.formMappingService.mapComponents(this.formDefinition$.getValue(), this.mapCaseDefinitionKeyComponent);
+            this.formDefinition$.next(definitionWithCaseDefinitionOptions);
             if ((_a = this.properties) === null || _a === void 0 ? void 0 : _a.aanvragerRolTypeUrl) {
                 this.prefillForm();
             }
-        });
+        }))
+            .subscribe();
     }
 }
 EditProductAanvragenConnectorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'valtimo-edit-product-aanvragen-connector',
-                template: "<!--\n  ~ Copyright 2015-2021 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<div\n  *ngIf=\"translatedFormDefinition$ | async as definition\"\n  class=\"edit-product-request\"\n  [ngClass]=\"{'has-delete': showDeleteButton}\"\n>\n  <valtimo-form-io\n    [form]=\"definition\"\n    [formRefresh$]=\"formRefresh$\"\n    [useFormRefresh]=\"true\"\n    [options]=\"options\"\n    (change)=\"onChange($event)\"\n    (submit)=\"onSubmit($event)\"\n  >\n  </valtimo-form-io>\n\n  <button *ngIf=\"showDeleteButton\" class=\"btn btn-danger btn-space\" (click)=\"onDelete()\">\n    <i class=\"icon mdi mdi-delete mr-1\"></i>\n    {{'connectorManagement.remove' | translate}}\n  </button>\n</div>\n\n",
-                styles: ["/*!\n * Copyright 2015-2021 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-product-request ::ng-deep .btn-wizard-nav-cancel{display:none}.edit-product-request ::ng-deep .list-inline{display:flex;flex-direction:row;justify-content:flex-end}.edit-product-request.has-delete ::ng-deep .list-inline{margin-bottom:-30px}.edit-product-request .btn-danger{position:relative}"]
+                template: "<!--\n  ~ Copyright 2015-2021 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<div\n  *ngIf=\"translatedFormDefinition$ | async as definition\"\n  class=\"edit-product-request\"\n  [ngClass]=\"{'has-delete': showDeleteButton}\"\n>\n  <valtimo-form-io\n    [form]=\"definition\"\n    [formRefresh$]=\"formRefresh$\"\n    [options]=\"options\"\n    (submit)=\"onSubmit($event)\"\n  >\n  </valtimo-form-io>\n\n  <button *ngIf=\"showDeleteButton\" class=\"btn btn-danger btn-space\" (click)=\"onDelete()\">\n    <i class=\"icon mdi mdi-delete mr-1\"></i>\n    {{ 'connectorManagement.remove' | translate }}\n  </button>\n</div>\n",
+                styles: ["/*!\n * Copyright 2015-2021 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-product-request ::ng-deep .btn-wizard-nav-cancel{display:none}.edit-product-request ::ng-deep .list-inline{display:flex;flex-direction:row;justify-content:flex-end}.edit-product-request ::ng-deep .col-sm-2{flex:0 0 25%;max-width:25%}.edit-product-request ::ng-deep .edit-grid-component>label{display:none}.edit-product-request.has-delete ::ng-deep .list-inline{margin-bottom:-30px}.edit-product-request .btn-danger{position:relative}"]
             },] }
 ];
 EditProductAanvragenConnectorComponent.ctorParameters = () => [
@@ -1683,7 +1715,7 @@ ConnectorManagementModule.decorators = [
                     ConnectorLinkExtensionComponent,
                     ConnectorLinkExtensionModalComponent,
                     EditProductAanvragenConnectorComponent,
-                    EditConnectorFormComponent
+                    EditConnectorFormComponent,
                 ],
                 imports: [
                     CommonModule,
@@ -1693,7 +1725,7 @@ ConnectorManagementModule.decorators = [
                     ListModule,
                     SpinnerModule,
                     ModalModule,
-                    FormIoModule
+                    FormIoModule,
                 ],
                 exports: [
                     ConnectorManagementComponent,
@@ -1704,11 +1736,9 @@ ConnectorManagementModule.decorators = [
                     MultiValueConnectorPropertyComponent,
                     ConnectorLinkExtensionComponent,
                     ConnectorLinkExtensionModalComponent,
-                    EditProductAanvragenConnectorComponent
+                    EditProductAanvragenConnectorComponent,
                 ],
-                entryComponents: [
-                    ConnectorLinkExtensionComponent,
-                ]
+                entryComponents: [ConnectorLinkExtensionComponent],
             },] }
 ];
 
@@ -1734,7 +1764,7 @@ function connectorLinkExtensionInitializer(injector) {
         return new Promise((resolve, reject) => {
             try {
                 logger.debug('connector link extension initializer before init');
-                const extension = new Extension('ConnectorLink', new BasicExtensionPoint('dossier-management', 'dossier', 'connector-link', ConnectorLinkExtensionComponent));
+                const extension = new Extension('ConnectorLink', new BasicExtensionPoint('dossier-management', 'dossier', 'right-panel', ConnectorLinkExtensionComponent));
                 configService.addExtension(extension);
                 logger.debug('connector link extension initializer after init');
                 resolve();