@valtimo/form-management 4.15.2-next-main.15 → 4.15.3-next-main.16

package/fesm2015/valtimo-form-management.js

@@ -13,625 +13,626 @@ import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { DocumentService } from '@valtimo/document';
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class FormManagementService {
-    constructor(http, configService) {
-        this.http = http;
-        this.configService = configService;
-        this.valtimoApiConfig = configService.config.valtimoApi;
-    }
-    getFormDefinition(formDefinitionId) {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}form-management/${formDefinitionId}`);
-    }
-    queryFormDefinitions(params) {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}form-management`, { observe: 'response', params: params });
-    }
-    createFormDefinition(request) {
-        return this.http.post(`${this.valtimoApiConfig.endpointUri}form-management`, request);
-    }
-    modifyFormDefinition(request) {
-        return this.http.put(`${this.valtimoApiConfig.endpointUri}form-management`, request);
-    }
-    deleteFormDefinition(formDefinitionId) {
-        return this.http.delete(`${this.valtimoApiConfig.endpointUri}form-management/${formDefinitionId}`);
-    }
-}
-FormManagementService.ɵprov = ɵɵdefineInjectable({ factory: function FormManagementService_Factory() { return new FormManagementService(ɵɵinject(HttpClient), ɵɵinject(ConfigService)); }, token: FormManagementService, providedIn: "root" });
-FormManagementService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-FormManagementService.ctorParameters = () => [
-    { type: HttpClient },
-    { type: ConfigService }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormManagementService {
+    constructor(http, configService) {
+        this.http = http;
+        this.configService = configService;
+        this.valtimoApiConfig = configService.config.valtimoApi;
+    }
+    getFormDefinition(formDefinitionId) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}form-management/${formDefinitionId}`);
+    }
+    queryFormDefinitions(params) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}form-management`, {
+            observe: 'response',
+            params: params,
+        });
+    }
+    createFormDefinition(request) {
+        return this.http.post(`${this.valtimoApiConfig.endpointUri}form-management`, request);
+    }
+    modifyFormDefinition(request) {
+        return this.http.put(`${this.valtimoApiConfig.endpointUri}form-management`, request);
+    }
+    deleteFormDefinition(formDefinitionId) {
+        return this.http.delete(`${this.valtimoApiConfig.endpointUri}form-management/${formDefinitionId}`);
+    }
+}
+FormManagementService.ɵprov = ɵɵdefineInjectable({ factory: function FormManagementService_Factory() { return new FormManagementService(ɵɵinject(HttpClient), ɵɵinject(ConfigService)); }, token: FormManagementService, providedIn: "root" });
+FormManagementService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+FormManagementService.ctorParameters = () => [
+    { type: HttpClient },
+    { type: ConfigService }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class FormManagementComponent {
-    constructor() {
-    }
-    ngOnInit() {
-    }
-}
-FormManagementComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-form-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\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button [routerLink]=\"'create'\" [queryParams]=\"{'upload': 'true'}\" class=\"btn btn-secondary btn-space\">\n          <i class=\"icon mdi mdi-upload\"></i>&nbsp;\n          {{ 'Upload' | translate }}\n        </button>\n        <button [routerLink]=\"'create'\" class=\"btn btn-primary btn-space mr-0\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Form' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-widget>\n      <valtimo-form-management-list></valtimo-form-management-list>\n    </valtimo-widget>\n  </div>\n</div>\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 */"]
-            },] }
-];
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormManagementComponent {
+    constructor() { }
+    ngOnInit() { }
+}
+FormManagementComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-form-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\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button\n          [routerLink]=\"'create'\"\n          [queryParams]=\"{upload: 'true'}\"\n          class=\"btn btn-secondary btn-space\"\n        >\n          <i class=\"icon mdi mdi-upload\"></i>&nbsp;\n          {{ 'Upload' | translate }}\n        </button>\n        <button [routerLink]=\"'create'\" class=\"btn btn-primary btn-space mr-0\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Form' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-widget>\n      <valtimo-form-management-list></valtimo-form-management-list>\n    </valtimo-widget>\n  </div>\n</div>\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 */"]
+            },] }
+];
 FormManagementComponent.ctorParameters = () => [];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class FormManagementCreateComponent {
-    constructor(formManagementService, formBuilder, router, alertService, route) {
-        this.formManagementService = formManagementService;
-        this.formBuilder = formBuilder;
-        this.router = router;
-        this.alertService = alertService;
-        this.route = route;
-    }
-    get formControls() {
-        return this.form.controls;
-    }
-    ngOnInit() {
-        this.form = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
-        });
-    }
-    reset() {
-        this.form.setValue({
-            name: ''
-        });
-    }
-    createFormDefinition() {
-        const emptyForm = {
-            display: 'form',
-            components: []
-        };
-        const request = {
-            name: this.form.value.name,
-            formDefinition: JSON.stringify(emptyForm)
-        };
-        combineLatest([this.formManagementService.createFormDefinition(request), this.route.queryParams])
-            .pipe(take(1))
-            .subscribe(([formDefinition, params]) => {
-            this.alertService.success('Created new Form');
-            if ((params === null || params === void 0 ? void 0 : params.upload) === 'true') {
-                this.router.navigate(['/form-management/edit', formDefinition.id], { queryParams: { upload: 'true' } });
-            }
-            else {
-                this.router.navigate(['/form-management/edit', formDefinition.id]);
-            }
-        }, err => {
-            this.alertService.error('Error creating new Form');
-        });
-    }
-}
-FormManagementCreateComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-form-management-create',
-                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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"bg-white p-5\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"createFormDefinition()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"name\">Name</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input type=\"text\" id=\"name\" formControlName=\"name\"\n                       class=\"form-control\" placeholder=\"Form definition name\"\n                       [ngClass]=\"{'is-valid': formControls.name.touched && formControls.name.valid, 'is-invalid': formControls.name.touched && formControls.name.errors}\"\n                       required/>\n                <div *ngIf=\"formControls.name.touched && formControls.name.errors\"\n                     class=\"invalid-feedback\">\n                  <div *ngIf=\"formControls.name.errors.required\">Name is required</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/forms'\" class=\"btn btn-space btn-default\">Back</a>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">Reset\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  Submit\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\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 */"]
-            },] }
-];
-FormManagementCreateComponent.ctorParameters = () => [
-    { type: FormManagementService },
-    { type: FormBuilder },
-    { type: Router },
-    { type: AlertService },
-    { type: ActivatedRoute }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormManagementCreateComponent {
+    constructor(formManagementService, formBuilder, router, alertService, route) {
+        this.formManagementService = formManagementService;
+        this.formBuilder = formBuilder;
+        this.router = router;
+        this.alertService = alertService;
+        this.route = route;
+    }
+    get formControls() {
+        return this.form.controls;
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            name: new FormControl('', Validators.required),
+        });
+    }
+    reset() {
+        this.form.setValue({
+            name: '',
+        });
+    }
+    createFormDefinition() {
+        const emptyForm = {
+            display: 'form',
+            components: [],
+        };
+        const request = {
+            name: this.form.value.name,
+            formDefinition: JSON.stringify(emptyForm),
+        };
+        combineLatest([
+            this.formManagementService.createFormDefinition(request),
+            this.route.queryParams,
+        ])
+            .pipe(take(1))
+            .subscribe(([formDefinition, params]) => {
+            this.alertService.success('Created new Form');
+            if ((params === null || params === void 0 ? void 0 : params.upload) === 'true') {
+                this.router.navigate(['/form-management/edit', formDefinition.id], {
+                    queryParams: { upload: 'true' },
+                });
+            }
+            else {
+                this.router.navigate(['/form-management/edit', formDefinition.id]);
+            }
+        }, err => {
+            this.alertService.error('Error creating new Form');
+        });
+    }
+}
+FormManagementCreateComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-form-management-create',
+                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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"bg-white p-5\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"createFormDefinition()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"name\">Name</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"name\"\n                  formControlName=\"name\"\n                  class=\"form-control\"\n                  placeholder=\"Form definition name\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.name.touched && formControls.name.valid,\n                    'is-invalid': formControls.name.touched && formControls.name.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.name.touched && formControls.name.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.name.errors.required\">Name is required</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/forms'\" class=\"btn btn-space btn-default\">Back</a>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  Reset\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  Submit\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\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 */"]
+            },] }
+];
+FormManagementCreateComponent.ctorParameters = () => [
+    { type: FormManagementService },
+    { type: FormBuilder },
+    { type: Router },
+    { type: AlertService },
+    { type: ActivatedRoute }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class FormManagementEditComponent {
-    constructor(formManagementService, alertService, route, router) {
-        this.formManagementService = formManagementService;
-        this.alertService = alertService;
-        this.route = route;
-        this.router = router;
-        this.showModal$ = new BehaviorSubject(false);
-        this.reloading$ = new BehaviorSubject(false);
-        this.modifiedFormDefinition = null;
-        this.formDefinition = null;
-        this.alertSub = Subscription.EMPTY;
-        this.formDefinitionId = null;
-    }
-    ngOnInit() {
-        this.loadFormDefinition();
-        this.checkToOpenUploadModal();
-    }
-    ngOnDestroy() {
-        this.alertSub.unsubscribe();
-    }
-    loadFormDefinition() {
-        this.formDefinitionId = this.route.snapshot.paramMap.get('id');
-        this.formManagementService.getFormDefinition(this.formDefinitionId).subscribe(formDefinition => {
-            this.formDefinition = formDefinition;
-        }, () => {
-            this.alertService.error('Error retrieving Form Definition');
-        });
-    }
-    modifyFormDefinition() {
-        const form = JSON.stringify(this.modifiedFormDefinition != null ? this.modifiedFormDefinition : this.formDefinition.formDefinition);
-        const request = {
-            id: this.formDefinition.id,
-            name: this.formDefinition.name,
-            formDefinition: form
-        };
-        this.formManagementService.modifyFormDefinition(request).subscribe(() => {
-            this.router.navigate(['/form-management']);
-            this.alertService.success('Form deployed');
-        }, err => {
-            this.alertService.error('Error deploying Form');
-        });
-    }
-    formBuilderChanged(event) {
-        this.modifiedFormDefinition = event.form;
-    }
-    delete() {
-        if (!this.alertSub.closed) {
-            return;
-        }
-        const mssg = 'Delete Form?';
-        const confirmations = [
-            {
-                label: 'Cancel',
-                class: 'btn btn-default',
-                value: false
-            },
-            {
-                label: 'Delete',
-                class: 'btn btn-primary',
-                value: true
-            }
-        ];
-        this.alertService.notification(mssg, confirmations);
-        this.alertSub = this.alertService.getAlertConfirmChangeEmitter()
-            .pipe(first())
-            .subscribe(alert => {
-            if (alert.confirm === true) {
-                this.deleteFormDefinition();
-            }
-        });
-    }
-    deleteFormDefinition() {
-        this.formManagementService.deleteFormDefinition(this.formDefinition.id).subscribe(() => {
-            this.router.navigate(['/form-management']);
-            this.alertService.success('Form deleted');
-        }, err => {
-            this.alertService.error('Error deleting Form');
-        });
-    }
-    downloadFormDefinition() {
-        const file = new Blob([JSON.stringify(this.formDefinition)], { type: 'text/json' });
-        const link = document.createElement('a');
-        link.download = `form_${this.formDefinition.name}.json`;
-        link.href = window.URL.createObjectURL(file);
-        link.click();
-        window.URL.revokeObjectURL(link.href);
-        link.remove();
-    }
-    showModal() {
-        this.showModal$.next(true);
-    }
-    setFormDefinition(formDefinition) {
-        var _a;
-        this.reloading$.next(true);
-        const definition = JSON.parse(formDefinition);
-        const components = (_a = definition === null || definition === void 0 ? void 0 : definition.formDefinition) === null || _a === void 0 ? void 0 : _a.components;
-        const currentDefinition = this.modifiedFormDefinition || this.formDefinition.formDefinition;
-        const newDefinition = Object.assign(Object.assign({}, currentDefinition), (components && { components }));
-        this.modifiedFormDefinition = newDefinition;
-        this.formDefinition.formDefinition = newDefinition;
-        this.reloading$.next(false);
-    }
-    checkToOpenUploadModal() {
-        this.route.queryParams.pipe(take(1))
-            .subscribe((params) => {
-            if ((params === null || params === void 0 ? void 0 : params.upload) === 'true') {
-                this.showModal();
-            }
-        });
-    }
-}
-FormManagementEditComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-form-management-edit',
-                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\" *ngIf=\"formDefinition\">\n    <div class=\"btn-group mt-m3px mb-3 float-right\">\n      <button class='btn btn-primary btn-space' (click)=\"downloadFormDefinition()\">\n        <i class=\"fa fa-save\"></i>\n        {{ 'Download' | translate }}\n      </button>\n      <button class=\"btn btn-secondary btn-space\" (click)=\"showModal()\" [disabled]=\"formDefinition.readOnly\">\n        <i class=\"icon mdi mdi-upload\"></i>&nbsp;\n        {{ 'Upload' | translate }}\n      </button>\n      <button class='btn btn-danger btn-space' (click)=\"delete()\" [disabled]=\"formDefinition.readOnly\">\n        <i class=\"fa fa-trash\"></i>&nbsp;Delete\n      </button>\n      <button class='btn btn-success btn-space' (click)=\"modifyFormDefinition()\" [disabled]=\"formDefinition.readOnly\">\n        <i class=\"fa fa-upload\"></i>&nbsp;Deploy\n      </button>\n    </div>\n    <div class=\"clearfix\"></div>\n    <div class=\"bg-light formbuilder-header overflow-auto\">\n      <h3 class=\"formbuilder-title\">{{formDefinition.name}}\n        <div *ngIf=\"formDefinition.readOnly\" class=\"pull-right\">\n          <span class=\"badge badge-pill badge-info increase-size\">Read-only</span>\n        </div>\n      </h3>\n    </div>\n    <ng-container *ngIf=\"!(reloading$ | async)\">\n      <valtimo-form-io-builder [form]=\"formDefinition.formDefinition\" (change)=\"formBuilderChanged($event)\"></valtimo-form-io-builder>\n    </ng-container>\n  </div>\n</div>\n\n<valtimo-form-management-upload\n        [show$]=\"showModal$\"\n        (definitionUploaded)=\"setFormDefinition($event)\"\n></valtimo-form-management-upload>\n",
-                encapsulation: ViewEncapsulation.None,
-                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.formcomponent.gu-mirror,.formbuilder .btn.formcomponent.drag-copy{background-color:silver;border-color:silver;color:#fff;font-weight:400}.btn.formcomponent.gu-mirror:active,.btn.formcomponent.gu-mirror:hover,.formbuilder .btn.formcomponent.drag-copy:active,.formbuilder .btn.formcomponent.drag-copy:hover{box-shadow:none}.btn.formcomponent.gu-mirror:active,.formbuilder .btn.formcomponent.drag-copy:active{background-color:silver;border-color:silver}.formbuilder-header{border:1px solid #dee2e6;border-bottom:0;font-size:18px;height:80px;padding-left:18px;padding-right:18px}.formbuilder-header .formbuilder-title{margin-bottom:7px;margin-top:21px}.formbuilder-header .formbuilder-subtitle{margin-bottom:12px;margin-top:0}.formbuilder{background:#fff;border:1px solid #dee2e6;margin-left:0!important;margin-right:0!important;padding:1rem}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=\"\"],.formbuilder .form-builder-panel .builder-group-button[aria-expanded=false]{color:#a9a9a9}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=true]{color:#000}.formbuilder .drag-and-drop-alert{display:none}.formbuilder .formarea{background-color:#fff;border:1px solid silver;padding:10px}.increase-size{font-size:1rem}"]
-            },] }
-];
-FormManagementEditComponent.ctorParameters = () => [
-    { type: FormManagementService },
-    { type: AlertService },
-    { type: ActivatedRoute },
-    { type: Router }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormManagementEditComponent {
+    constructor(formManagementService, alertService, route, router) {
+        this.formManagementService = formManagementService;
+        this.alertService = alertService;
+        this.route = route;
+        this.router = router;
+        this.showModal$ = new BehaviorSubject(false);
+        this.reloading$ = new BehaviorSubject(false);
+        this.modifiedFormDefinition = null;
+        this.formDefinition = null;
+        this.alertSub = Subscription.EMPTY;
+        this.formDefinitionId = null;
+    }
+    ngOnInit() {
+        this.loadFormDefinition();
+        this.checkToOpenUploadModal();
+    }
+    ngOnDestroy() {
+        this.alertSub.unsubscribe();
+    }
+    loadFormDefinition() {
+        this.formDefinitionId = this.route.snapshot.paramMap.get('id');
+        this.formManagementService.getFormDefinition(this.formDefinitionId).subscribe(formDefinition => {
+            this.formDefinition = formDefinition;
+        }, () => {
+            this.alertService.error('Error retrieving Form Definition');
+        });
+    }
+    modifyFormDefinition() {
+        const form = JSON.stringify(this.modifiedFormDefinition != null
+            ? this.modifiedFormDefinition
+            : this.formDefinition.formDefinition);
+        const request = {
+            id: this.formDefinition.id,
+            name: this.formDefinition.name,
+            formDefinition: form,
+        };
+        this.formManagementService.modifyFormDefinition(request).subscribe(() => {
+            this.router.navigate(['/form-management']);
+            this.alertService.success('Form deployed');
+        }, err => {
+            this.alertService.error('Error deploying Form');
+        });
+    }
+    formBuilderChanged(event) {
+        this.modifiedFormDefinition = event.form;
+    }
+    delete() {
+        if (!this.alertSub.closed) {
+            return;
+        }
+        const mssg = 'Delete Form?';
+        const confirmations = [
+            {
+                label: 'Cancel',
+                class: 'btn btn-default',
+                value: false,
+            },
+            {
+                label: 'Delete',
+                class: 'btn btn-primary',
+                value: true,
+            },
+        ];
+        this.alertService.notification(mssg, confirmations);
+        this.alertSub = this.alertService
+            .getAlertConfirmChangeEmitter()
+            .pipe(first())
+            .subscribe(alert => {
+            if (alert.confirm === true) {
+                this.deleteFormDefinition();
+            }
+        });
+    }
+    deleteFormDefinition() {
+        this.formManagementService.deleteFormDefinition(this.formDefinition.id).subscribe(() => {
+            this.router.navigate(['/form-management']);
+            this.alertService.success('Form deleted');
+        }, err => {
+            this.alertService.error('Error deleting Form');
+        });
+    }
+    downloadFormDefinition() {
+        const file = new Blob([JSON.stringify(this.formDefinition)], { type: 'text/json' });
+        const link = document.createElement('a');
+        link.download = `form_${this.formDefinition.name}.json`;
+        link.href = window.URL.createObjectURL(file);
+        link.click();
+        window.URL.revokeObjectURL(link.href);
+        link.remove();
+    }
+    showModal() {
+        this.showModal$.next(true);
+    }
+    setFormDefinition(formDefinition) {
+        var _a;
+        this.reloading$.next(true);
+        const definition = JSON.parse(formDefinition);
+        const components = (_a = definition === null || definition === void 0 ? void 0 : definition.formDefinition) === null || _a === void 0 ? void 0 : _a.components;
+        const currentDefinition = this.modifiedFormDefinition || this.formDefinition.formDefinition;
+        const newDefinition = Object.assign(Object.assign({}, currentDefinition), (components && { components }));
+        this.modifiedFormDefinition = newDefinition;
+        this.formDefinition.formDefinition = newDefinition;
+        this.reloading$.next(false);
+    }
+    checkToOpenUploadModal() {
+        this.route.queryParams.pipe(take(1)).subscribe(params => {
+            if ((params === null || params === void 0 ? void 0 : params.upload) === 'true') {
+                this.showModal();
+            }
+        });
+    }
+}
+FormManagementEditComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-form-management-edit',
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\" *ngIf=\"formDefinition\">\n    <div class=\"btn-group mt-m3px mb-3 float-right\">\n      <button class=\"btn btn-primary btn-space\" (click)=\"downloadFormDefinition()\">\n        <i class=\"fa fa-save\"></i>\n        {{ 'Download' | translate }}\n      </button>\n      <button\n        class=\"btn btn-secondary btn-space\"\n        (click)=\"showModal()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"icon mdi mdi-upload\"></i>&nbsp;\n        {{ 'Upload' | translate }}\n      </button>\n      <button\n        class=\"btn btn-danger btn-space\"\n        (click)=\"delete()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"fa fa-trash\"></i>&nbsp;Delete\n      </button>\n      <button\n        class=\"btn btn-success btn-space\"\n        (click)=\"modifyFormDefinition()\"\n        [disabled]=\"formDefinition.readOnly\"\n      >\n        <i class=\"fa fa-upload\"></i>&nbsp;Deploy\n      </button>\n    </div>\n    <div class=\"clearfix\"></div>\n    <div class=\"bg-light formbuilder-header overflow-auto\">\n      <h3 class=\"formbuilder-title\">\n        {{ formDefinition.name }}\n        <div *ngIf=\"formDefinition.readOnly\" class=\"pull-right\">\n          <span class=\"badge badge-pill badge-info increase-size\">Read-only</span>\n        </div>\n      </h3>\n    </div>\n    <ng-container *ngIf=\"!(reloading$ | async)\">\n      <valtimo-form-io-builder\n        [form]=\"formDefinition.formDefinition\"\n        (change)=\"formBuilderChanged($event)\"\n      ></valtimo-form-io-builder>\n    </ng-container>\n  </div>\n</div>\n\n<valtimo-form-management-upload\n  [show$]=\"showModal$\"\n  (definitionUploaded)=\"setFormDefinition($event)\"\n></valtimo-form-management-upload>\n",
+                encapsulation: ViewEncapsulation.None,
+                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.formcomponent.gu-mirror,.formbuilder .btn.formcomponent.drag-copy{background-color:silver;border-color:silver;color:#fff;font-weight:400}.btn.formcomponent.gu-mirror:active,.btn.formcomponent.gu-mirror:hover,.formbuilder .btn.formcomponent.drag-copy:active,.formbuilder .btn.formcomponent.drag-copy:hover{box-shadow:none}.btn.formcomponent.gu-mirror:active,.formbuilder .btn.formcomponent.drag-copy:active{background-color:silver;border-color:silver}.formbuilder-header{border:1px solid #dee2e6;border-bottom:0;font-size:18px;height:80px;padding-left:18px;padding-right:18px}.formbuilder-header .formbuilder-title{margin-bottom:7px;margin-top:21px}.formbuilder-header .formbuilder-subtitle{margin-bottom:12px;margin-top:0}.formbuilder{background:#fff;border:1px solid #dee2e6;margin-left:0!important;margin-right:0!important;padding:1rem}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=\"\"],.formbuilder .form-builder-panel .builder-group-button[aria-expanded=false]{color:#a9a9a9}.formbuilder .form-builder-panel .builder-group-button[aria-expanded=true]{color:#000}.formbuilder .drag-and-drop-alert{display:none}.formbuilder .formarea{background-color:#fff;border:1px solid silver;padding:10px}.increase-size{font-size:1rem}"]
+            },] }
+];
+FormManagementEditComponent.ctorParameters = () => [
+    { type: FormManagementService },
+    { type: AlertService },
+    { type: ActivatedRoute },
+    { type: Router }
 ];
 
-/*
- * 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.
- */
-const ɵ0 = { title: 'Form management', roles: [ROLE_ADMIN] }, ɵ1 = { title: 'Create new Form', roles: [ROLE_ADMIN] }, ɵ2 = { title: 'Form Builder', roles: [ROLE_ADMIN] };
-const routes = [
-    {
-        path: 'form-management',
-        component: FormManagementComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ0
-    },
-    {
-        path: 'form-management/create',
-        component: FormManagementCreateComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ1
-    },
-    {
-        path: 'form-management/edit/:id',
-        component: FormManagementEditComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ2
-    }
-];
-class FormManagementRoutingModule {
-}
-FormManagementRoutingModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    RouterModule.forChild(routes)
-                ],
-                exports: [
-                    RouterModule
-                ],
-                declarations: []
-            },] }
+/*
+ * 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.
+ */
+const ɵ0 = { title: 'Form management', roles: [ROLE_ADMIN] }, ɵ1 = { title: 'Create new Form', roles: [ROLE_ADMIN] }, ɵ2 = { title: 'Form Builder', roles: [ROLE_ADMIN] };
+const routes = [
+    {
+        path: 'form-management',
+        component: FormManagementComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ0,
+    },
+    {
+        path: 'form-management/create',
+        component: FormManagementCreateComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ1,
+    },
+    {
+        path: 'form-management/edit/:id',
+        component: FormManagementEditComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ2,
+    },
+];
+class FormManagementRoutingModule {
+}
+FormManagementRoutingModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [RouterModule.forChild(routes)],
+                exports: [RouterModule],
+                declarations: [],
+            },] }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class FormManagementListComponent {
-    constructor(formManagementService, router) {
-        this.formManagementService = formManagementService;
-        this.router = router;
-        this.formDefinitions = [];
-        this.formDefinitionFields = [
-            { key: 'name', label: 'Name' },
-            { key: 'readOnly', label: 'Read-only' }
-        ];
-        this.pagination = {
-            collectionSize: 0,
-            page: 1,
-            size: 10,
-            maxPaginationItemSize: 5
-        };
-        this.pageParam = 0;
-    }
-    paginationClicked(page) {
-        this.pageParam = page - 1;
-        this.loadFormDefinitions();
-    }
-    ngOnInit() {
-    }
-    paginationSet() {
-        this.loadFormDefinitions();
-    }
-    loadFormDefinitions(searchTerm) {
-        const params = { page: this.pageParam, size: this.pagination.size };
-        if (searchTerm) {
-            params['searchTerm'] = searchTerm;
-        }
-        this.formManagementService.queryFormDefinitions(params).subscribe((results) => {
-            this.pagination.collectionSize = results.body.totalElements;
-            this.formDefinitions = results.body.content;
-        });
-    }
-    editFormDefinition(formDefinition) {
-        this.router.navigate(['/form-management/edit', formDefinition.id]);
-    }
-    searchTermEntered(searchTerm) {
-        this.loadFormDefinitions(searchTerm);
-    }
-}
-FormManagementListComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-form-management-list',
-                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-list [items]=\"formDefinitions\"\n              [fields]=\"formDefinitionFields\"\n              [viewMode]=\"true\"\n              [isSearchable]=\"true\"\n              [pagination]=\"pagination\"\n              paginationIdentifier=\"formManagementList\"\n              (paginationClicked)=\"paginationClicked($event)\"\n              (paginationSet)=\"paginationSet()\"\n              (rowClicked)=\"editFormDefinition($event)\"\n              [header]=\"true\"\n              (search)=\"searchTermEntered($event)\"\n>\n  <div header>\n    <h3 class=\"list-header-title\">{{ 'Forms' | translate }}</h3>\n    <h5 class=\"list-header-description\">{{ 'Overview of all Forms' | translate }}</h5>\n  </div>\n</valtimo-list>\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 */"]
-            },] }
-];
-FormManagementListComponent.ctorParameters = () => [
-    { type: FormManagementService },
-    { type: Router }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormManagementListComponent {
+    constructor(formManagementService, router) {
+        this.formManagementService = formManagementService;
+        this.router = router;
+        this.formDefinitions = [];
+        this.formDefinitionFields = [
+            { key: 'name', label: 'Name' },
+            { key: 'readOnly', label: 'Read-only' },
+        ];
+        this.pagination = {
+            collectionSize: 0,
+            page: 1,
+            size: 10,
+            maxPaginationItemSize: 5,
+        };
+        this.pageParam = 0;
+    }
+    paginationClicked(page) {
+        this.pageParam = page - 1;
+        this.loadFormDefinitions();
+    }
+    ngOnInit() { }
+    paginationSet() {
+        this.loadFormDefinitions();
+    }
+    loadFormDefinitions(searchTerm) {
+        const params = { page: this.pageParam, size: this.pagination.size };
+        if (searchTerm) {
+            params['searchTerm'] = searchTerm;
+        }
+        this.formManagementService.queryFormDefinitions(params).subscribe(results => {
+            this.pagination.collectionSize = results.body.totalElements;
+            this.formDefinitions = results.body.content;
+        });
+    }
+    editFormDefinition(formDefinition) {
+        this.router.navigate(['/form-management/edit', formDefinition.id]);
+    }
+    searchTermEntered(searchTerm) {
+        this.loadFormDefinitions(searchTerm);
+    }
+}
+FormManagementListComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-form-management-list',
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-list\n  [items]=\"formDefinitions\"\n  [fields]=\"formDefinitionFields\"\n  [viewMode]=\"true\"\n  [isSearchable]=\"true\"\n  [pagination]=\"pagination\"\n  paginationIdentifier=\"formManagementList\"\n  (paginationClicked)=\"paginationClicked($event)\"\n  (paginationSet)=\"paginationSet()\"\n  (rowClicked)=\"editFormDefinition($event)\"\n  [header]=\"true\"\n  (search)=\"searchTermEntered($event)\"\n>\n  <div header>\n    <h3 class=\"list-header-title\">{{ 'Forms' | translate }}</h3>\n    <h5 class=\"list-header-description\">{{ 'Overview of all Forms' | translate }}</h5>\n  </div>\n</valtimo-list>\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 */"]
+            },] }
+];
+FormManagementListComponent.ctorParameters = () => [
+    { type: FormManagementService },
+    { type: Router }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class FormManagementUploadComponent {
-    constructor(documentService, translateService) {
-        this.documentService = documentService;
-        this.translateService = translateService;
-        this.definitionUploaded = new EventEmitter();
-        this.clear$ = new Subject();
-        this.jsonString$ = new BehaviorSubject('');
-        this.error$ = new BehaviorSubject('');
-        this.disabled$ = new BehaviorSubject(false);
-        this.file$ = new BehaviorSubject(undefined);
-    }
-    ngAfterViewInit() {
-        this.openShowSubscription();
-        this.openFileSubscription();
-    }
-    ngOnDestroy() {
-        this.showSubscription.unsubscribe();
-        this.fileSubscription.unsubscribe();
-        this.closeErrorSubscription();
-    }
-    setFile(file) {
-        this.clearError();
-        this.file$.next(file);
-    }
-    uploadDefinition() {
-        this.disable();
-        this.jsonString$
-            .pipe(take(1))
-            .subscribe((definition) => {
-            this.closeErrorSubscription();
-            this.clearError();
-            this.enable();
-            this.hideModal();
-            this.definitionUploaded.emit(definition);
-        });
-    }
-    openErrorSubscription(errorCode) {
-        this.closeErrorSubscription();
-        this.errorSubscription = this.translateService.stream(errorCode).subscribe(error => {
-            this.error$.next(error);
-        });
-    }
-    closeErrorSubscription() {
-        if (this.errorSubscription) {
-            this.errorSubscription.unsubscribe();
-        }
-    }
-    clearError() {
-        this.error$.next('');
-    }
-    openFileSubscription() {
-        this.fileSubscription = this.file$.subscribe(file => {
-            if (file) {
-                const reader = new FileReader();
-                reader.onloadend = () => {
-                    const result = reader.result.toString();
-                    if (this.stringIsValidJson(result)) {
-                        this.jsonString$.next(result);
-                    }
-                };
-                reader.readAsText(file);
-            }
-            else {
-                this.clearJsonString();
-            }
-        });
-    }
-    openShowSubscription() {
-        this.showSubscription = this.show$.subscribe(show => {
-            if (show) {
-                this.showModal();
-            }
-            else {
-                this.hideModal();
-            }
-            this.clearJsonString();
-            this.clearError();
-            this.clearDropzone();
-        });
-    }
-    clearJsonString() {
-        this.jsonString$.next('');
-    }
-    clearDropzone() {
-        this.clear$.next();
-    }
-    showModal() {
-        this.modal.show();
-    }
-    hideModal() {
-        this.modal.hide();
-    }
-    stringIsValidJson(string) {
-        var _a, _b;
-        try {
-            // tslint:disable-next-line
-            (_b = (_a = JSON.parse(string)) === null || _a === void 0 ? void 0 : _a.formDefinition) === null || _b === void 0 ? void 0 : _b.components;
-        }
-        catch (e) {
-            this.clearDropzone();
-            this.openErrorSubscription('dropzone.error.invalidFormDef');
-            return false;
-        }
-        return true;
-    }
-    disable() {
-        this.disabled$.next(true);
-    }
-    enable() {
-        this.disabled$.next(false);
-    }
-}
-FormManagementUploadComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-form-management-upload',
-                template: "<valtimo-modal #uploadFormDefinitionModal [title]=\"'uploadFormDefinition' | translate\" showFooter=\"true\">\n  <div class=\"mt-2\" body>\n    <valtimo-dropzone\n            [clear$]=\"clear$\"\n            (fileSelected)=\"setFile($event)\"\n            [disabled]=\"disabled$ | async\"\n            [subtitle]=\"'dropzone.formJsonDocDef' | translate\"\n            [externalError$]=\"error$\"\n    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && !(error$ | async); else pleaseSelect\">\n      <button [disabled]=\"disabled$ | async\" class=\"btn btn-primary\" (click)=\"uploadDefinition()\">\n        {{ 'Upload' | translate }}\n      </button>\n    </ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #pleaseSelect>\n  <button class=\"btn btn-primary\" [disabled]=\"true\">\n    {{ 'Select a document definition' | translate }}\n  </button>\n</ng-template>\n",
-                styles: [""]
-            },] }
-];
-FormManagementUploadComponent.ctorParameters = () => [
-    { type: DocumentService },
-    { type: TranslateService }
-];
-FormManagementUploadComponent.propDecorators = {
-    modal: [{ type: ViewChild, args: ['uploadFormDefinitionModal',] }],
-    show$: [{ type: Input }],
-    definitionUploaded: [{ type: Output }]
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormManagementUploadComponent {
+    constructor(documentService, translateService) {
+        this.documentService = documentService;
+        this.translateService = translateService;
+        this.definitionUploaded = new EventEmitter();
+        this.clear$ = new Subject();
+        this.jsonString$ = new BehaviorSubject('');
+        this.error$ = new BehaviorSubject('');
+        this.disabled$ = new BehaviorSubject(false);
+        this.file$ = new BehaviorSubject(undefined);
+    }
+    ngAfterViewInit() {
+        this.openShowSubscription();
+        this.openFileSubscription();
+    }
+    ngOnDestroy() {
+        this.showSubscription.unsubscribe();
+        this.fileSubscription.unsubscribe();
+        this.closeErrorSubscription();
+    }
+    setFile(file) {
+        this.clearError();
+        this.file$.next(file);
+    }
+    uploadDefinition() {
+        this.disable();
+        this.jsonString$.pipe(take(1)).subscribe(definition => {
+            this.closeErrorSubscription();
+            this.clearError();
+            this.enable();
+            this.hideModal();
+            this.definitionUploaded.emit(definition);
+        });
+    }
+    openErrorSubscription(errorCode) {
+        this.closeErrorSubscription();
+        this.errorSubscription = this.translateService.stream(errorCode).subscribe(error => {
+            this.error$.next(error);
+        });
+    }
+    closeErrorSubscription() {
+        if (this.errorSubscription) {
+            this.errorSubscription.unsubscribe();
+        }
+    }
+    clearError() {
+        this.error$.next('');
+    }
+    openFileSubscription() {
+        this.fileSubscription = this.file$.subscribe(file => {
+            if (file) {
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    const result = reader.result.toString();
+                    if (this.stringIsValidJson(result)) {
+                        this.jsonString$.next(result);
+                    }
+                };
+                reader.readAsText(file);
+            }
+            else {
+                this.clearJsonString();
+            }
+        });
+    }
+    openShowSubscription() {
+        this.showSubscription = this.show$.subscribe(show => {
+            if (show) {
+                this.showModal();
+            }
+            else {
+                this.hideModal();
+            }
+            this.clearJsonString();
+            this.clearError();
+            this.clearDropzone();
+        });
+    }
+    clearJsonString() {
+        this.jsonString$.next('');
+    }
+    clearDropzone() {
+        this.clear$.next();
+    }
+    showModal() {
+        this.modal.show();
+    }
+    hideModal() {
+        this.modal.hide();
+    }
+    stringIsValidJson(string) {
+        var _a, _b;
+        try {
+            // tslint:disable-next-line
+            (_b = (_a = JSON.parse(string)) === null || _a === void 0 ? void 0 : _a.formDefinition) === null || _b === void 0 ? void 0 : _b.components;
+        }
+        catch (e) {
+            this.clearDropzone();
+            this.openErrorSubscription('dropzone.error.invalidFormDef');
+            return false;
+        }
+        return true;
+    }
+    disable() {
+        this.disabled$.next(true);
+    }
+    enable() {
+        this.disabled$.next(false);
+    }
+}
+FormManagementUploadComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-form-management-upload',
+                template: "<valtimo-modal\n  #uploadFormDefinitionModal\n  [title]=\"'uploadFormDefinition' | translate\"\n  showFooter=\"true\"\n>\n  <div class=\"mt-2\" body>\n    <valtimo-dropzone\n      [clear$]=\"clear$\"\n      (fileSelected)=\"setFile($event)\"\n      [disabled]=\"disabled$ | async\"\n      [subtitle]=\"'dropzone.formJsonDocDef' | translate\"\n      [externalError$]=\"error$\"\n    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && !(error$ | async); else pleaseSelect\">\n      <button [disabled]=\"disabled$ | async\" class=\"btn btn-primary\" (click)=\"uploadDefinition()\">\n        {{ 'Upload' | translate }}\n      </button>\n    </ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #pleaseSelect>\n  <button class=\"btn btn-primary\" [disabled]=\"true\">\n    {{ 'Select a document definition' | translate }}\n  </button>\n</ng-template>\n",
+                styles: [""]
+            },] }
+];
+FormManagementUploadComponent.ctorParameters = () => [
+    { type: DocumentService },
+    { type: TranslateService }
+];
+FormManagementUploadComponent.propDecorators = {
+    modal: [{ type: ViewChild, args: ['uploadFormDefinitionModal',] }],
+    show$: [{ type: Input }],
+    definitionUploaded: [{ type: Output }]
 };
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class FormManagementModule {
-}
-FormManagementModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    FormManagementComponent,
-                    FormManagementCreateComponent,
-                    FormManagementListComponent,
-                    FormManagementEditComponent,
-                    FormManagementUploadComponent
-                ],
-                imports: [
-                    FormManagementRoutingModule,
-                    FormIoModule,
-                    CommonModule,
-                    ReactiveFormsModule,
-                    FormsModule,
-                    WidgetModule,
-                    ListModule,
-                    TranslateModule,
-                    NgbTooltipModule,
-                    DropzoneModule,
-                    ModalModule
-                ],
-                exports: [FormManagementComponent]
-            },] }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormManagementModule {
+}
+FormManagementModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    FormManagementComponent,
+                    FormManagementCreateComponent,
+                    FormManagementListComponent,
+                    FormManagementEditComponent,
+                    FormManagementUploadComponent,
+                ],
+                imports: [
+                    FormManagementRoutingModule,
+                    FormIoModule,
+                    CommonModule,
+                    ReactiveFormsModule,
+                    FormsModule,
+                    WidgetModule,
+                    ListModule,
+                    TranslateModule,
+                    NgbTooltipModule,
+                    DropzoneModule,
+                    ModalModule,
+                ],
+                exports: [FormManagementComponent],
+            },] }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { FormManagementComponent, FormManagementModule, FormManagementService, FormManagementCreateComponent as ɵa, FormManagementListComponent as ɵb, FormManagementEditComponent as ɵc, FormManagementUploadComponent as ɵd, FormManagementRoutingModule as ɵe };