@valtimo/components 4.15.2-next-main.8

package/fesm2015/valtimo-components.js

@@ -0,0 +1,4536 @@
+import { EventEmitter, Component, Input, Output, ComponentFactoryResolver, ViewChild, ViewContainerRef, NgModule, ɵɵdefineInjectable, Injectable, Directive, ɵɵinject, ElementRef, Renderer2, Pipe, HostListener, ViewChildren } from '@angular/core';
+import { CommonModule, Location } from '@angular/common';
+import { Validators, FormControl, FormBuilder, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as momentImported from 'moment';
+import { ChoicefieldService } from '@valtimo/choicefield';
+import { RouterModule, NavigationEnd, Router, ActivatedRoute, PRIMARY_OUTLET, NavigationStart } from '@angular/router';
+import { NGXLogger } from 'ngx-logger';
+import { ConfigService } from '@valtimo/config';
+import { BehaviorSubject, Observable, combineLatest, fromEvent, Subscription, Subject, timer, from } from 'rxjs';
+import { DocumentService, DocumentModule } from '@valtimo/document';
+import { UserProviderService } from '@valtimo/security';
+import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { ContextService } from '@valtimo/context';
+import { HttpLoaderFactory, S3Resource, Alert, AlertType } from '@valtimo/contract';
+import { map, debounceTime, take, filter, switchMap } from 'rxjs/operators';
+import { Title } from '@angular/platform-browser';
+import * as BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
+import { create } from 'heatmap.js-fixed/build/heatmap.js';
+import { S3Service, UploadProviderService, DownloadService, ResourceModule } from '@valtimo/resource';
+import { Formio, FormioModule, FormioAppConfig, createCustomFormioComponent, registerCustomFormioComponentWithClass } from 'angular-formio';
+import jwt_decode from 'jwt-decode';
+import * as Dropzone from 'dropzone';
+import { NgxSpinnerModule } from 'ngx-spinner';
+
+/*
+ * 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 CamundaFormComponent {
+    constructor() {
+        this.submitted = new EventEmitter();
+    }
+    onSubmitted(event) {
+        this.submitted.emit(event);
+    }
+}
+CamundaFormComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-camunda-form',
+                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<ng-container *ngIf=\"!componentName && submitted\">\n  <valtimo-camunda-generated-form *ngIf=\"formFields\"\n                                  [formFields]=\"formFields\"\n                                  (submitted)=\"onSubmitted($event)\">\n  </valtimo-camunda-generated-form>\n</ng-container>\n<ng-container *ngIf=\"componentName\">\n  <valtimo-custom-form [componentName]=\"componentName\"></valtimo-custom-form>\n</ng-container>\n"
+            },] }
+];
+CamundaFormComponent.ctorParameters = () => [];
+CamundaFormComponent.propDecorators = {
+    componentName: [{ type: Input }],
+    formFields: [{ type: Input }],
+    submitted: [{ type: Output }]
+};
+
+/*
+ * 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 CamundaCustomFormComponent {
+    constructor(resolver) {
+        this.resolver = resolver;
+    }
+    ngOnInit() {
+        const factories = Array.from(this.resolver['_factories'].keys());
+        const factoryClass = factories.find((x) => x.name === this.componentName);
+        const cmpFactory = this.resolver.resolveComponentFactory(factoryClass);
+        this.viewContainerRef.createComponent(cmpFactory);
+    }
+}
+CamundaCustomFormComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-custom-form',
+                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<ng-template #customFormContainer></ng-template>\n\n",
+                styles: [""]
+            },] }
+];
+CamundaCustomFormComponent.ctorParameters = () => [
+    { type: ComponentFactoryResolver }
+];
+CamundaCustomFormComponent.propDecorators = {
+    componentName: [{ type: Input }],
+    viewContainerRef: [{ type: ViewChild, args: ['customFormContainer', { read: ViewContainerRef, static: true },] }]
+};
+
+/*
+ * 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 CamundaCustomFormModule {
+}
+CamundaCustomFormModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    CamundaCustomFormComponent
+                ],
+                imports: [
+                    CommonModule
+                ],
+                exports: [
+                    CamundaCustomFormComponent
+                ]
+            },] }
+];
+
+/*
+ * 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 moment = momentImported;
+moment.locale(localStorage.getItem('langKey'));
+const DATE_FORMAT = 'DD-MM-YYYY';
+function minDate(minDateIn) {
+    return (control) => {
+        if (!control.value) {
+            return null;
+        }
+        const controlDate = moment.utc(control.value).startOf('day');
+        const momentMinDate = moment.utc(minDateIn, DATE_FORMAT, true);
+        if (!controlDate.isSameOrAfter(momentMinDate)) {
+            return {
+                minDate: {
+                    minDate: momentMinDate.format(DATE_FORMAT),
+                    actual: controlDate.format(DATE_FORMAT)
+                }
+            };
+        }
+        else {
+            return null;
+        }
+    };
+}
+function maxDate(maxDateIn) {
+    return (control) => {
+        if (!control.value) {
+            return null;
+        }
+        const controlDate = moment.utc(control.value).startOf('day');
+        const momentMaxDate = moment.utc(maxDateIn, DATE_FORMAT, true);
+        if (!controlDate.isSameOrBefore(momentMaxDate)) {
+            return {
+                maxDate: {
+                    maxDate: momentMaxDate.format(DATE_FORMAT),
+                    actual: controlDate.format(DATE_FORMAT)
+                }
+            };
+        }
+        else {
+            return null;
+        }
+    };
+}
+
+/*
+ * 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 CamundaFormfieldService {
+    constructor() {
+    }
+    isFormFieldDisabled(formField) {
+        return formField.validationConstraints.filter(vc => vc.name === 'readonly').length > 0;
+    }
+    getMinDate(formField) {
+        return formField.validationConstraints.filter(vc => vc.name === 'minDate' && vc.configuration)[0];
+    }
+    getMaxDate(formField) {
+        return formField.validationConstraints.filter(vc => vc.name === 'maxDate' && vc.configuration)[0];
+    }
+    getValidatorTypes(formField) {
+        const validatorTypes = [];
+        formField.validationConstraints.forEach(validationConstraint => {
+            if (validationConstraint.name === 'required') {
+                validatorTypes.push(Validators.required);
+            }
+            if (validationConstraint.name === 'minlength') {
+                validatorTypes.push(Validators.minLength(+validationConstraint.configuration));
+            }
+            if (validationConstraint.name === 'maxlength') {
+                validatorTypes.push(Validators.maxLength(+validationConstraint.configuration));
+            }
+            if (validationConstraint.name === 'min') {
+                validatorTypes.push(Validators.min(+validationConstraint.configuration));
+            }
+            if (validationConstraint.name === 'max') {
+                validatorTypes.push(Validators.max(+validationConstraint.configuration));
+            }
+            if (validationConstraint.name === 'minDate') {
+                validatorTypes.push(minDate(validationConstraint.configuration));
+            }
+            if (validationConstraint.name === 'maxDate') {
+                validatorTypes.push(maxDate(validationConstraint.configuration));
+            }
+        });
+        return validatorTypes;
+    }
+}
+CamundaFormfieldService.ɵprov = ɵɵdefineInjectable({ factory: function CamundaFormfieldService_Factory() { return new CamundaFormfieldService(); }, token: CamundaFormfieldService, providedIn: "root" });
+CamundaFormfieldService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+CamundaFormfieldService.ctorParameters = () => [];
+
+/*
+ * 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 CamundaGeneratedFormComponent {
+    constructor(formBuilder, camundaFormFieldService, location) {
+        this.formBuilder = formBuilder;
+        this.camundaFormFieldService = camundaFormFieldService;
+        this.location = location;
+        this.submitted = new EventEmitter();
+        this.formFields = [];
+    }
+    ngOnInit() {
+        this.formGroup = this.createFormGroup();
+    }
+    createFormGroup() {
+        const group = this.formBuilder.group({});
+        this.formFields.forEach(formField => {
+            const control = new FormControl({
+                value: formField.defaultValue,
+                disabled: this.camundaFormFieldService.isFormFieldDisabled(formField)
+            }, this.camundaFormFieldService.getValidatorTypes(formField));
+            group.addControl(formField.id, control);
+        });
+        return group;
+    }
+    reset() {
+        this.formGroup.reset();
+    }
+    back() {
+        this.location.back();
+    }
+    handleSubmit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.submitted.emit(this.formGroup.value);
+    }
+}
+CamundaGeneratedFormComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-camunda-generated-form',
+                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<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSubmit($event)\">\n  <ng-container\n          *ngFor=\"let formField of formFields\"\n          valtimoCamundaFormfieldGenerator\n          [formGroup]=\"formGroup\"\n          [formField]=\"formField\">\n    <ng-content></ng-content>\n  </ng-container>\n  <div class=\"row pt-3 mt-1\">\n    <div class=\"col-sm-12\">\n      <div class=\"text-right\">\n        <button class=\"btn btn-space btn-default float-left\" type=\"button\" (click)=\"back()\" id=\"back-button\">\n          Back\n        </button>\n        <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\" id=\"reset-button\">Reset</button>\n        <button class=\"btn btn-space btn-primary\"\n                [disabled]=\"!formGroup.disabled && !formGroup.valid\"\n                type=\"submit\"\n                id=\"submit-button\">\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n"
+            },] }
+];
+CamundaGeneratedFormComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: CamundaFormfieldService },
+    { type: Location }
+];
+CamundaGeneratedFormComponent.propDecorators = {
+    submitted: [{ type: Output }],
+    formFields: [{ type: Input }]
+};
+
+/*
+ * 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 CamundaStringFormfieldComponent {
+    constructor() {
+    }
+}
+CamundaStringFormfieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-camunda-string-formfield',
+                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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <input id=\"{{ formField.id }}\"\n           class=\"form-control\"\n           type=\"text\"\n           [attr.placeholder]=\"formField.defaultValue\"\n           [formControlName]=\"formField.id\"/>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n\n"
+            },] }
+];
+CamundaStringFormfieldComponent.ctorParameters = () => [];
+
+/*
+ * 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 CamundaBooleanFormfieldComponent {
+    constructor() {
+    }
+}
+CamundaBooleanFormfieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-camunda-boolean-formfield',
+                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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6 form-check mt-1\">\n    <label for=\"yes_{{ formField.id }}\" class=\"custom-control custom-radio custom-control-inline\">\n      <input\n        class=\"custom-control-input\"\n        id=\"yes_{{ formField.id }}\"\n        type=\"radio\"\n        [value]=\"true\"\n        [formControlName]=\"formField.id\"/>\n      <span class=\"custom-control-label custom-control-color\">Yes</span>\n    </label>\n    <label for=\"no_{{ formField.id }}\" class=\"custom-control custom-radio custom-control-inline\">\n      <input\n        class=\"custom-control-input\"\n        id=\"no_{{ formField.id }}\"\n        type=\"radio\"\n        [value]=\"false\"\n        [formControlName]=\"formField.id\"/>\n      <span class=\"custom-control-label custom-control-color\">No</span>\n    </label>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n"
+            },] }
+];
+CamundaBooleanFormfieldComponent.ctorParameters = () => [];
+
+/*
+ * 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 moment$1 = momentImported;
+moment$1.locale(localStorage.getItem('langKey'));
+class CamundaDateFormfieldComponent {
+    constructor(formFieldService) {
+        this.formFieldService = formFieldService;
+        this.datePickerOptions = {};
+    }
+    ngOnInit() {
+        this.INPUT_SELECTOR = '#' + this.formField.id;
+        this.datePickerOptions = {
+            autoclose: true,
+            componentIcon: '.mdi.mdi-calendar',
+            navIcons: {
+                rightIcon: 'mdi mdi-chevron-right',
+                leftIcon: 'mdi mdi-chevron-left'
+            },
+            format: 'dd-mm-yyyy'
+        };
+    }
+    ngAfterViewInit() {
+        const formGroup = this.formGroup;
+        const formField = this.formField;
+        const maxDate = this.formFieldService.getMaxDate(this.formField);
+        if (maxDate) {
+            this.datePickerOptions.endDate = maxDate.configuration;
+        }
+        const minDate = this.formFieldService.getMinDate(this.formField);
+        if (minDate) {
+            this.datePickerOptions.startDate = minDate.configuration;
+        }
+        $(this.INPUT_SELECTOR).datetimepicker(this.datePickerOptions);
+        $(this.INPUT_SELECTOR).on('changeDate', function (e) {
+            formGroup.patchValue({
+                [formField.id]: moment$1(e.date.valueOf()).format('DD/MM/YYYY')
+            });
+        });
+    }
+}
+CamundaDateFormfieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-camunda-date-formfield',
+                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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6 pt1\">\n    <input\n      type=\"input\"\n      class=\"form-control\"\n      data-min-view=\"2\"\n      id=\"{{ formField.id }}\"\n      autocomplete=\"off\"\n      [formControlName]=\"formField.id\"/>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n"
+            },] }
+];
+CamundaDateFormfieldComponent.ctorParameters = () => [
+    { type: CamundaFormfieldService }
+];
+
+/*
+ * 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 CamundaLongFormfieldComponent {
+    constructor() {
+    }
+}
+CamundaLongFormfieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-camunda-long-formfield',
+                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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <input id=\"{{ formField.id }}\"\n           class=\"form-control\"\n           type=\"number\"\n           [attr.placeholder]=\"formField.defaultValue\"\n           [formControlName]=\"formField.id\"/>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n"
+            },] }
+];
+CamundaLongFormfieldComponent.ctorParameters = () => [];
+
+/*
+ * 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 CamundaEnumFormfieldComponent {
+    constructor() {
+    }
+    ngOnInit() {
+        this.valueKeys = Object.keys(this.formField.type.values);
+    }
+}
+CamundaEnumFormfieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-camunda-enum-formfield',
+                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=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select\n      class=\"form-control\"\n      id=\"{{ formField.id }}\"\n      [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <option *ngFor=\"let key of valueKeys\" [value]=\"key\" id=\"option_{{ key }}\">\n        {{ formField.type.values[key] }}\n      </option>\n    </select>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n"
+            },] }
+];
+CamundaEnumFormfieldComponent.ctorParameters = () => [];
+
+/*
+ * 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 CamundaTextareaFormfieldComponent {
+    constructor() {
+    }
+}
+CamundaTextareaFormfieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-camunda-textarea-formfield',
+                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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <textarea id=\"{{ formField.id }}\"\n              class=\"form-control\"\n              [attr.placeholder]=\"formField.defaultValue\"\n              [formControlName]=\"formField.id\"></textarea>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n\n"
+            },] }
+];
+CamundaTextareaFormfieldComponent.ctorParameters = () => [];
+
+/*
+ * 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 CamundaChoicefieldFormfieldComponent {
+    constructor(choicefieldService) {
+        this.choicefieldService = choicefieldService;
+        this.choicefieldValues = [];
+    }
+    ngOnInit() {
+        this.choicefieldService.getChoiceFieldValuesByName(this.formField.properties['choicefield']).subscribe(data => {
+            this.choicefieldValues = data;
+        });
+    }
+}
+CamundaChoicefieldFormfieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-camunda-choicefield-formfield',
+                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=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select\n      class=\"form-control\"\n      id=\"{{ formField.id }}\"\n      [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <ng-container *ngFor=\"let choicefieldValue of choicefieldValues\">\n        <option *ngIf=\"!choicefieldValue.deprecated\"\n                [value]=\"choicefieldValue.value\"\n                id=\"option_{{ choicefieldValue.value }}\">\n          {{ choicefieldValue.name }}\n        </option>\n      </ng-container>\n    </select>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n"
+            },] }
+];
+CamundaChoicefieldFormfieldComponent.ctorParameters = () => [
+    { 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 CamundaFormfieldGeneratorDirective {
+    constructor(viewContainerRef, componentFactoryResolver) {
+        this.viewContainerRef = viewContainerRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.COMPONENTS = {
+            string: CamundaStringFormfieldComponent,
+            boolean: CamundaBooleanFormfieldComponent,
+            date: CamundaDateFormfieldComponent,
+            long: CamundaLongFormfieldComponent,
+            enum: CamundaEnumFormfieldComponent,
+            textarea: CamundaTextareaFormfieldComponent,
+            choicefield: CamundaChoicefieldFormfieldComponent
+        };
+    }
+    ngOnInit() {
+        const typeName = this.formField.typeName.toLowerCase();
+        if (!this.COMPONENTS[typeName]) {
+            throw new Error('Could not find component for formfield type: ' + typeName);
+        }
+        const component = this.COMPONENTS[typeName];
+        const factory = this.componentFactoryResolver.resolveComponentFactory(component);
+        this.component = this.viewContainerRef.createComponent(factory);
+        this.component.instance.formGroup = this.formGroup;
+        this.component.instance.formField = this.formField;
+    }
+}
+CamundaFormfieldGeneratorDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[valtimoCamundaFormfieldGenerator]'
+            },] }
+];
+CamundaFormfieldGeneratorDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: ComponentFactoryResolver }
+];
+CamundaFormfieldGeneratorDirective.propDecorators = {
+    formField: [{ type: Input }],
+    formGroup: [{ type: Input }]
+};
+
+/*
+ * 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 CamundaFormfieldValidationComponent {
+    constructor() {
+    }
+    ngOnInit() {
+        this.formControl = this.formGroup.get(this.formField.id);
+    }
+}
+CamundaFormfieldValidationComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-camunda-formfield-validation',
+                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<ul class=\"parsley-errors-list filled\"\n    *ngIf=\"formControl.invalid && (formControl.dirty || formControl.touched)\">\n  <li *ngIf=\"formControl.errors.required\">\n    This field is required.\n  </li>\n  <li *ngIf=\"formControl.errors.minlength\">\n    This field should be more than {{ formControl.errors.minlength.requiredLength }} characters.\n  </li>\n  <li *ngIf=\"formControl.errors.maxlength\">\n    This field cannot be more than {{ formControl.errors.maxlength.requiredLength }} characters.\n  </li>\n  <li *ngIf=\"formControl.errors.min\">\n    This field should be more than {{ formControl.errors.min.min }}.\n  </li>\n  <li *ngIf=\"formControl.errors.max\">\n    This field should be less or equal to {{ formControl.errors.max.max }}.\n  </li>\n  <li *ngIf=\"formControl.errors.minDate\">\n    This field should be more than {{ formControl.errors.minDate.minDate }}.\n  </li>\n  <li *ngIf=\"formControl.errors.maxDate\">\n    This field should be less or equal to {{ formControl.errors.maxDate.maxDate }}.\n  </li>\n</ul>\n"
+            },] }
+];
+CamundaFormfieldValidationComponent.ctorParameters = () => [];
+CamundaFormfieldValidationComponent.propDecorators = {
+    formGroup: [{ type: Input }],
+    formField: [{ type: Input }]
+};
+
+/*
+ * 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 CamundaGeneratedFormModule {
+}
+CamundaGeneratedFormModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    CamundaStringFormfieldComponent,
+                    CamundaBooleanFormfieldComponent,
+                    CamundaDateFormfieldComponent,
+                    CamundaFormfieldGeneratorDirective,
+                    CamundaLongFormfieldComponent,
+                    CamundaEnumFormfieldComponent,
+                    CamundaTextareaFormfieldComponent,
+                    CamundaChoicefieldFormfieldComponent,
+                    CamundaFormfieldValidationComponent,
+                    CamundaGeneratedFormComponent
+                ],
+                imports: [
+                    CommonModule,
+                    ReactiveFormsModule
+                ],
+                exports: [
+                    CamundaGeneratedFormComponent
+                ],
+                entryComponents: [
+                    CamundaStringFormfieldComponent,
+                    CamundaBooleanFormfieldComponent,
+                    CamundaDateFormfieldComponent,
+                    CamundaLongFormfieldComponent,
+                    CamundaEnumFormfieldComponent,
+                    CamundaTextareaFormfieldComponent,
+                    CamundaChoicefieldFormfieldComponent
+                ]
+            },] }
+];
+
+/*
+ * 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 CamundaFormModule {
+}
+CamundaFormModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    CamundaFormComponent
+                ],
+                imports: [
+                    CommonModule,
+                    CamundaGeneratedFormModule,
+                    CamundaCustomFormModule
+                ],
+                exports: [
+                    CamundaFormComponent
+                ]
+            },] }
+];
+
+/*
+ * 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 TopbarComponent {
+    constructor() {
+    }
+}
+TopbarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-topbar',
+                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<nav class=\"navbar navbar-expand fixed-top be-top-header\">\n  <div class=\"container-fluid\">\n    <div class=\"be-navbar-header\">\n      <a class=\"navbar-brand\" [routerLink]=\"['/']\"></a>\n    </div>\n    <div class=\"be-right-navbar\">\n      <!-- important empty div: in order to made float-right element works on mobile  -->\n      <div></div>\n      <ul class=\"nav navbar-nav be-user-nav float-right be-icons-nav\">\n        <li class=\"nav-item dropdown special\">\n          <a class=\"nav-link be-toggle-right-sidebar\" href=\"#\" role=\"button\" aria-expanded=\"false\">\n            <i class=\"fas fa-user-circle user-icon\"></i>\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n</nav>\n",
+                styles: [".user-icon{font-size:30px;padding-top:5px}"]
+            },] }
+];
+TopbarComponent.ctorParameters = () => [];
+
+/*
+ * 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 TopbarModule {
+}
+TopbarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [TopbarComponent],
+                imports: [
+                    CommonModule,
+                    RouterModule
+                ],
+                exports: [TopbarComponent]
+            },] }
+];
+
+/*
+ * 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 MenuService {
+    constructor(configService, documentService, userProviderService, logger) {
+        this.configService = configService;
+        this.documentService = documentService;
+        this.userProviderService = userProviderService;
+        this.logger = logger;
+        this._menuItems$ = new BehaviorSubject(undefined);
+        this.menuConfig = configService.config.menu;
+    }
+    init() {
+        this.reload();
+        this.logger.debug('Menu initialized');
+    }
+    get menuItems$() {
+        return this._menuItems$.asObservable();
+    }
+    reload() {
+        return this._menuItems$.next(this.loadMenuItems());
+    }
+    loadMenuItems() {
+        let menuItems = [];
+        this.menuConfig.menuItems.forEach((menuItem) => {
+            menuItem.show = true;
+            menuItems.push(menuItem);
+        });
+        menuItems = this.sortMenuItems(menuItems);
+        this.appendDossierSubMenuItems(menuItems).subscribe(value => menuItems = this.applyMenuRoleSecurity(value));
+        return menuItems;
+    }
+    sortMenuItems(menuItems) {
+        return menuItems.sort((a, b) => {
+            return a.sequence - b.sequence;
+        });
+    }
+    appendDossierSubMenuItems(menuItems) {
+        return new Observable(subscriber => {
+            this.logger.debug('appendDossierSubMenuItems');
+            this.documentService.getAllDefinitions().subscribe(definitions => {
+                const dossierMenuItems = definitions.content
+                    .map((definition, index) => ({
+                    link: ['/dossiers/' + definition.id.name],
+                    title: definition.schema.title,
+                    iconClass: 'icon mdi mdi-dot-circle',
+                    sequence: index,
+                    show: true
+                }));
+                this.logger.debug('found dossierMenuItems', dossierMenuItems);
+                const menuItemIndex = menuItems.findIndex(({ title }) => title === 'Dossiers');
+                if (menuItemIndex > 0) {
+                    const dossierMenu = menuItems[menuItemIndex];
+                    this.logger.debug('updating dossierMenu', dossierMenu);
+                    dossierMenu.children = dossierMenuItems;
+                    menuItems[menuItemIndex] = dossierMenu;
+                }
+                subscriber.next(menuItems);
+                this.logger.debug('appendDossierSubMenuItems finished');
+            });
+        });
+    }
+    applyMenuRoleSecurity(menuItems) {
+        this.userProviderService.getUserSubject().subscribe(user => {
+            if (user.roles != null) {
+                this.logger.debug('applyMenuRoleSecurity');
+                const userRoles = user.roles;
+                menuItems.forEach((menuItem) => {
+                    const access = this.determineRoleAccess(menuItem, userRoles);
+                    this.logger.debug('Menu: check role access', menuItem.roles, access);
+                    if (menuItem.show !== access) {
+                        this.logger.debug('Menu: Change access', menuItem, access);
+                        menuItem.show = access;
+                    }
+                });
+            }
+        });
+        return menuItems;
+    }
+    determineRoleAccess(menuItem, roles) {
+        if (!menuItem.roles) {
+            return true;
+        }
+        else if (menuItem.roles.some(role => roles.includes(role))) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+}
+MenuService.ɵprov = ɵɵdefineInjectable({ factory: function MenuService_Factory() { return new MenuService(ɵɵinject(ConfigService), ɵɵinject(DocumentService), ɵɵinject(UserProviderService), ɵɵinject(NGXLogger)); }, token: MenuService, providedIn: "root" });
+MenuService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+MenuService.ctorParameters = () => [
+    { type: ConfigService },
+    { type: DocumentService },
+    { type: UserProviderService },
+    { type: NGXLogger }
+];
+
+/*
+ * 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 = [];
+class MenuRoutingModule {
+}
+MenuRoutingModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    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 MenuComponent {
+    constructor(menuService, elRef, renderer, router) {
+        this.menuService = menuService;
+        this.elRef = elRef;
+        this.renderer = renderer;
+        this.router = router;
+    }
+    ngOnInit() {
+        this.openRouterSubscription();
+        this.menuItemSubscription = this.menuService.menuItems$.subscribe(value => this.menuItems = value);
+    }
+    ngOnDestroy() {
+        this.routerSubscription.unsubscribe();
+        this.menuItemSubscription.unsubscribe();
+    }
+    openRouterSubscription() {
+        this.routerSubscription = this.router.events.subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                this.closeSubMenu();
+            }
+        });
+    }
+    closeSubMenu() {
+        const visibleSubMenuElm = this.elRef.nativeElement.querySelector('.sub-menu.visible');
+        if (visibleSubMenuElm) {
+            this.renderer.removeClass(visibleSubMenuElm, 'visible');
+            const topLevelMenuItem = this.elRef.nativeElement.querySelector('li.parent.open');
+            if (topLevelMenuItem) {
+                this.renderer.removeClass(topLevelMenuItem, 'open');
+            }
+        }
+    }
+}
+MenuComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-menu',
+                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<ul class=\"sidebar-elements\">\n  <ng-container *ngFor=\"let menuItem of menuItems\">\n    <li\n      [class.parent]=\"menuItem.children\"\n      [hidden]=\"!menuItem.show\"\n      [routerLinkActive]=\"'active'\"\n      [routerLinkActiveOptions]=\"{exact: true}\"\n    >\n      <a *ngIf=\"menuItem.link\" [routerLink]=\"menuItem.link\" class=\"sub-item\">\n        <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n      </a>\n      <a *ngIf=\"!menuItem.link\" class=\"sub-item\">\n        <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n      </a>\n      <ng-container *ngIf=\"menuItem.children\">\n        <ul class=\"sub-menu\">\n          <li class=\"title\">{{ menuItem.title | translate }}</li>\n          <li\n            *ngFor=\"let subMenuItem of menuItem.children\"\n            [routerLinkActive]=\"'active'\"\n            [routerLinkActiveOptions]=\"{exact: true}\"\n          >\n            <a *ngIf=\"subMenuItem.link\" [routerLink]=\"subMenuItem.link\">\n              <valtimo-submenu-item-text [submenuItem]=\"subMenuItem\"></valtimo-submenu-item-text>\n            </a>\n            <a *ngIf=\"!subMenuItem.link\">\n              <valtimo-submenu-item-text [submenuItem]=\"subMenuItem\"></valtimo-submenu-item-text>\n            </a>\n          </li>\n        </ul>\n      </ng-container>\n    </li>\n  </ng-container>\n</ul>\n",
+                styles: [".c-default{cursor:default}.sub-item{cursor:pointer}"]
+            },] }
+];
+MenuComponent.ctorParameters = () => [
+    { type: MenuService },
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: Router }
+];
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class MenuItemTextComponent {
+}
+MenuItemTextComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-menu-item-text',
+                template: `
+    <i class="{{ menuItem.iconClass }}"
+       container="body"
+       placement="right"
+       ngbTooltip="{{ menuItem.title | translate }}"
+       autoClose="true">
+    </i>
+    <span>{{ menuItem.title | translate }}</span>
+  `
+            },] }
+];
+MenuItemTextComponent.propDecorators = {
+    menuItem: [{ type: Input }]
+};
+
+/*
+ * 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 SubmenuItemTextComponent {
+}
+SubmenuItemTextComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-submenu-item-text',
+                template: `
+    <span [ngClass]="submenuItem.textClass">
+    {{ submenuItem.title | translate }}
+      <ng-container *ngIf="!submenuItem.link">&gt;</ng-container>
+    </span>
+  `
+            },] }
+];
+SubmenuItemTextComponent.propDecorators = {
+    submenuItem: [{ type: Input }]
+};
+
+/*
+ * 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 MenuModule {
+}
+MenuModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [MenuComponent, MenuItemTextComponent, SubmenuItemTextComponent],
+                imports: [
+                    CommonModule,
+                    RouterModule,
+                    NgbTooltipModule,
+                    TranslateModule
+                ],
+                exports: [MenuComponent],
+                providers: []
+            },] }
+];
+
+/*
+ * 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.
+ */
+function menuInitializer(injector, logger) {
+    const menuService = injector.get(MenuService);
+    return () => {
+        return new Promise((resolve, reject) => {
+            try {
+                logger.debug('menu initializer before init');
+                menuService.init();
+                logger.debug('menu initializer after init');
+                resolve();
+            }
+            catch (error) {
+                logger.debug('menu initializer error', error);
+                reject(error);
+            }
+        });
+    };
+}
+
+/*
+ * 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 VersionService {
+    constructor(http) {
+        this.http = http;
+    }
+    getVersion() {
+        // TODO: this hardcoded string should be taken care of with the introduction of a config service
+        return this.http.get(`/api/valtimo/version`);
+    }
+}
+VersionService.ɵprov = ɵɵdefineInjectable({ factory: function VersionService_Factory() { return new VersionService(ɵɵinject(HttpClient)); }, token: VersionService, providedIn: "root" });
+VersionService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+VersionService.ctorParameters = () => [
+    { type: HttpClient }
+];
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class RightSidebarComponent {
+    constructor(userProviderService, formBuilder, versionService, translate, contextService, http, logger) {
+        this.userProviderService = userProviderService;
+        this.formBuilder = formBuilder;
+        this.versionService = versionService;
+        this.translate = translate;
+        this.contextService = contextService;
+        this.http = http;
+        this.logger = logger;
+    }
+    ngOnInit() {
+        this.frequencies = [
+            'emailNotificationOnMonday',
+            'emailNotificationOnTuesday',
+            'emailNotificationOnWednesday',
+            'emailNotificationOnThursday',
+            'emailNotificationOnFriday',
+            'emailNotificationOnSaturday',
+            'emailNotificationOnSunday'
+        ];
+        this.settingsForm = this.formBuilder.group({
+            taskNotifications: new FormControl(false),
+            emailNotifications: new FormControl(false),
+            emailNotificationOnMonday: new FormControl(false),
+            emailNotificationOnTuesday: new FormControl(false),
+            emailNotificationOnWednesday: new FormControl(false),
+            emailNotificationOnThursday: new FormControl(false),
+            emailNotificationOnFriday: new FormControl(false),
+            emailNotificationOnSaturday: new FormControl(false),
+            emailNotificationOnSunday: new FormControl(false)
+        });
+        this.getUserSettings();
+    }
+    loadContextSwitch() {
+        combineLatest([this.contextService.getUserContexts(), this.contextService.getUserContextActive()])
+            .subscribe(([userContexts, userContextActive]) => {
+            this.userContextActive = userContextActive;
+            this.userContexts = userContexts;
+        });
+    }
+    setUserContext(contextId) {
+        this.contextService.setUserContext(contextId).subscribe();
+        location.href = '/';
+    }
+    loadUserSettingsTab() {
+        this.userProviderService.getEmailNotificationSettings().subscribe(results => {
+            if (results !== null) {
+                this.settingsForm.controls.taskNotifications.setValue(results.taskNotifications);
+                this.settingsForm.controls.emailNotifications.setValue(results.emailNotifications);
+                this.settingsForm.controls.emailNotificationOnMonday.setValue(results.emailNotificationOnMonday);
+                this.settingsForm.controls.emailNotificationOnTuesday.setValue(results.emailNotificationOnTuesday);
+                this.settingsForm.controls.emailNotificationOnWednesday.setValue(results.emailNotificationOnWednesday);
+                this.settingsForm.controls.emailNotificationOnThursday.setValue(results.emailNotificationOnThursday);
+                this.settingsForm.controls.emailNotificationOnFriday.setValue(results.emailNotificationOnFriday);
+                this.settingsForm.controls.emailNotificationOnSaturday.setValue(results.emailNotificationOnSaturday);
+                this.settingsForm.controls.emailNotificationOnSunday.setValue(results.emailNotificationOnSunday);
+            }
+            else {
+                // default is true in the database, even if api returns no content
+                this.settingsForm.controls.taskNotifications.setValue(true);
+            }
+        });
+        this.getVersion();
+    }
+    getUserSettings() {
+        this.userProviderService.getUserSubject().subscribe(userIdentity => {
+            this.logger.debug('user', userIdentity);
+            this.userIdentity = userIdentity;
+            this.loadContextSwitch();
+        });
+    }
+    getVersion() {
+        this.versionService.getVersion().subscribe((build) => {
+            this.build = build;
+        });
+    }
+    onSettingsSubmit() {
+        if (!this.settingsForm.pristine) {
+            this.userProviderService.updateEmailNotificationSettings(this.settingsForm.value).subscribe();
+        }
+    }
+    updateUserLanguage(langKey) {
+        this.translate.use(langKey).subscribe(() => {
+            localStorage.setItem('langKey', langKey);
+        });
+    }
+    logout() {
+        this.userProviderService.logout();
+    }
+}
+RightSidebarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-right-sidebar',
+                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<nav class=\"be-right-sidebar\">\n  <div class=\"sb-content\">\n    <div class=\"tab-navigation\">\n      <ul class=\"nav nav-tabs nav-justified\" role=\"tablist\">\n        <li class=\"nav-item\" role=\"presentation\">\n          <a class=\"nav-link active\" href=\"#account\" aria-controls=\"account\" role=\"tab\" data-toggle=\"tab\"\n             translate=\"account.title\"></a>\n        </li>\n        <li class=\"nav-item\" role=\"presentation\">\n          <a class=\"nav-link\" (click)=\"loadUserSettingsTab()\" href=\"#settings\" aria-controls=\"settings\" role=\"tab\"\n             data-toggle=\"tab\" translate=\"settings.title\"></a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"tab-panel\">\n      <div class=\"tab-content\">\n        <!-- account -->\n        <div class=\"tab-pane tab-account active\" id=\"account\" role=\"tabpanel\">\n          <div class=\"p-3 be-scroller-settings\" *ngIf=\"userIdentity\">\n            <div class=\"content\">\n              <div class=\"category-title border-0 m-0\">\n                <div class=\"p-0 text-muted\">\n                  <dl class=\"row mb-0\">\n                    <dt class=\"col-sm-3\">Email</dt>\n                    <dd class=\"col-sm-9 mb-0 text-bold\">{{ userIdentity.email }}</dd>\n                    <ng-container *ngIf=\"userIdentity.username\">\n                      <dt class=\"col-sm-3\">Username</dt>\n                      <dd class=\"col-sm-9 mb-0 text-bold\">{{ userIdentity.username }}</dd>\n                    </ng-container>\n                    <dt class=\"col-sm-3\">Name</dt>\n                    <dd class=\"col-sm-9 mb-0 text-bold\">{{ userIdentity.firstName + ' ' + userIdentity.lastName }}</dd>\n                  </dl>\n                </div>\n              </div>\n              <!-- context switch -->\n              <ul class=\"settings-list\" *ngIf=\"userContexts?.length > 1\">\n                <li ngbTooltip=\"{{ 'settings.context.title' | translate }}\">\n                  <select class=\"form-control\" #contextSelect (change)=\"setUserContext(+contextSelect.value)\">\n                    <option *ngFor=\"let context of userContexts\" [value]=\"context.id\"\n                            [selected]=\"context.id === userContextActive.id\">\n                      {{ context.name }}\n                    </option>\n                  </select>\n                </li>\n              </ul>\n              <ul class=\"list-group list-group-flush m-0\">\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a href=\"https://docs.valtimo.nl\" target=\"_blank\" class=\"d-block\" translate=\"account.links.help\"></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a href=\"https://www.valtimo.nl/feedback/\" target=\"_blank\" class=\"d-block\"\n                     translate=\"account.links.feedback\"></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a href=\"https://forum.valtimo.nl\" target=\"_blank\" class=\"d-block\"\n                     translate=\"account.links.forum\"></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a href=\"javascript:void(0)\" class=\"d-block\" (click)=\"logout()\"\n                     translate=\"account.links.signOut\"></a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <!-- settings -->\n        <div class=\"tab-pane tab-settings\" id=\"settings\" role=\"tabpanel\">\n          <div class=\"p-3 be-scroller-settings\">\n            <div class=\"content\">\n              <span class=\"category-title\" translate=\"settings.language.title\"></span>\n              <ul class=\"settings-list\">\n                <li>\n                  <select class=\"form-control\" #langSelect (change)=\"updateUserLanguage(langSelect.value)\">\n                    <option *ngFor=\"let lang of translate.getLangs()\" [value]=\"lang\"\n                            [selected]=\"lang === translate.currentLang\">\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                </li>\n              </ul>\n\n              <form [formGroup]=\"settingsForm\">\n                <span class=\"category-title\" translate=\"settings.notification.title\"></span>\n                <ul class=\"settings-list m-0\">\n                  <li>\n                    <div class=\"switch-button switch-button-sm switch-button-success\">\n                      <input type=\"checkbox\" formControlName=\"taskNotifications\" id=\"taskNotifications\"\n                             (ngModelChange)=\"onSettingsSubmit()\"><span>\n                      <label for=\"taskNotifications\"></label></span>\n                    </div>\n                    <span class=\"name\" translate=\"settings.notification.taskNotifications\"></span>\n                    <div class=\"text-muted info-text\" translate=\"settings.notification.taskNotificationsIntro\"></div>\n                  </li>\n\n                  <li>\n                    <div class=\"switch-button switch-button-sm switch-button-success\">\n                      <input type=\"checkbox\" formControlName=\"emailNotifications\" id=\"emailNotifications\"\n                             (ngModelChange)=\"onSettingsSubmit()\"><span>\n                      <label for=\"emailNotifications\"></label></span>\n                    </div>\n                    <span class=\"name\" translate=\"settings.notification.emailNotifications\"></span>\n                    <div class=\"text-muted info-text\" translate=\"settings.notification.emailNotificationsIntro\"></div>\n                  </li>\n                </ul>\n\n                <div *ngIf=\"settingsForm.value.emailNotifications\">\n                  <ul class=\"settings-list\">\n                    <li *ngFor=\"let frequency of frequencies\">\n                      <div class=\"switch-button switch-button-sm switch-button-success\">\n                        <input type=\"checkbox\" formControlName=\"{{ frequency }}\" id=\"{{ frequency }}\"\n                               (ngModelChange)=\"onSettingsSubmit()\"><span>\n                        <label for=\"{{ frequency }}\"></label></span>\n                      </div>\n                      <span class=\"name\">{{ 'settings.notification.' + frequency | translate }}</span>\n                    </li>\n                  </ul>\n                </div>\n              </form>\n\n              <div class=\"version-holder\">\n                <span class=\"category-title\" translate=\"settings.version.title\"></span>\n                <ul class=\"settings-list\">\n                  <li *ngIf=\"build\">\n                    <div class=\"name\">{{ build.title }}</div>\n                    <div class=\"text-muted\">{{ build.version }}</div>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</nav>\n",
+                styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{background-color:#f8f9fa;bottom:0;position:fixed;width:259px}.info-text{line-height:1em!important;margin-bottom:15px;padding-right:70px}"]
+            },] }
+];
+RightSidebarComponent.ctorParameters = () => [
+    { type: UserProviderService },
+    { type: FormBuilder },
+    { type: VersionService },
+    { type: TranslateService },
+    { type: ContextService },
+    { type: HttpClient },
+    { type: NGXLogger }
+];
+
+/*
+ * 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 ɵ0 = HttpLoaderFactory;
+class RightSidebarModule {
+}
+RightSidebarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [RightSidebarComponent],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    RouterModule,
+                    TranslateModule.forRoot({
+                        loader: {
+                            provide: TranslateLoader,
+                            useFactory: ɵ0,
+                            deps: [HttpClient]
+                        }
+                    }),
+                    NgbTooltipModule
+                ],
+                exports: [RightSidebarComponent]
+            },] }
+];
+
+/*
+ * 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 LeftSidebarComponent {
+    constructor(translateService, elementRef) {
+        this.translateService = translateService;
+        this.elementRef = elementRef;
+        this.menuWidthChanged = new EventEmitter();
+        this.menuTooltipText$ = this.translateService.stream('interface.mainMenu');
+        this.toggleMenuText$ = this.translateService.stream('interface.toggleMenu');
+        this.mouseIsOnResizeBorder$ = new BehaviorSubject(false);
+        this.menuWidth$ = new BehaviorSubject(undefined);
+        this.isResizing$ = new BehaviorSubject(false);
+        this.defaultMenuWidth = 230;
+        this.maxMenuWidth = 330;
+        this.minMenuWidth = 120;
+        this.mouseX$ = fromEvent(document.body, 'mousemove').pipe(map((e) => e.pageX));
+        this.bodyStyle = elementRef.nativeElement.ownerDocument.body.style;
+    }
+    ngOnInit() {
+        this.setMenuWidth(this.defaultMenuWidth);
+    }
+    ngAfterViewInit() {
+        this.mouseXSubscription = combineLatest([this.mouseX$, this.isResizing$])
+            .pipe(debounceTime(3))
+            .subscribe(([x, isResizing]) => {
+            const menuOpen = this.menuIsOpen;
+            if (isResizing) {
+                const offSetWidth = this.xOnClick - x;
+                const newMenuWidth = this.menuWidthOnClick - offSetWidth;
+                const snapMargin = 35;
+                const snapInside = newMenuWidth < this.minMenuWidth - snapMargin;
+                const snapOutside = !menuOpen && offSetWidth < -snapMargin;
+                if (menuOpen && newMenuWidth <= this.maxMenuWidth && newMenuWidth >= this.minMenuWidth) {
+                    this.setMenuWidth(newMenuWidth);
+                }
+                else if (snapInside || snapOutside) {
+                    this.snapMenu(snapInside ? this.menuWidthOnClick : this.defaultMenuWidth);
+                }
+            }
+        });
+        this.mouseUpSubscription = fromEvent(document, 'mouseup').subscribe(() => {
+            this.stopResizing();
+        });
+    }
+    ngOnDestroy() {
+        this.mouseXSubscription.unsubscribe();
+        this.mouseUpSubscription.unsubscribe();
+    }
+    enterBorder() {
+        this.mouseIsOnResizeBorder$.next(true);
+    }
+    leaveBorder() {
+        this.mouseIsOnResizeBorder$.next(false);
+    }
+    resizeBorderClick(e) {
+        this.menuWidth$.pipe(take(1)).subscribe(menuWidth => {
+            this.menuWidthOnClick = menuWidth;
+            this.xOnClick = e.pageX;
+            this.bodyStyle.userSelect = 'none';
+            this.bodyStyle.cursor = 'col-resize';
+            this.isResizing$.next(true);
+        });
+    }
+    snapMenu(snapTo) {
+        this.stopResizing();
+        this.setMenuWidth(snapTo);
+        setTimeout(() => {
+            this.toggleButtonRef.nativeElement.click();
+        });
+    }
+    stopResizing() {
+        this.bodyStyle.cursor = 'auto';
+        this.bodyStyle.userSelect = 'auto';
+        this.isResizing$.next(false);
+    }
+    setMenuWidth(width) {
+        this.menuWidth$.next(width);
+        this.menuWidthChanged.emit(width);
+    }
+}
+LeftSidebarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-left-sidebar',
+                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<ng-container *ngIf=\"{isResizing: isResizing$ | async} as obs\">\n  <div\n    class=\"be-left-sidebar\"\n    [style.width.px]=\"menuIsOpen ? (menuWidth$ | async) : null\"\n    [ngClass]=\"{'no-transition': obs.isResizing}\"\n  >\n    <div class=\"left-sidebar-wrapper\">\n      <a class=\"left-sidebar-toggle\" href=\"javascript:void(0);\"><valtimo-page-title></valtimo-page-title></a>\n      <div class=\"progress-widget\" style=\"padding: 20px 0\">\n        <ul class=\"sidebar-elements\">\n          <li>\n            <a\n              #toggleButton\n              class=\"be-toggle-left-sidebar\"\n              href=\"javascript:void(0);\"\n              [title]=\"menuTooltipText$ | async\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                width=\"1em\"\n                height=\"1em\"\n                style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg)\"\n                viewBox=\"0 0 24 24\"\n                transform=\"rotate(360)\"\n              >\n                <path [ngClass]=\"menuIsOpen ? 'd-1' : 'd-1-flipped'\" />\n                <path [ngClass]=\"menuIsOpen ? 'd-2' : 'd-2-flipped'\" />\n                <path [ngClass]=\"menuIsOpen ? 'd-3' : 'd-3-flipped'\" />\n                <path [ngClass]=\"menuIsOpen ? 'd-4' : 'd-4-flipped'\" />\n              </svg>\n              <span>{{ toggleMenuText$ | async }}</span>\n            </a>\n          </li>\n        </ul>\n      </div>\n      <div class=\"left-sidebar-spacer\">\n        <div class=\"left-sidebar-scroll\">\n          <div class=\"left-sidebar-content\">\n            <valtimo-menu></valtimo-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"resize-border\"\n      (mouseenter)=\"enterBorder()\"\n      (mouseleave)=\"leaveBorder()\"\n      (mousedown)=\"resizeBorderClick($event)\"\n      [ngClass]=\"{'resize-hover': (mouseIsOnResizeBorder$ | async) || obs.isResizing}\"\n    ></div>\n  </div>\n</ng-container>\n",
+                styles: ["@media screen and (max-width:767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{align-items:center;display:flex;height:32px}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{height:auto;margin-right:7px;min-width:21px;overflow:visible}.be-toggle-left-sidebar svg path{fill:#696969;transition:.27s ease}.resize-border{background-color:#ff5800;cursor:col-resize;height:100%;margin-right:-3px;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease;width:3px}.resize-hover{opacity:.7}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}"]
+            },] }
+];
+LeftSidebarComponent.ctorParameters = () => [
+    { type: TranslateService },
+    { type: ElementRef }
+];
+LeftSidebarComponent.propDecorators = {
+    toggleButtonRef: [{ type: ViewChild, args: ['toggleButton',] }],
+    menuIsOpen: [{ type: Input }],
+    menuWidthChanged: [{ type: Output }]
+};
+
+/*
+ * 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 PageTitleComponent {
+    constructor(router, activatedRoute, titleService, translateService, logger) {
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.titleService = titleService;
+        this.translateService = translateService;
+        this.logger = logger;
+        this.appTitle = 'Valtimo';
+        this.routerSub = Subscription.EMPTY;
+    }
+    setTitle() {
+        this.title = this.activatedRoute.snapshot.firstChild.data.title;
+        // When loading lazy title is nested
+        if (!this.title) {
+            this.title = this.activatedRoute.snapshot.firstChild.children[0].data.title;
+        }
+        if (this.title) {
+            this.translateService.stream(this.title).subscribe((title) => {
+                this.logger.debug('PageTitle: setTitle translated async', title);
+                this.titleService.setTitle(this.appTitle + ' - ' + title);
+            });
+        }
+        else {
+            this.logger.debug('PageTitle: setTitle default', this.appTitle);
+            this.titleService.setTitle(this.appTitle);
+        }
+    }
+    ngOnInit() {
+        this.setTitle();
+        this.routerSub = this.router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe((event) => {
+            this.setTitle();
+        });
+    }
+    ngOnDestroy() {
+        this.routerSub.unsubscribe();
+    }
+}
+PageTitleComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-page-title',
+                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<h2 class=\"page-head-title\" *ngIf=\"title !== ''\"><span [innerHTML]=\"title | translate\"></span></h2>\n",
+                styles: [""]
+            },] }
+];
+PageTitleComponent.ctorParameters = () => [
+    { type: Router },
+    { type: ActivatedRoute },
+    { type: Title },
+    { type: TranslateService },
+    { type: NGXLogger }
+];
+
+/*
+ * 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 PageTitleModule {
+}
+PageTitleModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [PageTitleComponent],
+                imports: [
+                    CommonModule,
+                    TranslateModule
+                ],
+                exports: [PageTitleComponent]
+            },] }
+];
+
+/*
+ * 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 LeftSidebarModule {
+}
+LeftSidebarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [LeftSidebarComponent],
+                imports: [
+                    CommonModule,
+                    MenuModule,
+                    PageTitleModule
+                ],
+                exports: [LeftSidebarComponent]
+            },] }
+];
+
+/*
+ * 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 StringTypeConverter {
+    getTypeString() {
+        return 'string';
+    }
+    convert(value, definition) {
+        return value;
+    }
+}
+
+/*
+ * 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 BooleanTypeConverter {
+    getTypeString() {
+        return 'boolean';
+    }
+    convert(value, definition) {
+        if (!definition.enum) {
+            return value ? 'Yes' : 'No';
+        }
+        else {
+            return value ? (definition.enum[0] || 'Yes') : (definition.enum[1] || 'No');
+        }
+    }
+}
+
+/*
+ * 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 moment$2 = momentImported;
+moment$2.locale(localStorage.getItem('langKey'));
+class DateTypeConverter {
+    getTypeString() {
+        return 'date';
+    }
+    convert(value, definition) {
+        if (!value) {
+            return '-';
+        }
+        return moment$2(value).format('DD-MM-YYYY, hh:mm A');
+    }
+}
+
+/*
+ * 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 EnumTypeConverter {
+    getTypeString() {
+        return 'enum';
+    }
+    convert(value, definition) {
+        return definition.enum[value];
+    }
+}
+
+/*
+ * 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 StringReplaceUnderscoreTypeConverter {
+    constructor() {
+        this.regExpStringRemoveUnderscore = /_/g;
+    }
+    getTypeString() {
+        return 'stringReplaceUnderscore';
+    }
+    convert(value, definition) {
+        return value.replace(this.regExpStringRemoveUnderscore, ' ');
+    }
+}
+
+/*
+ * 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 RelatedFilesTypeConverter {
+    getTypeString() {
+        return 'relatedFiles';
+    }
+    convert(value, definition) {
+        return value.length || '-';
+    }
+}
+
+/*
+ * 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 stringTypeConverter = new StringTypeConverter();
+const booleanTypeConverter = new BooleanTypeConverter();
+const dateTypeConverter = new DateTypeConverter();
+const enumTypeConverter = new EnumTypeConverter();
+const stringReplaceUnderscoreTypeConverter = new StringReplaceUnderscoreTypeConverter();
+const relatedFilesTypeConverter = new RelatedFilesTypeConverter();
+// TODO: Via injection
+const TYPE_CONVERTERS = [
+    stringTypeConverter,
+    booleanTypeConverter,
+    dateTypeConverter,
+    enumTypeConverter,
+    stringReplaceUnderscoreTypeConverter,
+    relatedFilesTypeConverter
+];
+
+/*
+ * 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 ViewContentService {
+    constructor() {
+        this.converters = {};
+        this.defaultConverter = new StringTypeConverter();
+        TYPE_CONVERTERS.forEach(converter => this.addConverter(converter));
+    }
+    get(value, definition) {
+        if (!definition.viewType) {
+            definition.viewType = typeof (value);
+        }
+        if (typeof this.converters[definition.viewType] !== 'undefined') {
+            return this.converters[definition.viewType].convert(value, definition);
+        }
+        else {
+            return this.defaultConverter.convert(value, definition);
+        }
+    }
+    addConverter(converter) {
+        if (typeof this.converters[converter.getTypeString()] !== 'undefined') {
+            throw new Error('Converter with name ' + converter.getTypeString() + ' already exists');
+        }
+        this.converters[converter.getTypeString()] = converter;
+    }
+}
+ViewContentService.ɵprov = ɵɵdefineInjectable({ factory: function ViewContentService_Factory() { return new ViewContentService(); }, token: ViewContentService, providedIn: "root" });
+ViewContentService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+ViewContentService.ctorParameters = () => [];
+
+/*
+ * 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 ListComponent {
+    constructor(viewContentService, logger) {
+        this.viewContentService = viewContentService;
+        this.logger = logger;
+        this.actions = [];
+        this.rowClicked = new EventEmitter();
+        this.paginationClicked = new EventEmitter();
+        this.paginationSet = new EventEmitter();
+        this.search = new EventEmitter();
+        this.sortChanged = new EventEmitter();
+        this.headerProvided = false;
+        this.regExpStringRemoveUnderscore = /_/g;
+        this.sort$ = new BehaviorSubject({
+            state: { name: '', direction: 'DESC' },
+            isSorting: false
+        });
+        this.viewListAs = localStorage.getItem('viewListAs') || 'table';
+    }
+    loadPaginationSize() {
+        const entries = localStorage.getItem(`${this.paginationIdentifier}${ListComponent.PAGINATION_SIZE}`);
+        if (entries !== null) {
+            this.pagination.size = +entries;
+            this.paginationSet.emit(+entries);
+            this.logger.debug('Pagination loaded from local storage for this list. Current: ', entries);
+        }
+        else {
+            this.logger.debug('Pagination does NOT exist in local storage for this list. Will use default. Change it to create an entry.');
+        }
+        this.paginationSet.emit();
+    }
+    setPaginationSize(numberOfEntries) {
+        localStorage.setItem(`${this.paginationIdentifier}${ListComponent.PAGINATION_SIZE}`, numberOfEntries);
+        this.pagination.size = numberOfEntries;
+        this.logger.debug('Pagination set in local storage for this list: ', numberOfEntries);
+        this.paginationSet.emit(numberOfEntries);
+    }
+    ngOnInit() {
+        if (this.pagination) {
+            this.loadPaginationSize();
+        }
+        if (this.initialSortState) {
+            this.sort$.next(this.initialSortState);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.items && changes.items.currentValue) {
+            this.transformListItemsMatchFields();
+        }
+    }
+    ngAfterViewInit() {
+        if (this.isSearchable) {
+            fromEvent(this.searchBox.nativeElement, 'keyup')
+                .pipe(debounceTime(500))
+                .subscribe(() => {
+                const value = this.searchBox.nativeElement.value;
+                if (this.search.observers.length > 0) {
+                    // custom search callbak is specified, perhaps to query on the server side
+                    this.search.emit(value);
+                }
+                else {
+                    this.searchModel = value;
+                }
+            });
+        }
+    }
+    transformListItemsMatchFields() {
+        if (this.items && this.fields) {
+            this.items.forEach(item => {
+                item.listItemFields = this.fields.map(field => ({
+                    key: field.key,
+                    label: field.label,
+                    value: this.resolveObject(field, item)
+                }));
+            });
+        }
+    }
+    onClickRow(item) {
+        this.rowClicked.emit(item);
+    }
+    resolveObject(definition, obj) {
+        const definitionKey = definition.key;
+        const customPropString = '$.';
+        const key = definitionKey.includes(customPropString) ? definitionKey.split(customPropString)[1] : definitionKey;
+        const resolvedObjValue = key.split('.').reduce(function (prev, curr) {
+            return prev ? prev[curr] : null;
+        }, obj || self);
+        return this.viewContentService.get(resolvedObjValue, definition);
+    }
+    switchView(type) {
+        localStorage.setItem('viewListAs', type);
+        this.viewListAs = type;
+    }
+    getTotalPageCount() {
+        return Math.ceil(this.pagination.collectionSize / this.pagination.size);
+    }
+    onClickPagination(page) {
+        this.paginationClicked.emit(page);
+    }
+    handleFieldClick(key, sortable) {
+        const desc = 'DESC';
+        const asc = 'ASC';
+        if (!sortable) {
+            return;
+        }
+        this.sort$.pipe(take(1)).subscribe(sort => {
+            let newState;
+            if (sort.state.name === key) {
+                if (!sort.isSorting) {
+                    newState = { state: Object.assign(Object.assign({}, sort.state), { direction: desc }), isSorting: true };
+                }
+                else {
+                    if (sort.state.direction === desc) {
+                        newState = Object.assign(Object.assign({}, sort), { state: Object.assign(Object.assign({}, sort.state), { direction: asc }) });
+                    }
+                    else {
+                        newState = { state: Object.assign(Object.assign({}, sort.state), { direction: desc }), isSorting: false };
+                    }
+                }
+            }
+            else {
+                newState = { state: { name: key, direction: desc }, isSorting: true };
+            }
+            this.sort$.next(newState);
+            this.sortChanged.emit(newState);
+        });
+    }
+}
+ListComponent.PAGINATION_SIZE = 'PaginationSize';
+ListComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-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>\n  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input *ngIf=\"isSearchable\" class=\"form-control col-sm-8\" type=\"text\" placeholder=\"Search...\" #searchBox />\n\n        <div class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\" role=\"group\" *ngIf=\"viewMode\">\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"mdi mdi-view-headline\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"mdi mdi-view-module\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC'\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter: searchModel\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              {{ listItemField.value || '-' }}\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i style=\"cursor: pointer\" [ngClass]=\"action.iconClass\" (click)=\"action.callback(item)\"></i>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter: searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter: searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter: searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{ 'list.currentPage' | translate: {current: pagination.page, total: getTotalPageCount()} }}</strong>\n      <br />\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate: {number: (items | listFilter: searchModel).length})\n          : ('list.showingResults'\n            | translate: {number: (items | listFilter: searchModel).length, total: pagination.collectionSize})\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [maxSize]=\"pagination.maxPaginationItemSize\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">{{ 'list.noResults' | translate }}</div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n",
+                styles: ["@charset \"UTF-8\";\n/*!\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 */.table{table-layout:fixed}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;height:80px;padding-left:18px;padding-right:18px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem}td:first-child,th:first-child{padding-left:25px}th.sortable{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:pointer;user-select:none}th.sortable:after{content:\" \uF0DD\";font-family:Font Awesome\\ 5 Free;margin:auto 0 auto 5px;opacity:0;position:absolute;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}"]
+            },] }
+];
+ListComponent.ctorParameters = () => [
+    { type: ViewContentService },
+    { type: NGXLogger }
+];
+ListComponent.propDecorators = {
+    items: [{ type: Input }],
+    fields: [{ type: Input }],
+    pagination: [{ type: Input }],
+    viewMode: [{ type: Input }],
+    isSearchable: [{ type: Input }],
+    header: [{ type: Input }],
+    actions: [{ type: Input }],
+    paginationIdentifier: [{ type: Input }],
+    initialSortState: [{ type: Input }],
+    rowClicked: [{ type: Output }],
+    paginationClicked: [{ type: Output }],
+    paginationSet: [{ type: Output }],
+    search: [{ type: Output }],
+    sortChanged: [{ type: Output }],
+    searchBox: [{ type: ViewChild, args: ['searchBox',] }]
+};
+
+/*
+ * 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 ListFilterPipe {
+    transform(list, filterText) {
+        list = list || [];
+        if (!filterText) {
+            return list;
+        }
+        return list.filter(item => Object.keys(item).some(k => item[k] != null &&
+            item[k]
+                .toString()
+                .toLowerCase()
+                .includes(filterText.toLowerCase())));
+    }
+}
+ListFilterPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'listFilter'
+            },] }
+];
+
+/*
+ * 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.
+ */
+/**
+ * Component used to display a card element
+ */
+class CardComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+CardComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-card',
+                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=\"card card-border-color card-border-color-primary\">\n  <div *ngIf=\"title || subtitle\"class=\"card-header card-header-divider\">\n    <span *ngIf=\"title\">{{title}}</span>\n    <span *ngIf=\"subtitle\" class=\"card-subtitle\">{{subtitle}}</span>\n  </div>\n  <div class=\"card-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+                styles: [""]
+            },] }
+];
+CardComponent.ctorParameters = () => [];
+CardComponent.propDecorators = {
+    title: [{ type: Input }],
+    subtitle: [{ type: Input }]
+};
+
+/*
+ * 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 CardModule {
+}
+CardModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [CardComponent],
+                imports: [
+                    CommonModule
+                ],
+                exports: [CardComponent]
+            },] }
+];
+
+/*
+ * 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 ListModule {
+}
+ListModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ListComponent, ListFilterPipe],
+                imports: [CommonModule, CardModule, NgbPaginationModule, FormsModule, TranslateModule],
+                exports: [ListComponent, ListFilterPipe]
+            },] }
+];
+
+/*
+ * 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 PageHeaderComponent {
+    constructor() { }
+    ngOnInit() { }
+}
+PageHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-page-header',
+                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=\"page-head\">\n  <valtimo-page-title></valtimo-page-title>\n  <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n</div>\n",
+                styles: [""]
+            },] }
+];
+PageHeaderComponent.ctorParameters = () => [];
+
+/*
+ * 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 BreadcrumbNavigationComponent {
+    constructor(router, route) {
+        this.router = router;
+        this.route = route;
+        this.breadcrumbs = [];
+        this.appTitle = 'Valtimo';
+        this.routerSub = Subscription.EMPTY;
+    }
+    ngOnInit() {
+        this.setBreadcrumbs(this.route);
+        this.routerSub = this.router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .pipe(map(() => this.route))
+            .pipe(map((route) => {
+            while (route.firstChild) {
+                route = route.firstChild;
+            }
+            return route;
+        }))
+            .pipe(filter(route => route.outlet === PRIMARY_OUTLET))
+            .subscribe(route => {
+            this.setBreadcrumbs(route);
+        });
+    }
+    setBreadcrumbs(route) {
+        while (route.firstChild) {
+            route = route.firstChild;
+        }
+        if (route.outlet === PRIMARY_OUTLET) {
+            const snapshot = route.snapshot;
+            const activeRoute = {
+                url: snapshot.url.join('/'),
+                path: snapshot.routeConfig.path,
+                label: snapshot.data['title'],
+                params: snapshot.params
+            };
+            this.generateBreadcrumbs(activeRoute);
+        }
+    }
+    generateBreadcrumbs(activeBreadcrumb) {
+        this.breadcrumbs = [];
+        this.router.config.map(routerConfig => {
+            if (activeBreadcrumb.path.indexOf(routerConfig.path + '/') === 0
+                && activeBreadcrumb.path !== routerConfig.path
+                && routerConfig.path !== '') {
+                const parentRoute = {
+                    url: routerConfig.path.replace(/:(.+?)\b/g, (_, p1) => activeBreadcrumb.params[p1]),
+                    path: routerConfig.path,
+                    label: routerConfig.data['title'],
+                    params: activeBreadcrumb.params
+                };
+                const exist = this.breadcrumbs.findIndex(item => item.url === parentRoute.url);
+                if (exist === -1) {
+                    this.breadcrumbs.push(parentRoute);
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.routerSub.unsubscribe();
+    }
+}
+BreadcrumbNavigationComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-breadcrumb-navigation',
+                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<nav aria-label=\"breadcrumb\" role=\"navigation\">\n  <ol class=\"breadcrumb page-head-nav\">\n    <li class=\"breadcrumb-item\">\n      <a [routerLink]=\"['/']\">{{ appTitle }}</a>\n    </li>\n    <li class=\"breadcrumb-item\" *ngFor=\"let item of breadcrumbs\">\n      <a [routerLink]=\"[item.url]\">{{ item.label | translate }}</a>\n    </li>\n  </ol>\n</nav>\n",
+                styles: [""]
+            },] }
+];
+BreadcrumbNavigationComponent.ctorParameters = () => [
+    { type: Router },
+    { type: ActivatedRoute }
+];
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class BreadcrumbNavigationModule {
+}
+BreadcrumbNavigationModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [BreadcrumbNavigationComponent],
+                imports: [
+                    CommonModule,
+                    RouterModule,
+                    TranslateModule
+                ],
+                exports: [BreadcrumbNavigationComponent]
+            },] }
+];
+
+/*
+ * 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 PageHeaderModule {
+}
+PageHeaderModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [PageHeaderComponent],
+                imports: [
+                    CommonModule,
+                    PageTitleModule,
+                    BreadcrumbNavigationModule
+                ],
+                exports: [PageHeaderComponent]
+            },] }
+];
+
+/*
+ * 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.
+ */
+/**
+ * Component used to display a widget element
+ */
+class WidgetComponent {
+    ngOnInit() {
+        this.setCardClassName();
+        this.setType();
+        this.setAdditionalClasses();
+        this.setContrast();
+        this.setDivider();
+        this.setCollapse();
+    }
+    toggleContent() {
+        if (this.collapseAble) {
+            this.isCollapsed = !this.isCollapsed;
+        }
+    }
+    setCardClassName() {
+        this.cardClassName = 'card-full-default';
+    }
+    setType() {
+        if (this.type) {
+            this.cardClassName = `card-full-${this.type}`;
+        }
+    }
+    setAdditionalClasses() {
+        if (this.additionalClasses) {
+            this.cardClassName = `${this.cardClassName} ${this.additionalClasses}`;
+        }
+    }
+    setContrast() {
+        if (this.contrast) {
+            this.contrastClass = 'card-header-contrast';
+        }
+    }
+    setDivider() {
+        if (this.divider) {
+            this.dividerClass = 'card-header-divider';
+        }
+    }
+    setCollapse() {
+        this.isCollapsed = !(this.collapseAble && this.collapse === 'hide');
+    }
+}
+WidgetComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-widget',
+                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=\"card card-border card-contrast {{ cardClassName }}\">\n  <div class=\"card-header {{ contrastClass }} {{ dividerClass }}\"\n       *ngIf=\"title || subtitle\">\n    <div class=\"row\">\n      <div class=\"col-7\"\n           [ngClass]=\"{'clickable': collapseAble}\"\n           (click)=\"toggleContent()\">\n        <!-- Title -->\n        <div *ngIf=\"title\" class=\"text-truncate\">{{ title }}</div>\n        <!-- Sub title -->\n        <div *ngIf=\"subtitle\" class=\"card-subtitle text-truncate\">{{ subtitle }}</div>\n      </div>\n\n      <!-- Tools-->\n      <div class=\"tools col-5 text-right\">\n        <!-- Collapse content -->\n        <a class=\"icon mdi\"\n           *ngIf=\"collapseAble\"\n           [ngClass]=\"{'mdi-chevron-up': isCollapsed, 'mdi-chevron-down': !isCollapsed}\"\n           (click)=\"toggleContent()\"></a>\n      </div>\n    </div>\n  </div>\n  <!-- content -->\n  <div [hidden]=\"!isCollapsed\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+                styles: [".card-contrast .card-header{padding:20px!important}.card-subtitle{margin-bottom:0}.card-full,.card-full .card-subtitle,.card-full .tools .icon{color:#6b6b6b!important}.card-full-warning,.card-full-warning .card-subtitle,.card-full-warning .tools .icon{color:#343a40!important}.card-full-danger,.card-full-danger .card-subtitle,.card-full-danger .tools .icon,.card-full-dark,.card-full-dark .card-subtitle,.card-full-dark .tools .icon,.card-full-info,.card-full-info .card-subtitle,.card-full-info .tools .icon,.card-full-primary,.card-full-primary .card-subtitle,.card-full-primary .tools .icon,.card-full-success,.card-full-success .card-subtitle,.card-full-success .tools .icon{color:#fff!important}.card-contrast .card-body{padding-top:15px}.card-body{padding:15px 20px}.pie-label{font-size:16px!important}.widget.widget-tile svg.ngx-charts{margin-left:-1.5rem!important}svg.ngx-charts{margin:0;padding:0}"]
+            },] }
+];
+WidgetComponent.propDecorators = {
+    type: [{ type: Input }],
+    name: [{ type: Input }],
+    icon: [{ type: Input }],
+    contrast: [{ type: Input }],
+    divider: [{ type: Input }],
+    title: [{ type: Input }],
+    subtitle: [{ type: Input }],
+    collapseAble: [{ type: Input }],
+    collapse: [{ type: Input }],
+    additionalClasses: [{ type: Input }]
+};
+
+/*
+ * 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 WidgetModule {
+}
+WidgetModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [WidgetComponent],
+                imports: [
+                    CommonModule
+                ],
+                exports: [WidgetComponent]
+            },] }
+];
+
+/*
+ * 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 FieldAutoFocusDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterContentInit() {
+        setTimeout(() => {
+            this.el.nativeElement.focus();
+        }, 300);
+    }
+}
+FieldAutoFocusDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[valtimoFieldAutoFocus]'
+            },] }
+];
+FieldAutoFocusDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+/*
+ * 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 FieldAutoFocusModule {
+}
+FieldAutoFocusModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [FieldAutoFocusDirective],
+                exports: [
+                    FieldAutoFocusDirective
+                ],
+                imports: [
+                    CommonModule
+                ]
+            },] }
+];
+
+/*
+ * 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 BpmnJsDiagramComponent {
+    constructor() {
+        this.importDone = new EventEmitter();
+        this.heatPoints = { data: [] };
+    }
+    ngOnInit() {
+        this.bpmnJS = new BpmnJS();
+        this.bpmnJS.on('import.done', ({ error }) => {
+            if (!error) {
+                const canvas = this.bpmnJS.get('canvas'), eventBus = this.bpmnJS.get('eventBus');
+                if (this.historicActivityInstances) {
+                    this.historicActivityInstances.forEach(instance => {
+                        canvas.addMarker(instance.activityId, instance.endTime ? 'highlight-overlay-past' : 'highlight-overlay-current');
+                    });
+                }
+                canvas.zoom('fit-viewport', 'auto');
+                if (this.heatmapDuration || this.heatmapCount) {
+                    eventBus.on('canvas.init', () => {
+                        if (this.heatmapMode) {
+                            this.clearHeatmap();
+                        }
+                        this.getHeatmapData();
+                    });
+                    eventBus.on('canvas.viewbox.changing', () => {
+                        if (this.heatmapMode) {
+                            this.clearHeatmap();
+                        }
+                    });
+                    eventBus.on('canvas.viewbox.changed', () => {
+                        this.getHeatmapData();
+                    });
+                }
+            }
+        });
+    }
+    ngAfterContentInit() {
+        this.bpmnJS.importXML(this.bpmn20Xml);
+        this.bpmnJS.attachTo(this.el.nativeElement);
+    }
+    getHeatmapData() {
+        let inputData, valueKey;
+        this.heatPoints = { data: [] };
+        this.min = 0;
+        this.max = 0;
+        if (this.heatmapDuration) {
+            inputData = this.heatmapDuration;
+            valueKey = 'averageDurationInMilliseconds';
+        }
+        else if (this.heatmapCount) {
+            inputData = this.heatmapCount;
+            valueKey = 'totalCount';
+        }
+        if (inputData) {
+            Object.keys(inputData).forEach(key => {
+                const diagramContainer = this.el.nativeElement.querySelector('svg')
+                    .getBoundingClientRect(), diagramElm = this.el.nativeElement.querySelector(`g[data-element-id=${key}]`)
+                    .getBoundingClientRect();
+                this.setMax(key);
+                this.heatPoints.data.push({
+                    x: Math.round(diagramElm.x - diagramContainer.x + diagramElm.width / 2),
+                    y: Math.round(diagramElm.y - diagramContainer.y + diagramElm.height / 2),
+                    value: inputData[key][valueKey],
+                    radius: diagramElm.width / 2
+                });
+                if (inputData[key].count > 0) {
+                    this.addCounterActiveOverlays(key, inputData);
+                }
+            });
+            if (this.heatmapMode) {
+                this.showHeatmap();
+            }
+        }
+    }
+    setMax(key) {
+        if (this.heatmapDuration) {
+            this.max = Math.max(this.heatmapDuration[key].averageDurationInMilliseconds, this.max);
+        }
+        else if (this.heatmapCount) {
+            this.max = Math.max(this.heatmapCount[key].totalCount + this.heatmapCount[key].count, this.max);
+        }
+    }
+    addCounterActiveOverlays(key, inputData) {
+        const overlays = this.bpmnJS.get('overlays');
+        overlays.add(key, {
+            position: {
+                bottom: -10,
+                left: 0
+            },
+            show: {
+                minZoom: 0,
+                maxZoom: 5.0
+            },
+            html: `<span class="badge badge-pill badge-primary">${inputData[key].count}</span>`
+        });
+    }
+    showHeatmap() {
+        this.heatMapInstance = create({
+            radius: 54,
+            blur: .70,
+            maxOpacity: .4,
+            minOpacity: 0,
+            container: this.el.nativeElement
+        });
+        this.heatMapInstance.setData({
+            min: this.min,
+            max: this.max,
+            data: this.heatPoints.data
+        });
+    }
+    clearHeatmap() {
+        this.heatMapInstance.setData({ data: [] });
+    }
+    toggleHeatmap() {
+        this.heatmapMode = !this.heatmapMode;
+        if (this.heatmapMode) {
+            this.showHeatmap();
+        }
+        else {
+            this.clearHeatmap();
+        }
+    }
+    ngOnDestroy() {
+        this.bpmnJS.destroy();
+    }
+}
+BpmnJsDiagramComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-bpmn-js-diagram',
+                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=\"p-4\" *ngIf=\"heatmapDuration || heatmapCount\">\n  <div class=\"switch-button switch-button-sm switch-button-success\">\n    <input type=\"checkbox\" id=\"toggleHeatmap\" [checked]=\"heatmapMode\" (click)=\"toggleHeatmap()\"><span>\n    <label for=\"toggleHeatmap\"></label></span>\n  </div>\n</div>\n\n<div #ref class=\"diagram-container\"></div>\n\n<div *ngIf=\"historicActivityInstances\" class=\"p-4 text-center legenda-holder\">\n  <span><div class=\"legenda highlight-overlay-past\"></div> Executed tasks</span>\n  <span class=\"ml-3\"><div class=\"legenda highlight-overlay-current\"></div> Current tasks</span>\n</div>\n\n<div *ngIf=\"heatmapDuration || heatmapCount\" class=\"p-4 text-center legenda-holder\">\n  <span><span class=\"badge badge-pill badge-primary\">N</span>&nbsp;&nbsp;Amount of currently active instances of this task.</span>\n  <span>&nbsp;&nbsp;|&nbsp;&nbsp;Red/yellow/green orbs: The amount of times the task is executed in comparison to the other tasks.</span>\n</div>\n",
+                styles: [""]
+            },] }
+];
+BpmnJsDiagramComponent.ctorParameters = () => [];
+BpmnJsDiagramComponent.propDecorators = {
+    el: [{ type: ViewChild, args: ['ref', { static: true },] }],
+    importDone: [{ type: Output }],
+    bpmn20Xml: [{ type: Input }],
+    heatmapDuration: [{ type: Input }],
+    heatmapCount: [{ type: Input }],
+    historicActivityInstances: [{ type: Input }]
+};
+
+/*
+ * 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 BpmnJsDiagramModule {
+}
+BpmnJsDiagramModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [BpmnJsDiagramComponent],
+                imports: [
+                    CommonModule
+                ],
+                exports: [BpmnJsDiagramComponent]
+            },] }
+];
+
+/*
+ * 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 TimelineComponent {
+}
+TimelineComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-timeline',
+                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>\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    No result found\n  </div>\n  <div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n    <ul class=\"timeline mb-0 py-5\">\n      <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n        </div>\n        <div class=\"timeline-content mt-1\">\n          <div class=\"timeline-header p-0\">\n            <span class=\"timeline-time\">{{ item.time }}</span>\n            <span class=\"timeline-author\">{{ item.user }}</span>\n            <br/>\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n            <div class=\"timeline-summary\">\n              <p [innerHTML]=\"item.summaryTranslationKey | translate: item.summaryTranslationParams\"></p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n",
+                styles: [""]
+            },] }
+];
+TimelineComponent.propDecorators = {
+    items: [{ type: Input }]
+};
+
+/*
+ * 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 TimelineModule {
+}
+TimelineModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [TimelineComponent],
+                imports: [
+                    CommonModule,
+                    TranslateModule,
+                ],
+                exports: [TimelineComponent]
+            },] }
+];
+
+/*
+ * 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 ComponentsModule {
+}
+ComponentsModule.decorators = [
+    { type: NgModule }
+];
+
+/*
+ * 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 FilterSidebarComponent {
+    constructor() {
+        this.filterSidebar = localStorage.getItem('filterSidebar') || 'show';
+    }
+    ngOnInit() {
+        if (this.filterSidebar === 'show') {
+            localStorage.setItem('filterSidebar', 'show');
+            $('.be-content').addClass('be-aside');
+        }
+        $('[data-toggle="tooltip"]').tooltip();
+    }
+    ngOnDestroy() {
+        $('.be-content').removeClass('be-aside');
+    }
+    toggleFilterSidebar() {
+        const beContent = $('.be-content');
+        beContent.toggleClass('be-aside');
+        this.filterSidebar = beContent.hasClass('be-aside') ? 'show' : 'hide';
+        localStorage.setItem('filterSidebar', this.filterSidebar);
+    }
+}
+FilterSidebarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-filter-sidebar',
+                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>\n  <a\n    class=\"toggle-filter-sidebar\"\n    data-toggle=\"tooltip\"\n    data-trigger=\"hover\"\n    data-placement=\"right\"\n    title=\"Show / hide\"\n    href=\"javascript:void(0)\"\n    (click)=\"toggleFilterSidebar()\"\n    [ngClass]=\"this.filterSidebar === 'show' && 'toggle-expanded'\"\n  >\n    <div class=\"icon-container p-0 bg-transparent\">\n      <i class=\"click-able icon shadow mdi mdi-filter-list\"></i>\n    </div>\n  </a>\n  <aside class=\"page-aside p-4 mb-4 bg-light filter-holder\" *ngIf=\"this.filterSidebar === 'show'\">\n    <ng-content></ng-content>\n  </aside>\n</div>\n",
+                styles: [".filter-holder{border:0 solid transparent}.toggle-filter-sidebar{cursor:pointer;font-size:2rem;margin-left:-50px;position:absolute;top:25px;z-index:1}.icon-container .icon{background-color:#fff;color:#6b6b6b}.toggle-filter-sidebar:hover .icon-container .icon{color:#ff5800}@media screen and (min-width:768px){.toggle-filter-sidebar{margin-left:-25px}.page-aside{height:calc(100vh - 61px);left:0;margin-top:0;position:absolute}.toggle-expanded{margin-left:255px}}"]
+            },] }
+];
+FilterSidebarComponent.ctorParameters = () => [];
+
+/*
+ * 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 FilterSidebarModule {
+}
+FilterSidebarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [FilterSidebarComponent],
+                imports: [
+                    CommonModule
+                ],
+                exports: [FilterSidebarComponent]
+            },] }
+];
+
+/*
+ * 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 UploaderComponent {
+    constructor(s3Service) {
+        this.s3Service = s3Service;
+        this.resources = [];
+        this.resourcesChanged = new EventEmitter();
+        this.resourceRegistered = new EventEmitter();
+        this.showFileList = true;
+    }
+    ngOnInit() {
+    }
+    onFileFieldChange(files) {
+        for (const file of files) {
+            this.uploadFile(file);
+        }
+    }
+    uploadFile(file) {
+        this.s3Service.getPreSignedUrl(file.name).subscribe(value => {
+            const preSignedUrl = new URL(value);
+            this.s3Service.upload(preSignedUrl, file).subscribe(result => {
+                const s3ResourceDTO = new S3Resource(file, preSignedUrl);
+                this.s3Service.registerResource(s3ResourceDTO).subscribe(resource => {
+                    this.resources.push(resource);
+                    this.resourceRegistered.emit(resource);
+                    this.resourcesChanged.emit(this.resources);
+                });
+            });
+        });
+    }
+    deleteResource(resource) {
+        this.s3Service.delete(resource.id).subscribe(result => {
+            const index = this.resources.findIndex(res => res.id === resource.id);
+            this.resources.splice(index, 1);
+            this.resourcesChanged.emit(this.resources);
+        });
+    }
+}
+UploaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-uploader',
+                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=\"upload-file-container p-5\" (click)=\"fileInput.click()\" valtimoUploaderDragDrop\n     (fileDropped)=\"onFileFieldChange($event)\">\n  <span class=\"align-middle\"><i class=\"fa fa-cloud-upload fa-4x\"></i></span>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileFieldChange($event.target.files)\" multiple/>\n</div>\n<div *ngIf=\"showFileList\">\n  <div class=\"files-list px-3 py-2\" *ngFor=\"let resource of resources\">\n    <p class=\"m-0\">\n      <strong>{{ resource.name }}</strong><br/>\n      {{ resource.sizeInBytes | filesize }}\n    </p>\n    <button class=\"delete-file\" (click)=\"deleteResource(resource)\">\n      <i class=\"fa fa-trash text-danger\"></i>\n    </button>\n  </div>\n</div>\n\n",
+                styles: [".upload-file-container{background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:100px;border:2px dashed #d5d8de;color:#d5d8de;margin:0 0 1rem;text-align:center}.upload-file-container i.mdi-cloud-upload{font-size:5em}.upload-file-container:hover{cursor:pointer;opacity:.8}.files-list{background:#fff;border:1px solid #bdc0c7;display:flex;font-size:1em;justify-content:space-between;margin:1rem auto;padding:5px}.files-list .delete-file{background:transparent;border:none;cursor:pointer}.files-list .delete-file i{font-size:1.5em}"]
+            },] }
+];
+UploaderComponent.ctorParameters = () => [
+    { type: S3Service }
+];
+UploaderComponent.propDecorators = {
+    resourcesChanged: [{ type: Output }],
+    resourceRegistered: [{ type: Output }],
+    showFileList: [{ type: Input }]
+};
+
+/*
+ * 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 UploaderDragDropDirective {
+    constructor() {
+        this.fileDropped = new EventEmitter();
+    }
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    ondrop(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        const files = evt.dataTransfer.files;
+        if (files.length > 0) {
+            this.fileDropped.emit(files);
+        }
+    }
+}
+UploaderDragDropDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[valtimoUploaderDragDrop]'
+            },] }
+];
+UploaderDragDropDirective.propDecorators = {
+    fileDropped: [{ type: Output }],
+    onDragOver: [{ type: HostListener, args: ['dragover', ['$event'],] }],
+    onDragLeave: [{ type: HostListener, args: ['dragleave', ['$event'],] }],
+    ondrop: [{ type: HostListener, args: ['drop', ['$event'],] }]
+};
+
+/*
+ * 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 FileSizePipe {
+    constructor() {
+        this.units = [
+            'bytes',
+            'KB',
+            'MB',
+            'GB',
+            'TB',
+            'PB'
+        ];
+    }
+    transform(bytes = 0, precision = 2) {
+        if (isNaN(parseFloat(String(bytes))) || !isFinite(bytes)) {
+            return '?';
+        }
+        let unit = 0;
+        while (bytes >= 1024) {
+            bytes /= 1024;
+            unit++;
+        }
+        return bytes.toFixed(+precision) + ' ' + this.units[unit];
+    }
+}
+FileSizePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'filesize'
+            },] }
+];
+
+/*
+ * 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 FileSizeModule {
+}
+FileSizeModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [FileSizePipe],
+                imports: [
+                    CommonModule
+                ],
+                exports: [FileSizePipe]
+            },] }
+];
+
+/*
+ * 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 UploaderModule {
+}
+UploaderModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [UploaderComponent, UploaderDragDropDirective],
+                imports: [
+                    CommonModule,
+                    FileSizeModule
+                ],
+                exports: [UploaderComponent, UploaderDragDropDirective]
+            },] }
+];
+
+/*
+ * 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 AlertService {
+    constructor(router) {
+        this.router = router;
+        this.confirmed = new EventEmitter();
+        this.subject = new Subject();
+        // clear alert messages on route change unless 'keepAfterRouteChange' flag is true
+        this.router.events.subscribe(event => {
+            if (event instanceof NavigationStart) {
+                // clear alert messages
+                this.clear();
+            }
+        });
+    }
+    // enable subscribing to alerts observable
+    onAlert() {
+        return this.subject.asObservable();
+    }
+    // convenience methods
+    success(message, confirmations, iconClass) {
+        this.alert(new Alert({ message, type: AlertType.Success, confirmations, iconClass }));
+    }
+    error(message, confirmations, iconClass) {
+        this.alert(new Alert({ message, type: AlertType.Error, confirmations, iconClass }));
+    }
+    info(message, confirmations, iconClass) {
+        this.alert(new Alert({ message, type: AlertType.Info, confirmations, iconClass }));
+    }
+    warning(message, confirmations, iconClass) {
+        this.alert(new Alert({ message, type: AlertType.Warning, confirmations, iconClass }));
+    }
+    notification(message, confirmations, iconClass) {
+        this.alert(new Alert({ message, type: AlertType.Notification, confirmations, iconClass }));
+    }
+    modalNotification(message, confirmations, iconClass) {
+        this.alert(new Alert({ message, type: AlertType.ModalNotification, confirmations, iconClass }));
+    }
+    // main alert method
+    alert(alert) {
+        this.subject.next(alert);
+    }
+    // clear alerts
+    clear() {
+        this.subject.next(new Alert({}));
+    }
+    // emit confirm
+    emitAlertConfirmEvent(alert) {
+        this.confirmed.emit(alert);
+    }
+    getAlertConfirmChangeEmitter() {
+        return this.confirmed;
+    }
+}
+AlertService.ɵprov = ɵɵdefineInjectable({ factory: function AlertService_Factory() { return new AlertService(ɵɵinject(Router)); }, token: AlertService, providedIn: "root" });
+AlertService.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
+];
+AlertService.ctorParameters = () => [
+    { type: Router }
+];
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class AlertComponent {
+    constructor(alertService) {
+        this.alertService = alertService;
+        this.alerts = [];
+        this.autoCloseInMS = 5000;
+    }
+    ngOnInit() {
+    }
+    ngAfterContentInit() {
+        this.subscription = this.alertService.onAlert()
+            .subscribe(alert => {
+            if (!alert.message) {
+                // clear alerts when an empty alert is received
+                this.alerts = [];
+                return;
+            }
+            // set empty array when an empty alert confirmations is received
+            if (!alert.confirmations) {
+                alert.confirmations = [];
+            }
+            // add alert to array if not exist
+            const alertExist = this.alerts.filter(x => x.message === alert.message);
+            if (alertExist.length === 0) {
+                this.alerts.push(alert);
+            }
+            if (this.inModal(alert)) {
+                setTimeout(() => {
+                    this.openModal();
+                }, 300);
+            }
+            // auto close except alert confirmations not empty
+            if (this.autoCloseInMS > 0 && alert.confirmations.length === 0) {
+                setTimeout(() => {
+                    this.removeAlert(alert);
+                }, this.autoCloseInMS);
+            }
+        });
+    }
+    closeModal() {
+        $('#modalNotification').modal('hide');
+    }
+    openModal() {
+        $('#modalNotification').modal('show');
+    }
+    alertConfirm(alert, confirm) {
+        alert.confirm = confirm;
+        this.alertService.emitAlertConfirmEvent(alert);
+        this.removeAlert(alert);
+    }
+    ngOnDestroy() {
+        // unsubscribe to avoid memory leaks
+        this.subscription.unsubscribe();
+    }
+    removeAlert(alert) {
+        if (this.inModal(alert)) {
+            this.closeModal();
+        }
+        // remove specified alert from array
+        this.alerts = this.alerts.filter(x => x.message !== alert.message);
+    }
+    inModal(alert) {
+        if (!alert) {
+            return;
+        }
+        // return true based on AlertType.ModalNotification
+        switch (alert.type) {
+            case AlertType.ModalNotification:
+                return true;
+            default:
+                return false;
+        }
+    }
+    cssClass(alert) {
+        if (!alert) {
+            return;
+        }
+        // return css class based on alert type
+        switch (alert.type) {
+            case AlertType.Success:
+                return 'alert alert-success';
+            case AlertType.Error:
+                return 'alert alert-danger';
+            case AlertType.Info:
+                return 'alert alert-info';
+            case AlertType.Warning:
+                return 'alert alert-warning';
+            case AlertType.Notification:
+                return 'alert alert-light';
+            case AlertType.ModalNotification:
+                return 'alert alert-light';
+        }
+    }
+    cssIconClass(alert) {
+        if (!alert) {
+            return;
+        }
+        // return css class based on alert type
+        switch (alert.type) {
+            case AlertType.Success:
+                return 'mdi mdi-check';
+            case AlertType.Error:
+                return 'mdi mdi-close-circle-o';
+            case AlertType.Info:
+                return 'mdi mdi-info-outline';
+            case AlertType.Warning:
+                return 'mdi mdi-alert-triangle';
+            case AlertType.Notification:
+                return 'mdi mdi-notifications';
+            case AlertType.ModalNotification:
+                return 'mdi mdi-notifications';
+        }
+    }
+}
+AlertComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-alert',
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngFor=\"let alert of alerts\" class=\"{{cssClass(alert)}} rounded-0 m-0 alert-dismissable\">\n\n  <div *ngIf=\"inModal(alert)\">\n    <!-- Modal -->\n    <div class=\"modal fade\" id=\"modalNotification\" tabindex=\"-1\" role=\"dialog\">\n      <div class=\"modal-dialog\" role=\"document\">\n        <div class=\"modal-content\">\n          <div class=\"modal-body p-0\">\n            <button class=\"close\" type=\"button\" (click)=\"removeAlert(alert)\"><span class=\"mdi mdi-close\" aria-hidden=\"true\"></span></button>\n            <div class=\"icon\"><span class=\"{{ alert.iconClass || cssIconClass(alert) }}\"></span></div>\n            <div class=\"message\">\n              <div [innerHTML]=\"alert.message\"></div>\n            </div>\n          </div>\n          <div class=\"modal-footer pt-0\" *ngIf=\"alert.confirmations?.length\">\n              <button class=\"{{ confirmation.class }} mr-2\"\n                      *ngFor=\"let confirmation of alert.confirmations\"\n                      (click)=\"alertConfirm(alert, confirmation.value)\">{{ confirmation.label }}</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!inModal(alert)\" class=\"alert-block\">\n    <div class=\"icon\"><span class=\"{{ alert.iconClass || cssIconClass(alert) }}\"></span></div>\n    <div class=\"message\">\n      <div [innerHTML]=\"alert.message\"></div>\n      <div class=\"mt-3\" *ngIf=\"alert.confirmations?.length\">\n        <button class=\"{{ confirmation.class }} mr-2\"\n                *ngFor=\"let confirmation of alert.confirmations\"\n                (click)=\"alertConfirm(alert, confirmation.value)\">{{ confirmation.label }}</button>\n      </div>\n    </div>\n    <button class=\"close\" type=\"button\" (click)=\"removeAlert(alert)\"><span class=\"mdi mdi-close\" aria-hidden=\"true\"></span></button>\n  </div>\n</div>\n",
+                styles: [".alert-block{display:flex;flex-direction:row;justify-content:space-between}.alert-block .message{width:100%}.alert-block .icon{align-items:center;display:flex}.alert .message{font-size:1.1rem!important;line-height:1.5rem!important;padding:2rem 5rem 2rem 2rem!important}.alert .close{color:#fff!important;opacity:1!important;padding:2rem 2rem 0 0!important;right:0!important}.alert .icon{padding-left:2rem!important}.alert-warning{color:#404040!important}.alert-light .close,.alert-warning .close{color:#404040!important;opacity:1!important}"]
+            },] }
+];
+AlertComponent.ctorParameters = () => [
+    { type: 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 AlertModule {
+}
+AlertModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [AlertComponent],
+                exports: [AlertComponent]
+            },] }
+];
+
+/*
+ * 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 DataListComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+DataListComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-data-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 *ngIf=\"collection\">\n  <dl class=\"row mb-0\" *ngFor=\"let item of collection\">\n    <dd class=\"col-12 col-md-4 col-lg-3\">{{ item.label }}</dd>\n    <dt class=\"col-12 col-md-8 col-lg-9\" [innerHTML]=\"item.value || '-'\"></dt>\n  </dl>\n</div>\n\n<div *ngIf=\"object\">\n  <dl class=\"row mb-0\" *ngFor=\"let item of object | keyvalue\">\n    <dd class=\"col-12 col-md-4 col-lg-3\">{{ item.key }}</dd>\n    <dt class=\"col-12 col-md-8 col-lg-9\" [innerHTML]=\"item.value || '-'\"></dt>\n  </dl>\n</div>\n",
+                styles: [""]
+            },] }
+];
+DataListComponent.ctorParameters = () => [];
+DataListComponent.propDecorators = {
+    collection: [{ type: Input }],
+    object: [{ type: Input }]
+};
+
+/*
+ * 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 DataListModule {
+}
+DataListModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [DataListComponent],
+                imports: [
+                    CommonModule
+                ],
+                exports: [DataListComponent]
+            },] }
+];
+
+class FormIoStateService {
+    constructor() {
+        this._documentDefinitionName$ = new BehaviorSubject(undefined);
+        this._currentForm$ = new BehaviorSubject(undefined);
+    }
+    get documentDefinitionName$() {
+        return this._documentDefinitionName$.asObservable();
+    }
+    setDocumentDefinitionName(documentDefinitionName) {
+        this._documentDefinitionName$.next(documentDefinitionName);
+    }
+    get currentForm$() {
+        return this._currentForm$.asObservable();
+    }
+    set currentForm(form) {
+        this._currentForm$.next(form);
+    }
+}
+FormIoStateService.decorators = [
+    { type: Injectable }
+];
+
+/*
+ * 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 FormioComponent {
+    constructor(userProviderService, logger, stateService, route) {
+        this.userProviderService = userProviderService;
+        this.logger = logger;
+        this.stateService = stateService;
+        this.route = route;
+        this.submission = {};
+        this.useFormRefresh = false;
+        this.submit = new EventEmitter();
+        this.change = new EventEmitter();
+        this.refreshForm = new EventEmitter();
+        this.errors = [];
+    }
+    ngOnInit() {
+        const documentDefinitionName = this.route.snapshot.paramMap.get('documentDefinitionName');
+        const formDefinition = this.form;
+        this.loadUserLanguageSetting();
+        this.formDefinition = formDefinition;
+        this.errors = [];
+        if (this.formHasLegacyUpload(formDefinition)) {
+            this.setInitialToken();
+        }
+        if (documentDefinitionName) {
+            this.stateService.setDocumentDefinitionName(documentDefinitionName);
+        }
+        this.subscribeFormRefresh();
+    }
+    ngOnChanges(changes) {
+        const currentForm = changes.form.currentValue;
+        this.formDefinition = currentForm;
+        this.loadUserLanguageSetting();
+        this.reloadForm();
+        if (this.formHasLegacyUpload(currentForm)) {
+            this.setInitialToken();
+        }
+        if (changes.formDefinitionRefresh$) {
+            this.unsubscribeFormRefresh();
+            this.subscribeFormRefresh();
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribeFormRefresh();
+        if (this.tokenRefreshTimerSubscription) {
+            this.tokenRefreshTimerSubscription.unsubscribe();
+        }
+    }
+    loadUserLanguageSetting() {
+        this.language = localStorage.getItem('langKey') || '';
+    }
+    reloadForm() {
+        this.refreshForm.emit({
+            form: this.formDefinition
+        });
+    }
+    showErrors(errors) {
+        this.errors = errors;
+    }
+    onSubmit(submission) {
+        this.errors = [];
+        this.submit.emit(submission);
+    }
+    formReady(form) {
+        this.reloadForm();
+        this.stateService.currentForm = form;
+    }
+    onChange(object) {
+        this.change.emit(object);
+    }
+    formHasLegacyUpload(formDefinition) {
+        const stringifiedFormDefinition = JSON.stringify(formDefinition);
+        const legacyUploadString = '"type":"file"';
+        return stringifiedFormDefinition.includes(legacyUploadString);
+    }
+    setInitialToken() {
+        this.userProviderService.getToken().then((token) => {
+            this.setToken(token);
+        });
+    }
+    setToken(token) {
+        Formio.setToken(token);
+        this.setTimerForTokenRefresh(token);
+        this.logger.debug('New token set for form.io.');
+    }
+    setTimerForTokenRefresh(token) {
+        const tokenExp = jwt_decode(token).exp * 1000;
+        const expiryTime = tokenExp - Date.now() - 1000;
+        this.tokenRefreshTimerSubscription = timer(expiryTime).subscribe(() => {
+            this.refreshToken();
+        });
+        this.logger.debug(`Timer for form.io token refresh set for: ${expiryTime}ms.`);
+    }
+    refreshToken() {
+        from(this.userProviderService.updateToken(-1))
+            .pipe(switchMap(() => this.userProviderService.getToken()), take(1))
+            .subscribe(token => {
+            this.setToken(token);
+        });
+    }
+    subscribeFormRefresh() {
+        if (this.formRefresh$) {
+            this.formRefreshSubscription = this.formRefresh$.subscribe((refreshValue) => {
+                if (refreshValue) {
+                    this.refreshForm.emit(refreshValue);
+                }
+            });
+        }
+    }
+    unsubscribeFormRefresh() {
+        if (this.formRefreshSubscription) {
+            this.formRefreshSubscription.unsubscribe();
+        }
+    }
+}
+FormioComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-form-io',
+                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>\n  <div *ngIf=\"errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of errors\">\n        {{error}}\n      </li>\n    </ol>\n  </div>\n  <formio [submission]=\"submission\"\n          [form]=\"formDefinition\"\n          [refresh]=\"useFormRefresh && refreshForm\"\n          [options]=\"options\"\n          [language]=\"language\"\n          (submit)=\"onSubmit($event)\"\n          (ready)=\"formReady($event)\"\n          (change)=\"onChange($event)\"\n  >\n  </formio>\n</div>\n",
+                styles: [""]
+            },] }
+];
+FormioComponent.ctorParameters = () => [
+    { type: UserProviderService },
+    { type: NGXLogger },
+    { type: FormIoStateService },
+    { type: ActivatedRoute }
+];
+FormioComponent.propDecorators = {
+    form: [{ type: Input }],
+    options: [{ type: Input }],
+    submission: [{ type: Input }],
+    formRefresh$: [{ type: Input }],
+    useFormRefresh: [{ type: Input }],
+    submit: [{ type: Output }],
+    change: [{ type: Output }]
+};
+
+/*
+ * 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 FormioBuilderComponent {
+    constructor() {
+        this.change = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    onChange(event) {
+        this.change.emit(event);
+    }
+}
+FormioBuilderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-form-io-builder',
+                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>\n  <form-builder [form]=\"form\" (change)=\"onChange($event)\" ></form-builder>\n</div>\n",
+                styles: [""]
+            },] }
+];
+FormioBuilderComponent.ctorParameters = () => [];
+FormioBuilderComponent.propDecorators = {
+    form: [{ type: Input }],
+    change: [{ type: Output }]
+};
+
+/*
+ * 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 AppConfig = {
+    appUrl: 'http://localhost:4200',
+    apiUrl: 'http://localhost:4200',
+    icons: 'fontawesome',
+    formOnly: false
+};
+
+class FormIoDomService {
+    constructor(stateService) {
+        this.stateService = stateService;
+    }
+    toggleSubmitButton(disabled) {
+        this.stateService.currentForm$.pipe(take(1)).subscribe((form) => {
+            const button = form.formioElement.nativeElement
+                .getElementsByClassName('formio-component-submit')[0]
+                .getElementsByClassName('btn-primary')[0];
+            button.disabled = disabled;
+        });
+    }
+}
+FormIoDomService.decorators = [
+    { type: Injectable }
+];
+FormIoDomService.ctorParameters = () => [
+    { type: FormIoStateService }
+];
+
+class FormIoUploaderComponent {
+    constructor(uploadProviderService, stateService, domService, downloadService) {
+        this.uploadProviderService = uploadProviderService;
+        this.stateService = stateService;
+        this.domService = domService;
+        this.downloadService = downloadService;
+        this.valueChange = new EventEmitter();
+        this.uploading$ = new BehaviorSubject(false);
+        this._value = [];
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (Array.isArray(value)) {
+            this._value = value;
+        }
+    }
+    downloadFile(resourceFile) {
+        this.uploadProviderService.getResource(resourceFile.data.resourceId).subscribe((resource) => {
+            this.downloadService.downloadFile(resource.url, resource.resource.name);
+        });
+    }
+    fileSelected(file) {
+        this.domService.toggleSubmitButton(true);
+        this.uploading$.next(true);
+        this.stateService.documentDefinitionName$.pipe(take(1)).subscribe((name) => {
+            this.uploadProviderService.uploadFile(file, name).subscribe((result) => {
+                this.domService.toggleSubmitButton(false);
+                this.uploading$.next(false);
+                this._value.push(result);
+                this.valueChange.emit(this._value);
+            });
+        });
+    }
+    deleteFile(resourceId) {
+        this.domService.toggleSubmitButton(true);
+        this._value = this._value.filter((file) => { var _a; return (file === null || file === void 0 ? void 0 : file.data) ? ((_a = file === null || file === void 0 ? void 0 : file.data) === null || _a === void 0 ? void 0 : _a.resourceId) !== resourceId : true; });
+        this.valueChange.emit(this._value);
+    }
+}
+FormIoUploaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-formio-uploader',
+                template: "<valtimo-dropzone\n        (fileSelected)=\"fileSelected($event)\"\n        [acceptedFiles]=\"null\"\n        [disabled]=\"disabled\"\n        [hideFilePreview]=\"true\"\n        [hideTitle]=\"hideTitle\"\n        [maxFileSize]=\"maxFileSize\"\n        [showMaxFileSize]=\"!hideMaxFileSize\"\n        [subtitle]=\"subtitle\"\n        [title]=\"title\"\n        [camera]=\"camera\"\n        [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<div class=\"file-preview\" *ngFor=\"let resource of _value\">\n  <div class=\"file-preview-name\">\n    <a href=\"#\" (click)=\"downloadFile(resource)\">\n      {{resource.originalName}}\n    </a>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{resource.size | filesize}}\n    </span>\n  </div>\n  <div class=\"file-preview-delete\" *ngIf=\"!disabled\">\n    <a (click)=\"deleteFile(resource.data.resourceId)\">\n      <i class=\"icon fa fa-trash\"></i>\n    </a>\n  </div>\n</div>\n",
+                styles: [".progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .btn-secondary,::ng-deep .formio-component-valtimo-file .formio-button-add-another{display:none}::ng-deep .formio-component-valtimo-file td{border:none;padding:0!important}::ng-deep .formio-component-valtimo-file .table{border:none;border-collapse:collapse;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{border:1px solid #dee2e6;display:flex;margin-top:-1px}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;cursor:pointer;font-size:1.3846rem;line-height:18px}.file-preview .icon:hover{color:grey}"]
+            },] }
+];
+FormIoUploaderComponent.ctorParameters = () => [
+    { type: UploadProviderService },
+    { type: FormIoStateService },
+    { type: FormIoDomService },
+    { type: DownloadService }
+];
+FormIoUploaderComponent.propDecorators = {
+    disabled: [{ type: Input }],
+    title: [{ type: Input }],
+    hideTitle: [{ type: Input }],
+    subtitle: [{ type: Input }],
+    maxFileSize: [{ type: Input }],
+    hideMaxFileSize: [{ type: Input }],
+    camera: [{ type: Input }],
+    valueChange: [{ type: Output }],
+    value: [{ type: Input }]
+};
+
+/*
+ * 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 DropzoneComponent {
+    constructor(translateService) {
+        this.translateService = translateService;
+        this.externalError$ = new BehaviorSubject('');
+        this.maxFileSize = 5;
+        this.showMaxFileSize = true;
+        this.acceptedFiles = '.json';
+        this.clear$ = new Subject();
+        this.camera = false;
+        this.fileSelected = new EventEmitter();
+        this.file$ = new BehaviorSubject(undefined);
+        this.showingCamera$ = new BehaviorSubject(false);
+        this.error$ = new BehaviorSubject('');
+        this.errorMessagesStrings = {
+            tooBig: 'too big',
+            wrongType: 'this type'
+        };
+        this.errorMessage$ = combineLatest([
+            this.error$,
+            this.translateService.stream('dropzone.error.generic'),
+            this.translateService.stream('dropzone.error.tooBig'),
+            this.translateService.stream('dropzone.error.wrongType')
+        ]).pipe(map(([dropzoneError, generic, tooBig, wrongType]) => {
+            const strings = this.errorMessagesStrings;
+            if (dropzoneError) {
+                if (dropzoneError.includes(strings.tooBig)) {
+                    return tooBig;
+                }
+                else if (dropzoneError.includes(strings.wrongType)) {
+                    return wrongType;
+                }
+                else {
+                    return generic;
+                }
+            }
+            else {
+                return '';
+            }
+        }));
+    }
+    ngOnInit() {
+        this.clearSubscription = this.clear$.subscribe(() => {
+            this.clearFile();
+            this.clearError();
+        });
+    }
+    ngAfterViewInit() {
+        this.initDropzone();
+    }
+    ngOnDestroy() {
+        this.clearSubscription.unsubscribe();
+    }
+    showCamera() {
+        this.showingCamera$.next(true);
+    }
+    webcamImageSaved(image) {
+        if (image) {
+            this.setFile(image);
+        }
+        this.showingCamera$.next(false);
+    }
+    initDropzone() {
+        this.dropzone = new Dropzone(this.dropzoneRef.nativeElement, {
+            url: '/',
+            maxFilesize: this.maxFileSize,
+            clickable: this.dropzoneRef.nativeElement,
+            autoProcessQueue: false,
+            createImageThumbnails: false,
+            acceptedFiles: this.acceptedFiles,
+            previewTemplate: `<p style='display:none'></p>`,
+            accept: file => {
+                this.dropzone.removeAllFiles();
+                this.setFile(file);
+            }
+        });
+        this.setDropzoneEvents();
+    }
+    setDropzoneEvents() {
+        this.dropzone.on('error', (file, message) => {
+            this.clearFile();
+            this.error$.next(message.toString());
+            this.fileSelected.emit();
+        });
+    }
+    clearFile() {
+        this.file$.next(undefined);
+    }
+    clearError() {
+        this.error$.next('');
+    }
+    setFile(file) {
+        this.file$.next(file);
+        this.clearError();
+        this.fileSelected.emit(file);
+    }
+}
+DropzoneComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-dropzone',
+                template: "<form #dropzone [ngClass]=\"{ disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button (click)=\"showCamera()\" *ngIf=\"camera\" type=\"button\" class=\"btn btn-primary px-3 webcam-button\"><i class=\"fa fa-camera\" aria-hidden=\"true\"></i></button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\" showMaxFileSize\" class=\"note mb-3 small-font\"\n  >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n          *ngIf=\"{ errorMessage: errorMessage$ | async, externalError: externalError$ | async, file: file$ | async } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && (obs.file && !obs.externalError && !obs.errorMessage)\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{  obs.file.size | filesize: 2}}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\n</ng-template>\n\n",
+                styles: ["form.dropzone{padding:30px 20px}form.dropzone h2{font-size:2rem;text-align:center}form.dropzone.disabled{cursor:default;opacity:.7;pointer-events:none}form.dropzone.preview{border:none;padding:15px 20px}.dz-message{align-items:center;display:flex;flex-direction:column}.dropzone-mobile-trigger{cursor:pointer}.alert-light{align-items:center;display:flex}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;margin-bottom:0;padding:0;width:auto}form.dropzone .message{padding:1.385rem 2.1542rem}.file{align-items:center;display:flex;flex-direction:row;font-size:1.5rem}.small-font{color:#959595;font-size:1rem}.file-size{margin-left:5px}.progress-bar-container{bottom:0;height:auto;position:absolute;width:100%}.webcam-button{position:absolute;right:10px;top:10px}"]
+            },] }
+];
+DropzoneComponent.ctorParameters = () => [
+    { type: TranslateService }
+];
+DropzoneComponent.propDecorators = {
+    dropzoneRef: [{ type: ViewChild, args: ['dropzone',] }],
+    title: [{ type: Input }],
+    hideTitle: [{ type: Input }],
+    subtitle: [{ type: Input }],
+    externalError$: [{ type: Input }],
+    maxFileSize: [{ type: Input }],
+    showMaxFileSize: [{ type: Input }],
+    acceptedFiles: [{ type: Input }],
+    clear$: [{ type: Input }],
+    disabled: [{ type: Input }],
+    hideFilePreview: [{ type: Input }],
+    uploading: [{ type: Input }],
+    camera: [{ type: Input }],
+    fileSelected: [{ type: Output }]
+};
+
+/*
+ * 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 ProgressBarComponent {
+}
+ProgressBarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-progress-bar',
+                template: "<div class=\"progress\" style=\"position: relative;\">\n  <div class=\"progress-bar progress-bar-striped indeterminate\">\n  </div>\n</div>\n",
+                styles: [".progress-bar.indeterminate{-webkit-animation:progress-indeterminate 3s linear infinite;animation:progress-indeterminate 3s linear infinite;position:relative}@-webkit-keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}@keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}"]
+            },] }
+];
+
+/*
+ * 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 ProgressBarModule {
+}
+ProgressBarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ProgressBarComponent],
+                imports: [
+                    CommonModule,
+                ],
+                exports: [ProgressBarComponent]
+            },] }
+];
+
+/*
+ * 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 WebcamComponent {
+    constructor() {
+        this.imageSaved = new EventEmitter();
+        this.showing$ = new BehaviorSubject(false);
+        this.stream$ = new BehaviorSubject(undefined);
+        this.picture$ = new BehaviorSubject(undefined);
+    }
+    ngAfterViewInit() {
+        const video = this.getVideoElement();
+        setTimeout(() => {
+            this.toggleFade();
+        });
+        if (navigator.mediaDevices.getUserMedia) {
+            navigator.mediaDevices.getUserMedia({ video: true })
+                .then((stream) => {
+                video.srcObject = stream;
+                this.stream$.next(stream);
+            });
+        }
+    }
+    captureImage() {
+        const video = this.getVideoElement();
+        const canvas = document.querySelector('#canvas');
+        canvas.width = 640;
+        canvas.height = 480;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const dataURI = canvas.toDataURL('image/jpeg');
+        this.picture$.next({ file: this.dataURItoFile(dataURI), uri: dataURI });
+        return false;
+    }
+    clearImage() {
+        this.picture$.next(undefined);
+        return false;
+    }
+    close(emitImage = true) {
+        if (!emitImage) {
+            this.clearImage();
+        }
+        this.toggleFade();
+        this.emitOnTimeOut();
+        return false;
+    }
+    stopStream() {
+        this.stream$.pipe(take(1)).subscribe((mediaStream) => {
+            if (mediaStream) {
+                mediaStream.getTracks().forEach((stream) => stream.stop());
+            }
+        });
+    }
+    getVideoElement() {
+        return document.querySelector('#videoElement');
+    }
+    emitOnTimeOut() {
+        setTimeout(() => {
+            var _a;
+            this.stopStream();
+            this.imageSaved.emit((_a = this.picture$.getValue()) === null || _a === void 0 ? void 0 : _a.file);
+        }, 250);
+    }
+    toggleFade() {
+        this.showing$.next(!this.showing$.getValue());
+    }
+    dataURItoFile(dataURI) {
+        const binary = atob(dataURI.split(',')[1]);
+        const array = [];
+        for (let i = 0; i < binary.length; i++) {
+            array.push(binary.charCodeAt(i));
+        }
+        const blob = new Blob([new Uint8Array(array)], { type: 'image/jpeg' });
+        const imgFileName = `IMG_${new Date().toISOString().replace(/[-:.]/g, '')}.jpg`;
+        return new File([blob], imgFileName);
+    }
+}
+WebcamComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-webcam',
+                template: "<div (click)=\"close(false)\" *ngIf=\"{picture: picture$ | async, stream: stream$ | async} as obs\"\n     [ngClass]=\"{showing: showing$ | async}\"\n     class=\"webcam-overlay\">\n  <div (click)=\"false; $event.stopPropagation();\" class=\"inner-container\">\n    <div class=\"webcam-container modal-content\">\n      <div class=\"video-container\">\n        <video autoplay=\"true\" id=\"videoElement\"></video>\n        <canvas id=\"canvas\"></canvas>\n        <img *ngIf=\"obs.picture?.uri\" [src]=\"obs.picture?.uri\"/>\n      </div>\n      <div class=\"button-container\">\n        <div class=\"picture-btn\">\n          <button (click)=\"captureImage()\" [disabled]=\"obs.picture?.file || !obs.stream\" class=\"btn btn-primary btn-lg\">\n            <i\n                    class=\"fa fa-camera\"></i>{{'webcam.takePicture' | translate}}\n          </button>\n        </div>\n        <div class=\"new-btn\">\n          <button (click)=\"clearImage()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\"><i\n                  class=\"fa fa-undo\"></i>{{'webcam.redo' | translate}}\n          </button>\n        </div>\n        <div class=\"save-btn\">\n          <button (click)=\"close()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\"><i\n                  class=\"fa fa-save\"></i>{{'webcam.save' | translate}}</button>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-header\">\n      <button (click)=\"close(false)\" aria-label=\"Close\" class=\"close\"><span>\u00D7</span></button>\n    </div>\n  </div>\n</div>\n",
+                styles: [".webcam-overlay{align-items:center;background-color:rgba(0,0,0,.65);display:flex;height:100%;justify-content:center;left:0;opacity:0;position:fixed;top:0;transition:opacity .15s linear;width:100%;z-index:9999}.showing{opacity:1}.webcam-container{padding:20px}.button-container{align-items:center;display:flex;height:30px;justify-content:space-evenly;margin-bottom:10px;margin-top:20px}.button-container i{margin-right:5px}.new-btn,.picture-btn,.save-btn{display:flex;justify-content:center;position:absolute}.new-btn,.save-btn{width:calc(50% - 65px)}.picture-btn{left:0;width:100%}.new-btn{left:0}.save-btn{right:0}.modal-header{color:grey;margin-top:35px;padding:0;position:absolute;right:-18px;top:0}.close{color:grey}.inner-container{position:relative}.video-container{height:495px;overflow:hidden}.video-container img,.video-container video{height:495px;position:absolute;width:660px}.video-container img{-o-object-fit:cover;object-fit:cover}#canvas{display:none}"]
+            },] }
+];
+WebcamComponent.propDecorators = {
+    imageSaved: [{ type: Output }]
+};
+
+/*
+ * 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 WebcamModule {
+}
+WebcamModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [WebcamComponent],
+                imports: [
+                    CommonModule,
+                    TranslateModule
+                ],
+                exports: [WebcamComponent]
+            },] }
+];
+
+/*
+ * 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 DropzoneModule {
+}
+DropzoneModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [DropzoneComponent],
+                imports: [CommonModule, TranslateModule, FileSizeModule, ProgressBarModule, WebcamModule],
+                exports: [DropzoneComponent]
+            },] }
+];
+
+/*
+ * 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 ɵ0$1 = AppConfig;
+class FormIoModule {
+}
+FormIoModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    FormioModule,
+                    DropzoneModule,
+                    TranslateModule,
+                    DocumentModule,
+                    FileSizeModule,
+                    ResourceModule,
+                    RouterModule
+                ],
+                declarations: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
+                exports: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
+                providers: [
+                    FormIoStateService,
+                    FormIoDomService,
+                    { provide: FormioAppConfig, useValue: ɵ0$1 }
+                ],
+            },] }
+];
+
+/*
+ * 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 ModalComponent {
+    constructor() {
+        this.title = '';
+        this.subtitle = '';
+        this.showFooter = false;
+    }
+    ngAfterViewInit() {
+        $(`#${this.elementId}`).modal({ show: false });
+    }
+    show() {
+        $(`#${this.elementId}`).modal('show');
+    }
+    hide() {
+        $(`#${this.elementId}`).modal('hide');
+    }
+}
+ModalComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-modal',
+                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=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\">\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <img src=\"assets/modal/header-image.png\" class=\"modal-header-image\" />\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n",
+                styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{border-bottom:1px solid #c5c6c9;padding-bottom:.66rem}@media (min-width:768px){.close{left:25px;margin-top:-20px!important;padding:0!important;position:relative}.close span{color:#fff}.modal-content{overflow:visible}}"]
+            },] }
+];
+ModalComponent.ctorParameters = () => [];
+ModalComponent.propDecorators = {
+    elementId: [{ type: Input }],
+    title: [{ type: Input }],
+    subtitle: [{ type: Input }],
+    templateBelowSubtitle: [{ type: Input }],
+    showFooter: [{ type: Input }]
+};
+
+/*
+ * 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 ModalModule {
+}
+ModalModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ModalComponent],
+                imports: [CommonModule],
+                exports: [ModalComponent]
+            },] }
+];
+
+/*
+ * 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 SpinnerComponent {
+    constructor() {
+        this.useBootstrapSpinner = true;
+        this.type = 'ball-clip-rotate';
+        this.size = 'medium';
+        this.color = 'currentColor';
+        this.bdColor = 'rgba(0,0,0,0)';
+        this.fullScreen = false;
+    }
+}
+SpinnerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-spinner',
+                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<ng-container *ngIf=\"useBootstrapSpinner; else ngxSpinner\">\n  <div class=\"spinner-container\">\n    <div class=\"spinner-border text-primary\" role=\"status\">\n      <span class=\"sr-only\">{{ \"interface.loading\" | translate }}</span>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ngxSpinner>\n  <ngx-spinner\n    [bdColor]=\"bdColor\"\n    [fullScreen]=\"fullScreen\"\n    [name]=\"name\"\n    [color]=\"color\"\n    [size]=\"size\"\n    [type]=\"type\"\n  >\n  </ngx-spinner>\n</ng-template>\n",
+                styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.spinner-container{display:flex;justify-content:center;margin-top:30px;width:100%}"]
+            },] }
+];
+SpinnerComponent.propDecorators = {
+    useBootstrapSpinner: [{ type: Input }],
+    name: [{ type: Input }],
+    type: [{ type: Input }],
+    size: [{ type: Input }],
+    color: [{ type: Input }],
+    bdColor: [{ type: Input }],
+    fullScreen: [{ type: Input }]
+};
+
+/*
+ * 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 SpinnerModule {
+}
+SpinnerModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SpinnerComponent],
+                exports: [
+                    SpinnerComponent
+                ],
+                imports: [
+                    CommonModule,
+                    NgxSpinnerModule,
+                    TranslateModule
+                ]
+            },] }
+];
+
+/*
+ * 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 SearchableDropdownComponent {
+    constructor() {
+        this.width = 250;
+        this.itemSelected = new EventEmitter();
+        this.searchId = 'search';
+        this.searchTerm = new FormControl('');
+        this.focusedItemId$ = new BehaviorSubject(this.searchId);
+        this.open$ = new BehaviorSubject(false);
+        this.filteredItems$ = new BehaviorSubject(undefined);
+        this.wasInside = false;
+        this.mouseOnList$ = new BehaviorSubject(false);
+    }
+    clickInside() {
+        this.wasInside = true;
+    }
+    clickout() {
+        if (!this.wasInside) {
+            this.closeDropdown();
+        }
+        this.wasInside = false;
+    }
+    ngOnInit() {
+        this.openKeysSubscription();
+        this.openSearchSubscription();
+    }
+    ngOnChanges(changes) {
+        const itemChanges = changes.items;
+        const currenItems = itemChanges.currentValue;
+        if (itemChanges && !itemChanges.previousValue && currenItems) {
+            this.filteredItems$.next(currenItems);
+        }
+    }
+    ngOnDestroy() {
+        this.keySubscription.unsubscribe();
+        this.searchSubscription.unsubscribe();
+    }
+    openDropdown() {
+        this.open$.next(true);
+    }
+    hoverOverButton(id) {
+        this.focusedItemId$.next(id);
+    }
+    mouseEnterList() {
+        this.mouseOnList$.next(true);
+    }
+    mouseLeaveList() {
+        this.mouseOnList$.next(false);
+    }
+    resetFocus() {
+        this.focusedItemId$.next(this.searchId);
+    }
+    submit(id) {
+        this.itemSelected.emit(id);
+    }
+    closeDropdown() {
+        this.searchTerm.setValue('');
+        this.resetFocus();
+        this.open$.next(false);
+    }
+    openKeysSubscription() {
+        this.keySubscription = fromEvent(document, 'keyup')
+            .pipe(debounceTime(50))
+            .subscribe((event) => {
+            combineLatest([this.mouseOnList$, this.filteredItems$, this.focusedItemId$])
+                .pipe(take(1))
+                .subscribe(([mouseOnList, items, focusedId]) => {
+                const length = items.length;
+                const focusedIndex = items.findIndex((item) => item.id === focusedId);
+                const code = event.code;
+                const shiftKey = event.shiftKey;
+                const down = 'ArrowDown';
+                const tab = 'Tab';
+                const up = 'ArrowUp';
+                const enter = 'Enter';
+                const escape = 'Escape';
+                // close dropdown on pressing escape
+                if (code === escape) {
+                    this.closeDropdown();
+                }
+                // submit item when focus is on an item in the list and enter is pressed
+                if (code === enter && focusedId !== this.searchId) {
+                    this.submit(focusedId);
+                }
+                // only handle tab or arrow keypresses when items are shown and the mouse is not on the list
+                if (length > 0 && !mouseOnList) {
+                    // handle moving down in the list with arrow down or tab
+                    if (code === down || (code === tab && !shiftKey)) {
+                        // move focus to first item in the list when focus is on search box
+                        if (focusedId === this.searchId) {
+                            this.focusedItemId$.next(items[0].id);
+                            this.scrollButtonIntoView(focusedId);
+                            // move focus to next item in the list if focus is not on last item
+                        }
+                        else if (focusedIndex + 1 < length) {
+                            this.focusedItemId$.next(items[focusedIndex + 1].id);
+                            this.scrollButtonIntoView(focusedId);
+                        }
+                        // handle moving up in the list with up arrow up or shift+tab
+                    }
+                    else if ((code === up || (code === tab && shiftKey)) && focusedId !== this.searchId) {
+                        // move to previous item if focus is not on the first item in the list
+                        if (focusedIndex > 0) {
+                            this.focusedItemId$.next(items[focusedIndex - 1].id);
+                            this.scrollButtonIntoView(focusedId);
+                            // move focus to search box if focus is on first item in the list
+                        }
+                        else {
+                            this.resetFocus();
+                        }
+                    }
+                }
+            });
+        });
+    }
+    openSearchSubscription() {
+        this.searchSubscription = this.searchTerm.valueChanges.subscribe((searchTerm) => {
+            this.focusedItemId$.pipe(take(1)).subscribe((focusedItemId) => {
+                if (!searchTerm) {
+                    this.filteredItems$.next(this.items);
+                }
+                else {
+                    const filteredItems = this.items.filter((item) => item.text.toUpperCase().includes(searchTerm.toUpperCase()));
+                    this.filteredItems$.next(filteredItems);
+                    // move focus to search box if filtered list length is 0 or previously focused item is not in filtered list anymore
+                    if (filteredItems.length === 0 || !filteredItems.some((item) => item.id === focusedItemId)) {
+                        this.resetFocus();
+                    }
+                }
+                // move scrolling button into view to end of queue, so that DOM can be updated first
+                setTimeout(() => {
+                    this.scrollButtonIntoView(focusedItemId);
+                });
+            });
+        });
+    }
+    scrollButtonIntoView(id) {
+        this.filteredItems$.pipe(take(1)).subscribe((items) => {
+            const focusItemIndex = items.findIndex((item) => item.id === id);
+            const focusedButton = this.buttons.toArray()[focusItemIndex];
+            if (focusedButton) {
+                focusedButton.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+    }
+}
+SearchableDropdownComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-searchable-dropdown',
+                template: "<ng-container *ngIf=\"buttonText && items\">\n  <ng-container [ngTemplateOutlet]=\"(open$ | async) ? opened : closed\"> </ng-container>\n</ng-container>\n\n<ng-template #closed>\n  <ng-container *ngIf=\"style === 'button' || !style\">\n    <button class=\"btn btn-primary btn-sm dropdown-size\" (click)=\"openDropdown()\" [style.width.px]=\"width\">\n      {{ buttonText }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"style === 'underlinedText'\">\n    <h5 class=\"underline-button\" (click)=\"openDropdown()\" [style.width.px]=\"width\">\n      <b>\n        {{ buttonText }}\n      </b>\n    </h5>\n  </ng-container>\n</ng-template>\n\n<ng-template #opened>\n  <div class=\"dropdown-container\" [style.width.px]=\"width\">\n    <div class=\"dropdown-size search\" [style.width.px]=\"width\">\n      <input #search [ngClass]=\"{ disabled: disabled }\" [placeholder]=\"searchText\" [formControl]=\"searchTerm\" />\n      {{ search.focus() }}\n    </div>\n    <div class=\"dropdown-list\" (mouseenter)=\"mouseEnterList()\" (mouseleave)=\"mouseLeaveList()\">\n      <ng-container *ngIf=\"filteredItems$ | async as filteredItems\">\n        <ng-container *ngIf=\"filteredItems.length > 0 && focusedItemId$ | async as focusedItemId; else noResults\">\n          <button\n            #button\n            *ngFor=\"let item of filteredItems\"\n            [ngClass]=\"{ focus: focusedItemId === item.id, disabled: disabled }\"\n            class=\"dropdown-button dropdown-size\"\n            (click)=\"submit(item.id)\"\n            (mouseenter)=\"hoverOverButton(item.id)\"\n            (mouseleave)=\"resetFocus()\"\n            [style.width.px]=\"width\"\n          >\n            <span class=\"dropdown-button-text\">\n              {{ item.text }}\n            </span>\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"space\"> </ng-container>\n</ng-template>\n\n<ng-template #noResults>\n  <div class=\"dropdown-button dropdown-size disabled\" [style.width.px]=\"width\">\n    <span class=\"dropdown-button-text\">{{ noResultsText }}</span>\n  </div>\n</ng-template>\n\n<ng-template #space>\n  <div *ngIf=\"style === 'button' || !style\" class=\"dropdown-size\" [style.width.px]=\"width\"></div>\n  <h5 *ngIf=\"style === 'underlinedText'\" class=\"underline-button\"><b>-</b></h5>\n</ng-template>\n",
+                styles: [".dropdown-size{height:34px;width:250px}.underline-button{cursor:pointer;text-decoration:underline;width:250px}.dropdown-container{background-color:#fff;border:1px solid #e3e3e3;border-radius:3px;box-shadow:0 0 6px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;max-height:300px;overflow:hidden;padding:7px 0;position:fixed;width:250px;z-index:999}.dropdown-list{list-style:none;margin:0;overflow:auto;overflow-x:hidden;padding:0;z-index:9999}.search{align-items:center;border-bottom:1px solid #dee2e6;display:flex;flex-shrink:0;height:44px;padding:8px 24px}.search input{padding:0;width:100%}.dropdown-button,.search input,.search input:focus{border:none;outline:none}.dropdown-button{align-items:center;background-color:#fff;color:#504e4e;cursor:pointer;display:flex;font-size:1rem;font-weight:400;padding:8px 24px}.dropdown-button.focus{background-color:#f5f5f5}.dropdown-button-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.disabled{color:#959595;cursor:default;pointer-events:none}"]
+            },] }
+];
+SearchableDropdownComponent.propDecorators = {
+    style: [{ type: Input }],
+    items: [{ type: Input }],
+    buttonText: [{ type: Input }],
+    searchText: [{ type: Input }],
+    noResultsText: [{ type: Input }],
+    disabled: [{ type: Input }],
+    width: [{ type: Input }],
+    itemSelected: [{ type: Output }],
+    buttons: [{ type: ViewChildren, args: ['button',] }],
+    clickInside: [{ type: HostListener, args: ['click',] }],
+    clickout: [{ type: HostListener, args: ['document:click',] }]
+};
+
+/*
+ * 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 SearchableDropdownModule {
+}
+SearchableDropdownModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SearchableDropdownComponent],
+                imports: [CommonModule, ReactiveFormsModule],
+                exports: [SearchableDropdownComponent]
+            },] }
+];
+
+const formIoUploaderEditForm = () => ({
+    components: [
+        { key: 'type', type: 'hidden' },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'label',
+            label: 'Label',
+            placeholder: 'Label',
+            validate: {
+                required: true,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'key',
+            label: 'Property Name',
+            placeholder: 'Property Name',
+            tooltip: 'The name of this field in the API endpoint.',
+            validate: {
+                required: true,
+            }
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.title',
+            label: 'Title',
+            placeholder: 'Title',
+            tooltip: 'Leave empty to use the default title',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideTitle',
+            label: 'Hide title',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.subtitle',
+            label: 'Subtitle',
+            placeholder: 'Title',
+            tooltip: 'Leave empty to hide subtitle',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'number',
+            input: true,
+            key: 'customOptions.maxFileSize',
+            label: 'Maximum file size',
+            placeholder: 'Maximum file size',
+            defaultValue: 5,
+            validate: {
+                required: true,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideMaxFileSize',
+            label: 'Hide maximum file size',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.camera',
+            label: 'Allow camera uploads',
+            validate: {
+                required: false,
+            },
+        }
+    ],
+});
+
+const customUploaderType = 'valtimo-file';
+const COMPONENT_OPTIONS = {
+    type: customUploaderType,
+    selector: 'valtimo-form-io-uploader',
+    title: 'Valtimo File Upload',
+    group: 'basic',
+    icon: 'upload',
+    // set empty value to force formio to accept arrays as valid input value for this field type
+    emptyValue: [],
+    editForm: formIoUploaderEditForm,
+};
+function registerFormioUploadComponent(injector) {
+    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS);
+    // override setValue function to allow for setting an array value
+    class UploaderComponent extends originalUploadComponent {
+        setValue(value) {
+            this._customAngularElement.value = value;
+            return true;
+        }
+    }
+    registerCustomFormioComponentWithClass(COMPONENT_OPTIONS, FormIoUploaderComponent, UploaderComponent, injector);
+}
+
+/*
+ * 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 SearchableDropdownSelectComponent {
+    constructor() {
+        this.width = 250;
+        this.itemSelected = new EventEmitter();
+        this.clearSelection = new EventEmitter();
+    }
+    onSelect(id) {
+        this.itemSelected.emit(id);
+    }
+    onClearSelection() {
+        this.clearSelection.emit();
+    }
+}
+SearchableDropdownSelectComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-searchable-dropdown-select',
+                template: "<valtimo-searchable-dropdown\n  *ngIf=\"!hasSelection; else selection\"\n  [style]=\"style\"\n  [items]=\"items\"\n  [buttonText]=\"buttonText\"\n  [searchText]=\"searchText\"\n  [noResultsText]=\"noResultsText\"\n  [disabled]=\"disabled\"\n  [width]=\"width\"\n  (itemSelected)=\"onSelect($event)\"\n>\n</valtimo-searchable-dropdown>\n\n<ng-template #selection>\n  <div class=\"d-flex flex-row align-items-center\" [style.height.px]=\"style === 'button' ? 34 : null\">\n    <h5 class=\"selected-text\">{{ selectedText }} <b>{{ selectedTextValue }}</b></h5>\n    <button\n      type=\"button\"\n      class=\"close p-0 m-0 ml-2 d-flex text-danger\"\n      aria-label=\"Close\"\n      (click)=\"onClearSelection()\"\n      [title]=\"clearSelectionButtonTitle\"\n    >\n      <i class=\"clear-icon fa fa-times text-danger\"></i>\n    </button>\n  </div>\n</ng-template>\n\n",
+                styles: [".selected-text{margin:0}.clear-icon{font-size:13px}"]
+            },] }
+];
+SearchableDropdownSelectComponent.propDecorators = {
+    style: [{ type: Input }],
+    items: [{ type: Input }],
+    buttonText: [{ type: Input }],
+    searchText: [{ type: Input }],
+    noResultsText: [{ type: Input }],
+    disabled: [{ type: Input }],
+    selectedText: [{ type: Input }],
+    selectedTextValue: [{ type: Input }],
+    clearSelectionButtonTitle: [{ type: Input }],
+    hasSelection: [{ type: Input }],
+    width: [{ type: Input }],
+    itemSelected: [{ type: Output }],
+    clearSelection: [{ type: Output }]
+};
+
+/*
+ * 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 SearchableDropdownSelectModule {
+}
+SearchableDropdownSelectModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SearchableDropdownSelectComponent],
+                imports: [CommonModule, ReactiveFormsModule, SearchableDropdownModule],
+                exports: [SearchableDropdownSelectComponent]
+            },] }
+];
+
+/*
+ * 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 { AlertComponent, AlertModule, AlertService, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, CamundaFormComponent, CamundaFormModule, CardComponent, CardModule, ComponentsModule, DataListComponent, DataListModule, DropzoneComponent, DropzoneModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FormIoModule, FormIoUploaderComponent, FormioBuilderComponent, FormioComponent, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, PageHeaderComponent, PageHeaderModule, PageTitleComponent, PageTitleModule, ProgressBarComponent, ProgressBarModule, RightSidebarComponent, RightSidebarModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SpinnerModule, TimelineComponent, TimelineModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, ViewContentService, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customUploaderType, menuInitializer, registerFormioUploadComponent, ɵ0, CamundaGeneratedFormModule as ɵa, CamundaStringFormfieldComponent as ɵb, CamundaBooleanFormfieldComponent as ɵc, CamundaDateFormfieldComponent as ɵd, CamundaFormfieldService as ɵe, CamundaFormfieldGeneratorDirective as ɵf, CamundaLongFormfieldComponent as ɵg, CamundaEnumFormfieldComponent as ɵh, CamundaTextareaFormfieldComponent as ɵi, CamundaChoicefieldFormfieldComponent as ɵj, CamundaFormfieldValidationComponent as ɵk, CamundaGeneratedFormComponent as ɵl, CamundaCustomFormModule as ɵm, CamundaCustomFormComponent as ɵn, MenuComponent as ɵo, MenuItemTextComponent as ɵp, SubmenuItemTextComponent as ɵq, VersionService as ɵr, FormIoStateService as ɵs, FormIoDomService as ɵt, AppConfig as ɵu, SpinnerComponent as ɵv };
+//# sourceMappingURL=valtimo-components.js.map