@valtimo/choice-field 4.23.0 → 5.2.0

package/fesm2020/valtimo-choice-field.mjs

@@ -0,0 +1,757 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common/http';
+import * as i2 from '@valtimo/config';
+import { ROLE_ADMIN } from '@valtimo/config';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/forms';
+import { FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@valtimo/components';
+import { ListModule, WidgetModule, FieldAutoFocusModule, AlertModule } from '@valtimo/components';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { AuthGuardService } from '@valtimo/security';
+import * as i4$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
+import { first } from 'rxjs/operators';
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ *
+ *  * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *  *
+ *  * Licensed under EUPL, Version 1.2 (the "License");
+ *  * you may not use this file except in compliance with the License.
+ *  * You may obtain a copy of the License at
+ *  *
+ *  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *  *
+ *  * Unless required by applicable law or agreed to in writing, software
+ *  * distributed under the License is distributed on an "AS IS" basis,
+ *  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  * See the License for the specific language governing permissions and
+ *  * limitations under the License.
+ *
+ */
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ChoiceFieldService {
+    constructor(http, configService) {
+        this.http = http;
+        this.configService = configService;
+        this.valtimoApiConfig = configService.config.valtimoApi;
+    }
+    query(params) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}choice-fields`, {
+            observe: 'response',
+            params,
+        });
+    }
+    get(id) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}choice-fields/${id}`);
+    }
+    create(choiceField) {
+        return this.http.post(`${this.valtimoApiConfig.endpointUri}choice-fields`, choiceField);
+    }
+    delete(id) {
+        return this.http.delete(`${this.valtimoApiConfig.endpointUri}choice-fields/${id}`);
+    }
+    update(choiceField) {
+        return this.http.put(`${this.valtimoApiConfig.endpointUri}choice-fields`, choiceField);
+    }
+    queryValues(keyName, params) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}choice-field-values/${keyName}/values`, { observe: 'response', params });
+    }
+    getValue(choiceFieldId) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}choice-field-values/${choiceFieldId}`);
+    }
+    updateValue(choiceFieldValue, choiceFieldName) {
+        return this.http.put(`${this.valtimoApiConfig.endpointUri}choice-field-values`, choiceFieldValue, {
+            params: { choice_field_name: choiceFieldName },
+        });
+    }
+    createValue(choiceFieldValue, choiceFieldName) {
+        return this.http.post(`${this.valtimoApiConfig.endpointUri}choice-field-values`, choiceFieldValue, { params: { choice_field_name: choiceFieldName } });
+    }
+}
+ChoiceFieldService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+ChoiceFieldService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], 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.
+ */
+class ChoiceFieldListComponent {
+    constructor(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',
+            },
+        ];
+    }
+    ngOnInit() { }
+    paginationSet() {
+        this.initData();
+    }
+    initData() {
+        this.service.query({ page: this.pageParam, size: this.pagination.size }).subscribe(results => {
+            this.pagination.collectionSize = results.headers.get('x-total-count');
+            this.choiceFields = results.body;
+        });
+    }
+    rowClick(data) {
+        this.router.navigate([`/choice-fields/field/${encodeURI(data.id)}`]);
+    }
+    paginationClicked(page) {
+        this.pageParam = page - 1;
+        this.initData();
+    }
+}
+ChoiceFieldListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldListComponent, deps: [{ token: i1$1.Router }, { token: ChoiceFieldService }], target: i0.ɵɵFactoryTarget.Component });
+ChoiceFieldListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ChoiceFieldListComponent, selector: "valtimo-choice-field-list", ngImport: i0, 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 mr-1\"></i>\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: [""], components: [{ type: i4.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i4.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }], directives: [{ type: i1$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "translate": i4$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldListComponent, decorators: [{
+            type: 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 mr-1\"></i>\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: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.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.
+ */
+class ChoiceFieldValueListComponent {
+    constructor(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: 'name',
+                label: 'Key',
+            },
+            {
+                key: 'value',
+                label: 'Value',
+            },
+            {
+                key: 'deprecatedDisplayString',
+                label: 'Deprecated',
+            },
+            {
+                key: 'sortOrder',
+                label: 'Sequence',
+            },
+        ];
+        const snapshot = this.route.snapshot.paramMap;
+        this.id = snapshot.get('id');
+    }
+    ngOnInit() {
+        this.paginationSet();
+    }
+    paginationSet() {
+        this.initData(this.id);
+    }
+    initData(id) {
+        this.service.get(id).subscribe(result => {
+            this.choiceField = result;
+            this.service
+                .queryValues(this.choiceField.keyName, { page: this.pageParam, size: this.pagination.size })
+                .subscribe(values => {
+                this.pagination.collectionSize = values.headers.get('x-total-count');
+                this.choiceFieldValues = values.body;
+                this.choiceFieldValues.forEach(choiceFieldValue => {
+                    choiceFieldValue.deprecatedDisplayString = choiceFieldValue.deprecated ? 'Yes' : 'No';
+                });
+            });
+        });
+    }
+    rowClick(data) {
+        this.router.navigate([`/choice-fields/field/${data.choiceField.id}/value/${data.id}`]);
+    }
+    paginationClicked(page) {
+        this.pageParam = page - 1;
+        this.initData(this.id);
+    }
+}
+ChoiceFieldValueListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldValueListComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2$1.FormBuilder }, { token: ChoiceFieldService }], target: i0.ɵɵFactoryTarget.Component });
+ChoiceFieldValueListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ChoiceFieldValueListComponent, selector: "valtimo-choice-field-value-list", ngImport: i0, 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 mr-1\"></i>\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: [""], components: [{ type: i4.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i4.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }], directives: [{ type: i1$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "translate": i4$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldValueListComponent, decorators: [{
+            type: 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 mr-1\"></i>\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: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2$1.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.
+ */
+class ChoiceFieldDetailComponent {
+    constructor(router, route, formBuilder, service, alertService) {
+        this.router = router;
+        this.route = route;
+        this.formBuilder = formBuilder;
+        this.service = service;
+        this.alertService = alertService;
+        this.alertSub = Subscription.EMPTY;
+        const snapshot = this.route.snapshot.paramMap;
+        this.id = snapshot.get('id');
+    }
+    ngOnInit() {
+        this.reset();
+    }
+    ngOnDestroy() {
+        this.alertSub.unsubscribe();
+    }
+    get formControls() {
+        return this.form.controls;
+    }
+    initData(id) {
+        this.service.get(id).subscribe(result => {
+            this.choiceField = result;
+            this.setValues();
+        });
+    }
+    setValues() {
+        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);
+        }
+    }
+    createFormGroup() {
+        return this.formBuilder.group({
+            id: new FormControl('', Validators.required),
+            keyName: new FormControl('', Validators.required),
+            title: new FormControl('', Validators.required),
+        });
+    }
+    reset() {
+        this.form = this.createFormGroup();
+        this.initData(this.id);
+    }
+    delete() {
+        if (!this.alertSub.closed) {
+            return;
+        }
+        // confirm delete
+        const mssg = 'Delete choice field?';
+        const 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(first())
+            .subscribe(alert => {
+            if (alert.confirm === true) {
+                this.deleteConfirmed();
+            }
+        });
+    }
+    deleteConfirmed() {
+        this.service.delete(this.id).subscribe(() => {
+            this.router.navigate([`/choice-fields`]);
+            this.alertService.success('Choice field has been deleted');
+        });
+    }
+    onSubmit() {
+        this.service.update(this.form.value).subscribe(() => {
+            this.reset();
+            this.alertService.success('Choice field details have been updated');
+        });
+    }
+}
+ChoiceFieldDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldDetailComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2$1.FormBuilder }, { token: ChoiceFieldService }, { token: i4.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+ChoiceFieldDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ChoiceFieldDetailComponent, selector: "valtimo-choice-field-detail", ngImport: i0, 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: [""], components: [{ type: i4.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: ChoiceFieldValueListComponent, selector: "valtimo-choice-field-value-list" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldDetailComponent, decorators: [{
+            type: 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: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2$1.FormBuilder }, { type: ChoiceFieldService }, { type: i4.AlertService }]; } });
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ChoiceFieldCreateComponent {
+    constructor(router, formBuilder, service, alertService) {
+        this.router = router;
+        this.formBuilder = formBuilder;
+        this.service = service;
+        this.alertService = alertService;
+    }
+    ngOnInit() {
+        this.reset();
+    }
+    get formControls() {
+        return this.form.controls;
+    }
+    createFormGroup() {
+        return this.formBuilder.group({
+            keyName: new FormControl('', Validators.required),
+            title: new FormControl('', Validators.required),
+        });
+    }
+    onSubmit() {
+        this.service.create(this.form.value).subscribe(result => {
+            this.router.navigate([`/choice-fields/field/${result.id}`]);
+            this.alertService.success('New choice field has been created');
+        });
+    }
+    reset() {
+        this.form = this.createFormGroup();
+    }
+}
+ChoiceFieldCreateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldCreateComponent, deps: [{ token: i1$1.Router }, { token: i2$1.FormBuilder }, { token: ChoiceFieldService }, { token: i4.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+ChoiceFieldCreateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ChoiceFieldCreateComponent, selector: "valtimo-choice-field-create", ngImport: i0, 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: [""], components: [{ type: i4.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldCreateComponent, decorators: [{
+            type: 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: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i2$1.FormBuilder }, { type: ChoiceFieldService }, { type: i4.AlertService }]; } });
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ChoiceFieldValueCreateComponent {
+    constructor(router, route, formBuilder, service, alertService) {
+        this.router = router;
+        this.route = route;
+        this.formBuilder = formBuilder;
+        this.service = service;
+        this.alertService = alertService;
+        const snapshot = this.route.snapshot.paramMap;
+        this.choiceFieldId = snapshot.get('id');
+    }
+    ngOnInit() {
+        this.reset();
+    }
+    get formControls() {
+        return this.form.controls;
+    }
+    createFormGroup() {
+        return this.formBuilder.group({
+            name: new FormControl('', Validators.required),
+            value: new FormControl('', Validators.required),
+            sortOrder: new FormControl('', Validators.required),
+            deprecated: new FormControl('', Validators.required),
+        });
+    }
+    initData(id) {
+        this.service.get(id).subscribe(result => {
+            this.choiceField = result;
+            this.setValues();
+        });
+    }
+    setValues() {
+        if (this.choiceField) {
+            // set form values default false
+            this.form.controls.deprecated.setValue(false);
+        }
+    }
+    onSubmit() {
+        this.service.createValue(this.form.value, this.choiceField.keyName).subscribe(result => {
+            this.router.navigate([`/choice-fields/field/${encodeURI(this.choiceFieldId)}`]);
+            this.alertService.success('New choice field value has been created');
+        });
+    }
+    reset() {
+        this.form = this.createFormGroup();
+        this.initData(this.choiceFieldId);
+    }
+}
+ChoiceFieldValueCreateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldValueCreateComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2$1.FormBuilder }, { token: ChoiceFieldService }, { token: i4.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+ChoiceFieldValueCreateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ChoiceFieldValueCreateComponent, selector: "valtimo-choice-field-value-create", ngImport: i0, 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: [""], components: [{ type: i4.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldValueCreateComponent, decorators: [{
+            type: 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: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2$1.FormBuilder }, { type: ChoiceFieldService }, { type: i4.AlertService }]; } });
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ChoiceFieldValueDetailComponent {
+    constructor(router, route, formBuilder, service, alertService) {
+        this.router = router;
+        this.route = route;
+        this.formBuilder = formBuilder;
+        this.service = service;
+        this.alertService = alertService;
+        const snapshot = this.route.snapshot.paramMap;
+        this.choiceFieldValueId = snapshot.get('valueId');
+    }
+    ngOnInit() {
+        this.reset();
+    }
+    get formControls() {
+        return this.form.controls;
+    }
+    initData(choiceFieldValueId) {
+        this.service.getValue(choiceFieldValueId).subscribe(result => {
+            this.choiceField = result.choiceField;
+            this.choiceFieldValue = result;
+            this.setValues();
+        });
+    }
+    createFormGroup() {
+        return this.formBuilder.group({
+            id: new FormControl('', Validators.required),
+            name: new FormControl('', Validators.required),
+            value: new FormControl('', Validators.required),
+            sortOrder: new FormControl('', Validators.required),
+            deprecated: new FormControl('', Validators.required),
+        });
+    }
+    setValues() {
+        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);
+        }
+    }
+    reset() {
+        this.form = this.createFormGroup();
+        this.initData(this.choiceFieldValueId);
+    }
+    onSubmit() {
+        this.service.updateValue(this.form.value, this.choiceField.keyName).subscribe(() => {
+            this.reset();
+            this.alertService.success('Choice field value details have been updated');
+        });
+    }
+}
+ChoiceFieldValueDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldValueDetailComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2$1.FormBuilder }, { token: ChoiceFieldService }, { token: i4.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+ChoiceFieldValueDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ChoiceFieldValueDetailComponent, selector: "valtimo-choice-field-value-detail", ngImport: i0, 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: [""], components: [{ type: i4.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldValueDetailComponent, decorators: [{
+            type: 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: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2$1.FormBuilder }, { type: ChoiceFieldService }, { type: i4.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.
+ */
+const routes = [
+    {
+        path: 'choice-fields',
+        data: {
+            title: 'Choice fields',
+            roles: [ROLE_ADMIN],
+        },
+        component: ChoiceFieldListComponent,
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: 'choice-fields/field/:id',
+        data: {
+            title: 'Choice field details',
+            roles: [ROLE_ADMIN],
+        },
+        component: ChoiceFieldDetailComponent,
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: 'choice-fields/create',
+        data: {
+            title: 'Create new Choice field',
+            roles: [ROLE_ADMIN],
+        },
+        component: ChoiceFieldCreateComponent,
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: 'choice-fields/field/:id/create-value',
+        data: {
+            title: 'Create new Choice field value',
+            roles: [ROLE_ADMIN],
+        },
+        component: ChoiceFieldValueCreateComponent,
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: 'choice-fields/field/:id/value/:valueId',
+        data: {
+            title: 'Choice field value details',
+            roles: [ROLE_ADMIN],
+        },
+        component: ChoiceFieldValueDetailComponent,
+        canActivate: [AuthGuardService],
+    },
+];
+class ChoiceFieldRoutingModule {
+}
+ChoiceFieldRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChoiceFieldRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldRoutingModule, imports: [CommonModule, i1$1.RouterModule], exports: [RouterModule] });
+ChoiceFieldRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldRoutingModule, imports: [[CommonModule, RouterModule.forChild(routes)], RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ChoiceFieldModule {
+}
+ChoiceFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChoiceFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldModule, declarations: [ChoiceFieldListComponent,
+        ChoiceFieldDetailComponent,
+        ChoiceFieldCreateComponent,
+        ChoiceFieldValueListComponent,
+        ChoiceFieldValueCreateComponent,
+        ChoiceFieldValueDetailComponent], imports: [CommonModule,
+        ListModule,
+        WidgetModule,
+        FieldAutoFocusModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ChoiceFieldRoutingModule,
+        AlertModule,
+        TranslateModule] });
+ChoiceFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldModule, imports: [[
+            CommonModule,
+            ListModule,
+            WidgetModule,
+            FieldAutoFocusModule,
+            FormsModule,
+            ReactiveFormsModule,
+            ChoiceFieldRoutingModule,
+            AlertModule,
+            TranslateModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ChoiceFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ChoiceFieldListComponent,
+                        ChoiceFieldDetailComponent,
+                        ChoiceFieldCreateComponent,
+                        ChoiceFieldValueListComponent,
+                        ChoiceFieldValueCreateComponent,
+                        ChoiceFieldValueDetailComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        ListModule,
+                        WidgetModule,
+                        FieldAutoFocusModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ChoiceFieldRoutingModule,
+                        AlertModule,
+                        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.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChoiceFieldModule, ChoiceFieldService };
+//# sourceMappingURL=valtimo-choice-field.mjs.map