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

package/README.md

@@ -1,19 +1,25 @@
 # Milestone
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version
+8.2.14.
 
 ## Code scaffolding
 
-Run `ng generate component component-name --project milestone` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project milestone`.
-> Note: Don't forget to add `--project milestone` or else it will be added to the default project in your `angular.json` file. 
+Run `ng generate component component-name --project milestone` to generate a new component. You can
+also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project milestone`.
+
+> Note: Don't forget to add `--project milestone` or else it will be added to the default project in
+> your `angular.json` file.
 
 ## Build
 
-Run `ng build milestone` to build the project. The build artifacts will be stored in the `dist/` directory.
+Run `ng build milestone` to build the project. The build artifacts will be stored in the `dist/`
+directory.
 
 ## Publishing
 
-After building your library with `ng build milestone`, go to the dist folder `cd dist/milestone` and run `npm publish`.
+After building your library with `ng build milestone`, go to the dist folder `cd dist/milestone` and
+run `npm publish`.
 
 ## Running unit tests
 
@@ -21,4 +27,5 @@ Run `ng test milestone` to execute the unit tests via [Karma](https://karma-runn
 
 ## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+To get more help on the Angular CLI use `ng help` or go check out the
+[Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

package/bundles/valtimo-milestone.umd.js

@@ -1,8 +1,58 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('@valtimo/config'), require('@angular/forms'), require('@valtimo/components'), require('@angular/router'), require('@angular/common'), require('@valtimo/security'), require('@valtimo/process'), require('rxjs/operators'), require('@valtimo/contract'), require('rxjs'), require('ngx-color-picker'), require('@ngx-translate/core')) :
-    typeof define === 'function' && define.amd ? define('@valtimo/milestone', ['exports', '@angular/core', '@angular/common/http', '@valtimo/config', '@angular/forms', '@valtimo/components', '@angular/router', '@angular/common', '@valtimo/security', '@valtimo/process', 'rxjs/operators', '@valtimo/contract', 'rxjs', 'ngx-color-picker', '@ngx-translate/core'], factory) :
-    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo.milestone = {}), global.ng.core, global.ng.common.http, global.config, global.ng.forms, global.components, global.ng.router, global.ng.common, global.security, global.process, global.rxjs.operators, global.contract, global.rxjs, global.ngxColorPicker, global.core$1));
-}(this, (function (exports, i0, i2, i1, forms, components, router, common, security, process, operators, contract, rxjs, ngxColorPicker, core) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('@valtimo/config'), require('@angular/forms'), require('@valtimo/components'), require('@angular/router'), require('@angular/common'), require('@valtimo/security'), require('@valtimo/process'), require('rxjs/operators'), require('rxjs'), require('ngx-color-picker'), require('@ngx-translate/core')) :
+    typeof define === 'function' && define.amd ? define('@valtimo/milestone', ['exports', '@angular/core', '@angular/common/http', '@valtimo/config', '@angular/forms', '@valtimo/components', '@angular/router', '@angular/common', '@valtimo/security', '@valtimo/process', 'rxjs/operators', 'rxjs', 'ngx-color-picker', '@ngx-translate/core'], factory) :
+    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo.milestone = {}), global.ng.core, global.ng.common.http, global.config, global.ng.forms, global.components, global.ng.router, global.ng.common, global.security, global.process, global.rxjs.operators, global.rxjs, global.ngxColorPicker, global.core$1));
+}(this, (function (exports, i0, i2, i1, forms, components, router, common, security, process, operators, rxjs, ngxColorPicker, core) { 'use strict';
+
+    /*
+     * 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.
@@ -63,7 +113,7 @@
     MilestoneService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MilestoneService_Factory() { return new MilestoneService(i0.ɵɵinject(i1.ConfigService), i0.ɵɵinject(i2.HttpClient)); }, token: MilestoneService, providedIn: "root" });
     MilestoneService.decorators = [
         { type: i0.Injectable, args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 },] }
     ];
     MilestoneService.ctorParameters = function () { return [
@@ -89,8 +139,7 @@
     var MilestoneComponent = /** @class */ (function () {
         function MilestoneComponent() {
         }
-        MilestoneComponent.prototype.ngOnInit = function () {
-        };
+        MilestoneComponent.prototype.ngOnInit = function () { };
         return MilestoneComponent;
     }());
     MilestoneComponent.decorators = [
@@ -133,12 +182,12 @@
         });
         MilestoneSetCreateComponent.prototype.ngOnInit = function () {
             this.form = this.formBuilder.group({
-                title: new forms.FormControl('', forms.Validators.required)
+                title: new forms.FormControl('', forms.Validators.required),
             });
         };
         MilestoneSetCreateComponent.prototype.reset = function () {
             this.form.setValue({
-                title: ''
+                title: '',
             });
         };
         MilestoneSetCreateComponent.prototype.createMilestoneSet = function () {
@@ -153,7 +202,7 @@
     MilestoneSetCreateComponent.decorators = [
         { type: i0.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 */"]
                 },] }
     ];
@@ -203,8 +252,14 @@
                 title: new forms.FormControl('', forms.Validators.required),
                 processDefinitionKey: new forms.FormControl('', forms.Validators.required),
                 taskDefinitionKey: new forms.FormControl('', forms.Validators.required),
-                plannedIntervalInDays: new forms.FormControl('', [forms.Validators.required, forms.Validators.pattern('^[0-9]*$')]),
-                color: new forms.FormControl('', [forms.Validators.required, forms.Validators.pattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$')])
+                plannedIntervalInDays: new forms.FormControl('', [
+                    forms.Validators.required,
+                    forms.Validators.pattern('^[0-9]*$'),
+                ]),
+                color: new forms.FormControl('', [
+                    forms.Validators.required,
+                    forms.Validators.pattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$'),
+                ]),
             });
             this.getMilestoneSets();
             this.getMilestones();
@@ -216,7 +271,7 @@
                 processDefinitionKey: '',
                 taskDefinitionKey: '',
                 plannedIntervalInDays: '',
-                color: ''
+                color: '',
             });
         };
         MilestoneCreateComponent.prototype.getMilestoneSets = function () {
@@ -227,7 +282,9 @@
         };
         MilestoneCreateComponent.prototype.getMilestones = function () {
             var _this = this;
-            this.processService.getProcessDefinitions().subscribe(function (processDefinitions) {
+            this.processService
+                .getProcessDefinitions()
+                .subscribe(function (processDefinitions) {
                 _this.processDefinitions = processDefinitions;
             });
         };
@@ -257,7 +314,7 @@
     MilestoneCreateComponent.decorators = [
         { type: i0.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 */"]
                 },] }
     ];
@@ -302,7 +359,7 @@
         MilestoneSetEditComponent.prototype.ngOnInit = function () {
             this.form = this.formBuilder.group({
                 id: new forms.FormControl({ value: '', disabled: true }, forms.Validators.required),
-                title: new forms.FormControl({}, forms.Validators.required)
+                title: new forms.FormControl({}, forms.Validators.required),
             });
             this.getMilestoneSet();
         };
@@ -312,10 +369,12 @@
         MilestoneSetEditComponent.prototype.getMilestoneSet = function () {
             var _this = this;
             var milestoneSetId = this.route.snapshot.paramMap.get('id');
-            this.milestoneService.getMilestoneSet(+milestoneSetId).subscribe(function (milestoneSet) {
+            this.milestoneService
+                .getMilestoneSet(+milestoneSetId)
+                .subscribe(function (milestoneSet) {
                 _this.form.setValue({
                     id: milestoneSet.id,
-                    title: milestoneSet.title
+                    title: milestoneSet.title,
                 });
             });
         };
@@ -345,7 +404,7 @@
     MilestoneSetEditComponent.decorators = [
         { type: i0.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 */"]
                 },] }
     ];
@@ -398,8 +457,14 @@
                 title: new forms.FormControl('', forms.Validators.required),
                 processDefinitionKey: new forms.FormControl('', forms.Validators.required),
                 taskDefinitionKey: new forms.FormControl('', forms.Validators.required),
-                plannedIntervalInDays: new forms.FormControl('', [forms.Validators.required, forms.Validators.pattern('^[0-9]*$')]),
-                color: new forms.FormControl('', [forms.Validators.required, forms.Validators.pattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$')])
+                plannedIntervalInDays: new forms.FormControl('', [
+                    forms.Validators.required,
+                    forms.Validators.pattern('^[0-9]*$'),
+                ]),
+                color: new forms.FormControl('', [
+                    forms.Validators.required,
+                    forms.Validators.pattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$'),
+                ]),
             });
             this.getMilestone();
             this.getMilestoneSets();
@@ -412,13 +477,14 @@
                 processDefinitionKey: '',
                 taskDefinitionKey: '',
                 plannedIntervalInDays: '',
-                color: ''
+                color: '',
             });
         };
         MilestoneEditComponent.prototype.getMilestone = function () {
             var _this = this;
             var milestoneId = this.route.snapshot.paramMap.get('id');
-            this.milestoneService.getMilestone(+milestoneId)
+            this.milestoneService
+                .getMilestone(+milestoneId)
                 .pipe(operators.switchMap(function (milestone) {
                 _this.form.patchValue({
                     id: milestone.id,
@@ -432,7 +498,7 @@
             }))
                 .subscribe(function (processDefinition) {
                 _this.form.patchValue({
-                    processDefinitionKey: processDefinition
+                    processDefinitionKey: processDefinition,
                 });
             });
         };
@@ -447,7 +513,9 @@
         };
         MilestoneEditComponent.prototype.getProcessDefinitions = function () {
             var _this = this;
-            this.processService.getProcessDefinitions().subscribe(function (processDefinitions) {
+            this.processService
+                .getProcessDefinitions()
+                .subscribe(function (processDefinitions) {
                 _this.processDefinitions = processDefinitions;
             });
         };
@@ -489,7 +557,7 @@
     MilestoneEditComponent.decorators = [
         { type: i0.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 */"]
                 },] }
     ];
@@ -517,37 +585,37 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      */
-    var ɵ0 = { title: 'Milestones', roles: [contract.ROLE_ADMIN] }, ɵ1 = { title: 'Create new Milestone Set', roles: [contract.ROLE_ADMIN] }, ɵ2 = { title: 'Create new Milestone', roles: [contract.ROLE_ADMIN] }, ɵ3 = { title: 'Milestone Set details', roles: [contract.ROLE_ADMIN] }, ɵ4 = { title: 'Milestone details', roles: [contract.ROLE_ADMIN] };
+    var ɵ0 = { title: 'Milestones', roles: [i1.ROLE_ADMIN] }, ɵ1 = { title: 'Create new Milestone Set', roles: [i1.ROLE_ADMIN] }, ɵ2 = { title: 'Create new Milestone', roles: [i1.ROLE_ADMIN] }, ɵ3 = { title: 'Milestone Set details', roles: [i1.ROLE_ADMIN] }, ɵ4 = { title: 'Milestone details', roles: [i1.ROLE_ADMIN] };
     var routes = [
         {
             path: 'milestones',
             component: MilestoneComponent,
             canActivate: [security.AuthGuardService],
-            data: ɵ0
+            data: ɵ0,
         },
         {
             path: 'milestones/sets/create',
             component: MilestoneSetCreateComponent,
             canActivate: [security.AuthGuardService],
-            data: ɵ1
+            data: ɵ1,
         },
         {
             path: 'milestones/create',
             component: MilestoneCreateComponent,
             canActivate: [security.AuthGuardService],
-            data: ɵ2
+            data: ɵ2,
         },
         {
             path: 'milestones/sets/set/:id',
             component: MilestoneSetEditComponent,
             canActivate: [security.AuthGuardService],
-            data: ɵ3
+            data: ɵ3,
         },
         {
             path: 'milestones/milestone/:id',
             component: MilestoneEditComponent,
             canActivate: [security.AuthGuardService],
-            data: ɵ4
+            data: ɵ4,
         },
     ];
     var MilestoneRoutingModule = /** @class */ (function () {
@@ -558,11 +626,8 @@
     MilestoneRoutingModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [],
-                    imports: [
-                        common.CommonModule,
-                        router.RouterModule.forChild(routes),
-                    ],
-                    exports: [router.RouterModule]
+                    imports: [common.CommonModule, router.RouterModule.forChild(routes)],
+                    exports: [router.RouterModule],
                 },] }
     ];
 
@@ -590,6 +655,8 @@
         return extendStatics(d, b);
     };
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -775,11 +842,13 @@
         }
         return ar;
     }
+    /** @deprecated */
     function __spread() {
         for (var ar = [], i = 0; i < arguments.length; i++)
             ar = ar.concat(__read(arguments[i]));
         return ar;
     }
+    /** @deprecated */
     function __spreadArrays() {
         for (var s = 0, i = 0, il = arguments.length; i < il; i++)
             s += arguments[i].length;
@@ -788,7 +857,17 @@
                 r[k] = a[j];
         return r;
     }
-    ;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
     }
@@ -853,18 +932,21 @@
     function __importDefault(mod) {
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
     var MilestoneListComponent = /** @class */ (function () {
@@ -889,8 +971,10 @@
         };
         MilestoneListComponent.prototype.ngOnInit = function () {
             var _this = this;
-            rxjs.combineLatest([this.milestoneService.getMilestones(), this.milestoneService.getMilestoneSets()])
-                .subscribe(function (_a) {
+            rxjs.combineLatest([
+                this.milestoneService.getMilestones(),
+                this.milestoneService.getMilestoneSets(),
+            ]).subscribe(function (_a) {
                 var _b = __read(_a, 2), milestones = _b[0], milestoneSets = _b[1];
                 return _this.handleMilestoneResult(milestones, milestoneSets);
             });
@@ -932,7 +1016,7 @@
     MilestoneListComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -963,8 +1047,14 @@
     }());
     MilestoneModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [MilestoneComponent, MilestoneSetCreateComponent, MilestoneListComponent,
-                        MilestoneCreateComponent, MilestoneEditComponent, MilestoneSetEditComponent],
+                    declarations: [
+                        MilestoneComponent,
+                        MilestoneSetCreateComponent,
+                        MilestoneListComponent,
+                        MilestoneCreateComponent,
+                        MilestoneEditComponent,
+                        MilestoneSetEditComponent,
+                    ],
                     imports: [
                         router.RouterModule,
                         MilestoneRoutingModule,
@@ -973,9 +1063,9 @@
                         components.WidgetModule,
                         forms.ReactiveFormsModule,
                         ngxColorPicker.ColorPickerModule,
-                        core.TranslateModule
+                        core.TranslateModule,
                     ],
-                    exports: [MilestoneComponent]
+                    exports: [MilestoneComponent],
                 },] }
     ];