@valtimo/milestone 4.15.3-next-main.16 → 4.17.0

package/fesm2015/valtimo-milestone.js

@@ -1,6 +1,6 @@
 import { ɵɵdefineInjectable, ɵɵinject, Injectable, Component, NgModule } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { ConfigService } from '@valtimo/config';
+import { ConfigService, ROLE_ADMIN } from '@valtimo/config';
 import { FormControl, Validators, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { AlertService, ListModule, WidgetModule } from '@valtimo/components';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
@@ -8,693 +8,742 @@ import { CommonModule } from '@angular/common';
 import { AuthGuardService } from '@valtimo/security';
 import { ProcessService } from '@valtimo/process';
 import { switchMap } from 'rxjs/operators';
-import { ROLE_ADMIN } from '@valtimo/contract';
 import { combineLatest } from 'rxjs';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { TranslateModule } from '@ngx-translate/core';
 
-/*
- * 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 MilestoneService {
-    constructor(configService, http) {
-        this.configService = configService;
-        this.http = http;
-        this.valtimoApiConfig = configService.config.valtimoApi;
-    }
-    getMilestones() {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}milestones`);
-    }
-    getMilestone(milestoneId) {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}milestones/${milestoneId}`);
-    }
-    createMilestone(milestone) {
-        return this.http.post(`${this.valtimoApiConfig.endpointUri}milestones`, milestone);
-    }
-    updateMilestone(milestone) {
-        return this.http.post(`${this.valtimoApiConfig.endpointUri}milestones`, milestone);
-    }
-    deleteMilestone(milestoneId) {
-        return this.http.delete(`${this.valtimoApiConfig.endpointUri}milestones/${milestoneId}`);
-    }
-    getMilestoneSets() {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}milestone-sets`);
-    }
-    getMilestoneSet(milestoneSetId) {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}milestone-sets/${milestoneSetId}`);
-    }
-    createMilestoneSet(milestoneSet) {
-        return this.http.post(`${this.valtimoApiConfig.endpointUri}milestone-sets`, milestoneSet);
-    }
-    updateMilestoneSet(milestoneSet) {
-        return this.http.post(`${this.valtimoApiConfig.endpointUri}milestone-sets`, milestoneSet);
-    }
-    deleteMilestoneSet(milestoneSetId) {
-        return this.http.delete(`${this.valtimoApiConfig.endpointUri}milestone-sets/${milestoneSetId}`);
-    }
-    getFlownodes(processDefinitionId) {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}milestones/${processDefinitionId}/flownodes`);
-    }
-}
-MilestoneService.ɵprov = ɵɵdefineInjectable({ factory: function MilestoneService_Factory() { return new MilestoneService(ɵɵinject(ConfigService), ɵɵinject(HttpClient)); }, token: MilestoneService, providedIn: "root" });
-MilestoneService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-MilestoneService.ctorParameters = () => [
-    { type: ConfigService },
-    { type: HttpClient }
+/*
+ * 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.
+ */
+
+/*
+ *
+ *  * 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.
+ */
+class MilestoneService {
+    constructor(configService, http) {
+        this.configService = configService;
+        this.http = http;
+        this.valtimoApiConfig = configService.config.valtimoApi;
+    }
+    getMilestones() {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}milestones`);
+    }
+    getMilestone(milestoneId) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}milestones/${milestoneId}`);
+    }
+    createMilestone(milestone) {
+        return this.http.post(`${this.valtimoApiConfig.endpointUri}milestones`, milestone);
+    }
+    updateMilestone(milestone) {
+        return this.http.post(`${this.valtimoApiConfig.endpointUri}milestones`, milestone);
+    }
+    deleteMilestone(milestoneId) {
+        return this.http.delete(`${this.valtimoApiConfig.endpointUri}milestones/${milestoneId}`);
+    }
+    getMilestoneSets() {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}milestone-sets`);
+    }
+    getMilestoneSet(milestoneSetId) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}milestone-sets/${milestoneSetId}`);
+    }
+    createMilestoneSet(milestoneSet) {
+        return this.http.post(`${this.valtimoApiConfig.endpointUri}milestone-sets`, milestoneSet);
+    }
+    updateMilestoneSet(milestoneSet) {
+        return this.http.post(`${this.valtimoApiConfig.endpointUri}milestone-sets`, milestoneSet);
+    }
+    deleteMilestoneSet(milestoneSetId) {
+        return this.http.delete(`${this.valtimoApiConfig.endpointUri}milestone-sets/${milestoneSetId}`);
+    }
+    getFlownodes(processDefinitionId) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}milestones/${processDefinitionId}/flownodes`);
+    }
+}
+MilestoneService.ɵprov = ɵɵdefineInjectable({ factory: function MilestoneService_Factory() { return new MilestoneService(ɵɵinject(ConfigService), ɵɵinject(HttpClient)); }, token: MilestoneService, providedIn: "root" });
+MilestoneService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+MilestoneService.ctorParameters = () => [
+    { type: ConfigService },
+    { type: HttpClient }
 ];
 
-/*
- * 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 MilestoneComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-MilestoneComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-milestone',
-                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]=\"'sets/create'\" class=\"btn btn-primary btn-space\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Milestone Set' | translate }}</span>\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 Milestone' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-milestone-list></valtimo-milestone-list>\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 MilestoneComponent {
+    constructor() { }
+    ngOnInit() { }
+}
+MilestoneComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-milestone',
+                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]=\"'sets/create'\" class=\"btn btn-primary btn-space\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Milestone Set' | translate }}</span>\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 Milestone' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-milestone-list></valtimo-milestone-list>\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 */"]
+            },] }
+];
 MilestoneComponent.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 MilestoneSetCreateComponent {
-    constructor(milestoneService, formBuilder, router, alertService) {
-        this.milestoneService = milestoneService;
-        this.formBuilder = formBuilder;
-        this.router = router;
-        this.alertService = alertService;
-    }
-    get formControls() {
-        return this.form.controls;
-    }
-    ngOnInit() {
-        this.form = this.formBuilder.group({
-            title: new FormControl('', Validators.required),
-        });
-    }
-    reset() {
-        this.form.setValue({
-            title: '',
-        });
-    }
-    createMilestoneSet() {
-        this.milestoneService.createMilestoneSet(this.form.value).subscribe(() => {
-            this.router.navigate(['/milestones']);
-            this.alertService.success('New Milestone set has been created');
-        });
-    }
-}
-MilestoneSetCreateComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-milestone-set-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)=\"createMilestoneSet()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone set title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" 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 */"]
-            },] }
-];
-MilestoneSetCreateComponent.ctorParameters = () => [
-    { type: MilestoneService },
-    { type: FormBuilder },
-    { type: Router },
-    { type: AlertService }
+/*
+ * 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 MilestoneSetCreateComponent {
+    constructor(milestoneService, formBuilder, router, alertService) {
+        this.milestoneService = milestoneService;
+        this.formBuilder = formBuilder;
+        this.router = router;
+        this.alertService = alertService;
+    }
+    get formControls() {
+        return this.form.controls;
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            title: new FormControl('', Validators.required),
+        });
+    }
+    reset() {
+        this.form.setValue({
+            title: '',
+        });
+    }
+    createMilestoneSet() {
+        this.milestoneService.createMilestoneSet(this.form.value).subscribe(() => {
+            this.router.navigate(['/milestones']);
+            this.alertService.success('New Milestone set has been created');
+        });
+    }
+}
+MilestoneSetCreateComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-milestone-set-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)=\"createMilestoneSet()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone set title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" 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 */"]
+            },] }
+];
+MilestoneSetCreateComponent.ctorParameters = () => [
+    { type: MilestoneService },
+    { type: FormBuilder },
+    { type: Router },
+    { type: AlertService }
 ];
 
-/*
- * 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 MilestoneCreateComponent {
-    constructor(milestoneService, formBuilder, router, alertService, processService) {
-        this.milestoneService = milestoneService;
-        this.formBuilder = formBuilder;
-        this.router = router;
-        this.alertService = alertService;
-        this.processService = processService;
-        this.milestoneSets = [];
-        this.processDefinitions = [];
-        this.taskDefinitions = [];
-    }
-    get formControls() {
-        return this.form.controls;
-    }
-    ngOnInit() {
-        this.form = this.formBuilder.group({
-            milestoneSet: new FormControl('', Validators.required),
-            title: new FormControl('', Validators.required),
-            processDefinitionKey: new FormControl('', Validators.required),
-            taskDefinitionKey: new FormControl('', Validators.required),
-            plannedIntervalInDays: new FormControl('', [
-                Validators.required,
-                Validators.pattern('^[0-9]*$'),
-            ]),
-            color: new FormControl('', [
-                Validators.required,
-                Validators.pattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$'),
-            ]),
-        });
-        this.getMilestoneSets();
-        this.getMilestones();
-    }
-    reset() {
-        this.form.patchValue({
-            milestoneSet: '',
-            title: '',
-            processDefinitionKey: '',
-            taskDefinitionKey: '',
-            plannedIntervalInDays: '',
-            color: '',
-        });
-    }
-    getMilestoneSets() {
-        this.milestoneService.getMilestoneSets().subscribe((milesetoneSets) => {
-            this.milestoneSets = milesetoneSets;
-        });
-    }
-    getMilestones() {
-        this.processService
-            .getProcessDefinitions()
-            .subscribe((processDefinitions) => {
-            this.processDefinitions = processDefinitions;
-        });
-    }
-    getFlownodes(processDefinitionId) {
-        if (processDefinitionId) {
-            this.milestoneService.getFlownodes(processDefinitionId).subscribe((flowNodes) => {
-                this.taskDefinitions = flowNodes['flowNodeMap'];
-                this.form.controls.taskDefinitionKey.setValue('');
-            });
-        }
-    }
-    createMilestone() {
-        const milestone = this.form.value;
-        milestone.processDefinitionKey = milestone.processDefinitionKey['key'];
-        milestone.id = null;
-        this.milestoneService.createMilestone(milestone).subscribe(() => {
-            this.router.navigate(['/milestones']);
-            this.alertService.success('New Milestone has been created');
-        }, err => {
-            this.alertService.error('Error creating new milestone');
-        });
-    }
-}
-MilestoneCreateComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-milestone-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)=\"createMilestone()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\"\n                >Milestone set</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"milestoneSet\"\n                  formControlName=\"milestoneSet\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.valid,\n                    'is-invalid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a Milestone set</option>\n                  <option *ngFor=\"let milestoneSet of milestoneSets\" [value]=\"milestoneSet.id\">\n                    {{ milestoneSet.title }} ({{ milestoneSet.id }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"formControls.milestoneSet.touched && formControls.milestoneSet.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.milestoneSet.errors.required\">\n                    Milestone set is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\"\n                >Process definition</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"process\"\n                  formControlName=\"processDefinitionKey\"\n                  class=\"form-control\"\n                  (ngModelChange)=\"getFlownodes($event.id)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a process</option>\n                  <option\n                    *ngFor=\"let processDefinition of processDefinitions\"\n                    [ngValue]=\"processDefinition\"\n                  >\n                    {{ processDefinition.name }} ({{ processDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.processDefinitionKey.touched &&\n                    formControls.processDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.processDefinitionKey.errors.required\">\n                    Process is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\">Task</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"task\"\n                  formControlName=\"taskDefinitionKey\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a task</option>\n                  <option\n                    *ngFor=\"let taskDefinition of taskDefinitions | keyvalue\"\n                    [value]=\"taskDefinition.key\"\n                  >\n                    {{ taskDefinition.value }} ({{ taskDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.taskDefinitionKey.errors.required\">Task is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"interval\"\n                >Interval (in days)</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"interval\"\n                  formControlName=\"plannedIntervalInDays\"\n                  class=\"form-control\"\n                  placeholder=\"Interval (in days)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.valid,\n                    'is-invalid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"\n                    formControls.plannedIntervalInDays.touched &&\n                    formControls.plannedIntervalInDays.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.required\">\n                    Interval is required\n                  </div>\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.pattern\">\n                    Interval is not a valid number\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"color\">Color</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  [colorPicker]=\"form.value.color\"\n                  (colorPickerChange)=\"form.controls.color.setValue($event)\"\n                  [style.background]=\"form.value.color\"\n                  type=\"text\"\n                  id=\"color\"\n                  formControlName=\"color\"\n                  class=\"form-control\"\n                  placeholder=\"Color\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.color.touched && formControls.color.valid,\n                    'is-invalid': formControls.color.touched && formControls.color.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.color.touched && formControls.color.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.color.errors.required\">Interval is required</div>\n                  <div *ngIf=\"formControls.color.errors.pattern\">Color is not a valid hex code</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" 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 */"]
-            },] }
-];
-MilestoneCreateComponent.ctorParameters = () => [
-    { type: MilestoneService },
-    { type: FormBuilder },
-    { type: Router },
-    { type: AlertService },
-    { type: ProcessService }
+/*
+ * 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 MilestoneCreateComponent {
+    constructor(milestoneService, formBuilder, router, alertService, processService) {
+        this.milestoneService = milestoneService;
+        this.formBuilder = formBuilder;
+        this.router = router;
+        this.alertService = alertService;
+        this.processService = processService;
+        this.milestoneSets = [];
+        this.processDefinitions = [];
+        this.taskDefinitions = [];
+    }
+    get formControls() {
+        return this.form.controls;
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            milestoneSet: new FormControl('', Validators.required),
+            title: new FormControl('', Validators.required),
+            processDefinitionKey: new FormControl('', Validators.required),
+            taskDefinitionKey: new FormControl('', Validators.required),
+            plannedIntervalInDays: new FormControl('', [
+                Validators.required,
+                Validators.pattern('^[0-9]*$'),
+            ]),
+            color: new FormControl('', [
+                Validators.required,
+                Validators.pattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$'),
+            ]),
+        });
+        this.getMilestoneSets();
+        this.getMilestones();
+    }
+    reset() {
+        this.form.patchValue({
+            milestoneSet: '',
+            title: '',
+            processDefinitionKey: '',
+            taskDefinitionKey: '',
+            plannedIntervalInDays: '',
+            color: '',
+        });
+    }
+    getMilestoneSets() {
+        this.milestoneService.getMilestoneSets().subscribe((milesetoneSets) => {
+            this.milestoneSets = milesetoneSets;
+        });
+    }
+    getMilestones() {
+        this.processService
+            .getProcessDefinitions()
+            .subscribe((processDefinitions) => {
+            this.processDefinitions = processDefinitions;
+        });
+    }
+    getFlownodes(processDefinitionId) {
+        if (processDefinitionId) {
+            this.milestoneService.getFlownodes(processDefinitionId).subscribe((flowNodes) => {
+                this.taskDefinitions = flowNodes['flowNodeMap'];
+                this.form.controls.taskDefinitionKey.setValue('');
+            });
+        }
+    }
+    createMilestone() {
+        const milestone = this.form.value;
+        milestone.processDefinitionKey = milestone.processDefinitionKey['key'];
+        milestone.id = null;
+        this.milestoneService.createMilestone(milestone).subscribe(() => {
+            this.router.navigate(['/milestones']);
+            this.alertService.success('New Milestone has been created');
+        }, err => {
+            this.alertService.error('Error creating new milestone');
+        });
+    }
+}
+MilestoneCreateComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-milestone-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)=\"createMilestone()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\"\n                >Milestone set</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"milestoneSet\"\n                  formControlName=\"milestoneSet\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.valid,\n                    'is-invalid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a Milestone set</option>\n                  <option *ngFor=\"let milestoneSet of milestoneSets\" [value]=\"milestoneSet.id\">\n                    {{ milestoneSet.title }} ({{ milestoneSet.id }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"formControls.milestoneSet.touched && formControls.milestoneSet.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.milestoneSet.errors.required\">\n                    Milestone set is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\"\n                >Process definition</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"process\"\n                  formControlName=\"processDefinitionKey\"\n                  class=\"form-control\"\n                  (ngModelChange)=\"getFlownodes($event.id)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a process</option>\n                  <option\n                    *ngFor=\"let processDefinition of processDefinitions\"\n                    [ngValue]=\"processDefinition\"\n                  >\n                    {{ processDefinition.name }} ({{ processDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.processDefinitionKey.touched &&\n                    formControls.processDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.processDefinitionKey.errors.required\">\n                    Process is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\">Task</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"task\"\n                  formControlName=\"taskDefinitionKey\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a task</option>\n                  <option\n                    *ngFor=\"let taskDefinition of taskDefinitions | keyvalue\"\n                    [value]=\"taskDefinition.key\"\n                  >\n                    {{ taskDefinition.value }} ({{ taskDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.taskDefinitionKey.errors.required\">Task is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"interval\"\n                >Interval (in days)</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"interval\"\n                  formControlName=\"plannedIntervalInDays\"\n                  class=\"form-control\"\n                  placeholder=\"Interval (in days)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.valid,\n                    'is-invalid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"\n                    formControls.plannedIntervalInDays.touched &&\n                    formControls.plannedIntervalInDays.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.required\">\n                    Interval is required\n                  </div>\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.pattern\">\n                    Interval is not a valid number\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"color\">Color</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  [colorPicker]=\"form.value.color\"\n                  (colorPickerChange)=\"form.controls.color.setValue($event)\"\n                  [style.background]=\"form.value.color\"\n                  type=\"text\"\n                  id=\"color\"\n                  formControlName=\"color\"\n                  class=\"form-control\"\n                  placeholder=\"Color\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.color.touched && formControls.color.valid,\n                    'is-invalid': formControls.color.touched && formControls.color.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.color.touched && formControls.color.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.color.errors.required\">Interval is required</div>\n                  <div *ngIf=\"formControls.color.errors.pattern\">Color is not a valid hex code</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" 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 */"]
+            },] }
+];
+MilestoneCreateComponent.ctorParameters = () => [
+    { type: MilestoneService },
+    { type: FormBuilder },
+    { type: Router },
+    { type: AlertService },
+    { type: ProcessService }
 ];
 
-/*
- * 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 MilestoneSetEditComponent {
-    constructor(milestoneService, formBuilder, router, alertService, route) {
-        this.milestoneService = milestoneService;
-        this.formBuilder = formBuilder;
-        this.router = router;
-        this.alertService = alertService;
-        this.route = route;
-    }
-    get formControls() {
-        return this.form.controls;
-    }
-    ngOnInit() {
-        this.form = this.formBuilder.group({
-            id: new FormControl({ value: '', disabled: true }, Validators.required),
-            title: new FormControl({}, Validators.required),
-        });
-        this.getMilestoneSet();
-    }
-    reset() {
-        this.form.controls.title.setValue('');
-    }
-    getMilestoneSet() {
-        const milestoneSetId = this.route.snapshot.paramMap.get('id');
-        this.milestoneService
-            .getMilestoneSet(+milestoneSetId)
-            .subscribe((milestoneSet) => {
-            this.form.setValue({
-                id: milestoneSet.id,
-                title: milestoneSet.title,
-            });
-        });
-    }
-    delete() {
-        // Todo: add confirmation dialog after it's fixed
-        this.deleteMilestoneSet();
-    }
-    deleteMilestoneSet() {
-        this.milestoneService.deleteMilestoneSet(this.form.getRawValue().id).subscribe(() => {
-            this.router.navigate(['/milestones']);
-            this.alertService.success('Milestone set has been deleted');
-        }, err => {
-            this.router.navigate(['/milestones']);
-            this.alertService.error('Could not delete Milestone set. Make sure this Milestone set does not contain any milestones.');
-        });
-    }
-    updateMilestoneSet() {
-        this.milestoneService.updateMilestoneSet(this.form.getRawValue()).subscribe(() => {
-            this.router.navigate(['/milestones']);
-            this.alertService.success('Milestone set has been updated');
-        });
-    }
-}
-MilestoneSetEditComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-milestone-set-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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-body bg-light\">\n          <div class=\"row py-5\">\n            <div class=\"col-12\">\n              <div class=\"row\">\n                <div class=\"col-12 col-sm-3 text-sm-right\"><strong>ID</strong></div>\n                <div class=\"col-12 col-sm-8 col-lg-6\">{{ form.getRawValue().id }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"bg-white p-5\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"updateMilestoneSet()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone set title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n                <button type=\"button\" class=\"btn btn-space btn-danger\" (click)=\"delete()\">\n                  Delete\n                </button>\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 */"]
-            },] }
-];
-MilestoneSetEditComponent.ctorParameters = () => [
-    { type: MilestoneService },
-    { 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 MilestoneSetEditComponent {
+    constructor(milestoneService, formBuilder, router, alertService, route) {
+        this.milestoneService = milestoneService;
+        this.formBuilder = formBuilder;
+        this.router = router;
+        this.alertService = alertService;
+        this.route = route;
+    }
+    get formControls() {
+        return this.form.controls;
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            id: new FormControl({ value: '', disabled: true }, Validators.required),
+            title: new FormControl({}, Validators.required),
+        });
+        this.getMilestoneSet();
+    }
+    reset() {
+        this.form.controls.title.setValue('');
+    }
+    getMilestoneSet() {
+        const milestoneSetId = this.route.snapshot.paramMap.get('id');
+        this.milestoneService
+            .getMilestoneSet(+milestoneSetId)
+            .subscribe((milestoneSet) => {
+            this.form.setValue({
+                id: milestoneSet.id,
+                title: milestoneSet.title,
+            });
+        });
+    }
+    delete() {
+        // Todo: add confirmation dialog after it's fixed
+        this.deleteMilestoneSet();
+    }
+    deleteMilestoneSet() {
+        this.milestoneService.deleteMilestoneSet(this.form.getRawValue().id).subscribe(() => {
+            this.router.navigate(['/milestones']);
+            this.alertService.success('Milestone set has been deleted');
+        }, err => {
+            this.router.navigate(['/milestones']);
+            this.alertService.error('Could not delete Milestone set. Make sure this Milestone set does not contain any milestones.');
+        });
+    }
+    updateMilestoneSet() {
+        this.milestoneService.updateMilestoneSet(this.form.getRawValue()).subscribe(() => {
+            this.router.navigate(['/milestones']);
+            this.alertService.success('Milestone set has been updated');
+        });
+    }
+}
+MilestoneSetEditComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-milestone-set-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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-body bg-light\">\n          <div class=\"row py-5\">\n            <div class=\"col-12\">\n              <div class=\"row\">\n                <div class=\"col-12 col-sm-3 text-sm-right\"><strong>ID</strong></div>\n                <div class=\"col-12 col-sm-8 col-lg-6\">{{ form.getRawValue().id }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"bg-white p-5\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"updateMilestoneSet()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone set title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n                <button type=\"button\" class=\"btn btn-space btn-danger\" (click)=\"delete()\">\n                  Delete\n                </button>\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 */"]
+            },] }
+];
+MilestoneSetEditComponent.ctorParameters = () => [
+    { type: MilestoneService },
+    { 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 MilestoneEditComponent {
-    constructor(milestoneService, formBuilder, router, alertService, processService, route) {
-        this.milestoneService = milestoneService;
-        this.formBuilder = formBuilder;
-        this.router = router;
-        this.alertService = alertService;
-        this.processService = processService;
-        this.route = route;
-        this.milestoneSets = [];
-        this.processDefinitions = [];
-        this.taskDefinitions = [];
-    }
-    get formControls() {
-        return this.form.controls;
-    }
-    ngOnInit() {
-        this.form = this.formBuilder.group({
-            id: new FormControl({ value: '', disabled: true }, Validators.required),
-            milestoneSet: new FormControl('', Validators.required),
-            title: new FormControl('', Validators.required),
-            processDefinitionKey: new FormControl('', Validators.required),
-            taskDefinitionKey: new FormControl('', Validators.required),
-            plannedIntervalInDays: new FormControl('', [
-                Validators.required,
-                Validators.pattern('^[0-9]*$'),
-            ]),
-            color: new FormControl('', [
-                Validators.required,
-                Validators.pattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$'),
-            ]),
-        });
-        this.getMilestone();
-        this.getMilestoneSets();
-        this.getProcessDefinitions();
-    }
-    reset() {
-        this.form.patchValue({
-            milestoneSet: '',
-            title: '',
-            processDefinitionKey: '',
-            taskDefinitionKey: '',
-            plannedIntervalInDays: '',
-            color: '',
-        });
-    }
-    getMilestone() {
-        const milestoneId = this.route.snapshot.paramMap.get('id');
-        this.milestoneService
-            .getMilestone(+milestoneId)
-            .pipe(switchMap((milestone) => {
-            this.form.patchValue({
-                id: milestone.id,
-                milestoneSet: milestone.milestoneSet.id,
-                title: milestone.title,
-                plannedIntervalInDays: milestone.plannedIntervalInDays,
-                color: milestone.color,
-                taskDefinitionKey: milestone.taskDefinitionKey,
-            });
-            return this.processService.getProcessDefinition(milestone.processDefinitionKey);
-        }))
-            .subscribe((processDefinition) => {
-            this.form.patchValue({
-                processDefinitionKey: processDefinition,
-            });
-        });
-    }
-    compareProcessDefinitions(processDefinition1, processDefinition2) {
-        return processDefinition1.id === processDefinition2.id;
-    }
-    getMilestoneSets() {
-        this.milestoneService.getMilestoneSets().subscribe((milesetoneSets) => {
-            this.milestoneSets = milesetoneSets;
-        });
-    }
-    getProcessDefinitions() {
-        this.processService
-            .getProcessDefinitions()
-            .subscribe((processDefinitions) => {
-            this.processDefinitions = processDefinitions;
-        });
-    }
-    getFlownodes(processDefinitionId) {
-        if (processDefinitionId) {
-            this.milestoneService.getFlownodes(processDefinitionId).subscribe((flowNodes) => {
-                this.taskDefinitions = flowNodes['flowNodeMap'];
-            });
-        }
-    }
-    delete() {
-        // Todo: add confirmation dialog after it's fixed
-        this.deleteMilestone();
-    }
-    deleteMilestone() {
-        this.milestoneService.deleteMilestone(this.form.getRawValue().id).subscribe(() => {
-            this.router.navigate(['/milestones']);
-            this.alertService.success('Milestone has been deleted');
-        }, err => {
-            this.router.navigate(['/milestones']);
-            this.alertService.error('Could not delete Milestone');
-        });
-    }
-    updateMilestone() {
-        const milestone = this.form.getRawValue();
-        milestone.processDefinitionKey = milestone.processDefinitionKey['key'];
-        this.milestoneService.updateMilestone(milestone).subscribe(() => {
-            this.router.navigate(['/milestones']);
-            this.alertService.success('Milestone has been updated');
-        }, err => {
-            this.alertService.error('Error updating milestone');
-        });
-    }
-}
-MilestoneEditComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-milestone-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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-body bg-light\">\n          <div class=\"row py-5\">\n            <div class=\"col-12\">\n              <div class=\"row\">\n                <div class=\"col-12 col-sm-3 text-sm-right\"><strong>ID</strong></div>\n                <div class=\"col-12 col-sm-8 col-lg-6\">{{ form.getRawValue().id }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"bg-white p-5\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"updateMilestone()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\"\n                >Milestone set</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"milestoneSet\"\n                  formControlName=\"milestoneSet\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.valid,\n                    'is-invalid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a Milestone set</option>\n                  <option *ngFor=\"let milestoneSet of milestoneSets\" [value]=\"milestoneSet.id\">\n                    {{ milestoneSet.title }} ({{ milestoneSet.id }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"formControls.milestoneSet.touched && formControls.milestoneSet.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.milestoneSet.errors.required\">\n                    Milestone set is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\"\n                >Process definition</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"process\"\n                  formControlName=\"processDefinitionKey\"\n                  class=\"form-control\"\n                  (ngModelChange)=\"getFlownodes($event.id)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.errors\n                  }\"\n                  required\n                  [compareWith]=\"compareProcessDefinitions\"\n                >\n                  <option value=\"\" disabled>Choose a process</option>\n                  <option\n                    *ngFor=\"let processDefinition of processDefinitions\"\n                    [ngValue]=\"processDefinition\"\n                  >\n                    {{ processDefinition.name }} ({{ processDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.processDefinitionKey.touched &&\n                    formControls.processDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.processDefinitionKey.errors.required\">\n                    Process is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\">Task</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"task\"\n                  formControlName=\"taskDefinitionKey\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" disabled>Choose a task</option>\n                  <option\n                    *ngFor=\"let taskDefinition of taskDefinitions | keyvalue\"\n                    [value]=\"taskDefinition.key\"\n                  >\n                    {{ taskDefinition.value }} ({{ taskDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.taskDefinitionKey.errors.required\">Task is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"interval\"\n                >Interval (in days)</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"interval\"\n                  formControlName=\"plannedIntervalInDays\"\n                  class=\"form-control\"\n                  placeholder=\"Interval (in days)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.valid,\n                    'is-invalid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"\n                    formControls.plannedIntervalInDays.touched &&\n                    formControls.plannedIntervalInDays.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.required\">\n                    Interval is required\n                  </div>\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.pattern\">\n                    Interval is not a valid number\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"color\">Color</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  [colorPicker]=\"form.value.color\"\n                  (colorPickerChange)=\"form.controls.color.setValue($event)\"\n                  [style.background]=\"form.value.color\"\n                  type=\"text\"\n                  id=\"color\"\n                  formControlName=\"color\"\n                  class=\"form-control\"\n                  placeholder=\"Color\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.color.touched && formControls.color.valid,\n                    'is-invalid': formControls.color.touched && formControls.color.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.color.touched && formControls.color.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.color.errors.required\">Color is required</div>\n                  <div *ngIf=\"formControls.color.errors.pattern\">Color is not a valid hex code</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n                <button type=\"button\" class=\"btn btn-space btn-danger\" (click)=\"delete()\">\n                  Delete\n                </button>\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 */"]
-            },] }
-];
-MilestoneEditComponent.ctorParameters = () => [
-    { type: MilestoneService },
-    { type: FormBuilder },
-    { type: Router },
-    { type: AlertService },
-    { type: ProcessService },
-    { 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 MilestoneEditComponent {
+    constructor(milestoneService, formBuilder, router, alertService, processService, route) {
+        this.milestoneService = milestoneService;
+        this.formBuilder = formBuilder;
+        this.router = router;
+        this.alertService = alertService;
+        this.processService = processService;
+        this.route = route;
+        this.milestoneSets = [];
+        this.processDefinitions = [];
+        this.taskDefinitions = [];
+    }
+    get formControls() {
+        return this.form.controls;
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            id: new FormControl({ value: '', disabled: true }, Validators.required),
+            milestoneSet: new FormControl('', Validators.required),
+            title: new FormControl('', Validators.required),
+            processDefinitionKey: new FormControl('', Validators.required),
+            taskDefinitionKey: new FormControl('', Validators.required),
+            plannedIntervalInDays: new FormControl('', [
+                Validators.required,
+                Validators.pattern('^[0-9]*$'),
+            ]),
+            color: new FormControl('', [
+                Validators.required,
+                Validators.pattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$'),
+            ]),
+        });
+        this.getMilestone();
+        this.getMilestoneSets();
+        this.getProcessDefinitions();
+    }
+    reset() {
+        this.form.patchValue({
+            milestoneSet: '',
+            title: '',
+            processDefinitionKey: '',
+            taskDefinitionKey: '',
+            plannedIntervalInDays: '',
+            color: '',
+        });
+    }
+    getMilestone() {
+        const milestoneId = this.route.snapshot.paramMap.get('id');
+        this.milestoneService
+            .getMilestone(+milestoneId)
+            .pipe(switchMap((milestone) => {
+            this.form.patchValue({
+                id: milestone.id,
+                milestoneSet: milestone.milestoneSet.id,
+                title: milestone.title,
+                plannedIntervalInDays: milestone.plannedIntervalInDays,
+                color: milestone.color,
+                taskDefinitionKey: milestone.taskDefinitionKey,
+            });
+            return this.processService.getProcessDefinition(milestone.processDefinitionKey);
+        }))
+            .subscribe((processDefinition) => {
+            this.form.patchValue({
+                processDefinitionKey: processDefinition,
+            });
+        });
+    }
+    compareProcessDefinitions(processDefinition1, processDefinition2) {
+        return processDefinition1.id === processDefinition2.id;
+    }
+    getMilestoneSets() {
+        this.milestoneService.getMilestoneSets().subscribe((milesetoneSets) => {
+            this.milestoneSets = milesetoneSets;
+        });
+    }
+    getProcessDefinitions() {
+        this.processService
+            .getProcessDefinitions()
+            .subscribe((processDefinitions) => {
+            this.processDefinitions = processDefinitions;
+        });
+    }
+    getFlownodes(processDefinitionId) {
+        if (processDefinitionId) {
+            this.milestoneService.getFlownodes(processDefinitionId).subscribe((flowNodes) => {
+                this.taskDefinitions = flowNodes['flowNodeMap'];
+            });
+        }
+    }
+    delete() {
+        // Todo: add confirmation dialog after it's fixed
+        this.deleteMilestone();
+    }
+    deleteMilestone() {
+        this.milestoneService.deleteMilestone(this.form.getRawValue().id).subscribe(() => {
+            this.router.navigate(['/milestones']);
+            this.alertService.success('Milestone has been deleted');
+        }, err => {
+            this.router.navigate(['/milestones']);
+            this.alertService.error('Could not delete Milestone');
+        });
+    }
+    updateMilestone() {
+        const milestone = this.form.getRawValue();
+        milestone.processDefinitionKey = milestone.processDefinitionKey['key'];
+        this.milestoneService.updateMilestone(milestone).subscribe(() => {
+            this.router.navigate(['/milestones']);
+            this.alertService.success('Milestone has been updated');
+        }, err => {
+            this.alertService.error('Error updating milestone');
+        });
+    }
+}
+MilestoneEditComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-milestone-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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-body bg-light\">\n          <div class=\"row py-5\">\n            <div class=\"col-12\">\n              <div class=\"row\">\n                <div class=\"col-12 col-sm-3 text-sm-right\"><strong>ID</strong></div>\n                <div class=\"col-12 col-sm-8 col-lg-6\">{{ form.getRawValue().id }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"bg-white p-5\">\n          <form [formGroup]=\"form\" (ngSubmit)=\"updateMilestone()\">\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\"\n                >Milestone set</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"milestoneSet\"\n                  formControlName=\"milestoneSet\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.valid,\n                    'is-invalid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a Milestone set</option>\n                  <option *ngFor=\"let milestoneSet of milestoneSets\" [value]=\"milestoneSet.id\">\n                    {{ milestoneSet.title }} ({{ milestoneSet.id }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"formControls.milestoneSet.touched && formControls.milestoneSet.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.milestoneSet.errors.required\">\n                    Milestone set is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\"\n                >Process definition</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"process\"\n                  formControlName=\"processDefinitionKey\"\n                  class=\"form-control\"\n                  (ngModelChange)=\"getFlownodes($event.id)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.errors\n                  }\"\n                  required\n                  [compareWith]=\"compareProcessDefinitions\"\n                >\n                  <option value=\"\" disabled>Choose a process</option>\n                  <option\n                    *ngFor=\"let processDefinition of processDefinitions\"\n                    [ngValue]=\"processDefinition\"\n                  >\n                    {{ processDefinition.name }} ({{ processDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.processDefinitionKey.touched &&\n                    formControls.processDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.processDefinitionKey.errors.required\">\n                    Process is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\">Task</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"task\"\n                  formControlName=\"taskDefinitionKey\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" disabled>Choose a task</option>\n                  <option\n                    *ngFor=\"let taskDefinition of taskDefinitions | keyvalue\"\n                    [value]=\"taskDefinition.key\"\n                  >\n                    {{ taskDefinition.value }} ({{ taskDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.taskDefinitionKey.errors.required\">Task is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"interval\"\n                >Interval (in days)</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"interval\"\n                  formControlName=\"plannedIntervalInDays\"\n                  class=\"form-control\"\n                  placeholder=\"Interval (in days)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.valid,\n                    'is-invalid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"\n                    formControls.plannedIntervalInDays.touched &&\n                    formControls.plannedIntervalInDays.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.required\">\n                    Interval is required\n                  </div>\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.pattern\">\n                    Interval is not a valid number\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"color\">Color</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  [colorPicker]=\"form.value.color\"\n                  (colorPickerChange)=\"form.controls.color.setValue($event)\"\n                  [style.background]=\"form.value.color\"\n                  type=\"text\"\n                  id=\"color\"\n                  formControlName=\"color\"\n                  class=\"form-control\"\n                  placeholder=\"Color\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.color.touched && formControls.color.valid,\n                    'is-invalid': formControls.color.touched && formControls.color.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.color.touched && formControls.color.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.color.errors.required\">Color is required</div>\n                  <div *ngIf=\"formControls.color.errors.pattern\">Color is not a valid hex code</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n                <button type=\"button\" class=\"btn btn-space btn-danger\" (click)=\"delete()\">\n                  Delete\n                </button>\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 */"]
+            },] }
+];
+MilestoneEditComponent.ctorParameters = () => [
+    { type: MilestoneService },
+    { type: FormBuilder },
+    { type: Router },
+    { type: AlertService },
+    { type: ProcessService },
+    { 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.
- */
-const ɵ0 = { title: 'Milestones', roles: [ROLE_ADMIN] }, ɵ1 = { title: 'Create new Milestone Set', roles: [ROLE_ADMIN] }, ɵ2 = { title: 'Create new Milestone', roles: [ROLE_ADMIN] }, ɵ3 = { title: 'Milestone Set details', roles: [ROLE_ADMIN] }, ɵ4 = { title: 'Milestone details', roles: [ROLE_ADMIN] };
-const routes = [
-    {
-        path: 'milestones',
-        component: MilestoneComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ0,
-    },
-    {
-        path: 'milestones/sets/create',
-        component: MilestoneSetCreateComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ1,
-    },
-    {
-        path: 'milestones/create',
-        component: MilestoneCreateComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ2,
-    },
-    {
-        path: 'milestones/sets/set/:id',
-        component: MilestoneSetEditComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ3,
-    },
-    {
-        path: 'milestones/milestone/:id',
-        component: MilestoneEditComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ4,
-    },
-];
-class MilestoneRoutingModule {
-}
-MilestoneRoutingModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [],
-                imports: [CommonModule, RouterModule.forChild(routes)],
-                exports: [RouterModule],
-            },] }
+/*
+ * 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: 'Milestones', roles: [ROLE_ADMIN] }, ɵ1 = { title: 'Create new Milestone Set', roles: [ROLE_ADMIN] }, ɵ2 = { title: 'Create new Milestone', roles: [ROLE_ADMIN] }, ɵ3 = { title: 'Milestone Set details', roles: [ROLE_ADMIN] }, ɵ4 = { title: 'Milestone details', roles: [ROLE_ADMIN] };
+const routes = [
+    {
+        path: 'milestones',
+        component: MilestoneComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ0,
+    },
+    {
+        path: 'milestones/sets/create',
+        component: MilestoneSetCreateComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ1,
+    },
+    {
+        path: 'milestones/create',
+        component: MilestoneCreateComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ2,
+    },
+    {
+        path: 'milestones/sets/set/:id',
+        component: MilestoneSetEditComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ3,
+    },
+    {
+        path: 'milestones/milestone/:id',
+        component: MilestoneEditComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ4,
+    },
+];
+class MilestoneRoutingModule {
+}
+MilestoneRoutingModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [],
+                imports: [CommonModule, RouterModule.forChild(routes)],
+                exports: [RouterModule],
+            },] }
 ];
 
-/*
- * 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 MilestoneListComponent {
-    constructor(milestoneService, router) {
-        this.milestoneService = milestoneService;
-        this.router = router;
-        this.milestones = [];
-        this.milestoneFields = [
-            { key: 'id', label: 'ID' },
-            { key: 'title', label: 'Title' },
-            { key: 'processDefinitionKey', label: 'Process' },
-            { key: 'taskDefinitionKey', label: 'Task' },
-            { key: 'plannedIntervalInDays', label: 'Interval (in days)' },
-            { key: 'color', label: 'Color' },
-        ];
-    }
-    editMilestoneSet(milestoneSetId) {
-        this.router.navigate(['milestones/sets/set', milestoneSetId]);
-    }
-    editMilestone(milestone) {
-        this.router.navigate(['milestones/milestone', milestone.id]);
-    }
-    ngOnInit() {
-        combineLatest([
-            this.milestoneService.getMilestones(),
-            this.milestoneService.getMilestoneSets(),
-        ]).subscribe(([milestones, milestoneSets]) => this.handleMilestoneResult(milestones, milestoneSets));
-    }
-    handleMilestoneResult(milestones, milestoneSets) {
-        const milestoneSetsMap = this.getMilestoneSetsMap(milestones, milestoneSets);
-        this.setMilestones(milestoneSetsMap);
-    }
-    setMilestones(milestoneSetsMap) {
-        this.milestones = Array.from(milestoneSetsMap.entries()).map(entry => {
-            entry[0] = JSON.parse(entry[0]);
-            return entry;
-        });
-    }
-    getMilestoneSetsMap(milestones, milestoneSets) {
-        const mapWithSets = this.addMilestoneSetsToMap(milestoneSets, this.getEmptyMap());
-        return this.addMilestonesToMap(milestones, mapWithSets);
-    }
-    getEmptyMap() {
-        return new Map();
-    }
-    addMilestoneSetsToMap(milestoneSets, map) {
-        milestoneSets.forEach(milestoneSet => {
-            map.set(JSON.stringify(milestoneSet), []);
-        });
-        return map;
-    }
-    addMilestonesToMap(milestones, map) {
-        milestones.forEach(milestone => {
-            const milestoneSetString = JSON.stringify(milestone.milestoneSet);
-            const arr = map.get(milestoneSetString);
-            arr.push(milestone);
-            map.set(milestoneSetString, arr);
-        });
-        return map;
-    }
-}
-MilestoneListComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-milestone-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<div *ngFor=\"let milestoneGroup of milestones\" class=\"mb-4\">\n  <valtimo-widget>\n    <h4 (click)=\"editMilestoneSet(milestoneGroup[0].id)\" class=\"milestone-title\">\n      {{ milestoneGroup[0].title }} ({{ milestoneGroup[0].id }})\n    </h4>\n    <valtimo-list\n      [items]=\"milestoneGroup[1]\"\n      [fields]=\"milestoneFields\"\n      (rowClicked)=\"editMilestone($event)\"\n    >\n    </valtimo-list>\n  </valtimo-widget>\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 */.milestone-title{background-color:#f8f9f9;border-bottom:1px solid #dee2e6;cursor:pointer;margin:0;padding:1em}"]
-            },] }
-];
-MilestoneListComponent.ctorParameters = () => [
-    { type: MilestoneService },
-    { 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 MilestoneListComponent {
+    constructor(milestoneService, router) {
+        this.milestoneService = milestoneService;
+        this.router = router;
+        this.milestones = [];
+        this.milestoneFields = [
+            { key: 'id', label: 'ID' },
+            { key: 'title', label: 'Title' },
+            { key: 'processDefinitionKey', label: 'Process' },
+            { key: 'taskDefinitionKey', label: 'Task' },
+            { key: 'plannedIntervalInDays', label: 'Interval (in days)' },
+            { key: 'color', label: 'Color' },
+        ];
+    }
+    editMilestoneSet(milestoneSetId) {
+        this.router.navigate(['milestones/sets/set', milestoneSetId]);
+    }
+    editMilestone(milestone) {
+        this.router.navigate(['milestones/milestone', milestone.id]);
+    }
+    ngOnInit() {
+        combineLatest([
+            this.milestoneService.getMilestones(),
+            this.milestoneService.getMilestoneSets(),
+        ]).subscribe(([milestones, milestoneSets]) => this.handleMilestoneResult(milestones, milestoneSets));
+    }
+    handleMilestoneResult(milestones, milestoneSets) {
+        const milestoneSetsMap = this.getMilestoneSetsMap(milestones, milestoneSets);
+        this.setMilestones(milestoneSetsMap);
+    }
+    setMilestones(milestoneSetsMap) {
+        this.milestones = Array.from(milestoneSetsMap.entries()).map(entry => {
+            entry[0] = JSON.parse(entry[0]);
+            return entry;
+        });
+    }
+    getMilestoneSetsMap(milestones, milestoneSets) {
+        const mapWithSets = this.addMilestoneSetsToMap(milestoneSets, this.getEmptyMap());
+        return this.addMilestonesToMap(milestones, mapWithSets);
+    }
+    getEmptyMap() {
+        return new Map();
+    }
+    addMilestoneSetsToMap(milestoneSets, map) {
+        milestoneSets.forEach(milestoneSet => {
+            map.set(JSON.stringify(milestoneSet), []);
+        });
+        return map;
+    }
+    addMilestonesToMap(milestones, map) {
+        milestones.forEach(milestone => {
+            const milestoneSetString = JSON.stringify(milestone.milestoneSet);
+            const arr = map.get(milestoneSetString);
+            arr.push(milestone);
+            map.set(milestoneSetString, arr);
+        });
+        return map;
+    }
+}
+MilestoneListComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-milestone-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<div *ngFor=\"let milestoneGroup of milestones\" class=\"mb-4\">\n  <valtimo-widget>\n    <h4 (click)=\"editMilestoneSet(milestoneGroup[0].id)\" class=\"milestone-title\">\n      {{ milestoneGroup[0].title }} ({{ milestoneGroup[0].id }})\n    </h4>\n    <valtimo-list\n      [items]=\"milestoneGroup[1]\"\n      [fields]=\"milestoneFields\"\n      (rowClicked)=\"editMilestone($event)\"\n    >\n    </valtimo-list>\n  </valtimo-widget>\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 */.milestone-title{background-color:#f8f9f9;border-bottom:1px solid #dee2e6;cursor:pointer;margin:0;padding:1em}"]
+            },] }
+];
+MilestoneListComponent.ctorParameters = () => [
+    { type: MilestoneService },
+    { 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 MilestoneModule {
-}
-MilestoneModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    MilestoneComponent,
-                    MilestoneSetCreateComponent,
-                    MilestoneListComponent,
-                    MilestoneCreateComponent,
-                    MilestoneEditComponent,
-                    MilestoneSetEditComponent,
-                ],
-                imports: [
-                    RouterModule,
-                    MilestoneRoutingModule,
-                    CommonModule,
-                    ListModule,
-                    WidgetModule,
-                    ReactiveFormsModule,
-                    ColorPickerModule,
-                    TranslateModule,
-                ],
-                exports: [MilestoneComponent],
-            },] }
+/*
+ * 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 MilestoneModule {
+}
+MilestoneModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    MilestoneComponent,
+                    MilestoneSetCreateComponent,
+                    MilestoneListComponent,
+                    MilestoneCreateComponent,
+                    MilestoneEditComponent,
+                    MilestoneSetEditComponent,
+                ],
+                imports: [
+                    RouterModule,
+                    MilestoneRoutingModule,
+                    CommonModule,
+                    ListModule,
+                    WidgetModule,
+                    ReactiveFormsModule,
+                    ColorPickerModule,
+                    TranslateModule,
+                ],
+                exports: [MilestoneComponent],
+            },] }
 ];
 
-/*
- * 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 { MilestoneComponent, MilestoneModule, MilestoneService, MilestoneSetCreateComponent as ɵa, MilestoneListComponent as ɵb, MilestoneCreateComponent as ɵc, MilestoneEditComponent as ɵd, MilestoneSetEditComponent as ɵe, MilestoneRoutingModule as ɵf };