@valtimo/milestone 4.15.2 → 4.16.0-next-main.19

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,11 +8,60 @@ 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.
+ */
+
+/*
+ * 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.
  *
@@ -71,7 +120,7 @@ class MilestoneService {
 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'
+                providedIn: 'root',
             },] }
 ];
 MilestoneService.ctorParameters = () => [
@@ -95,10 +144,8 @@ MilestoneService.ctorParameters = () => [
  * limitations under the License.
  */
 class MilestoneComponent {
-    constructor() {
-    }
-    ngOnInit() {
-    }
+    constructor() { }
+    ngOnInit() { }
 }
 MilestoneComponent.decorators = [
     { type: Component, args: [{
@@ -136,12 +183,12 @@ class MilestoneSetCreateComponent {
     }
     ngOnInit() {
         this.form = this.formBuilder.group({
-            title: new FormControl('', Validators.required)
+            title: new FormControl('', Validators.required),
         });
     }
     reset() {
         this.form.setValue({
-            title: ''
+            title: '',
         });
     }
     createMilestoneSet() {
@@ -154,7 +201,7 @@ class MilestoneSetCreateComponent {
 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 type=\"text\" id=\"title\" formControlName=\"title\"\n                         class=\"form-control\" placeholder=\"Milestone set title\"\n                         [ngClass]=\"{'is-valid': formControls.title.touched && formControls.title.valid, 'is-invalid': formControls.title.touched && formControls.title.errors}\"\n                         required/>\n                  <div *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                       class=\"invalid-feedback\">\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()\">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",
+                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 */"]
             },] }
 ];
@@ -200,8 +247,14 @@ class MilestoneCreateComponent {
             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})$')])
+            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();
@@ -213,7 +266,7 @@ class MilestoneCreateComponent {
             processDefinitionKey: '',
             taskDefinitionKey: '',
             plannedIntervalInDays: '',
-            color: ''
+            color: '',
         });
     }
     getMilestoneSets() {
@@ -222,7 +275,9 @@ class MilestoneCreateComponent {
         });
     }
     getMilestones() {
-        this.processService.getProcessDefinitions().subscribe((processDefinitions) => {
+        this.processService
+            .getProcessDefinitions()
+            .subscribe((processDefinitions) => {
             this.processDefinitions = processDefinitions;
         });
     }
@@ -241,7 +296,7 @@ class MilestoneCreateComponent {
         this.milestoneService.createMilestone(milestone).subscribe(() => {
             this.router.navigate(['/milestones']);
             this.alertService.success('New Milestone has been created');
-        }, (err) => {
+        }, err => {
             this.alertService.error('Error creating new milestone');
         });
     }
@@ -249,7 +304,7 @@ class MilestoneCreateComponent {
 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\">Milestone set</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select type=\"text\" id=\"milestoneSet\" formControlName=\"milestoneSet\"\n                         class=\"form-control\"\n                         [ngClass]=\"{'is-valid': formControls.milestoneSet.touched && formControls.milestoneSet.valid, 'is-invalid': formControls.milestoneSet.touched && formControls.milestoneSet.errors}\"\n                         required>\n                    <option value=\"\" selected disabled>Choose a Milestone set</option>\n                    <option *ngFor=\"let milestoneSet of milestoneSets\" [value]=\"milestoneSet.id\">{{milestoneSet.title}} ({{milestoneSet.id}})</option>\n                  </select>\n                  <div *ngIf=\"formControls.milestoneSet.touched && formControls.milestoneSet.errors\"\n                       class=\"invalid-feedback\">\n                    <div *ngIf=\"formControls.milestoneSet.errors.required\">Milestone set 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=\"title\">Title</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input type=\"text\" id=\"title\" formControlName=\"title\"\n                         class=\"form-control\" placeholder=\"Milestone title\"\n                         [ngClass]=\"{'is-valid': formControls.title.touched && formControls.title.valid, 'is-invalid': formControls.title.touched && formControls.title.errors}\"\n                         required/>\n                  <div *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                       class=\"invalid-feedback\">\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\">Process definition</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select type=\"text\" id=\"process\" formControlName=\"processDefinitionKey\"\n                          class=\"form-control\" (ngModelChange)=\"getFlownodes($event.id)\"\n                          [ngClass]=\"{'is-valid': formControls.processDefinitionKey.touched && formControls.processDefinitionKey.valid, 'is-invalid': formControls.processDefinitionKey.touched && formControls.processDefinitionKey.errors}\"\n                          required>\n                    <option value=\"\" selected disabled>Choose a process</option>\n                    <option *ngFor=\"let processDefinition of processDefinitions\" [ngValue]=\"processDefinition\">{{processDefinition.name}} ({{processDefinition.key}})</option>\n                  </select>\n                  <div *ngIf=\"formControls.processDefinitionKey.touched && formControls.processDefinitionKey.errors\"\n                       class=\"invalid-feedback\">\n                    <div *ngIf=\"formControls.processDefinitionKey.errors.required\">Process 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\">Task</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select type=\"text\" id=\"task\" formControlName=\"taskDefinitionKey\"\n                          class=\"form-control\"\n                          [ngClass]=\"{'is-valid': formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.valid, 'is-invalid': formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors}\"\n                          required>\n                    <option value=\"\" selected disabled>Choose a task</option>\n                    <option *ngFor=\"let taskDefinition of taskDefinitions |keyvalue\" [value]=\"taskDefinition.key\">{{taskDefinition.value}} ({{taskDefinition.key}})</option>\n                  </select>\n                  <div *ngIf=\"formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors\"\n                       class=\"invalid-feedback\">\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\">Interval (in days)</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input type=\"text\" id=\"interval\" formControlName=\"plannedIntervalInDays\"\n                         class=\"form-control\" placeholder=\"Interval (in days)\"\n                         [ngClass]=\"{'is-valid': formControls.plannedIntervalInDays.touched && formControls.plannedIntervalInDays.valid, 'is-invalid': formControls.plannedIntervalInDays.touched && formControls.plannedIntervalInDays.errors}\"\n                         required/>\n                  <div *ngIf=\"formControls.plannedIntervalInDays.touched && formControls.plannedIntervalInDays.errors\"\n                       class=\"invalid-feedback\">\n                    <div *ngIf=\"formControls.plannedIntervalInDays.errors.required\">Interval is required</div>\n                    <div *ngIf=\"formControls.plannedIntervalInDays.errors.pattern\">Interval is not a valid number</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\n                  <input [colorPicker]=\"form.value.color\"\n                         (colorPickerChange)=\"form.controls.color.setValue($event)\"\n                         [style.background]=\"form.value.color\"\n                         type=\"text\" id=\"color\" formControlName=\"color\"\n                         class=\"form-control\" placeholder=\"Color\"\n                         [ngClass]=\"{'is-valid': formControls.color.touched && formControls.color.valid, 'is-invalid': formControls.color.touched && formControls.color.errors}\"\n                         required/>\n                  <div *ngIf=\"formControls.color.touched && formControls.color.errors\"\n                       class=\"invalid-feedback\">\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()\">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",
+                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 */"]
             },] }
 ];
@@ -290,7 +345,7 @@ class MilestoneSetEditComponent {
     ngOnInit() {
         this.form = this.formBuilder.group({
             id: new FormControl({ value: '', disabled: true }, Validators.required),
-            title: new FormControl({}, Validators.required)
+            title: new FormControl({}, Validators.required),
         });
         this.getMilestoneSet();
     }
@@ -299,10 +354,12 @@ class MilestoneSetEditComponent {
     }
     getMilestoneSet() {
         const milestoneSetId = this.route.snapshot.paramMap.get('id');
-        this.milestoneService.getMilestoneSet(+milestoneSetId).subscribe((milestoneSet) => {
+        this.milestoneService
+            .getMilestoneSet(+milestoneSetId)
+            .subscribe((milestoneSet) => {
             this.form.setValue({
                 id: milestoneSet.id,
-                title: milestoneSet.title
+                title: milestoneSet.title,
             });
         });
     }
@@ -314,7 +371,7 @@ class MilestoneSetEditComponent {
         this.milestoneService.deleteMilestoneSet(this.form.getRawValue().id).subscribe(() => {
             this.router.navigate(['/milestones']);
             this.alertService.success('Milestone set has been deleted');
-        }, (err) => {
+        }, err => {
             this.router.navigate(['/milestones']);
             this.alertService.error('Could not delete Milestone set. Make sure this Milestone set does not contain any milestones.');
         });
@@ -329,7 +386,7 @@ class MilestoneSetEditComponent {
 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 type=\"text\" id=\"title\" formControlName=\"title\"\n                         class=\"form-control\" placeholder=\"Milestone set title\"\n                         [ngClass]=\"{'is-valid': formControls.title.touched && formControls.title.valid, 'is-invalid': formControls.title.touched && formControls.title.errors}\"\n                         required/>\n                  <div *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                       class=\"invalid-feedback\">\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()\">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",
+                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 */"]
             },] }
 ];
@@ -378,8 +435,14 @@ class MilestoneEditComponent {
             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})$')])
+            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();
@@ -392,12 +455,13 @@ class MilestoneEditComponent {
             processDefinitionKey: '',
             taskDefinitionKey: '',
             plannedIntervalInDays: '',
-            color: ''
+            color: '',
         });
     }
     getMilestone() {
         const milestoneId = this.route.snapshot.paramMap.get('id');
-        this.milestoneService.getMilestone(+milestoneId)
+        this.milestoneService
+            .getMilestone(+milestoneId)
             .pipe(switchMap((milestone) => {
             this.form.patchValue({
                 id: milestone.id,
@@ -411,7 +475,7 @@ class MilestoneEditComponent {
         }))
             .subscribe((processDefinition) => {
             this.form.patchValue({
-                processDefinitionKey: processDefinition
+                processDefinitionKey: processDefinition,
             });
         });
     }
@@ -424,7 +488,9 @@ class MilestoneEditComponent {
         });
     }
     getProcessDefinitions() {
-        this.processService.getProcessDefinitions().subscribe((processDefinitions) => {
+        this.processService
+            .getProcessDefinitions()
+            .subscribe((processDefinitions) => {
             this.processDefinitions = processDefinitions;
         });
     }
@@ -443,7 +509,7 @@ class MilestoneEditComponent {
         this.milestoneService.deleteMilestone(this.form.getRawValue().id).subscribe(() => {
             this.router.navigate(['/milestones']);
             this.alertService.success('Milestone has been deleted');
-        }, (err) => {
+        }, err => {
             this.router.navigate(['/milestones']);
             this.alertService.error('Could not delete Milestone');
         });
@@ -454,7 +520,7 @@ class MilestoneEditComponent {
         this.milestoneService.updateMilestone(milestone).subscribe(() => {
             this.router.navigate(['/milestones']);
             this.alertService.success('Milestone has been updated');
-        }, (err) => {
+        }, err => {
             this.alertService.error('Error updating milestone');
         });
     }
@@ -462,7 +528,7 @@ class MilestoneEditComponent {
 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\">Milestone set</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select type=\"text\" id=\"milestoneSet\" formControlName=\"milestoneSet\"\n                          class=\"form-control\"\n                          [ngClass]=\"{'is-valid': formControls.milestoneSet.touched && formControls.milestoneSet.valid, 'is-invalid': formControls.milestoneSet.touched && formControls.milestoneSet.errors}\"\n                          required>\n                    <option value=\"\" selected disabled>Choose a Milestone set</option>\n                    <option *ngFor=\"let milestoneSet of milestoneSets\" [value]=\"milestoneSet.id\">{{milestoneSet.title}} ({{milestoneSet.id}})</option>\n                  </select>\n                  <div *ngIf=\"formControls.milestoneSet.touched && formControls.milestoneSet.errors\"\n                       class=\"invalid-feedback\">\n                    <div *ngIf=\"formControls.milestoneSet.errors.required\">Milestone set 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=\"title\">Title</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input type=\"text\" id=\"title\" formControlName=\"title\"\n                         class=\"form-control\" placeholder=\"Milestone title\"\n                         [ngClass]=\"{'is-valid': formControls.title.touched && formControls.title.valid, 'is-invalid': formControls.title.touched && formControls.title.errors}\"\n                         required/>\n                  <div *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                       class=\"invalid-feedback\">\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\">Process definition</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select type=\"text\" id=\"process\" formControlName=\"processDefinitionKey\"\n                          class=\"form-control\" (ngModelChange)=\"getFlownodes($event.id)\"\n                          [ngClass]=\"{'is-valid': formControls.processDefinitionKey.touched && formControls.processDefinitionKey.valid, 'is-invalid': formControls.processDefinitionKey.touched && formControls.processDefinitionKey.errors}\"\n                          required [compareWith]=\"compareProcessDefinitions\">\n                    <option value=\"\" disabled>Choose a process</option>\n                    <option *ngFor=\"let processDefinition of processDefinitions\" [ngValue]=\"processDefinition\">{{processDefinition.name}} ({{processDefinition.key}})</option>\n                  </select>\n                  <div *ngIf=\"formControls.processDefinitionKey.touched && formControls.processDefinitionKey.errors\"\n                       class=\"invalid-feedback\">\n                    <div *ngIf=\"formControls.processDefinitionKey.errors.required\">Process 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\">Task</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select type=\"text\" id=\"task\" formControlName=\"taskDefinitionKey\"\n                          class=\"form-control\"\n                          [ngClass]=\"{'is-valid': formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.valid, 'is-invalid': formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors}\"\n                          required>\n                    <option value=\"\" disabled>Choose a task</option>\n                    <option *ngFor=\"let taskDefinition of taskDefinitions |keyvalue\" [value]=\"taskDefinition.key\">{{taskDefinition.value}} ({{taskDefinition.key}})</option>\n                  </select>\n                  <div *ngIf=\"formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors\"\n                       class=\"invalid-feedback\">\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\">Interval (in days)</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input type=\"text\" id=\"interval\" formControlName=\"plannedIntervalInDays\"\n                         class=\"form-control\" placeholder=\"Interval (in days)\"\n                         [ngClass]=\"{'is-valid': formControls.plannedIntervalInDays.touched && formControls.plannedIntervalInDays.valid, 'is-invalid': formControls.plannedIntervalInDays.touched && formControls.plannedIntervalInDays.errors}\"\n                         required/>\n                  <div *ngIf=\"formControls.plannedIntervalInDays.touched && formControls.plannedIntervalInDays.errors\"\n                       class=\"invalid-feedback\">\n                    <div *ngIf=\"formControls.plannedIntervalInDays.errors.required\">Interval is required</div>\n                    <div *ngIf=\"formControls.plannedIntervalInDays.errors.pattern\">Interval is not a valid number</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\n                  <input [colorPicker]=\"form.value.color\"\n                         (colorPickerChange)=\"form.controls.color.setValue($event)\"\n                         [style.background]=\"form.value.color\"\n                         type=\"text\" id=\"color\" formControlName=\"color\"\n                         class=\"form-control\" placeholder=\"Color\"\n                         [ngClass]=\"{'is-valid': formControls.color.touched && formControls.color.valid, 'is-invalid': formControls.color.touched && formControls.color.errors}\"\n                         required/>\n                  <div *ngIf=\"formControls.color.touched && formControls.color.errors\"\n                       class=\"invalid-feedback\">\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()\">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",
+                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 */"]
             },] }
 ];
@@ -496,31 +562,31 @@ const routes = [
         path: 'milestones',
         component: MilestoneComponent,
         canActivate: [AuthGuardService],
-        data: ɵ0
+        data: ɵ0,
     },
     {
         path: 'milestones/sets/create',
         component: MilestoneSetCreateComponent,
         canActivate: [AuthGuardService],
-        data: ɵ1
+        data: ɵ1,
     },
     {
         path: 'milestones/create',
         component: MilestoneCreateComponent,
         canActivate: [AuthGuardService],
-        data: ɵ2
+        data: ɵ2,
     },
     {
         path: 'milestones/sets/set/:id',
         component: MilestoneSetEditComponent,
         canActivate: [AuthGuardService],
-        data: ɵ3
+        data: ɵ3,
     },
     {
         path: 'milestones/milestone/:id',
         component: MilestoneEditComponent,
         canActivate: [AuthGuardService],
-        data: ɵ4
+        data: ɵ4,
     },
 ];
 class MilestoneRoutingModule {
@@ -528,11 +594,8 @@ class MilestoneRoutingModule {
 MilestoneRoutingModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [],
-                imports: [
-                    CommonModule,
-                    RouterModule.forChild(routes),
-                ],
-                exports: [RouterModule]
+                imports: [CommonModule, RouterModule.forChild(routes)],
+                exports: [RouterModule],
             },] }
 ];
 
@@ -572,8 +635,10 @@ class MilestoneListComponent {
         this.router.navigate(['milestones/milestone', milestone.id]);
     }
     ngOnInit() {
-        combineLatest([this.milestoneService.getMilestones(), this.milestoneService.getMilestoneSets()])
-            .subscribe(([milestones, milestoneSets]) => this.handleMilestoneResult(milestones, milestoneSets));
+        combineLatest([
+            this.milestoneService.getMilestones(),
+            this.milestoneService.getMilestoneSets(),
+        ]).subscribe(([milestones, milestoneSets]) => this.handleMilestoneResult(milestones, milestoneSets));
     }
     handleMilestoneResult(milestones, milestoneSets) {
         const milestoneSetsMap = this.getMilestoneSetsMap(milestones, milestoneSets);
@@ -593,13 +658,13 @@ class MilestoneListComponent {
         return new Map();
     }
     addMilestoneSetsToMap(milestoneSets, map) {
-        milestoneSets.forEach((milestoneSet) => {
+        milestoneSets.forEach(milestoneSet => {
             map.set(JSON.stringify(milestoneSet), []);
         });
         return map;
     }
     addMilestonesToMap(milestones, map) {
-        milestones.forEach((milestone) => {
+        milestones.forEach(milestone => {
             const milestoneSetString = JSON.stringify(milestone.milestoneSet);
             const arr = map.get(milestoneSetString);
             arr.push(milestone);
@@ -611,7 +676,7 @@ class MilestoneListComponent {
 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\">{{milestoneGroup[0].title}} ({{milestoneGroup[0].id}})</h4>\n    <valtimo-list [items]=\"milestoneGroup[1]\" [fields]=\"milestoneFields\" (rowClicked)=\"editMilestone($event)\">\n    </valtimo-list>\n  </valtimo-widget>\n</div>\n",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *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}"]
             },] }
 ];
@@ -639,8 +704,14 @@ class MilestoneModule {
 }
 MilestoneModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [MilestoneComponent, MilestoneSetCreateComponent, MilestoneListComponent,
-                    MilestoneCreateComponent, MilestoneEditComponent, MilestoneSetEditComponent],
+                declarations: [
+                    MilestoneComponent,
+                    MilestoneSetCreateComponent,
+                    MilestoneListComponent,
+                    MilestoneCreateComponent,
+                    MilestoneEditComponent,
+                    MilestoneSetEditComponent,
+                ],
                 imports: [
                     RouterModule,
                     MilestoneRoutingModule,
@@ -649,9 +720,9 @@ MilestoneModule.decorators = [
                     WidgetModule,
                     ReactiveFormsModule,
                     ColorPickerModule,
-                    TranslateModule
+                    TranslateModule,
                 ],
-                exports: [MilestoneComponent]
+                exports: [MilestoneComponent],
             },] }
 ];