@valtimo/choice-field 4.15.3-next-main.16 → 4.17.0

package/bundles/valtimo-choice-field.umd.js

@@ -1,748 +1,798 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('@valtimo/config'), require('@angular/common'), require('@angular/forms'), require('@valtimo/components'), require('@angular/router'), require('@valtimo/security'), require('rxjs'), require('rxjs/operators'), require('@valtimo/contract'), require('@ngx-translate/core')) :
-    typeof define === 'function' && define.amd ? define('@valtimo/choice-field', ['exports', '@angular/core', '@angular/common/http', '@valtimo/config', '@angular/common', '@angular/forms', '@valtimo/components', '@angular/router', '@valtimo/security', 'rxjs', 'rxjs/operators', '@valtimo/contract', '@ngx-translate/core'], factory) :
-    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo['choice-field'] = {}), global.ng.core, global.ng.common.http, global.config, global.ng.common, global.ng.forms, global.components, global.ng.router, global.security, global.rxjs, global.rxjs.operators, global.contract, global.core$1));
-}(this, (function (exports, i0, i1, i2, common, forms, components, router, security, rxjs, operators, contract, core) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('@valtimo/config'), require('@angular/common'), require('@angular/forms'), require('@valtimo/components'), require('@angular/router'), require('@valtimo/security'), require('rxjs'), require('rxjs/operators'), require('@ngx-translate/core')) :
+    typeof define === 'function' && define.amd ? define('@valtimo/choice-field', ['exports', '@angular/core', '@angular/common/http', '@valtimo/config', '@angular/common', '@angular/forms', '@valtimo/components', '@angular/router', '@valtimo/security', 'rxjs', 'rxjs/operators', '@ngx-translate/core'], factory) :
+    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo['choice-field'] = {}), global.ng.core, global.ng.common.http, global.config, global.ng.common, global.ng.forms, global.components, global.ng.router, global.security, global.rxjs, global.rxjs.operators, global.core$1));
+}(this, (function (exports, i0, i1, i2, common, forms, components, router, security, rxjs, operators, 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 ChoiceFieldService = /** @class */ (function () {
-        function ChoiceFieldService(http, configService) {
-            this.http = http;
-            this.configService = configService;
-            this.valtimoApiConfig = configService.config.valtimoApi;
-        }
-        ChoiceFieldService.prototype.query = function (params) {
-            return this.http.get(this.valtimoApiConfig.endpointUri + "choice-fields", {
-                observe: 'response',
-                params: params,
-            });
-        };
-        ChoiceFieldService.prototype.get = function (id) {
-            return this.http.get(this.valtimoApiConfig.endpointUri + "choice-fields/" + id);
-        };
-        ChoiceFieldService.prototype.create = function (choiceField) {
-            return this.http.post(this.valtimoApiConfig.endpointUri + "choice-fields", choiceField);
-        };
-        ChoiceFieldService.prototype.delete = function (id) {
-            return this.http.delete(this.valtimoApiConfig.endpointUri + "choice-fields/" + id);
-        };
-        ChoiceFieldService.prototype.update = function (choiceField) {
-            return this.http.put(this.valtimoApiConfig.endpointUri + "choice-fields", choiceField);
-        };
-        ChoiceFieldService.prototype.queryValues = function (keyName, params) {
-            return this.http.get(this.valtimoApiConfig.endpointUri + "choice-field-values/" + keyName + "/values", { observe: 'response', params: params });
-        };
-        ChoiceFieldService.prototype.getValue = function (choiceFieldId) {
-            return this.http.get(this.valtimoApiConfig.endpointUri + "choice-field-values/" + choiceFieldId);
-        };
-        ChoiceFieldService.prototype.updateValue = function (choiceFieldValue, choiceFieldName) {
-            return this.http.put(this.valtimoApiConfig.endpointUri + "choice-field-values", choiceFieldValue, {
-                params: { choice_field_name: choiceFieldName },
-            });
-        };
-        ChoiceFieldService.prototype.createValue = function (choiceFieldValue, choiceFieldName) {
-            return this.http.post(this.valtimoApiConfig.endpointUri + "choice-field-values", choiceFieldValue, { params: { choice_field_name: choiceFieldName } });
-        };
-        return ChoiceFieldService;
-    }());
-    ChoiceFieldService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ChoiceFieldService_Factory() { return new ChoiceFieldService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(i2.ConfigService)); }, token: ChoiceFieldService, providedIn: "root" });
-    ChoiceFieldService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    ChoiceFieldService.ctorParameters = function () { return [
-        { type: i1.HttpClient },
-        { type: i2.ConfigService }
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+
+    /*
+     * 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 ChoiceFieldService = /** @class */ (function () {
+        function ChoiceFieldService(http, configService) {
+            this.http = http;
+            this.configService = configService;
+            this.valtimoApiConfig = configService.config.valtimoApi;
+        }
+        ChoiceFieldService.prototype.query = function (params) {
+            return this.http.get(this.valtimoApiConfig.endpointUri + "choice-fields", {
+                observe: 'response',
+                params: params,
+            });
+        };
+        ChoiceFieldService.prototype.get = function (id) {
+            return this.http.get(this.valtimoApiConfig.endpointUri + "choice-fields/" + id);
+        };
+        ChoiceFieldService.prototype.create = function (choiceField) {
+            return this.http.post(this.valtimoApiConfig.endpointUri + "choice-fields", choiceField);
+        };
+        ChoiceFieldService.prototype.delete = function (id) {
+            return this.http.delete(this.valtimoApiConfig.endpointUri + "choice-fields/" + id);
+        };
+        ChoiceFieldService.prototype.update = function (choiceField) {
+            return this.http.put(this.valtimoApiConfig.endpointUri + "choice-fields", choiceField);
+        };
+        ChoiceFieldService.prototype.queryValues = function (keyName, params) {
+            return this.http.get(this.valtimoApiConfig.endpointUri + "choice-field-values/" + keyName + "/values", { observe: 'response', params: params });
+        };
+        ChoiceFieldService.prototype.getValue = function (choiceFieldId) {
+            return this.http.get(this.valtimoApiConfig.endpointUri + "choice-field-values/" + choiceFieldId);
+        };
+        ChoiceFieldService.prototype.updateValue = function (choiceFieldValue, choiceFieldName) {
+            return this.http.put(this.valtimoApiConfig.endpointUri + "choice-field-values", choiceFieldValue, {
+                params: { choice_field_name: choiceFieldName },
+            });
+        };
+        ChoiceFieldService.prototype.createValue = function (choiceFieldValue, choiceFieldName) {
+            return this.http.post(this.valtimoApiConfig.endpointUri + "choice-field-values", choiceFieldValue, { params: { choice_field_name: choiceFieldName } });
+        };
+        return ChoiceFieldService;
+    }());
+    ChoiceFieldService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ChoiceFieldService_Factory() { return new ChoiceFieldService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(i2.ConfigService)); }, token: ChoiceFieldService, providedIn: "root" });
+    ChoiceFieldService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    ChoiceFieldService.ctorParameters = function () { return [
+        { type: i1.HttpClient },
+        { type: i2.ConfigService }
     ]; };
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
-    var ChoiceFieldListComponent = /** @class */ (function () {
-        function ChoiceFieldListComponent(router, service) {
-            this.router = router;
-            this.service = service;
-            this.choiceFields = [];
-            this.pagination = {
-                collectionSize: 0,
-                page: 1,
-                size: 10,
-                maxPaginationItemSize: 5,
-            };
-            this.pageParam = 0;
-            this.fields = [
-                {
-                    key: 'id',
-                    label: 'ID',
-                },
-                {
-                    key: 'keyName',
-                    label: 'Key',
-                },
-                {
-                    key: 'title',
-                    label: 'Title',
-                },
-            ];
-        }
-        ChoiceFieldListComponent.prototype.ngOnInit = function () { };
-        ChoiceFieldListComponent.prototype.paginationSet = function () {
-            this.initData();
-        };
-        ChoiceFieldListComponent.prototype.initData = function () {
-            var _this = this;
-            this.service.query({ page: this.pageParam, size: this.pagination.size }).subscribe(function (results) {
-                _this.pagination.collectionSize = results.headers.get('x-total-count');
-                _this.choiceFields = results.body;
-            });
-        };
-        ChoiceFieldListComponent.prototype.rowClick = function (data) {
-            this.router.navigate(["/choice-fields/field/" + encodeURI(data.id)]);
-        };
-        ChoiceFieldListComponent.prototype.paginationClicked = function (page) {
-            this.pageParam = page - 1;
-            this.initData();
-        };
-        return ChoiceFieldListComponent;
-    }());
-    ChoiceFieldListComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'valtimo-choice-field-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 class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button [routerLink]=\"'create'\" class=\"btn btn-primary btn-space mr-0\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Choice field' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-widget>\n      <valtimo-list\n        [items]=\"choiceFields\"\n        [fields]=\"fields\"\n        (rowClicked)=\"rowClick($event)\"\n        [pagination]=\"pagination\"\n        [viewMode]=\"true\"\n        [isSearchable]=\"true\"\n        paginationIdentifier=\"choiceFieldList\"\n        (paginationClicked)=\"paginationClicked($event)\"\n        (paginationSet)=\"paginationSet()\"\n        [header]=\"true\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">{{ 'Choice fields' | translate }}</h3>\n          <h5 class=\"list-header-description\">{{ 'Overview of all Choice fields' | translate }}</h5>\n        </div>\n      </valtimo-list>\n    </valtimo-widget>\n  </div>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    ChoiceFieldListComponent.ctorParameters = function () { return [
-        { type: router.Router },
-        { type: ChoiceFieldService }
+    /*
+     * 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 ChoiceFieldListComponent = /** @class */ (function () {
+        function ChoiceFieldListComponent(router, service) {
+            this.router = router;
+            this.service = service;
+            this.choiceFields = [];
+            this.pagination = {
+                collectionSize: 0,
+                page: 1,
+                size: 10,
+                maxPaginationItemSize: 5,
+            };
+            this.pageParam = 0;
+            this.fields = [
+                {
+                    key: 'id',
+                    label: 'ID',
+                },
+                {
+                    key: 'keyName',
+                    label: 'Key',
+                },
+                {
+                    key: 'title',
+                    label: 'Title',
+                },
+            ];
+        }
+        ChoiceFieldListComponent.prototype.ngOnInit = function () { };
+        ChoiceFieldListComponent.prototype.paginationSet = function () {
+            this.initData();
+        };
+        ChoiceFieldListComponent.prototype.initData = function () {
+            var _this = this;
+            this.service.query({ page: this.pageParam, size: this.pagination.size }).subscribe(function (results) {
+                _this.pagination.collectionSize = results.headers.get('x-total-count');
+                _this.choiceFields = results.body;
+            });
+        };
+        ChoiceFieldListComponent.prototype.rowClick = function (data) {
+            this.router.navigate(["/choice-fields/field/" + encodeURI(data.id)]);
+        };
+        ChoiceFieldListComponent.prototype.paginationClicked = function (page) {
+            this.pageParam = page - 1;
+            this.initData();
+        };
+        return ChoiceFieldListComponent;
+    }());
+    ChoiceFieldListComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'valtimo-choice-field-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 class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button [routerLink]=\"'create'\" class=\"btn btn-primary btn-space mr-0\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Choice field' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-widget>\n      <valtimo-list\n        [items]=\"choiceFields\"\n        [fields]=\"fields\"\n        (rowClicked)=\"rowClick($event)\"\n        [pagination]=\"pagination\"\n        [viewMode]=\"true\"\n        [isSearchable]=\"true\"\n        paginationIdentifier=\"choiceFieldList\"\n        (paginationClicked)=\"paginationClicked($event)\"\n        (paginationSet)=\"paginationSet()\"\n        [header]=\"true\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">{{ 'Choice fields' | translate }}</h3>\n          <h5 class=\"list-header-description\">{{ 'Overview of all Choice fields' | translate }}</h5>\n        </div>\n      </valtimo-list>\n    </valtimo-widget>\n  </div>\n</div>\n",
+                    styles: [""]
+                },] }
+    ];
+    ChoiceFieldListComponent.ctorParameters = function () { return [
+        { type: router.Router },
+        { type: ChoiceFieldService }
     ]; };
 
-    /*
-     * 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 ChoiceFieldDetailComponent = /** @class */ (function () {
-        function ChoiceFieldDetailComponent(router, route, formBuilder, service, alertService) {
-            this.router = router;
-            this.route = route;
-            this.formBuilder = formBuilder;
-            this.service = service;
-            this.alertService = alertService;
-            this.alertSub = rxjs.Subscription.EMPTY;
-            var snapshot = this.route.snapshot.paramMap;
-            this.id = snapshot.get('id');
-        }
-        ChoiceFieldDetailComponent.prototype.ngOnInit = function () {
-            this.reset();
-        };
-        ChoiceFieldDetailComponent.prototype.ngOnDestroy = function () {
-            this.alertSub.unsubscribe();
-        };
-        Object.defineProperty(ChoiceFieldDetailComponent.prototype, "formControls", {
-            get: function () {
-                return this.form.controls;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ChoiceFieldDetailComponent.prototype.initData = function (id) {
-            var _this = this;
-            this.service.get(id).subscribe(function (result) {
-                _this.choiceField = result;
-                _this.setValues();
-            });
-        };
-        ChoiceFieldDetailComponent.prototype.setValues = function () {
-            if (this.choiceField) {
-                // set form values
-                this.form.controls.id.setValue(this.choiceField.id);
-                this.form.controls.keyName.setValue(this.choiceField.keyName);
-                this.form.controls.title.setValue(this.choiceField.title);
-            }
-        };
-        ChoiceFieldDetailComponent.prototype.createFormGroup = function () {
-            return this.formBuilder.group({
-                id: new forms.FormControl('', forms.Validators.required),
-                keyName: new forms.FormControl('', forms.Validators.required),
-                title: new forms.FormControl('', forms.Validators.required),
-            });
-        };
-        ChoiceFieldDetailComponent.prototype.reset = function () {
-            this.form = this.createFormGroup();
-            this.initData(this.id);
-        };
-        ChoiceFieldDetailComponent.prototype.delete = function () {
-            var _this = this;
-            if (!this.alertSub.closed) {
-                return;
-            }
-            // confirm delete
-            var mssg = 'Delete choice field?';
-            var confirmations = [
-                {
-                    label: 'Cancel',
-                    class: 'btn btn-default',
-                    value: false,
-                },
-                {
-                    label: 'Delete',
-                    class: 'btn btn-primary',
-                    value: true,
-                },
-            ];
-            this.alertService.notification(mssg, confirmations);
-            this.alertSub = this.alertService
-                .getAlertConfirmChangeEmitter()
-                .pipe(operators.first())
-                .subscribe(function (alert) {
-                if (alert.confirm === true) {
-                    _this.deleteConfirmed();
-                }
-            });
-        };
-        ChoiceFieldDetailComponent.prototype.deleteConfirmed = function () {
-            var _this = this;
-            this.service.delete(this.id).subscribe(function () {
-                _this.router.navigate(["/choice-fields"]);
-                _this.alertService.success('Choice field has been deleted');
-            });
-        };
-        ChoiceFieldDetailComponent.prototype.onSubmit = function () {
-            var _this = this;
-            this.service.update(this.form.value).subscribe(function () {
-                _this.reset();
-                _this.alertService.success('Choice field details have been updated');
-            });
-        };
-        return ChoiceFieldDetailComponent;
-    }());
-    ChoiceFieldDetailComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'valtimo-choice-field-detail',
-                    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 *ngIf=\"choiceField\">\n        <div>\n          <div class=\"card-body bg-light\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\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\">{{ choiceField.id }}</div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Key</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ choiceField.keyName }}</div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"p-5 bg-white\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\"\n                  >Title</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"title\"\n                    formControlName=\"title\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field 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]=\"'/choice-fields'\" class=\"btn btn-space btn-default\">Back</a>\n                  <button class=\"btn btn-space btn-danger\" type=\"button\" (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        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n\n<div class=\"page-head\">\n  <h2 class=\"page-head-title\">Choice field values</h2>\n</div>\n<valtimo-choice-field-value-list></valtimo-choice-field-value-list>\n",
-                    styles: [""]
-                },] }
-    ];
-    ChoiceFieldDetailComponent.ctorParameters = function () { return [
-        { type: router.Router },
-        { type: router.ActivatedRoute },
-        { type: forms.FormBuilder },
-        { type: ChoiceFieldService },
-        { 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 ChoiceFieldDetailComponent = /** @class */ (function () {
+        function ChoiceFieldDetailComponent(router, route, formBuilder, service, alertService) {
+            this.router = router;
+            this.route = route;
+            this.formBuilder = formBuilder;
+            this.service = service;
+            this.alertService = alertService;
+            this.alertSub = rxjs.Subscription.EMPTY;
+            var snapshot = this.route.snapshot.paramMap;
+            this.id = snapshot.get('id');
+        }
+        ChoiceFieldDetailComponent.prototype.ngOnInit = function () {
+            this.reset();
+        };
+        ChoiceFieldDetailComponent.prototype.ngOnDestroy = function () {
+            this.alertSub.unsubscribe();
+        };
+        Object.defineProperty(ChoiceFieldDetailComponent.prototype, "formControls", {
+            get: function () {
+                return this.form.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ChoiceFieldDetailComponent.prototype.initData = function (id) {
+            var _this = this;
+            this.service.get(id).subscribe(function (result) {
+                _this.choiceField = result;
+                _this.setValues();
+            });
+        };
+        ChoiceFieldDetailComponent.prototype.setValues = function () {
+            if (this.choiceField) {
+                // set form values
+                this.form.controls.id.setValue(this.choiceField.id);
+                this.form.controls.keyName.setValue(this.choiceField.keyName);
+                this.form.controls.title.setValue(this.choiceField.title);
+            }
+        };
+        ChoiceFieldDetailComponent.prototype.createFormGroup = function () {
+            return this.formBuilder.group({
+                id: new forms.FormControl('', forms.Validators.required),
+                keyName: new forms.FormControl('', forms.Validators.required),
+                title: new forms.FormControl('', forms.Validators.required),
+            });
+        };
+        ChoiceFieldDetailComponent.prototype.reset = function () {
+            this.form = this.createFormGroup();
+            this.initData(this.id);
+        };
+        ChoiceFieldDetailComponent.prototype.delete = function () {
+            var _this = this;
+            if (!this.alertSub.closed) {
+                return;
+            }
+            // confirm delete
+            var mssg = 'Delete choice field?';
+            var confirmations = [
+                {
+                    label: 'Cancel',
+                    class: 'btn btn-default',
+                    value: false,
+                },
+                {
+                    label: 'Delete',
+                    class: 'btn btn-primary',
+                    value: true,
+                },
+            ];
+            this.alertService.notification(mssg, confirmations);
+            this.alertSub = this.alertService
+                .getAlertConfirmChangeEmitter()
+                .pipe(operators.first())
+                .subscribe(function (alert) {
+                if (alert.confirm === true) {
+                    _this.deleteConfirmed();
+                }
+            });
+        };
+        ChoiceFieldDetailComponent.prototype.deleteConfirmed = function () {
+            var _this = this;
+            this.service.delete(this.id).subscribe(function () {
+                _this.router.navigate(["/choice-fields"]);
+                _this.alertService.success('Choice field has been deleted');
+            });
+        };
+        ChoiceFieldDetailComponent.prototype.onSubmit = function () {
+            var _this = this;
+            this.service.update(this.form.value).subscribe(function () {
+                _this.reset();
+                _this.alertService.success('Choice field details have been updated');
+            });
+        };
+        return ChoiceFieldDetailComponent;
+    }());
+    ChoiceFieldDetailComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'valtimo-choice-field-detail',
+                    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 *ngIf=\"choiceField\">\n        <div>\n          <div class=\"card-body bg-light\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\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\">{{ choiceField.id }}</div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Key</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ choiceField.keyName }}</div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"p-5 bg-white\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\"\n                  >Title</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"title\"\n                    formControlName=\"title\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field 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]=\"'/choice-fields'\" class=\"btn btn-space btn-default\">Back</a>\n                  <button class=\"btn btn-space btn-danger\" type=\"button\" (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        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n\n<div class=\"page-head\">\n  <h2 class=\"page-head-title\">Choice field values</h2>\n</div>\n<valtimo-choice-field-value-list></valtimo-choice-field-value-list>\n",
+                    styles: [""]
+                },] }
+    ];
+    ChoiceFieldDetailComponent.ctorParameters = function () { return [
+        { type: router.Router },
+        { type: router.ActivatedRoute },
+        { type: forms.FormBuilder },
+        { type: ChoiceFieldService },
+        { 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 ChoiceFieldCreateComponent = /** @class */ (function () {
-        function ChoiceFieldCreateComponent(router, formBuilder, service, alertService) {
-            this.router = router;
-            this.formBuilder = formBuilder;
-            this.service = service;
-            this.alertService = alertService;
-        }
-        ChoiceFieldCreateComponent.prototype.ngOnInit = function () {
-            this.reset();
-        };
-        Object.defineProperty(ChoiceFieldCreateComponent.prototype, "formControls", {
-            get: function () {
-                return this.form.controls;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ChoiceFieldCreateComponent.prototype.createFormGroup = function () {
-            return this.formBuilder.group({
-                keyName: new forms.FormControl('', forms.Validators.required),
-                title: new forms.FormControl('', forms.Validators.required),
-            });
-        };
-        ChoiceFieldCreateComponent.prototype.onSubmit = function () {
-            var _this = this;
-            this.service.create(this.form.value).subscribe(function (result) {
-                _this.router.navigate(["/choice-fields/field/" + result.id]);
-                _this.alertService.success('New choice field has been created');
-            });
-        };
-        ChoiceFieldCreateComponent.prototype.reset = function () {
-            this.form = this.createFormGroup();
-        };
-        return ChoiceFieldCreateComponent;
-    }());
-    ChoiceFieldCreateComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'valtimo-choice-field-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>\n          <div class=\"p-5 bg-white\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"keyName\"\n                  >Key</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"keyName\"\n                    formControlName=\"keyName\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field key name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.keyName.touched && formControls.keyName.valid,\n                      'is-invalid': formControls.keyName.touched && formControls.keyName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.keyName.touched && formControls.keyName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.keyName.errors.required\">Key name is required</div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\"\n                  >Title</label\n                >\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=\"Choice field 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]=\"'/choice-fields'\" 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        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    ChoiceFieldCreateComponent.ctorParameters = function () { return [
-        { type: router.Router },
-        { type: forms.FormBuilder },
-        { type: ChoiceFieldService },
-        { 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 ChoiceFieldCreateComponent = /** @class */ (function () {
+        function ChoiceFieldCreateComponent(router, formBuilder, service, alertService) {
+            this.router = router;
+            this.formBuilder = formBuilder;
+            this.service = service;
+            this.alertService = alertService;
+        }
+        ChoiceFieldCreateComponent.prototype.ngOnInit = function () {
+            this.reset();
+        };
+        Object.defineProperty(ChoiceFieldCreateComponent.prototype, "formControls", {
+            get: function () {
+                return this.form.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ChoiceFieldCreateComponent.prototype.createFormGroup = function () {
+            return this.formBuilder.group({
+                keyName: new forms.FormControl('', forms.Validators.required),
+                title: new forms.FormControl('', forms.Validators.required),
+            });
+        };
+        ChoiceFieldCreateComponent.prototype.onSubmit = function () {
+            var _this = this;
+            this.service.create(this.form.value).subscribe(function (result) {
+                _this.router.navigate(["/choice-fields/field/" + result.id]);
+                _this.alertService.success('New choice field has been created');
+            });
+        };
+        ChoiceFieldCreateComponent.prototype.reset = function () {
+            this.form = this.createFormGroup();
+        };
+        return ChoiceFieldCreateComponent;
+    }());
+    ChoiceFieldCreateComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'valtimo-choice-field-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>\n          <div class=\"p-5 bg-white\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"keyName\"\n                  >Key</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"keyName\"\n                    formControlName=\"keyName\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field key name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.keyName.touched && formControls.keyName.valid,\n                      'is-invalid': formControls.keyName.touched && formControls.keyName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.keyName.touched && formControls.keyName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.keyName.errors.required\">Key name is required</div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"title\"\n                  >Title</label\n                >\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=\"Choice field 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]=\"'/choice-fields'\" 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        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
+                    styles: [""]
+                },] }
+    ];
+    ChoiceFieldCreateComponent.ctorParameters = function () { return [
+        { type: router.Router },
+        { type: forms.FormBuilder },
+        { type: ChoiceFieldService },
+        { 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 ChoiceFieldValueCreateComponent = /** @class */ (function () {
-        function ChoiceFieldValueCreateComponent(router, route, formBuilder, service, alertService) {
-            this.router = router;
-            this.route = route;
-            this.formBuilder = formBuilder;
-            this.service = service;
-            this.alertService = alertService;
-            var snapshot = this.route.snapshot.paramMap;
-            this.choiceFieldId = snapshot.get('id');
-        }
-        ChoiceFieldValueCreateComponent.prototype.ngOnInit = function () {
-            this.reset();
-        };
-        Object.defineProperty(ChoiceFieldValueCreateComponent.prototype, "formControls", {
-            get: function () {
-                return this.form.controls;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ChoiceFieldValueCreateComponent.prototype.createFormGroup = function () {
-            return this.formBuilder.group({
-                name: new forms.FormControl('', forms.Validators.required),
-                value: new forms.FormControl('', forms.Validators.required),
-                sortOrder: new forms.FormControl('', forms.Validators.required),
-                deprecated: new forms.FormControl('', forms.Validators.required),
-            });
-        };
-        ChoiceFieldValueCreateComponent.prototype.initData = function (id) {
-            var _this = this;
-            this.service.get(id).subscribe(function (result) {
-                _this.choiceField = result;
-                _this.setValues();
-            });
-        };
-        ChoiceFieldValueCreateComponent.prototype.setValues = function () {
-            if (this.choiceField) {
-                // set form values default false
-                this.form.controls.deprecated.setValue(false);
-            }
-        };
-        ChoiceFieldValueCreateComponent.prototype.onSubmit = function () {
-            var _this = this;
-            this.service.createValue(this.form.value, this.choiceField.keyName).subscribe(function (result) {
-                _this.router.navigate(["/choice-fields/field/" + encodeURI(_this.choiceFieldId)]);
-                _this.alertService.success('New choice field value has been created');
-            });
-        };
-        ChoiceFieldValueCreateComponent.prototype.reset = function () {
-            this.form = this.createFormGroup();
-            this.initData(this.choiceFieldId);
-        };
-        return ChoiceFieldValueCreateComponent;
-    }());
-    ChoiceFieldValueCreateComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'valtimo-choice-field-value-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 *ngIf=\"choiceField\">\n        <div>\n          <div class=\"card-body bg-light\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12\">\n                    <strong>Choice field</strong>\n                    <hr />\n                  </div>\n                </div>\n                <div class=\"row mb-3\">\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\">{{ choiceField.id }}</div>\n                </div>\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Key</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ choiceField.keyName }}</div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Title</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ choiceField.title }}</div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"bg-white p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"name\">Key</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"name\"\n                    formControlName=\"name\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value key\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.name.touched && formControls.name.valid,\n                      'is-invalid': formControls.name.touched && formControls.name.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.name.touched && formControls.name.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.name.errors.required\">\n                      Choice field value key 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=\"value\"\n                  >Value</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"value\"\n                    formControlName=\"value\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.value.touched && formControls.value.valid,\n                      'is-invalid': formControls.value.touched && formControls.value.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.value.touched && formControls.value.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.value.errors.required\">\n                      Choice field value 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=\"sortOrder\"\n                  >Sequence</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"number\"\n                    id=\"sortOrder\"\n                    formControlName=\"sortOrder\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value sequence\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.sortOrder.touched && formControls.sortOrder.valid,\n                      'is-invalid': formControls.sortOrder.touched && formControls.sortOrder.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.sortOrder.touched && formControls.sortOrder.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.sortOrder.errors.required\">\n                      Choice field value sequence 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=\"deprecated\"\n                  >Deprecated</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <div class=\"switch-button switch-button-sm switch-button-success\">\n                    <input type=\"checkbox\" formControlName=\"deprecated\" id=\"deprecated\" /><span>\n                      <label for=\"deprecated\"></label\n                    ></span>\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]=\"'../'\" 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        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    ChoiceFieldValueCreateComponent.ctorParameters = function () { return [
-        { type: router.Router },
-        { type: router.ActivatedRoute },
-        { type: forms.FormBuilder },
-        { type: ChoiceFieldService },
-        { 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 ChoiceFieldValueCreateComponent = /** @class */ (function () {
+        function ChoiceFieldValueCreateComponent(router, route, formBuilder, service, alertService) {
+            this.router = router;
+            this.route = route;
+            this.formBuilder = formBuilder;
+            this.service = service;
+            this.alertService = alertService;
+            var snapshot = this.route.snapshot.paramMap;
+            this.choiceFieldId = snapshot.get('id');
+        }
+        ChoiceFieldValueCreateComponent.prototype.ngOnInit = function () {
+            this.reset();
+        };
+        Object.defineProperty(ChoiceFieldValueCreateComponent.prototype, "formControls", {
+            get: function () {
+                return this.form.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ChoiceFieldValueCreateComponent.prototype.createFormGroup = function () {
+            return this.formBuilder.group({
+                name: new forms.FormControl('', forms.Validators.required),
+                value: new forms.FormControl('', forms.Validators.required),
+                sortOrder: new forms.FormControl('', forms.Validators.required),
+                deprecated: new forms.FormControl('', forms.Validators.required),
+            });
+        };
+        ChoiceFieldValueCreateComponent.prototype.initData = function (id) {
+            var _this = this;
+            this.service.get(id).subscribe(function (result) {
+                _this.choiceField = result;
+                _this.setValues();
+            });
+        };
+        ChoiceFieldValueCreateComponent.prototype.setValues = function () {
+            if (this.choiceField) {
+                // set form values default false
+                this.form.controls.deprecated.setValue(false);
+            }
+        };
+        ChoiceFieldValueCreateComponent.prototype.onSubmit = function () {
+            var _this = this;
+            this.service.createValue(this.form.value, this.choiceField.keyName).subscribe(function (result) {
+                _this.router.navigate(["/choice-fields/field/" + encodeURI(_this.choiceFieldId)]);
+                _this.alertService.success('New choice field value has been created');
+            });
+        };
+        ChoiceFieldValueCreateComponent.prototype.reset = function () {
+            this.form = this.createFormGroup();
+            this.initData(this.choiceFieldId);
+        };
+        return ChoiceFieldValueCreateComponent;
+    }());
+    ChoiceFieldValueCreateComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'valtimo-choice-field-value-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 *ngIf=\"choiceField\">\n        <div>\n          <div class=\"card-body bg-light\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12\">\n                    <strong>Choice field</strong>\n                    <hr />\n                  </div>\n                </div>\n                <div class=\"row mb-3\">\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\">{{ choiceField.id }}</div>\n                </div>\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Key</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ choiceField.keyName }}</div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Title</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ choiceField.title }}</div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"bg-white p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"name\">Key</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"name\"\n                    formControlName=\"name\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value key\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.name.touched && formControls.name.valid,\n                      'is-invalid': formControls.name.touched && formControls.name.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.name.touched && formControls.name.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.name.errors.required\">\n                      Choice field value key 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=\"value\"\n                  >Value</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"value\"\n                    formControlName=\"value\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.value.touched && formControls.value.valid,\n                      'is-invalid': formControls.value.touched && formControls.value.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.value.touched && formControls.value.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.value.errors.required\">\n                      Choice field value 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=\"sortOrder\"\n                  >Sequence</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"number\"\n                    id=\"sortOrder\"\n                    formControlName=\"sortOrder\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value sequence\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.sortOrder.touched && formControls.sortOrder.valid,\n                      'is-invalid': formControls.sortOrder.touched && formControls.sortOrder.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.sortOrder.touched && formControls.sortOrder.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.sortOrder.errors.required\">\n                      Choice field value sequence 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=\"deprecated\"\n                  >Deprecated</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <div class=\"switch-button switch-button-sm switch-button-success\">\n                    <input type=\"checkbox\" formControlName=\"deprecated\" id=\"deprecated\" /><span>\n                      <label for=\"deprecated\"></label\n                    ></span>\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]=\"'../'\" 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        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
+                    styles: [""]
+                },] }
+    ];
+    ChoiceFieldValueCreateComponent.ctorParameters = function () { return [
+        { type: router.Router },
+        { type: router.ActivatedRoute },
+        { type: forms.FormBuilder },
+        { type: ChoiceFieldService },
+        { 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 ChoiceFieldValueDetailComponent = /** @class */ (function () {
-        function ChoiceFieldValueDetailComponent(router, route, formBuilder, service, alertService) {
-            this.router = router;
-            this.route = route;
-            this.formBuilder = formBuilder;
-            this.service = service;
-            this.alertService = alertService;
-            var snapshot = this.route.snapshot.paramMap;
-            this.choiceFieldValueId = snapshot.get('valueId');
-        }
-        ChoiceFieldValueDetailComponent.prototype.ngOnInit = function () {
-            this.reset();
-        };
-        Object.defineProperty(ChoiceFieldValueDetailComponent.prototype, "formControls", {
-            get: function () {
-                return this.form.controls;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ChoiceFieldValueDetailComponent.prototype.initData = function (choiceFieldValueId) {
-            var _this = this;
-            this.service.getValue(choiceFieldValueId).subscribe(function (result) {
-                _this.choiceField = result.choiceField;
-                _this.choiceFieldValue = result;
-                _this.setValues();
-            });
-        };
-        ChoiceFieldValueDetailComponent.prototype.createFormGroup = function () {
-            return this.formBuilder.group({
-                id: new forms.FormControl('', forms.Validators.required),
-                name: new forms.FormControl('', forms.Validators.required),
-                value: new forms.FormControl('', forms.Validators.required),
-                sortOrder: new forms.FormControl('', forms.Validators.required),
-                deprecated: new forms.FormControl('', forms.Validators.required),
-            });
-        };
-        ChoiceFieldValueDetailComponent.prototype.setValues = function () {
-            if (this.choiceField) {
-                // set form values
-                this.form.controls.id.setValue(this.choiceFieldValue.id);
-                this.form.controls.name.setValue(this.choiceFieldValue.name);
-                this.form.controls.value.setValue(this.choiceFieldValue.value);
-                this.form.controls.sortOrder.setValue(this.choiceFieldValue.sortOrder);
-                this.form.controls.deprecated.setValue(this.choiceFieldValue.deprecated);
-            }
-        };
-        ChoiceFieldValueDetailComponent.prototype.reset = function () {
-            this.form = this.createFormGroup();
-            this.initData(this.choiceFieldValueId);
-        };
-        ChoiceFieldValueDetailComponent.prototype.onSubmit = function () {
-            var _this = this;
-            this.service.updateValue(this.form.value, this.choiceField.keyName).subscribe(function () {
-                _this.reset();
-                _this.alertService.success('Choice field value details have been updated');
-            });
-        };
-        return ChoiceFieldValueDetailComponent;
-    }());
-    ChoiceFieldValueDetailComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'valtimo-choice-field-value-detail',
-                    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 *ngIf=\"choiceField\">\n        <div>\n          <div class=\"card-body bg-light\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12\">\n                    <strong>Choice field</strong>\n                    <hr />\n                  </div>\n                </div>\n                <div class=\"row mb-3\">\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\">{{ choiceField.id }}</div>\n                </div>\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Key</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ choiceField.keyName }}</div>\n                </div>\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Title</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ choiceField.title }}</div>\n                </div>\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 pt-3\">\n                    <strong>Choice field value</strong>\n                    <hr />\n                  </div>\n                </div>\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\">{{ choiceFieldValue.id }}</div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"bg-white p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"name\">Key</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"name\"\n                    formControlName=\"name\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value key\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.name.touched && formControls.name.valid,\n                      'is-invalid': formControls.name.touched && formControls.name.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.name.touched && formControls.name.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.name.errors.required\">\n                      Choice field value key 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=\"value\"\n                  >Value</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"value\"\n                    formControlName=\"value\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.value.touched && formControls.value.valid,\n                      'is-invalid': formControls.value.touched && formControls.value.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.value.touched && formControls.value.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.value.errors.required\">\n                      Choice field value 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=\"sortOrder\"\n                  >Sequence</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"number\"\n                    id=\"sortOrder\"\n                    formControlName=\"sortOrder\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value sequence\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.sortOrder.touched && formControls.sortOrder.valid,\n                      'is-invalid': formControls.sortOrder.touched && formControls.sortOrder.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.sortOrder.touched && formControls.sortOrder.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.sortOrder.errors.required\">\n                      Choice field value sequence 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=\"deprecated\"\n                  >Deprecated</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <div class=\"switch-button switch-button-sm switch-button-success\">\n                    <input type=\"checkbox\" formControlName=\"deprecated\" id=\"deprecated\" /><span>\n                      <label for=\"deprecated\"></label\n                    ></span>\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]=\"'../../'\" 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        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    ChoiceFieldValueDetailComponent.ctorParameters = function () { return [
-        { type: router.Router },
-        { type: router.ActivatedRoute },
-        { type: forms.FormBuilder },
-        { type: ChoiceFieldService },
-        { 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 ChoiceFieldValueDetailComponent = /** @class */ (function () {
+        function ChoiceFieldValueDetailComponent(router, route, formBuilder, service, alertService) {
+            this.router = router;
+            this.route = route;
+            this.formBuilder = formBuilder;
+            this.service = service;
+            this.alertService = alertService;
+            var snapshot = this.route.snapshot.paramMap;
+            this.choiceFieldValueId = snapshot.get('valueId');
+        }
+        ChoiceFieldValueDetailComponent.prototype.ngOnInit = function () {
+            this.reset();
+        };
+        Object.defineProperty(ChoiceFieldValueDetailComponent.prototype, "formControls", {
+            get: function () {
+                return this.form.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ChoiceFieldValueDetailComponent.prototype.initData = function (choiceFieldValueId) {
+            var _this = this;
+            this.service.getValue(choiceFieldValueId).subscribe(function (result) {
+                _this.choiceField = result.choiceField;
+                _this.choiceFieldValue = result;
+                _this.setValues();
+            });
+        };
+        ChoiceFieldValueDetailComponent.prototype.createFormGroup = function () {
+            return this.formBuilder.group({
+                id: new forms.FormControl('', forms.Validators.required),
+                name: new forms.FormControl('', forms.Validators.required),
+                value: new forms.FormControl('', forms.Validators.required),
+                sortOrder: new forms.FormControl('', forms.Validators.required),
+                deprecated: new forms.FormControl('', forms.Validators.required),
+            });
+        };
+        ChoiceFieldValueDetailComponent.prototype.setValues = function () {
+            if (this.choiceField) {
+                // set form values
+                this.form.controls.id.setValue(this.choiceFieldValue.id);
+                this.form.controls.name.setValue(this.choiceFieldValue.name);
+                this.form.controls.value.setValue(this.choiceFieldValue.value);
+                this.form.controls.sortOrder.setValue(this.choiceFieldValue.sortOrder);
+                this.form.controls.deprecated.setValue(this.choiceFieldValue.deprecated);
+            }
+        };
+        ChoiceFieldValueDetailComponent.prototype.reset = function () {
+            this.form = this.createFormGroup();
+            this.initData(this.choiceFieldValueId);
+        };
+        ChoiceFieldValueDetailComponent.prototype.onSubmit = function () {
+            var _this = this;
+            this.service.updateValue(this.form.value, this.choiceField.keyName).subscribe(function () {
+                _this.reset();
+                _this.alertService.success('Choice field value details have been updated');
+            });
+        };
+        return ChoiceFieldValueDetailComponent;
+    }());
+    ChoiceFieldValueDetailComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'valtimo-choice-field-value-detail',
+                    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 *ngIf=\"choiceField\">\n        <div>\n          <div class=\"card-body bg-light\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12\">\n                    <strong>Choice field</strong>\n                    <hr />\n                  </div>\n                </div>\n                <div class=\"row mb-3\">\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\">{{ choiceField.id }}</div>\n                </div>\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Key</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ choiceField.keyName }}</div>\n                </div>\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Title</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ choiceField.title }}</div>\n                </div>\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 pt-3\">\n                    <strong>Choice field value</strong>\n                    <hr />\n                  </div>\n                </div>\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\">{{ choiceFieldValue.id }}</div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"bg-white p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"name\">Key</label>\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"name\"\n                    formControlName=\"name\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value key\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.name.touched && formControls.name.valid,\n                      'is-invalid': formControls.name.touched && formControls.name.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.name.touched && formControls.name.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.name.errors.required\">\n                      Choice field value key 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=\"value\"\n                  >Value</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"value\"\n                    formControlName=\"value\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.value.touched && formControls.value.valid,\n                      'is-invalid': formControls.value.touched && formControls.value.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.value.touched && formControls.value.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.value.errors.required\">\n                      Choice field value 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=\"sortOrder\"\n                  >Sequence</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"number\"\n                    id=\"sortOrder\"\n                    formControlName=\"sortOrder\"\n                    class=\"form-control\"\n                    placeholder=\"Choice field value sequence\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.sortOrder.touched && formControls.sortOrder.valid,\n                      'is-invalid': formControls.sortOrder.touched && formControls.sortOrder.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.sortOrder.touched && formControls.sortOrder.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.sortOrder.errors.required\">\n                      Choice field value sequence 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=\"deprecated\"\n                  >Deprecated</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <div class=\"switch-button switch-button-sm switch-button-success\">\n                    <input type=\"checkbox\" formControlName=\"deprecated\" id=\"deprecated\" /><span>\n                      <label for=\"deprecated\"></label\n                    ></span>\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]=\"'../../'\" 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        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
+                    styles: [""]
+                },] }
+    ];
+    ChoiceFieldValueDetailComponent.ctorParameters = function () { return [
+        { type: router.Router },
+        { type: router.ActivatedRoute },
+        { type: forms.FormBuilder },
+        { type: ChoiceFieldService },
+        { 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 ɵ0 = {
-        title: 'Choice fields',
-        roles: [contract.ROLE_ADMIN],
-    }, ɵ1 = {
-        title: 'Choice field details',
-        roles: [contract.ROLE_ADMIN],
-    }, ɵ2 = {
-        title: 'Create new Choice field',
-        roles: [contract.ROLE_ADMIN],
-    }, ɵ3 = {
-        title: 'Create new Choice field value',
-        roles: [contract.ROLE_ADMIN],
-    }, ɵ4 = {
-        title: 'Choice field value details',
-        roles: [contract.ROLE_ADMIN],
-    };
-    var routes = [
-        {
-            path: 'choice-fields',
-            data: ɵ0,
-            component: ChoiceFieldListComponent,
-            canActivate: [security.AuthGuardService],
-        },
-        {
-            path: 'choice-fields/field/:id',
-            data: ɵ1,
-            component: ChoiceFieldDetailComponent,
-            canActivate: [security.AuthGuardService],
-        },
-        {
-            path: 'choice-fields/create',
-            data: ɵ2,
-            component: ChoiceFieldCreateComponent,
-            canActivate: [security.AuthGuardService],
-        },
-        {
-            path: 'choice-fields/field/:id/create-value',
-            data: ɵ3,
-            component: ChoiceFieldValueCreateComponent,
-            canActivate: [security.AuthGuardService],
-        },
-        {
-            path: 'choice-fields/field/:id/value/:valueId',
-            data: ɵ4,
-            component: ChoiceFieldValueDetailComponent,
-            canActivate: [security.AuthGuardService],
-        },
-    ];
-    var ChoiceFieldRoutingModule = /** @class */ (function () {
-        function ChoiceFieldRoutingModule() {
-        }
-        return ChoiceFieldRoutingModule;
-    }());
-    ChoiceFieldRoutingModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    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: 'Choice fields',
+        roles: [i2.ROLE_ADMIN],
+    }, ɵ1 = {
+        title: 'Choice field details',
+        roles: [i2.ROLE_ADMIN],
+    }, ɵ2 = {
+        title: 'Create new Choice field',
+        roles: [i2.ROLE_ADMIN],
+    }, ɵ3 = {
+        title: 'Create new Choice field value',
+        roles: [i2.ROLE_ADMIN],
+    }, ɵ4 = {
+        title: 'Choice field value details',
+        roles: [i2.ROLE_ADMIN],
+    };
+    var routes = [
+        {
+            path: 'choice-fields',
+            data: ɵ0,
+            component: ChoiceFieldListComponent,
+            canActivate: [security.AuthGuardService],
+        },
+        {
+            path: 'choice-fields/field/:id',
+            data: ɵ1,
+            component: ChoiceFieldDetailComponent,
+            canActivate: [security.AuthGuardService],
+        },
+        {
+            path: 'choice-fields/create',
+            data: ɵ2,
+            component: ChoiceFieldCreateComponent,
+            canActivate: [security.AuthGuardService],
+        },
+        {
+            path: 'choice-fields/field/:id/create-value',
+            data: ɵ3,
+            component: ChoiceFieldValueCreateComponent,
+            canActivate: [security.AuthGuardService],
+        },
+        {
+            path: 'choice-fields/field/:id/value/:valueId',
+            data: ɵ4,
+            component: ChoiceFieldValueDetailComponent,
+            canActivate: [security.AuthGuardService],
+        },
+    ];
+    var ChoiceFieldRoutingModule = /** @class */ (function () {
+        function ChoiceFieldRoutingModule() {
+        }
+        return ChoiceFieldRoutingModule;
+    }());
+    ChoiceFieldRoutingModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    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 ChoiceFieldValueListComponent = /** @class */ (function () {
-        function ChoiceFieldValueListComponent(router, route, formBuilder, service) {
-            this.router = router;
-            this.route = route;
-            this.formBuilder = formBuilder;
-            this.service = service;
-            this.choiceFieldValues = [];
-            this.pagination = {
-                collectionSize: 0,
-                page: 1,
-                size: 10,
-                maxPaginationItemSize: 5,
-            };
-            this.pageParam = 0;
-            this.fields = [
-                {
-                    key: 'id',
-                    label: 'ID',
-                },
-                {
-                    key: 'value',
-                    label: 'Key',
-                },
-                {
-                    key: 'name',
-                    label: 'Title',
-                },
-                {
-                    key: 'deprecatedDisplayString',
-                    label: 'Deprecated',
-                },
-                {
-                    key: 'sortOrder',
-                    label: 'Sequence',
-                },
-            ];
-            var snapshot = this.route.snapshot.paramMap;
-            this.id = snapshot.get('id');
-        }
-        ChoiceFieldValueListComponent.prototype.ngOnInit = function () {
-            this.paginationSet();
-        };
-        ChoiceFieldValueListComponent.prototype.paginationSet = function () {
-            this.initData(this.id);
-        };
-        ChoiceFieldValueListComponent.prototype.initData = function (id) {
-            var _this = this;
-            this.service.get(id).subscribe(function (result) {
-                _this.choiceField = result;
-                _this.service
-                    .queryValues(_this.choiceField.keyName, { page: _this.pageParam, size: _this.pagination.size })
-                    .subscribe(function (values) {
-                    _this.pagination.collectionSize = values.headers.get('x-total-count');
-                    _this.choiceFieldValues = values.body;
-                    _this.choiceFieldValues.forEach(function (choiceFieldValue) {
-                        choiceFieldValue.deprecatedDisplayString = choiceFieldValue.deprecated ? 'Yes' : 'No';
-                    });
-                });
-            });
-        };
-        ChoiceFieldValueListComponent.prototype.rowClick = function (data) {
-            this.router.navigate(["/choice-fields/field/" + data.choiceField.id + "/value/" + data.id]);
-        };
-        ChoiceFieldValueListComponent.prototype.paginationClicked = function (page) {
-            this.pageParam = page - 1;
-            this.initData(this.id);
-        };
-        return ChoiceFieldValueListComponent;
-    }());
-    ChoiceFieldValueListComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'valtimo-choice-field-value-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 class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button [routerLink]=\"'create-value'\" class=\"btn btn-primary btn-space mr-0\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Choice field value' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-widget>\n      <valtimo-list\n        [items]=\"choiceFieldValues\"\n        [fields]=\"fields\"\n        [viewMode]=\"true\"\n        [isSearchable]=\"true\"\n        (rowClicked)=\"rowClick($event)\"\n        [pagination]=\"pagination\"\n        paginationIdentifier=\"choiceFieldValueList\"\n        (paginationClicked)=\"paginationClicked($event)\"\n        [header]=\"true\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">{{ 'Choice field values' | translate }}</h3>\n          <h5 class=\"list-header-description\">\n            {{ 'Overview of all Choice field values' | translate }}\n          </h5>\n        </div>\n      </valtimo-list>\n    </valtimo-widget>\n  </div>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    ChoiceFieldValueListComponent.ctorParameters = function () { return [
-        { type: router.Router },
-        { type: router.ActivatedRoute },
-        { type: forms.FormBuilder },
-        { type: ChoiceFieldService }
+    /*
+     * 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 ChoiceFieldValueListComponent = /** @class */ (function () {
+        function ChoiceFieldValueListComponent(router, route, formBuilder, service) {
+            this.router = router;
+            this.route = route;
+            this.formBuilder = formBuilder;
+            this.service = service;
+            this.choiceFieldValues = [];
+            this.pagination = {
+                collectionSize: 0,
+                page: 1,
+                size: 10,
+                maxPaginationItemSize: 5,
+            };
+            this.pageParam = 0;
+            this.fields = [
+                {
+                    key: 'id',
+                    label: 'ID',
+                },
+                {
+                    key: 'value',
+                    label: 'Key',
+                },
+                {
+                    key: 'name',
+                    label: 'Title',
+                },
+                {
+                    key: 'deprecatedDisplayString',
+                    label: 'Deprecated',
+                },
+                {
+                    key: 'sortOrder',
+                    label: 'Sequence',
+                },
+            ];
+            var snapshot = this.route.snapshot.paramMap;
+            this.id = snapshot.get('id');
+        }
+        ChoiceFieldValueListComponent.prototype.ngOnInit = function () {
+            this.paginationSet();
+        };
+        ChoiceFieldValueListComponent.prototype.paginationSet = function () {
+            this.initData(this.id);
+        };
+        ChoiceFieldValueListComponent.prototype.initData = function (id) {
+            var _this = this;
+            this.service.get(id).subscribe(function (result) {
+                _this.choiceField = result;
+                _this.service
+                    .queryValues(_this.choiceField.keyName, { page: _this.pageParam, size: _this.pagination.size })
+                    .subscribe(function (values) {
+                    _this.pagination.collectionSize = values.headers.get('x-total-count');
+                    _this.choiceFieldValues = values.body;
+                    _this.choiceFieldValues.forEach(function (choiceFieldValue) {
+                        choiceFieldValue.deprecatedDisplayString = choiceFieldValue.deprecated ? 'Yes' : 'No';
+                    });
+                });
+            });
+        };
+        ChoiceFieldValueListComponent.prototype.rowClick = function (data) {
+            this.router.navigate(["/choice-fields/field/" + data.choiceField.id + "/value/" + data.id]);
+        };
+        ChoiceFieldValueListComponent.prototype.paginationClicked = function (page) {
+            this.pageParam = page - 1;
+            this.initData(this.id);
+        };
+        return ChoiceFieldValueListComponent;
+    }());
+    ChoiceFieldValueListComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'valtimo-choice-field-value-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 class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3\">\n        <button [routerLink]=\"'create-value'\" class=\"btn btn-primary btn-space mr-0\">\n          <i class=\"icon mdi mdi-plus\"></i> &nbsp;\n          <span>{{ 'Create new Choice field value' | translate }}</span>\n        </button>\n      </div>\n    </div>\n    <valtimo-widget>\n      <valtimo-list\n        [items]=\"choiceFieldValues\"\n        [fields]=\"fields\"\n        [viewMode]=\"true\"\n        [isSearchable]=\"true\"\n        (rowClicked)=\"rowClick($event)\"\n        [pagination]=\"pagination\"\n        paginationIdentifier=\"choiceFieldValueList\"\n        (paginationClicked)=\"paginationClicked($event)\"\n        [header]=\"true\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">{{ 'Choice field values' | translate }}</h3>\n          <h5 class=\"list-header-description\">\n            {{ 'Overview of all Choice field values' | translate }}\n          </h5>\n        </div>\n      </valtimo-list>\n    </valtimo-widget>\n  </div>\n</div>\n",
+                    styles: [""]
+                },] }
+    ];
+    ChoiceFieldValueListComponent.ctorParameters = function () { return [
+        { type: router.Router },
+        { type: router.ActivatedRoute },
+        { type: forms.FormBuilder },
+        { type: ChoiceFieldService }
     ]; };
 
-    /*
-     * 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 ChoiceFieldModule = /** @class */ (function () {
-        function ChoiceFieldModule() {
-        }
-        return ChoiceFieldModule;
-    }());
-    ChoiceFieldModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        ChoiceFieldListComponent,
-                        ChoiceFieldDetailComponent,
-                        ChoiceFieldCreateComponent,
-                        ChoiceFieldValueListComponent,
-                        ChoiceFieldValueCreateComponent,
-                        ChoiceFieldValueDetailComponent,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        components.ListModule,
-                        components.WidgetModule,
-                        components.FieldAutoFocusModule,
-                        forms.FormsModule,
-                        forms.ReactiveFormsModule,
-                        ChoiceFieldRoutingModule,
-                        components.AlertModule,
-                        core.TranslateModule,
-                    ],
-                    exports: [],
-                },] }
+    /*
+     * 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 ChoiceFieldModule = /** @class */ (function () {
+        function ChoiceFieldModule() {
+        }
+        return ChoiceFieldModule;
+    }());
+    ChoiceFieldModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        ChoiceFieldListComponent,
+                        ChoiceFieldDetailComponent,
+                        ChoiceFieldCreateComponent,
+                        ChoiceFieldValueListComponent,
+                        ChoiceFieldValueCreateComponent,
+                        ChoiceFieldValueDetailComponent,
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        components.ListModule,
+                        components.WidgetModule,
+                        components.FieldAutoFocusModule,
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
+                        ChoiceFieldRoutingModule,
+                        components.AlertModule,
+                        core.TranslateModule,
+                    ],
+                    exports: [],
+                },] }
     ];
 
-    /*
-     * 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.ChoiceFieldModule = ChoiceFieldModule;