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

package/bundles/valtimo-milestone.umd.js

@@ -1,1042 +1,1092 @@
 (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.
-     */
-    var MilestoneService = /** @class */ (function () {
-        function MilestoneService(configService, http) {
-            this.configService = configService;
-            this.http = http;
-            this.valtimoApiConfig = configService.config.valtimoApi;
-        }
-        MilestoneService.prototype.getMilestones = function () {
-            return this.http.get(this.valtimoApiConfig.endpointUri + "milestones");
-        };
-        MilestoneService.prototype.getMilestone = function (milestoneId) {
-            return this.http.get(this.valtimoApiConfig.endpointUri + "milestones/" + milestoneId);
-        };
-        MilestoneService.prototype.createMilestone = function (milestone) {
-            return this.http.post(this.valtimoApiConfig.endpointUri + "milestones", milestone);
-        };
-        MilestoneService.prototype.updateMilestone = function (milestone) {
-            return this.http.post(this.valtimoApiConfig.endpointUri + "milestones", milestone);
-        };
-        MilestoneService.prototype.deleteMilestone = function (milestoneId) {
-            return this.http.delete(this.valtimoApiConfig.endpointUri + "milestones/" + milestoneId);
-        };
-        MilestoneService.prototype.getMilestoneSets = function () {
-            return this.http.get(this.valtimoApiConfig.endpointUri + "milestone-sets");
-        };
-        MilestoneService.prototype.getMilestoneSet = function (milestoneSetId) {
-            return this.http.get(this.valtimoApiConfig.endpointUri + "milestone-sets/" + milestoneSetId);
-        };
-        MilestoneService.prototype.createMilestoneSet = function (milestoneSet) {
-            return this.http.post(this.valtimoApiConfig.endpointUri + "milestone-sets", milestoneSet);
-        };
-        MilestoneService.prototype.updateMilestoneSet = function (milestoneSet) {
-            return this.http.post(this.valtimoApiConfig.endpointUri + "milestone-sets", milestoneSet);
-        };
-        MilestoneService.prototype.deleteMilestoneSet = function (milestoneSetId) {
-            return this.http.delete(this.valtimoApiConfig.endpointUri + "milestone-sets/" + milestoneSetId);
-        };
-        MilestoneService.prototype.getFlownodes = function (processDefinitionId) {
-            return this.http.get(this.valtimoApiConfig.endpointUri + "milestones/" + processDefinitionId + "/flownodes");
-        };
-        return MilestoneService;
-    }());
-    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',
-                },] }
-    ];
-    MilestoneService.ctorParameters = function () { return [
-        { type: i1.ConfigService },
-        { type: i2.HttpClient }
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+
+    /*
+     *
+     *  * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *  *
+     *  * Licensed under EUPL, Version 1.2 (the "License");
+     *  * you may not use this file except in compliance with the License.
+     *  * You may obtain a copy of the License at
+     *  *
+     *  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *  *
+     *  * Unless required by applicable law or agreed to in writing, software
+     *  * distributed under the License is distributed on an "AS IS" basis,
+     *  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     *  * See the License for the specific language governing permissions and
+     *  * limitations under the License.
+     *
+     */
+
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var MilestoneService = /** @class */ (function () {
+        function MilestoneService(configService, http) {
+            this.configService = configService;
+            this.http = http;
+            this.valtimoApiConfig = configService.config.valtimoApi;
+        }
+        MilestoneService.prototype.getMilestones = function () {
+            return this.http.get(this.valtimoApiConfig.endpointUri + "milestones");
+        };
+        MilestoneService.prototype.getMilestone = function (milestoneId) {
+            return this.http.get(this.valtimoApiConfig.endpointUri + "milestones/" + milestoneId);
+        };
+        MilestoneService.prototype.createMilestone = function (milestone) {
+            return this.http.post(this.valtimoApiConfig.endpointUri + "milestones", milestone);
+        };
+        MilestoneService.prototype.updateMilestone = function (milestone) {
+            return this.http.post(this.valtimoApiConfig.endpointUri + "milestones", milestone);
+        };
+        MilestoneService.prototype.deleteMilestone = function (milestoneId) {
+            return this.http.delete(this.valtimoApiConfig.endpointUri + "milestones/" + milestoneId);
+        };
+        MilestoneService.prototype.getMilestoneSets = function () {
+            return this.http.get(this.valtimoApiConfig.endpointUri + "milestone-sets");
+        };
+        MilestoneService.prototype.getMilestoneSet = function (milestoneSetId) {
+            return this.http.get(this.valtimoApiConfig.endpointUri + "milestone-sets/" + milestoneSetId);
+        };
+        MilestoneService.prototype.createMilestoneSet = function (milestoneSet) {
+            return this.http.post(this.valtimoApiConfig.endpointUri + "milestone-sets", milestoneSet);
+        };
+        MilestoneService.prototype.updateMilestoneSet = function (milestoneSet) {
+            return this.http.post(this.valtimoApiConfig.endpointUri + "milestone-sets", milestoneSet);
+        };
+        MilestoneService.prototype.deleteMilestoneSet = function (milestoneSetId) {
+            return this.http.delete(this.valtimoApiConfig.endpointUri + "milestone-sets/" + milestoneSetId);
+        };
+        MilestoneService.prototype.getFlownodes = function (processDefinitionId) {
+            return this.http.get(this.valtimoApiConfig.endpointUri + "milestones/" + processDefinitionId + "/flownodes");
+        };
+        return MilestoneService;
+    }());
+    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',
+                },] }
+    ];
+    MilestoneService.ctorParameters = function () { return [
+        { type: i1.ConfigService },
+        { type: i2.HttpClient }
     ]; };
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    var MilestoneComponent = /** @class */ (function () {
-        function MilestoneComponent() {
-        }
-        MilestoneComponent.prototype.ngOnInit = function () { };
-        return MilestoneComponent;
-    }());
-    MilestoneComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'valtimo-milestone',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button [routerLink]=\"'sets/create'\" class=\"btn btn-primary btn-space\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Milestone Set' | translate }}</span>\n        </button>\n        <button [routerLink]=\"'create'\" class=\"btn btn-primary btn-space mr-0\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Milestone' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-milestone-list></valtimo-milestone-list>\n  </div>\n</div>\n",
-                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
-                },] }
-    ];
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var MilestoneComponent = /** @class */ (function () {
+        function MilestoneComponent() {
+        }
+        MilestoneComponent.prototype.ngOnInit = function () { };
+        return MilestoneComponent;
+    }());
+    MilestoneComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'valtimo-milestone',
+                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button [routerLink]=\"'sets/create'\" class=\"btn btn-primary btn-space\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Milestone Set' | translate }}</span>\n        </button>\n        <button [routerLink]=\"'create'\" class=\"btn btn-primary btn-space mr-0\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Milestone' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-milestone-list></valtimo-milestone-list>\n  </div>\n</div>\n",
+                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
+                },] }
+    ];
     MilestoneComponent.ctorParameters = function () { return []; };
 
-    /*
-     * 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.
-     */
-    var MilestoneSetCreateComponent = /** @class */ (function () {
-        function MilestoneSetCreateComponent(milestoneService, formBuilder, router, alertService) {
-            this.milestoneService = milestoneService;
-            this.formBuilder = formBuilder;
-            this.router = router;
-            this.alertService = alertService;
-        }
-        Object.defineProperty(MilestoneSetCreateComponent.prototype, "formControls", {
-            get: function () {
-                return this.form.controls;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MilestoneSetCreateComponent.prototype.ngOnInit = function () {
-            this.form = this.formBuilder.group({
-                title: new forms.FormControl('', forms.Validators.required),
-            });
-        };
-        MilestoneSetCreateComponent.prototype.reset = function () {
-            this.form.setValue({
-                title: '',
-            });
-        };
-        MilestoneSetCreateComponent.prototype.createMilestoneSet = function () {
-            var _this = this;
-            this.milestoneService.createMilestoneSet(this.form.value).subscribe(function () {
-                _this.router.navigate(['/milestones']);
-                _this.alertService.success('New Milestone set has been created');
-            });
-        };
-        return MilestoneSetCreateComponent;
-    }());
-    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\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone set title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  Reset\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  Submit\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
-                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
-                },] }
-    ];
-    MilestoneSetCreateComponent.ctorParameters = function () { return [
-        { type: MilestoneService },
-        { type: forms.FormBuilder },
-        { type: router.Router },
-        { type: components.AlertService }
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var MilestoneSetCreateComponent = /** @class */ (function () {
+        function MilestoneSetCreateComponent(milestoneService, formBuilder, router, alertService) {
+            this.milestoneService = milestoneService;
+            this.formBuilder = formBuilder;
+            this.router = router;
+            this.alertService = alertService;
+        }
+        Object.defineProperty(MilestoneSetCreateComponent.prototype, "formControls", {
+            get: function () {
+                return this.form.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MilestoneSetCreateComponent.prototype.ngOnInit = function () {
+            this.form = this.formBuilder.group({
+                title: new forms.FormControl('', forms.Validators.required),
+            });
+        };
+        MilestoneSetCreateComponent.prototype.reset = function () {
+            this.form.setValue({
+                title: '',
+            });
+        };
+        MilestoneSetCreateComponent.prototype.createMilestoneSet = function () {
+            var _this = this;
+            this.milestoneService.createMilestoneSet(this.form.value).subscribe(function () {
+                _this.router.navigate(['/milestones']);
+                _this.alertService.success('New Milestone set has been created');
+            });
+        };
+        return MilestoneSetCreateComponent;
+    }());
+    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\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone set title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  Reset\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  Submit\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
+                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
+                },] }
+    ];
+    MilestoneSetCreateComponent.ctorParameters = function () { return [
+        { type: MilestoneService },
+        { type: forms.FormBuilder },
+        { type: router.Router },
+        { type: components.AlertService }
     ]; };
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    var MilestoneCreateComponent = /** @class */ (function () {
-        function MilestoneCreateComponent(milestoneService, formBuilder, router, alertService, processService) {
-            this.milestoneService = milestoneService;
-            this.formBuilder = formBuilder;
-            this.router = router;
-            this.alertService = alertService;
-            this.processService = processService;
-            this.milestoneSets = [];
-            this.processDefinitions = [];
-            this.taskDefinitions = [];
-        }
-        Object.defineProperty(MilestoneCreateComponent.prototype, "formControls", {
-            get: function () {
-                return this.form.controls;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MilestoneCreateComponent.prototype.ngOnInit = function () {
-            this.form = this.formBuilder.group({
-                milestoneSet: new forms.FormControl('', forms.Validators.required),
-                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})$'),
-                ]),
-            });
-            this.getMilestoneSets();
-            this.getMilestones();
-        };
-        MilestoneCreateComponent.prototype.reset = function () {
-            this.form.patchValue({
-                milestoneSet: '',
-                title: '',
-                processDefinitionKey: '',
-                taskDefinitionKey: '',
-                plannedIntervalInDays: '',
-                color: '',
-            });
-        };
-        MilestoneCreateComponent.prototype.getMilestoneSets = function () {
-            var _this = this;
-            this.milestoneService.getMilestoneSets().subscribe(function (milesetoneSets) {
-                _this.milestoneSets = milesetoneSets;
-            });
-        };
-        MilestoneCreateComponent.prototype.getMilestones = function () {
-            var _this = this;
-            this.processService
-                .getProcessDefinitions()
-                .subscribe(function (processDefinitions) {
-                _this.processDefinitions = processDefinitions;
-            });
-        };
-        MilestoneCreateComponent.prototype.getFlownodes = function (processDefinitionId) {
-            var _this = this;
-            if (processDefinitionId) {
-                this.milestoneService.getFlownodes(processDefinitionId).subscribe(function (flowNodes) {
-                    _this.taskDefinitions = flowNodes['flowNodeMap'];
-                    _this.form.controls.taskDefinitionKey.setValue('');
-                });
-            }
-        };
-        MilestoneCreateComponent.prototype.createMilestone = function () {
-            var _this = this;
-            var milestone = this.form.value;
-            milestone.processDefinitionKey = milestone.processDefinitionKey['key'];
-            milestone.id = null;
-            this.milestoneService.createMilestone(milestone).subscribe(function () {
-                _this.router.navigate(['/milestones']);
-                _this.alertService.success('New Milestone has been created');
-            }, function (err) {
-                _this.alertService.error('Error creating new milestone');
-            });
-        };
-        return MilestoneCreateComponent;
-    }());
-    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\"\n                >Milestone set</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"milestoneSet\"\n                  formControlName=\"milestoneSet\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.valid,\n                    'is-invalid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a Milestone set</option>\n                  <option *ngFor=\"let milestoneSet of milestoneSets\" [value]=\"milestoneSet.id\">\n                    {{ milestoneSet.title }} ({{ milestoneSet.id }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"formControls.milestoneSet.touched && formControls.milestoneSet.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.milestoneSet.errors.required\">\n                    Milestone set is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\"\n                >Process definition</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"process\"\n                  formControlName=\"processDefinitionKey\"\n                  class=\"form-control\"\n                  (ngModelChange)=\"getFlownodes($event.id)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a process</option>\n                  <option\n                    *ngFor=\"let processDefinition of processDefinitions\"\n                    [ngValue]=\"processDefinition\"\n                  >\n                    {{ processDefinition.name }} ({{ processDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.processDefinitionKey.touched &&\n                    formControls.processDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.processDefinitionKey.errors.required\">\n                    Process is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\">Task</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"task\"\n                  formControlName=\"taskDefinitionKey\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a task</option>\n                  <option\n                    *ngFor=\"let taskDefinition of taskDefinitions | keyvalue\"\n                    [value]=\"taskDefinition.key\"\n                  >\n                    {{ taskDefinition.value }} ({{ taskDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.taskDefinitionKey.errors.required\">Task is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"interval\"\n                >Interval (in days)</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"interval\"\n                  formControlName=\"plannedIntervalInDays\"\n                  class=\"form-control\"\n                  placeholder=\"Interval (in days)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.valid,\n                    'is-invalid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"\n                    formControls.plannedIntervalInDays.touched &&\n                    formControls.plannedIntervalInDays.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.required\">\n                    Interval is required\n                  </div>\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.pattern\">\n                    Interval is not a valid number\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"color\">Color</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  [colorPicker]=\"form.value.color\"\n                  (colorPickerChange)=\"form.controls.color.setValue($event)\"\n                  [style.background]=\"form.value.color\"\n                  type=\"text\"\n                  id=\"color\"\n                  formControlName=\"color\"\n                  class=\"form-control\"\n                  placeholder=\"Color\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.color.touched && formControls.color.valid,\n                    'is-invalid': formControls.color.touched && formControls.color.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.color.touched && formControls.color.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.color.errors.required\">Interval is required</div>\n                  <div *ngIf=\"formControls.color.errors.pattern\">Color is not a valid hex code</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  Reset\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  Submit\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
-                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
-                },] }
-    ];
-    MilestoneCreateComponent.ctorParameters = function () { return [
-        { type: MilestoneService },
-        { type: forms.FormBuilder },
-        { type: router.Router },
-        { type: components.AlertService },
-        { type: process.ProcessService }
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var MilestoneCreateComponent = /** @class */ (function () {
+        function MilestoneCreateComponent(milestoneService, formBuilder, router, alertService, processService) {
+            this.milestoneService = milestoneService;
+            this.formBuilder = formBuilder;
+            this.router = router;
+            this.alertService = alertService;
+            this.processService = processService;
+            this.milestoneSets = [];
+            this.processDefinitions = [];
+            this.taskDefinitions = [];
+        }
+        Object.defineProperty(MilestoneCreateComponent.prototype, "formControls", {
+            get: function () {
+                return this.form.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MilestoneCreateComponent.prototype.ngOnInit = function () {
+            this.form = this.formBuilder.group({
+                milestoneSet: new forms.FormControl('', forms.Validators.required),
+                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})$'),
+                ]),
+            });
+            this.getMilestoneSets();
+            this.getMilestones();
+        };
+        MilestoneCreateComponent.prototype.reset = function () {
+            this.form.patchValue({
+                milestoneSet: '',
+                title: '',
+                processDefinitionKey: '',
+                taskDefinitionKey: '',
+                plannedIntervalInDays: '',
+                color: '',
+            });
+        };
+        MilestoneCreateComponent.prototype.getMilestoneSets = function () {
+            var _this = this;
+            this.milestoneService.getMilestoneSets().subscribe(function (milesetoneSets) {
+                _this.milestoneSets = milesetoneSets;
+            });
+        };
+        MilestoneCreateComponent.prototype.getMilestones = function () {
+            var _this = this;
+            this.processService
+                .getProcessDefinitions()
+                .subscribe(function (processDefinitions) {
+                _this.processDefinitions = processDefinitions;
+            });
+        };
+        MilestoneCreateComponent.prototype.getFlownodes = function (processDefinitionId) {
+            var _this = this;
+            if (processDefinitionId) {
+                this.milestoneService.getFlownodes(processDefinitionId).subscribe(function (flowNodes) {
+                    _this.taskDefinitions = flowNodes['flowNodeMap'];
+                    _this.form.controls.taskDefinitionKey.setValue('');
+                });
+            }
+        };
+        MilestoneCreateComponent.prototype.createMilestone = function () {
+            var _this = this;
+            var milestone = this.form.value;
+            milestone.processDefinitionKey = milestone.processDefinitionKey['key'];
+            milestone.id = null;
+            this.milestoneService.createMilestone(milestone).subscribe(function () {
+                _this.router.navigate(['/milestones']);
+                _this.alertService.success('New Milestone has been created');
+            }, function (err) {
+                _this.alertService.error('Error creating new milestone');
+            });
+        };
+        return MilestoneCreateComponent;
+    }());
+    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\"\n                >Milestone set</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"milestoneSet\"\n                  formControlName=\"milestoneSet\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.valid,\n                    'is-invalid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a Milestone set</option>\n                  <option *ngFor=\"let milestoneSet of milestoneSets\" [value]=\"milestoneSet.id\">\n                    {{ milestoneSet.title }} ({{ milestoneSet.id }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"formControls.milestoneSet.touched && formControls.milestoneSet.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.milestoneSet.errors.required\">\n                    Milestone set is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\"\n                >Process definition</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"process\"\n                  formControlName=\"processDefinitionKey\"\n                  class=\"form-control\"\n                  (ngModelChange)=\"getFlownodes($event.id)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a process</option>\n                  <option\n                    *ngFor=\"let processDefinition of processDefinitions\"\n                    [ngValue]=\"processDefinition\"\n                  >\n                    {{ processDefinition.name }} ({{ processDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.processDefinitionKey.touched &&\n                    formControls.processDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.processDefinitionKey.errors.required\">\n                    Process is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\">Task</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"task\"\n                  formControlName=\"taskDefinitionKey\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a task</option>\n                  <option\n                    *ngFor=\"let taskDefinition of taskDefinitions | keyvalue\"\n                    [value]=\"taskDefinition.key\"\n                  >\n                    {{ taskDefinition.value }} ({{ taskDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.taskDefinitionKey.errors.required\">Task is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"interval\"\n                >Interval (in days)</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"interval\"\n                  formControlName=\"plannedIntervalInDays\"\n                  class=\"form-control\"\n                  placeholder=\"Interval (in days)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.valid,\n                    'is-invalid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"\n                    formControls.plannedIntervalInDays.touched &&\n                    formControls.plannedIntervalInDays.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.required\">\n                    Interval is required\n                  </div>\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.pattern\">\n                    Interval is not a valid number\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"color\">Color</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  [colorPicker]=\"form.value.color\"\n                  (colorPickerChange)=\"form.controls.color.setValue($event)\"\n                  [style.background]=\"form.value.color\"\n                  type=\"text\"\n                  id=\"color\"\n                  formControlName=\"color\"\n                  class=\"form-control\"\n                  placeholder=\"Color\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.color.touched && formControls.color.valid,\n                    'is-invalid': formControls.color.touched && formControls.color.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.color.touched && formControls.color.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.color.errors.required\">Interval is required</div>\n                  <div *ngIf=\"formControls.color.errors.pattern\">Color is not a valid hex code</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  Reset\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  Submit\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
+                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
+                },] }
+    ];
+    MilestoneCreateComponent.ctorParameters = function () { return [
+        { type: MilestoneService },
+        { type: forms.FormBuilder },
+        { type: router.Router },
+        { type: components.AlertService },
+        { type: process.ProcessService }
     ]; };
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    var MilestoneSetEditComponent = /** @class */ (function () {
-        function MilestoneSetEditComponent(milestoneService, formBuilder, router, alertService, route) {
-            this.milestoneService = milestoneService;
-            this.formBuilder = formBuilder;
-            this.router = router;
-            this.alertService = alertService;
-            this.route = route;
-        }
-        Object.defineProperty(MilestoneSetEditComponent.prototype, "formControls", {
-            get: function () {
-                return this.form.controls;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        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),
-            });
-            this.getMilestoneSet();
-        };
-        MilestoneSetEditComponent.prototype.reset = function () {
-            this.form.controls.title.setValue('');
-        };
-        MilestoneSetEditComponent.prototype.getMilestoneSet = function () {
-            var _this = this;
-            var milestoneSetId = this.route.snapshot.paramMap.get('id');
-            this.milestoneService
-                .getMilestoneSet(+milestoneSetId)
-                .subscribe(function (milestoneSet) {
-                _this.form.setValue({
-                    id: milestoneSet.id,
-                    title: milestoneSet.title,
-                });
-            });
-        };
-        MilestoneSetEditComponent.prototype.delete = function () {
-            // Todo: add confirmation dialog after it's fixed
-            this.deleteMilestoneSet();
-        };
-        MilestoneSetEditComponent.prototype.deleteMilestoneSet = function () {
-            var _this = this;
-            this.milestoneService.deleteMilestoneSet(this.form.getRawValue().id).subscribe(function () {
-                _this.router.navigate(['/milestones']);
-                _this.alertService.success('Milestone set has been deleted');
-            }, function (err) {
-                _this.router.navigate(['/milestones']);
-                _this.alertService.error('Could not delete Milestone set. Make sure this Milestone set does not contain any milestones.');
-            });
-        };
-        MilestoneSetEditComponent.prototype.updateMilestoneSet = function () {
-            var _this = this;
-            this.milestoneService.updateMilestoneSet(this.form.getRawValue()).subscribe(function () {
-                _this.router.navigate(['/milestones']);
-                _this.alertService.success('Milestone set has been updated');
-            });
-        };
-        return MilestoneSetEditComponent;
-    }());
-    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\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone set title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n                <button type=\"button\" class=\"btn btn-space btn-danger\" (click)=\"delete()\">\n                  Delete\n                </button>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  Reset\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  Submit\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
-                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
-                },] }
-    ];
-    MilestoneSetEditComponent.ctorParameters = function () { return [
-        { type: MilestoneService },
-        { type: forms.FormBuilder },
-        { type: router.Router },
-        { type: components.AlertService },
-        { type: router.ActivatedRoute }
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var MilestoneSetEditComponent = /** @class */ (function () {
+        function MilestoneSetEditComponent(milestoneService, formBuilder, router, alertService, route) {
+            this.milestoneService = milestoneService;
+            this.formBuilder = formBuilder;
+            this.router = router;
+            this.alertService = alertService;
+            this.route = route;
+        }
+        Object.defineProperty(MilestoneSetEditComponent.prototype, "formControls", {
+            get: function () {
+                return this.form.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        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),
+            });
+            this.getMilestoneSet();
+        };
+        MilestoneSetEditComponent.prototype.reset = function () {
+            this.form.controls.title.setValue('');
+        };
+        MilestoneSetEditComponent.prototype.getMilestoneSet = function () {
+            var _this = this;
+            var milestoneSetId = this.route.snapshot.paramMap.get('id');
+            this.milestoneService
+                .getMilestoneSet(+milestoneSetId)
+                .subscribe(function (milestoneSet) {
+                _this.form.setValue({
+                    id: milestoneSet.id,
+                    title: milestoneSet.title,
+                });
+            });
+        };
+        MilestoneSetEditComponent.prototype.delete = function () {
+            // Todo: add confirmation dialog after it's fixed
+            this.deleteMilestoneSet();
+        };
+        MilestoneSetEditComponent.prototype.deleteMilestoneSet = function () {
+            var _this = this;
+            this.milestoneService.deleteMilestoneSet(this.form.getRawValue().id).subscribe(function () {
+                _this.router.navigate(['/milestones']);
+                _this.alertService.success('Milestone set has been deleted');
+            }, function (err) {
+                _this.router.navigate(['/milestones']);
+                _this.alertService.error('Could not delete Milestone set. Make sure this Milestone set does not contain any milestones.');
+            });
+        };
+        MilestoneSetEditComponent.prototype.updateMilestoneSet = function () {
+            var _this = this;
+            this.milestoneService.updateMilestoneSet(this.form.getRawValue()).subscribe(function () {
+                _this.router.navigate(['/milestones']);
+                _this.alertService.success('Milestone set has been updated');
+            });
+        };
+        return MilestoneSetEditComponent;
+    }());
+    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\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone set title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n                <button type=\"button\" class=\"btn btn-space btn-danger\" (click)=\"delete()\">\n                  Delete\n                </button>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  Reset\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  Submit\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
+                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
+                },] }
+    ];
+    MilestoneSetEditComponent.ctorParameters = function () { return [
+        { type: MilestoneService },
+        { type: forms.FormBuilder },
+        { type: router.Router },
+        { type: components.AlertService },
+        { type: router.ActivatedRoute }
     ]; };
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    var MilestoneEditComponent = /** @class */ (function () {
-        function MilestoneEditComponent(milestoneService, formBuilder, router, alertService, processService, route) {
-            this.milestoneService = milestoneService;
-            this.formBuilder = formBuilder;
-            this.router = router;
-            this.alertService = alertService;
-            this.processService = processService;
-            this.route = route;
-            this.milestoneSets = [];
-            this.processDefinitions = [];
-            this.taskDefinitions = [];
-        }
-        Object.defineProperty(MilestoneEditComponent.prototype, "formControls", {
-            get: function () {
-                return this.form.controls;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MilestoneEditComponent.prototype.ngOnInit = function () {
-            this.form = this.formBuilder.group({
-                id: new forms.FormControl({ value: '', disabled: true }, forms.Validators.required),
-                milestoneSet: new forms.FormControl('', forms.Validators.required),
-                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})$'),
-                ]),
-            });
-            this.getMilestone();
-            this.getMilestoneSets();
-            this.getProcessDefinitions();
-        };
-        MilestoneEditComponent.prototype.reset = function () {
-            this.form.patchValue({
-                milestoneSet: '',
-                title: '',
-                processDefinitionKey: '',
-                taskDefinitionKey: '',
-                plannedIntervalInDays: '',
-                color: '',
-            });
-        };
-        MilestoneEditComponent.prototype.getMilestone = function () {
-            var _this = this;
-            var milestoneId = this.route.snapshot.paramMap.get('id');
-            this.milestoneService
-                .getMilestone(+milestoneId)
-                .pipe(operators.switchMap(function (milestone) {
-                _this.form.patchValue({
-                    id: milestone.id,
-                    milestoneSet: milestone.milestoneSet.id,
-                    title: milestone.title,
-                    plannedIntervalInDays: milestone.plannedIntervalInDays,
-                    color: milestone.color,
-                    taskDefinitionKey: milestone.taskDefinitionKey,
-                });
-                return _this.processService.getProcessDefinition(milestone.processDefinitionKey);
-            }))
-                .subscribe(function (processDefinition) {
-                _this.form.patchValue({
-                    processDefinitionKey: processDefinition,
-                });
-            });
-        };
-        MilestoneEditComponent.prototype.compareProcessDefinitions = function (processDefinition1, processDefinition2) {
-            return processDefinition1.id === processDefinition2.id;
-        };
-        MilestoneEditComponent.prototype.getMilestoneSets = function () {
-            var _this = this;
-            this.milestoneService.getMilestoneSets().subscribe(function (milesetoneSets) {
-                _this.milestoneSets = milesetoneSets;
-            });
-        };
-        MilestoneEditComponent.prototype.getProcessDefinitions = function () {
-            var _this = this;
-            this.processService
-                .getProcessDefinitions()
-                .subscribe(function (processDefinitions) {
-                _this.processDefinitions = processDefinitions;
-            });
-        };
-        MilestoneEditComponent.prototype.getFlownodes = function (processDefinitionId) {
-            var _this = this;
-            if (processDefinitionId) {
-                this.milestoneService.getFlownodes(processDefinitionId).subscribe(function (flowNodes) {
-                    _this.taskDefinitions = flowNodes['flowNodeMap'];
-                });
-            }
-        };
-        MilestoneEditComponent.prototype.delete = function () {
-            // Todo: add confirmation dialog after it's fixed
-            this.deleteMilestone();
-        };
-        MilestoneEditComponent.prototype.deleteMilestone = function () {
-            var _this = this;
-            this.milestoneService.deleteMilestone(this.form.getRawValue().id).subscribe(function () {
-                _this.router.navigate(['/milestones']);
-                _this.alertService.success('Milestone has been deleted');
-            }, function (err) {
-                _this.router.navigate(['/milestones']);
-                _this.alertService.error('Could not delete Milestone');
-            });
-        };
-        MilestoneEditComponent.prototype.updateMilestone = function () {
-            var _this = this;
-            var milestone = this.form.getRawValue();
-            milestone.processDefinitionKey = milestone.processDefinitionKey['key'];
-            this.milestoneService.updateMilestone(milestone).subscribe(function () {
-                _this.router.navigate(['/milestones']);
-                _this.alertService.success('Milestone has been updated');
-            }, function (err) {
-                _this.alertService.error('Error updating milestone');
-            });
-        };
-        return MilestoneEditComponent;
-    }());
-    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\"\n                >Milestone set</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"milestoneSet\"\n                  formControlName=\"milestoneSet\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.valid,\n                    'is-invalid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a Milestone set</option>\n                  <option *ngFor=\"let milestoneSet of milestoneSets\" [value]=\"milestoneSet.id\">\n                    {{ milestoneSet.title }} ({{ milestoneSet.id }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"formControls.milestoneSet.touched && formControls.milestoneSet.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.milestoneSet.errors.required\">\n                    Milestone set is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\"\n                >Process definition</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"process\"\n                  formControlName=\"processDefinitionKey\"\n                  class=\"form-control\"\n                  (ngModelChange)=\"getFlownodes($event.id)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.errors\n                  }\"\n                  required\n                  [compareWith]=\"compareProcessDefinitions\"\n                >\n                  <option value=\"\" disabled>Choose a process</option>\n                  <option\n                    *ngFor=\"let processDefinition of processDefinitions\"\n                    [ngValue]=\"processDefinition\"\n                  >\n                    {{ processDefinition.name }} ({{ processDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.processDefinitionKey.touched &&\n                    formControls.processDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.processDefinitionKey.errors.required\">\n                    Process is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\">Task</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"task\"\n                  formControlName=\"taskDefinitionKey\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" disabled>Choose a task</option>\n                  <option\n                    *ngFor=\"let taskDefinition of taskDefinitions | keyvalue\"\n                    [value]=\"taskDefinition.key\"\n                  >\n                    {{ taskDefinition.value }} ({{ taskDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.taskDefinitionKey.errors.required\">Task is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"interval\"\n                >Interval (in days)</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"interval\"\n                  formControlName=\"plannedIntervalInDays\"\n                  class=\"form-control\"\n                  placeholder=\"Interval (in days)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.valid,\n                    'is-invalid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"\n                    formControls.plannedIntervalInDays.touched &&\n                    formControls.plannedIntervalInDays.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.required\">\n                    Interval is required\n                  </div>\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.pattern\">\n                    Interval is not a valid number\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"color\">Color</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  [colorPicker]=\"form.value.color\"\n                  (colorPickerChange)=\"form.controls.color.setValue($event)\"\n                  [style.background]=\"form.value.color\"\n                  type=\"text\"\n                  id=\"color\"\n                  formControlName=\"color\"\n                  class=\"form-control\"\n                  placeholder=\"Color\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.color.touched && formControls.color.valid,\n                    'is-invalid': formControls.color.touched && formControls.color.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.color.touched && formControls.color.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.color.errors.required\">Color is required</div>\n                  <div *ngIf=\"formControls.color.errors.pattern\">Color is not a valid hex code</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n                <button type=\"button\" class=\"btn btn-space btn-danger\" (click)=\"delete()\">\n                  Delete\n                </button>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  Reset\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  Submit\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
-                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
-                },] }
-    ];
-    MilestoneEditComponent.ctorParameters = function () { return [
-        { type: MilestoneService },
-        { type: forms.FormBuilder },
-        { type: router.Router },
-        { type: components.AlertService },
-        { type: process.ProcessService },
-        { type: router.ActivatedRoute }
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var MilestoneEditComponent = /** @class */ (function () {
+        function MilestoneEditComponent(milestoneService, formBuilder, router, alertService, processService, route) {
+            this.milestoneService = milestoneService;
+            this.formBuilder = formBuilder;
+            this.router = router;
+            this.alertService = alertService;
+            this.processService = processService;
+            this.route = route;
+            this.milestoneSets = [];
+            this.processDefinitions = [];
+            this.taskDefinitions = [];
+        }
+        Object.defineProperty(MilestoneEditComponent.prototype, "formControls", {
+            get: function () {
+                return this.form.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MilestoneEditComponent.prototype.ngOnInit = function () {
+            this.form = this.formBuilder.group({
+                id: new forms.FormControl({ value: '', disabled: true }, forms.Validators.required),
+                milestoneSet: new forms.FormControl('', forms.Validators.required),
+                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})$'),
+                ]),
+            });
+            this.getMilestone();
+            this.getMilestoneSets();
+            this.getProcessDefinitions();
+        };
+        MilestoneEditComponent.prototype.reset = function () {
+            this.form.patchValue({
+                milestoneSet: '',
+                title: '',
+                processDefinitionKey: '',
+                taskDefinitionKey: '',
+                plannedIntervalInDays: '',
+                color: '',
+            });
+        };
+        MilestoneEditComponent.prototype.getMilestone = function () {
+            var _this = this;
+            var milestoneId = this.route.snapshot.paramMap.get('id');
+            this.milestoneService
+                .getMilestone(+milestoneId)
+                .pipe(operators.switchMap(function (milestone) {
+                _this.form.patchValue({
+                    id: milestone.id,
+                    milestoneSet: milestone.milestoneSet.id,
+                    title: milestone.title,
+                    plannedIntervalInDays: milestone.plannedIntervalInDays,
+                    color: milestone.color,
+                    taskDefinitionKey: milestone.taskDefinitionKey,
+                });
+                return _this.processService.getProcessDefinition(milestone.processDefinitionKey);
+            }))
+                .subscribe(function (processDefinition) {
+                _this.form.patchValue({
+                    processDefinitionKey: processDefinition,
+                });
+            });
+        };
+        MilestoneEditComponent.prototype.compareProcessDefinitions = function (processDefinition1, processDefinition2) {
+            return processDefinition1.id === processDefinition2.id;
+        };
+        MilestoneEditComponent.prototype.getMilestoneSets = function () {
+            var _this = this;
+            this.milestoneService.getMilestoneSets().subscribe(function (milesetoneSets) {
+                _this.milestoneSets = milesetoneSets;
+            });
+        };
+        MilestoneEditComponent.prototype.getProcessDefinitions = function () {
+            var _this = this;
+            this.processService
+                .getProcessDefinitions()
+                .subscribe(function (processDefinitions) {
+                _this.processDefinitions = processDefinitions;
+            });
+        };
+        MilestoneEditComponent.prototype.getFlownodes = function (processDefinitionId) {
+            var _this = this;
+            if (processDefinitionId) {
+                this.milestoneService.getFlownodes(processDefinitionId).subscribe(function (flowNodes) {
+                    _this.taskDefinitions = flowNodes['flowNodeMap'];
+                });
+            }
+        };
+        MilestoneEditComponent.prototype.delete = function () {
+            // Todo: add confirmation dialog after it's fixed
+            this.deleteMilestone();
+        };
+        MilestoneEditComponent.prototype.deleteMilestone = function () {
+            var _this = this;
+            this.milestoneService.deleteMilestone(this.form.getRawValue().id).subscribe(function () {
+                _this.router.navigate(['/milestones']);
+                _this.alertService.success('Milestone has been deleted');
+            }, function (err) {
+                _this.router.navigate(['/milestones']);
+                _this.alertService.error('Could not delete Milestone');
+            });
+        };
+        MilestoneEditComponent.prototype.updateMilestone = function () {
+            var _this = this;
+            var milestone = this.form.getRawValue();
+            milestone.processDefinitionKey = milestone.processDefinitionKey['key'];
+            this.milestoneService.updateMilestone(milestone).subscribe(function () {
+                _this.router.navigate(['/milestones']);
+                _this.alertService.success('Milestone has been updated');
+            }, function (err) {
+                _this.alertService.error('Error updating milestone');
+            });
+        };
+        return MilestoneEditComponent;
+    }());
+    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\"\n                >Milestone set</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"milestoneSet\"\n                  formControlName=\"milestoneSet\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.valid,\n                    'is-invalid':\n                      formControls.milestoneSet.touched && formControls.milestoneSet.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" selected disabled>Choose a Milestone set</option>\n                  <option *ngFor=\"let milestoneSet of milestoneSets\" [value]=\"milestoneSet.id\">\n                    {{ milestoneSet.title }} ({{ milestoneSet.id }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"formControls.milestoneSet.touched && formControls.milestoneSet.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.milestoneSet.errors.required\">\n                    Milestone set is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\">Title</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"title\"\n                  formControlName=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"Milestone title\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.title.touched && formControls.title.valid,\n                    'is-invalid': formControls.title.touched && formControls.title.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.title.touched && formControls.title.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.title.errors.required\">Title is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\"\n                >Process definition</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"process\"\n                  formControlName=\"processDefinitionKey\"\n                  class=\"form-control\"\n                  (ngModelChange)=\"getFlownodes($event.id)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.processDefinitionKey.touched &&\n                      formControls.processDefinitionKey.errors\n                  }\"\n                  required\n                  [compareWith]=\"compareProcessDefinitions\"\n                >\n                  <option value=\"\" disabled>Choose a process</option>\n                  <option\n                    *ngFor=\"let processDefinition of processDefinitions\"\n                    [ngValue]=\"processDefinition\"\n                  >\n                    {{ processDefinition.name }} ({{ processDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.processDefinitionKey.touched &&\n                    formControls.processDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.processDefinitionKey.errors.required\">\n                    Process is required\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"process\">Task</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <select\n                  type=\"text\"\n                  id=\"task\"\n                  formControlName=\"taskDefinitionKey\"\n                  class=\"form-control\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.valid,\n                    'is-invalid':\n                      formControls.taskDefinitionKey.touched &&\n                      formControls.taskDefinitionKey.errors\n                  }\"\n                  required\n                >\n                  <option value=\"\" disabled>Choose a task</option>\n                  <option\n                    *ngFor=\"let taskDefinition of taskDefinitions | keyvalue\"\n                    [value]=\"taskDefinition.key\"\n                  >\n                    {{ taskDefinition.value }} ({{ taskDefinition.key }})\n                  </option>\n                </select>\n                <div\n                  *ngIf=\"\n                    formControls.taskDefinitionKey.touched && formControls.taskDefinitionKey.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.taskDefinitionKey.errors.required\">Task is required</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"interval\"\n                >Interval (in days)</label\n              >\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  type=\"text\"\n                  id=\"interval\"\n                  formControlName=\"plannedIntervalInDays\"\n                  class=\"form-control\"\n                  placeholder=\"Interval (in days)\"\n                  [ngClass]=\"{\n                    'is-valid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.valid,\n                    'is-invalid':\n                      formControls.plannedIntervalInDays.touched &&\n                      formControls.plannedIntervalInDays.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"\n                    formControls.plannedIntervalInDays.touched &&\n                    formControls.plannedIntervalInDays.errors\n                  \"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.required\">\n                    Interval is required\n                  </div>\n                  <div *ngIf=\"formControls.plannedIntervalInDays.errors.pattern\">\n                    Interval is not a valid number\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"color\">Color</label>\n              <div class=\"col-12 col-sm-8 col-lg-6\">\n                <input\n                  [colorPicker]=\"form.value.color\"\n                  (colorPickerChange)=\"form.controls.color.setValue($event)\"\n                  [style.background]=\"form.value.color\"\n                  type=\"text\"\n                  id=\"color\"\n                  formControlName=\"color\"\n                  class=\"form-control\"\n                  placeholder=\"Color\"\n                  [ngClass]=\"{\n                    'is-valid': formControls.color.touched && formControls.color.valid,\n                    'is-invalid': formControls.color.touched && formControls.color.errors\n                  }\"\n                  required\n                />\n                <div\n                  *ngIf=\"formControls.color.touched && formControls.color.errors\"\n                  class=\"invalid-feedback\"\n                >\n                  <div *ngIf=\"formControls.color.errors.required\">Color is required</div>\n                  <div *ngIf=\"formControls.color.errors.pattern\">Color is not a valid hex code</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-12 col-sm-6 text-left\">\n                <a [routerLink]=\"'/milestones'\" class=\"btn btn-space btn-default\">Back</a>\n                <button type=\"button\" class=\"btn btn-space btn-danger\" (click)=\"delete()\">\n                  Delete\n                </button>\n              </div>\n              <div class=\"col-12 col-sm-6 text-right\">\n                <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                  Reset\n                </button>\n                <button class=\"btn btn-space btn-primary\" type=\"submit\" [disabled]=\"form.invalid\">\n                  Submit\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
+                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
+                },] }
+    ];
+    MilestoneEditComponent.ctorParameters = function () { return [
+        { type: MilestoneService },
+        { type: forms.FormBuilder },
+        { type: router.Router },
+        { type: components.AlertService },
+        { type: process.ProcessService },
+        { type: router.ActivatedRoute }
     ]; };
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    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 routes = [
-        {
-            path: 'milestones',
-            component: MilestoneComponent,
-            canActivate: [security.AuthGuardService],
-            data: ɵ0,
-        },
-        {
-            path: 'milestones/sets/create',
-            component: MilestoneSetCreateComponent,
-            canActivate: [security.AuthGuardService],
-            data: ɵ1,
-        },
-        {
-            path: 'milestones/create',
-            component: MilestoneCreateComponent,
-            canActivate: [security.AuthGuardService],
-            data: ɵ2,
-        },
-        {
-            path: 'milestones/sets/set/:id',
-            component: MilestoneSetEditComponent,
-            canActivate: [security.AuthGuardService],
-            data: ɵ3,
-        },
-        {
-            path: 'milestones/milestone/:id',
-            component: MilestoneEditComponent,
-            canActivate: [security.AuthGuardService],
-            data: ɵ4,
-        },
-    ];
-    var MilestoneRoutingModule = /** @class */ (function () {
-        function MilestoneRoutingModule() {
-        }
-        return MilestoneRoutingModule;
-    }());
-    MilestoneRoutingModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [],
-                    imports: [common.CommonModule, router.RouterModule.forChild(routes)],
-                    exports: [router.RouterModule],
-                },] }
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    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,
+        },
+        {
+            path: 'milestones/sets/create',
+            component: MilestoneSetCreateComponent,
+            canActivate: [security.AuthGuardService],
+            data: ɵ1,
+        },
+        {
+            path: 'milestones/create',
+            component: MilestoneCreateComponent,
+            canActivate: [security.AuthGuardService],
+            data: ɵ2,
+        },
+        {
+            path: 'milestones/sets/set/:id',
+            component: MilestoneSetEditComponent,
+            canActivate: [security.AuthGuardService],
+            data: ɵ3,
+        },
+        {
+            path: 'milestones/milestone/:id',
+            component: MilestoneEditComponent,
+            canActivate: [security.AuthGuardService],
+            data: ɵ4,
+        },
+    ];
+    var MilestoneRoutingModule = /** @class */ (function () {
+        function MilestoneRoutingModule() {
+        }
+        return MilestoneRoutingModule;
+    }());
+    MilestoneRoutingModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [],
+                    imports: [common.CommonModule, router.RouterModule.forChild(routes)],
+                    exports: [router.RouterModule],
+                },] }
     ];
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        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 __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        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;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                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);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    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, 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;
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        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 __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        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;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                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);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    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, 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 () {
-        function MilestoneListComponent(milestoneService, router) {
-            this.milestoneService = milestoneService;
-            this.router = router;
-            this.milestones = [];
-            this.milestoneFields = [
-                { key: 'id', label: 'ID' },
-                { key: 'title', label: 'Title' },
-                { key: 'processDefinitionKey', label: 'Process' },
-                { key: 'taskDefinitionKey', label: 'Task' },
-                { key: 'plannedIntervalInDays', label: 'Interval (in days)' },
-                { key: 'color', label: 'Color' },
-            ];
-        }
-        MilestoneListComponent.prototype.editMilestoneSet = function (milestoneSetId) {
-            this.router.navigate(['milestones/sets/set', milestoneSetId]);
-        };
-        MilestoneListComponent.prototype.editMilestone = function (milestone) {
-            this.router.navigate(['milestones/milestone', milestone.id]);
-        };
-        MilestoneListComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            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);
-            });
-        };
-        MilestoneListComponent.prototype.handleMilestoneResult = function (milestones, milestoneSets) {
-            var milestoneSetsMap = this.getMilestoneSetsMap(milestones, milestoneSets);
-            this.setMilestones(milestoneSetsMap);
-        };
-        MilestoneListComponent.prototype.setMilestones = function (milestoneSetsMap) {
-            this.milestones = Array.from(milestoneSetsMap.entries()).map(function (entry) {
-                entry[0] = JSON.parse(entry[0]);
-                return entry;
-            });
-        };
-        MilestoneListComponent.prototype.getMilestoneSetsMap = function (milestones, milestoneSets) {
-            var mapWithSets = this.addMilestoneSetsToMap(milestoneSets, this.getEmptyMap());
-            return this.addMilestonesToMap(milestones, mapWithSets);
-        };
-        MilestoneListComponent.prototype.getEmptyMap = function () {
-            return new Map();
-        };
-        MilestoneListComponent.prototype.addMilestoneSetsToMap = function (milestoneSets, map) {
-            milestoneSets.forEach(function (milestoneSet) {
-                map.set(JSON.stringify(milestoneSet), []);
-            });
-            return map;
-        };
-        MilestoneListComponent.prototype.addMilestonesToMap = function (milestones, map) {
-            milestones.forEach(function (milestone) {
-                var milestoneSetString = JSON.stringify(milestone.milestoneSet);
-                var arr = map.get(milestoneSetString);
-                arr.push(milestone);
-                map.set(milestoneSetString, arr);
-            });
-            return map;
-        };
-        return MilestoneListComponent;
-    }());
-    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\">\n      {{ milestoneGroup[0].title }} ({{ milestoneGroup[0].id }})\n    </h4>\n    <valtimo-list\n      [items]=\"milestoneGroup[1]\"\n      [fields]=\"milestoneFields\"\n      (rowClicked)=\"editMilestone($event)\"\n    >\n    </valtimo-list>\n  </valtimo-widget>\n</div>\n",
-                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.milestone-title{background-color:#f8f9f9;border-bottom:1px solid #dee2e6;cursor:pointer;margin:0;padding:1em}"]
-                },] }
-    ];
-    MilestoneListComponent.ctorParameters = function () { return [
-        { type: MilestoneService },
-        { type: router.Router }
+    var MilestoneListComponent = /** @class */ (function () {
+        function MilestoneListComponent(milestoneService, router) {
+            this.milestoneService = milestoneService;
+            this.router = router;
+            this.milestones = [];
+            this.milestoneFields = [
+                { key: 'id', label: 'ID' },
+                { key: 'title', label: 'Title' },
+                { key: 'processDefinitionKey', label: 'Process' },
+                { key: 'taskDefinitionKey', label: 'Task' },
+                { key: 'plannedIntervalInDays', label: 'Interval (in days)' },
+                { key: 'color', label: 'Color' },
+            ];
+        }
+        MilestoneListComponent.prototype.editMilestoneSet = function (milestoneSetId) {
+            this.router.navigate(['milestones/sets/set', milestoneSetId]);
+        };
+        MilestoneListComponent.prototype.editMilestone = function (milestone) {
+            this.router.navigate(['milestones/milestone', milestone.id]);
+        };
+        MilestoneListComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            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);
+            });
+        };
+        MilestoneListComponent.prototype.handleMilestoneResult = function (milestones, milestoneSets) {
+            var milestoneSetsMap = this.getMilestoneSetsMap(milestones, milestoneSets);
+            this.setMilestones(milestoneSetsMap);
+        };
+        MilestoneListComponent.prototype.setMilestones = function (milestoneSetsMap) {
+            this.milestones = Array.from(milestoneSetsMap.entries()).map(function (entry) {
+                entry[0] = JSON.parse(entry[0]);
+                return entry;
+            });
+        };
+        MilestoneListComponent.prototype.getMilestoneSetsMap = function (milestones, milestoneSets) {
+            var mapWithSets = this.addMilestoneSetsToMap(milestoneSets, this.getEmptyMap());
+            return this.addMilestonesToMap(milestones, mapWithSets);
+        };
+        MilestoneListComponent.prototype.getEmptyMap = function () {
+            return new Map();
+        };
+        MilestoneListComponent.prototype.addMilestoneSetsToMap = function (milestoneSets, map) {
+            milestoneSets.forEach(function (milestoneSet) {
+                map.set(JSON.stringify(milestoneSet), []);
+            });
+            return map;
+        };
+        MilestoneListComponent.prototype.addMilestonesToMap = function (milestones, map) {
+            milestones.forEach(function (milestone) {
+                var milestoneSetString = JSON.stringify(milestone.milestoneSet);
+                var arr = map.get(milestoneSetString);
+                arr.push(milestone);
+                map.set(milestoneSetString, arr);
+            });
+            return map;
+        };
+        return MilestoneListComponent;
+    }());
+    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\">\n      {{ milestoneGroup[0].title }} ({{ milestoneGroup[0].id }})\n    </h4>\n    <valtimo-list\n      [items]=\"milestoneGroup[1]\"\n      [fields]=\"milestoneFields\"\n      (rowClicked)=\"editMilestone($event)\"\n    >\n    </valtimo-list>\n  </valtimo-widget>\n</div>\n",
+                    styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.milestone-title{background-color:#f8f9f9;border-bottom:1px solid #dee2e6;cursor:pointer;margin:0;padding:1em}"]
+                },] }
+    ];
+    MilestoneListComponent.ctorParameters = function () { return [
+        { type: MilestoneService },
+        { type: router.Router }
     ]; };
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    var MilestoneModule = /** @class */ (function () {
-        function MilestoneModule() {
-        }
-        return MilestoneModule;
-    }());
-    MilestoneModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        MilestoneComponent,
-                        MilestoneSetCreateComponent,
-                        MilestoneListComponent,
-                        MilestoneCreateComponent,
-                        MilestoneEditComponent,
-                        MilestoneSetEditComponent,
-                    ],
-                    imports: [
-                        router.RouterModule,
-                        MilestoneRoutingModule,
-                        common.CommonModule,
-                        components.ListModule,
-                        components.WidgetModule,
-                        forms.ReactiveFormsModule,
-                        ngxColorPicker.ColorPickerModule,
-                        core.TranslateModule,
-                    ],
-                    exports: [MilestoneComponent],
-                },] }
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var MilestoneModule = /** @class */ (function () {
+        function MilestoneModule() {
+        }
+        return MilestoneModule;
+    }());
+    MilestoneModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        MilestoneComponent,
+                        MilestoneSetCreateComponent,
+                        MilestoneListComponent,
+                        MilestoneCreateComponent,
+                        MilestoneEditComponent,
+                        MilestoneSetEditComponent,
+                    ],
+                    imports: [
+                        router.RouterModule,
+                        MilestoneRoutingModule,
+                        common.CommonModule,
+                        components.ListModule,
+                        components.WidgetModule,
+                        forms.ReactiveFormsModule,
+                        ngxColorPicker.ColorPickerModule,
+                        core.TranslateModule,
+                    ],
+                    exports: [MilestoneComponent],
+                },] }
     ];
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.MilestoneComponent = MilestoneComponent;