@netgrif/components-core 6.3.0 → 6.4.0-beta.2

package/fesm2015/netgrif-components-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, Component, Inject, InjectionToken, Optional, Input, ViewChild, ViewChildren, TemplateRef, Type, Injector, SkipSelf, EventEmitter, Output, Pipe, Directive } from '@angular/core';
+import { NgModule, Injectable, Component, Inject, InjectionToken, Optional, Input, Injector, ViewChild, ViewChildren, SkipSelf, EventEmitter, Output, TemplateRef, Type, Pipe, Directive } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, registerLocaleData, CurrencyPipe, getCurrencySymbol } from '@angular/common';
 import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -7,10 +7,10 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { CdkStepperModule } from '@angular/cdk/stepper';
 import { CdkTableModule } from '@angular/cdk/table';
 import { CdkTreeModule, NestedTreeControl } from '@angular/cdk/tree';
-import { PortalModule, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { PortalModule, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i1$4 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, Validators, FormControl } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
 import { FlexLayoutModule, FlexModule } from '@angular/flex-layout';
 import { MatMomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -1007,6 +1007,7 @@ var dataField$2 = {
         noFile: "No File",
         clickToUpload: "Click to upload file",
         clickToDownload: "Click to download {{fileName}}",
+        clickToOpen: "Click to view file content",
         clickToDelete: "Click to delete file"
     },
     i18n: {
@@ -1523,6 +1524,7 @@ var dataField$1 = {
         noFile: "Žiadny súbor",
         clickToUpload: "Kliknutím nahrajte súbor",
         clickToDownload: "Kliknutím stiahnite súbor {{fileName}}",
+        clickToOpen: "Kliknutím zobrazíte obsah súboru",
         clickToDelete: "Kliknutím vymažte súbor"
     },
     i18n: {
@@ -2039,6 +2041,7 @@ var dataField = {
         noFile: "keine Datei",
         clickToUpload: "Klicken Sie, um eine Datei hochzuladen",
         clickToDownload: "Klicken Sie, um {{fileName}} herunterzuladen",
+        clickToOpen: "Klicken Sie hier, um den Dateiinhalt anzuzeigen",
         clickToDelete: "Klicken Sie, um die Datei zu löschen"
     },
     i18n: {
@@ -3871,6 +3874,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+const DATA_FIELD_PORTAL_DATA = new InjectionToken('DataFieldPortalData');
+
+class AbstractBaseDataFieldComponent {
+    constructor(dataFieldPortalData) {
+        if (!!dataFieldPortalData) {
+            this.dataField = dataFieldPortalData.dataField;
+            this.formControlRef = dataFieldPortalData.formControlRef;
+            this.showLargeLayout = dataFieldPortalData.showLargeLayout;
+            if (!this.dataField.initialized) {
+                this.formControlRef = new FormControl('', { updateOn: this.dataField.getUpdateOnStrategy() });
+                this.dataField.registerFormControl(this.formControlRef);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.dataField.disconnectFormControl();
+    }
+    checkPropertyInComponent(property) {
+        var _a, _b;
+        return !!((_b = (_a = this.dataField) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.properties)
+            && property in this.dataField.component.properties;
+    }
+    hasTitle() {
+        return this.dataField.title !== undefined && this.dataField.title !== '';
+    }
+    hasHint() {
+        return this.dataField.description !== undefined && this.dataField.description !== '';
+    }
+}
+AbstractBaseDataFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractBaseDataFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractBaseDataFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractBaseDataFieldComponent, selector: "ncc-base-data-field", inputs: { dataField: "dataField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractBaseDataFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-base-data-field',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    }, propDecorators: { dataField: [{
+                type: Input
+            }], formControlRef: [{
+                type: Input
+            }], showLargeLayout: [{
+                type: Input
+            }] } });
+
+/**
+ * Whether invalid data values should be sent to backend or not. Invalid data is NOT set to backend by default.
+ * You can use this InjectionToken to override this behavior in a specific application scope.
+ *
+ * This token is ultimately injected by individual data fields, so this option can be in theory applied at a very low level of granularity.
+ * The library implementation doesn't allow access to such low level components, so a custom implementation is necessary to provide this
+ * token at such low level. Applying the token to individual task views is achievable with the default implementation.
+ */
+const NAE_INFORM_ABOUT_INVALID_DATA = new InjectionToken('NaeInformAboutInvalidData');
+
+/**
+ * Holds the common functionality for all DataFieldComponents.
+ */
+class AbstractDataFieldComponent {
+    constructor(_informAboutInvalidData) {
+        this._informAboutInvalidData = _informAboutInvalidData;
+        this.taskOffset = 0;
+        this._formControl = new FormControl('', { updateOn: 'blur' });
+    }
+    /**
+     * Registers the {@link FormControl} to the provided data field.
+     *
+     * See [DataField.registerFormControl]{@link DataField#registerFormControl} form more information.
+     */
+    ngOnInit() {
+        this.dataField.registerFormControl(this._formControl);
+        this.dataField.sendInvalidValues = this._informAboutInvalidData;
+    }
+    ngOnDestroy() {
+        this.dataField.disconnectFormControl();
+    }
+    /**
+     * The [FormControl]{@link https://angular.io/api/forms/FormControl} object that should be used to control any rendered forms.
+     */
+    get formControl() {
+        return this._formControl;
+    }
+    hasTitle() {
+        return this.dataField.title !== undefined && this.dataField.title !== '';
+    }
+}
+AbstractDataFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDataFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDataFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDataFieldComponent, selector: "ncc-abstract-datafield", inputs: { dataField: "dataField", taskOffset: "taskOffset" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDataFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-datafield',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                    }] }];
+    }, propDecorators: { dataField: [{
+                type: Input
+            }], taskOffset: [{
+                type: Input
+            }] } });
+
+/**
+ * @deprecated
+ * */
+class AbstractBooleanFieldComponent extends AbstractDataFieldComponent {
+    constructor(informAboutInvalidData) {
+        super(informAboutInvalidData);
+        this._formControl = new FormControl('');
+    }
+}
+AbstractBooleanFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractBooleanFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractBooleanFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractBooleanFieldComponent, selector: "ncc-abstract-boolean-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractBooleanFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-boolean-field',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                    }] }];
+    }, propDecorators: { dataField: [{
+                type: Input
+            }] } });
+
+const DEFAULT = "default";
+var ComponentPrefixes;
+(function (ComponentPrefixes) {
+    ComponentPrefixes["BOOLEAN"] = "boolean-";
+    ComponentPrefixes["BUTTON"] = "button-";
+    ComponentPrefixes["DATE"] = "date-";
+    ComponentPrefixes["DATE_TIME"] = "date-time-";
+    ComponentPrefixes["ENUMERATION"] = "enumeration-";
+    ComponentPrefixes["FILE"] = "file-";
+    ComponentPrefixes["FILE_LIST"] = "file-list-";
+    ComponentPrefixes["FILTER"] = "filter-";
+    ComponentPrefixes["I18N"] = "i18n-";
+    ComponentPrefixes["MULTICHOICE"] = "multichoice-";
+    ComponentPrefixes["NUMBER"] = "number-";
+    ComponentPrefixes["TASK_REF"] = "task-ref-";
+    ComponentPrefixes["CASE_REF"] = "case-ref-";
+    ComponentPrefixes["TEXT"] = "text-";
+    ComponentPrefixes["USER"] = "user-";
+    ComponentPrefixes["USER_LIST"] = "user-list-";
+})(ComponentPrefixes || (ComponentPrefixes = {}));
+
+var UpdateStrategy;
+(function (UpdateStrategy) {
+    UpdateStrategy["CHANGE"] = "change";
+    UpdateStrategy["BLUR"] = "blur";
+    UpdateStrategy["SUBMIT"] = "submit";
+})(UpdateStrategy || (UpdateStrategy = {}));
+
 /**
  * Holds the logic common to all data field Model objects.
  * @typeparam T - type of the `value` property of the data field
@@ -4070,13 +4243,22 @@ class DataField {
     set input(value) {
         this._input = value;
     }
+    get formControlRef() {
+        return this._formControlRef;
+    }
+    set formControlRef(formControl) {
+        this._formControlRef = formControl;
+    }
+    getUpdateOnStrategy() {
+        return UpdateStrategy.BLUR;
+    }
     /**
      * This function resolve type of component for HTML
      * @returns type of component in string
      */
     getComponentType() {
         var _a, _b;
-        return (_b = (_a = this.component) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '';
+        return (_b = (_a = this.component) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : DEFAULT;
     }
     destroy() {
         this._value.complete();
@@ -4092,6 +4274,7 @@ class DataField {
             throw new Error('Data field can be initialized only once!'
                 + ' Disconnect the previous form control before initializing the data field again!');
         }
+        this.formControlRef = formControl;
         formControl.setValidators(this.resolveFormControlValidators());
         this._formControlValueSubscription = formControl.valueChanges.pipe(distinctUntilChanged(this.valueEquality)).subscribe(newValue => {
             this._valid = this._determineFormControlValidity(formControl);
@@ -4300,6 +4483,12 @@ class BooleanField extends DataField {
     constructor(stringId, title, value, behavior, placeholder, description, layout, validations, component, parentTaskId) {
         super(stringId, title, value, behavior, placeholder, description, layout, validations, component, parentTaskId);
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.BOOLEAN + this.getComponentType();
+    }
+    getUpdateOnStrategy() {
+        return UpdateStrategy.CHANGE;
+    }
     resolveValidations() {
         const result = [];
         this.validations.forEach(item => {
@@ -4314,76 +4503,16 @@ class BooleanField extends DataField {
     }
 }
 
-/**
- * Whether invalid data values should be sent to backend or not. Invalid data is NOT set to backend by default.
- * You can use this InjectionToken to override this behavior in a specific application scope.
- *
- * This token is ultimately injected by individual data fields, so this option can be in theory applied at a very low level of granularity.
- * The library implementation doesn't allow access to such low level components, so a custom implementation is necessary to provide this
- * token at such low level. Applying the token to individual task views is achievable with the default implementation.
- */
-const NAE_INFORM_ABOUT_INVALID_DATA = new InjectionToken('NaeInformAboutInvalidData');
-
-/**
- * Holds the common functionality for all DataFieldComponents.
- */
-class AbstractDataFieldComponent {
-    constructor(_informAboutInvalidData) {
-        this._informAboutInvalidData = _informAboutInvalidData;
-        this.taskOffset = 0;
-        this._formControl = new FormControl('', { updateOn: 'blur' });
-    }
-    /**
-     * Registers the {@link FormControl} to the provided data field.
-     *
-     * See [DataField.registerFormControl]{@link DataField#registerFormControl} form more information.
-     */
-    ngOnInit() {
-        this.dataField.registerFormControl(this._formControl);
-        this.dataField.sendInvalidValues = this._informAboutInvalidData;
-    }
-    ngOnDestroy() {
-        this.dataField.disconnectFormControl();
-    }
-    /**
-     * The [FormControl]{@link https://angular.io/api/forms/FormControl} object that should be used to control any rendered forms.
-     */
-    get formControl() {
-        return this._formControl;
-    }
-}
-AbstractDataFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDataFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AbstractDataFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDataFieldComponent, selector: "ncc-abstract-datafield", inputs: { dataField: "dataField", taskOffset: "taskOffset" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDataFieldComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ncc-abstract-datafield',
-                    template: ''
-                }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
-                    }] }];
-    }, propDecorators: { dataField: [{
-                type: Input
-            }], taskOffset: [{
-                type: Input
-            }] } });
-
-class AbstractBooleanFieldComponent extends AbstractDataFieldComponent {
-    constructor(_translate, informAboutInvalidData) {
-        super(informAboutInvalidData);
+class AbstractBooleanDefaultFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(_translate, dataFieldPortalData) {
+        super(dataFieldPortalData);
         this._translate = _translate;
-        this._formControl = new FormControl('');
     }
     getErrorMessage() {
-        if (this.formControl.hasError(BooleanFieldValidation.REQUIRED)) {
+        if (this.formControlRef.hasError(BooleanFieldValidation.REQUIRED)) {
             return this._translate.instant('dataField.validations.required');
         }
-        else if (this.formControl.hasError(BooleanFieldValidation.REQUIRED_TRUE)) {
+        else if (this.formControlRef.hasError(BooleanFieldValidation.REQUIRED_TRUE)) {
             return this.resolveErrorMessage(this.dataField, BooleanFieldValidation.REQUIRED_TRUE, this._translate.instant('dataField.validations.requiredTrue'));
         }
         return '';
@@ -4399,17 +4528,42 @@ class AbstractBooleanFieldComponent extends AbstractDataFieldComponent {
         return generalMessage;
     }
 }
-AbstractBooleanFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractBooleanFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AbstractBooleanFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractBooleanFieldComponent, selector: "ncc-abstract-boolean-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractBooleanFieldComponent, decorators: [{
+AbstractBooleanDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractBooleanDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractBooleanDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractBooleanDefaultFieldComponent, selector: "ncc-abstract-boolean-default-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractBooleanDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ncc-abstract-boolean-field',
+                    selector: 'ncc-abstract-boolean-default-field',
                     template: ''
                 }]
         }], ctorParameters: function () {
         return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
                         type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
+
+/**
+ * @deprecated
+ * */
+class AbstractButtonFieldComponent extends AbstractDataFieldComponent {
+    constructor(informAboutInvalidData) {
+        super(informAboutInvalidData);
+    }
+}
+AbstractButtonFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractButtonFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractButtonFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractButtonFieldComponent, selector: "ncc-abstract-button-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractButtonFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-button-field',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
                     }, {
                         type: Inject,
                         args: [NAE_INFORM_ABOUT_INVALID_DATA]
@@ -4426,6 +4580,9 @@ class ButtonField extends DataField {
     constructor(stringId, title, behavior, value, placeholder, description, layout, validations, component, parentTaskId) {
         super(stringId, title, (value === undefined) ? 0 : value, behavior, placeholder, description, layout, validations, component, parentTaskId);
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.BUTTON + DEFAULT;
+    }
 }
 
 /** Abstract dialog for all types of dialog components is used for data injection and dialog reference holding. */
@@ -4634,14 +4791,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$3.MatDialog }]; } });
 
-class AbstractButtonFieldComponent extends AbstractDataFieldComponent {
-    constructor(_translate, _dialogService, informAboutInvalidData) {
-        super(informAboutInvalidData);
+class AbstractButtonDefaultFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(_translate, _dialogService, dataFieldPortalData) {
+        super(dataFieldPortalData);
         this._translate = _translate;
         this._dialogService = _dialogService;
     }
     getErrorMessage() {
-        if (this.formControl.hasError(ButtonFieldValidation.REQUIRED)) {
+        if (this.formControlRef.hasError(ButtonFieldValidation.REQUIRED)) {
             return this._translate.instant('dataField.validations.required');
         }
     }
@@ -4656,26 +4813,26 @@ class AbstractButtonFieldComponent extends AbstractDataFieldComponent {
      * This function depends on type of component, if had dialogText provided in component, then its open a dialog with that text
      */
     resolveValue() {
-        if (this.dataField.component && this.dataField.component.properties &&
-            this.dataField.component.properties.dialogText !== undefined) {
+        var _a, _b, _c, _d;
+        if (!!((_b = (_a = this.dataField.component) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.dialogText) && ((_d = (_c = this.dataField.component) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.dialogTitle)) {
             const dialogRef = this._dialogService.openConfirmDialog(this.dataField.component.properties.dialogTitle, this.dataField.component.properties.dialogText, this._translate.instant('dialog.close'), this._translate.instant('dialog.submit'));
             dialogRef.afterClosed().pipe(take(1)).subscribe(result => {
                 if (result && result.confirmed) {
-                    this.formControl.setValue(this.formControl.value + 1);
+                    this.formControlRef.setValue(this.formControlRef.value + 1);
                 }
             });
         }
         else {
-            this.formControl.setValue(this.formControl.value + 1);
+            this.formControlRef.setValue(this.formControlRef.value + 1);
         }
     }
 }
-AbstractButtonFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractButtonFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DialogService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AbstractButtonFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractButtonFieldComponent, selector: "ncc-abstract-button-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractButtonFieldComponent, decorators: [{
+AbstractButtonDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractButtonDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DialogService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractButtonDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractButtonDefaultFieldComponent, selector: "ncc-abstract-button-default-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractButtonDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ncc-abstract-button-field',
+                    selector: 'ncc-abstract-button-default-field',
                     template: ''
                 }]
         }], ctorParameters: function () {
@@ -4683,11 +4840,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                        args: [DATA_FIELD_PORTAL_DATA]
                     }] }];
-    }, propDecorators: { dataField: [{
-                type: Input
-            }] } });
+    } });
 
 /**
  * This class wraps a `boolean` variable into an object, so it can be passed by reference rather than by value to other objects.
@@ -4747,6 +4902,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+class ComponentRegistryService {
+    constructor() {
+        this.registry = new Map();
+        this.typeRegistry = new Map();
+    }
+    register(component, factory) {
+        this.registry.set(component, factory);
+    }
+    registerType(key, type) {
+        this.typeRegistry.set(key, type);
+    }
+    contains(component) {
+        return this.registry.has(component);
+    }
+    get(component, injector) {
+        if (!this.registry.has(component)) {
+            return undefined;
+        }
+        return this.registry.get(component)(injector);
+    }
+    getType(key) {
+        if (!this.typeRegistry.has(key)) {
+            return undefined;
+        }
+        return this.typeRegistry.get(key);
+    }
+}
+ComponentRegistryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ComponentRegistryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComponentRegistryService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComponentRegistryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
 /**
  * Provides a responsive layout to data fields where their appearance can change based on the width of space they have available.
  *
@@ -4760,9 +4951,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See {@link DataField} and {@link TemplateAppearance} for more information.
  */
 class AbstractDataFieldTemplateComponent {
-    constructor(_paperView, _config) {
+    constructor(_paperView, _config, _componentRegistry, injector) {
         this._paperView = _paperView;
         this._config = _config;
+        this._componentRegistry = _componentRegistry;
+        this.injector = injector;
         /**
          * If the available space has a width smaller that this breakpoint the datafield will fill 100% of the available space.
          *
@@ -4808,10 +5001,20 @@ class AbstractDataFieldTemplateComponent {
         else {
             this._isNetgrifTemplate = this._isConfiguredNetgrifTemplate;
         }
+        this._componentPortal = this.resolveComponentPortal(this.dataField, this.showLargeLayout, this.dataField.formControlRef, this.additionalFieldProperties);
     }
     get dataField() {
         return this._dataField;
     }
+    get componentPortal() {
+        return this._componentPortal;
+    }
+    get additionalFieldProperties() {
+        return this._additionalFieldProperties;
+    }
+    set additionalFieldProperties(value) {
+        this._additionalFieldProperties = value;
+    }
     /**
      * Function that is called when the Component changes dimension and
      * determines whether the "small" or "large" layout should be displayed.
@@ -4824,6 +5027,29 @@ class AbstractDataFieldTemplateComponent {
             this._showLargeLayout.value = this.evaluateTemplate();
         return this._showLargeLayout.value;
     }
+    hasComponent() {
+        return this._componentRegistry.contains(this.dataField.getTypedComponentType());
+    }
+    resolveComponentPortal(dataField, showLargeLayout, formControlRef, additionalFieldProperties) {
+        if (this.hasComponent()) {
+            const portalInjector = Injector.create({
+                providers: [
+                    {
+                        provide: DATA_FIELD_PORTAL_DATA,
+                        useValue: {
+                            dataField: dataField,
+                            showLargeLayout: showLargeLayout,
+                            formControlRef: formControlRef,
+                            additionalFieldProperties
+                        }
+                    }
+                ],
+                parent: this.injector
+            });
+            return this._componentRegistry.get(this.dataField.getTypedComponentType(), portalInjector);
+        }
+        return undefined;
+    }
     /**
      * @returns `false` if the data field uses the `TemplateAppearance.MATERIAL` and `true` otherwise.
      */
@@ -4836,26 +5062,60 @@ class AbstractDataFieldTemplateComponent {
     isPaperView() {
         return this._paperView.paperView;
     }
+    isNotButton() {
+        return !(this.dataField instanceof ButtonField);
+    }
 }
-AbstractDataFieldTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDataFieldTemplateComponent, deps: [{ token: PaperViewService }, { token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
-AbstractDataFieldTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDataFieldTemplateComponent, selector: "ncc-abstract-datafield-template", inputs: { dataFieldTemplate: "dataFieldTemplate", layoutChangeWidthBreakpoint: "layoutChangeWidthBreakpoint", offset: "offset", dataField: "dataField" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["dataFieldContainer"], descendants: true }], ngImport: i0, template: '', isInline: true });
+AbstractDataFieldTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDataFieldTemplateComponent, deps: [{ token: PaperViewService }, { token: ConfigurationService }, { token: ComponentRegistryService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDataFieldTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDataFieldTemplateComponent, selector: "ncc-abstract-datafield-template", inputs: { dataFieldTemplate: "dataFieldTemplate", layoutChangeWidthBreakpoint: "layoutChangeWidthBreakpoint", offset: "offset", _additionalFieldProperties: "_additionalFieldProperties", dataField: "dataField", additionalFieldProperties: "additionalFieldProperties" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["dataFieldContainer"], descendants: true }], ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDataFieldTemplateComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-datafield-template',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: PaperViewService }, { type: ConfigurationService }]; }, propDecorators: { dataFieldTemplate: [{
+        }], ctorParameters: function () { return [{ type: PaperViewService }, { type: ConfigurationService }, { type: ComponentRegistryService }, { type: i0.Injector }]; }, propDecorators: { dataFieldTemplate: [{
                 type: Input
             }], layoutChangeWidthBreakpoint: [{
                 type: Input
             }], offset: [{
                 type: Input
+            }], _additionalFieldProperties: [{
+                type: Input
             }], container: [{
                 type: ViewChild,
                 args: ['dataFieldContainer']
             }], dataField: [{
                 type: Input
+            }], additionalFieldProperties: [{
+                type: Input
+            }] } });
+
+/**
+ * @deprecated
+ * */
+class AbstractDateFieldComponent extends AbstractDataFieldComponent {
+    constructor(informAboutInvalidData) {
+        super(informAboutInvalidData);
+    }
+}
+AbstractDateFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDateFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDateFieldComponent, selector: "ncc-abstract-date-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-date-field',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                    }] }];
+    }, propDecorators: { dataField: [{
+                type: Input
             }] } });
 
 var AbstractTimeInstanceFieldValidation;
@@ -4961,16 +5221,16 @@ class AbstractTimeInstanceField extends DataField {
     }
 }
 
-class AbstractTimeInstanceFieldComponent extends AbstractDataFieldComponent {
-    constructor(_translate, informAboutInvalidData) {
-        super(informAboutInvalidData);
+class AbstractTimeInstanceFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(_translate, dataFieldPortalData) {
+        super(dataFieldPortalData);
         this._translate = _translate;
     }
     buildErrorMessage(dataField) {
-        if (this.formControl.hasError(AbstractTimeInstanceFieldValidation.REQUIRED)) {
+        if (this.formControlRef.hasError(AbstractTimeInstanceFieldValidation.REQUIRED)) {
             return this._translate.instant('dataField.validations.required');
         }
-        if (this.formControl.hasError(AbstractTimeInstanceFieldValidation.VALID_BETWEEN)) {
+        if (this.formControlRef.hasError(AbstractTimeInstanceFieldValidation.VALID_BETWEEN)) {
             const tmp = dataField.validations.find(value => value.validationRule.includes(AbstractTimeInstanceFieldValidation.BETWEEN)).validationRule.split(' ');
             const parts = tmp[1].split(',');
             let left = AbstractTimeInstanceField.parseDate(parts[0]);
@@ -4985,10 +5245,10 @@ class AbstractTimeInstanceFieldComponent extends AbstractDataFieldComponent {
             }
             return this.resolveErrorMessage(dataField, AbstractTimeInstanceFieldValidation.BETWEEN, this._translate.instant('dataField.validations.dateRange', { left, right }));
         }
-        if (this.formControl.hasError(AbstractTimeInstanceFieldValidation.VALID_WORKDAY)) {
+        if (this.formControlRef.hasError(AbstractTimeInstanceFieldValidation.VALID_WORKDAY)) {
             return this.resolveErrorMessage(dataField, AbstractTimeInstanceFieldValidation.WORKDAY, this._translate.instant('dataField.validations.workday'));
         }
-        if (this.formControl.hasError(AbstractTimeInstanceFieldValidation.VALID_WEEKEND)) {
+        if (this.formControlRef.hasError(AbstractTimeInstanceFieldValidation.VALID_WEEKEND)) {
             return this.resolveErrorMessage(dataField, AbstractTimeInstanceFieldValidation.WEEKEND, this._translate.instant('dataField.validations.weekend'));
         }
         return '';
@@ -5001,7 +5261,7 @@ class AbstractTimeInstanceFieldComponent extends AbstractDataFieldComponent {
         return generalMessage;
     }
 }
-AbstractTimeInstanceFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTimeInstanceFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractTimeInstanceFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTimeInstanceFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AbstractTimeInstanceFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractTimeInstanceFieldComponent, selector: "ncc-abstract-time-instance-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTimeInstanceFieldComponent, decorators: [{
             type: Component,
@@ -5014,30 +5274,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                        args: [DATA_FIELD_PORTAL_DATA]
                     }] }];
     } });
 
-class AbstractDateFieldComponent extends AbstractTimeInstanceFieldComponent {
-    constructor(_translate, informAboutInvalidData) {
-        super(_translate, informAboutInvalidData);
+class AbstractDateDefaultFieldComponent extends AbstractTimeInstanceFieldComponent {
+    constructor(_translate, dataFieldPortalData) {
+        super(_translate, dataFieldPortalData);
         this._translate = _translate;
     }
     getErrorMessage() {
         return this.buildErrorMessage(this.dataField);
     }
 }
-AbstractDateFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AbstractDateFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDateFieldComponent, selector: "ncc-abstract-date-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateFieldComponent, decorators: [{
+AbstractDateDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDateDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDateDefaultFieldComponent, selector: "ncc-abstract-date-default-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ncc-abstract-date-field',
+                    selector: 'ncc-abstract-date-default-field',
                     template: ''
                 }]
         }], ctorParameters: function () {
         return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
                         type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
+
+/**
+ * @deprecated
+ * */
+class AbstractDateTimeFieldComponent extends AbstractDataFieldComponent {
+    constructor(informAboutInvalidData) {
+        super(informAboutInvalidData);
+    }
+}
+AbstractDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateTimeFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDateTimeFieldComponent, selector: "ncc-abstract-date-time-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateTimeFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-date-time-field',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
                     }, {
                         type: Inject,
                         args: [NAE_INFORM_ABOUT_INVALID_DATA]
@@ -5046,21 +5331,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
-class AbstractDateTimeFieldComponent extends AbstractTimeInstanceFieldComponent {
-    constructor(_translate, informAboutInvalidData) {
-        super(_translate, informAboutInvalidData);
+class AbstractDateTimeDefaultFieldComponent extends AbstractTimeInstanceFieldComponent {
+    constructor(_translate, dataFieldPortalData) {
+        super(_translate, dataFieldPortalData);
         this._translate = _translate;
     }
     getErrorMessage() {
         return this.buildErrorMessage(this.dataField);
     }
 }
-AbstractDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateTimeFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AbstractDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDateTimeFieldComponent, selector: "ncc-abstract-date-time-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateTimeFieldComponent, decorators: [{
+AbstractDateTimeDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateTimeDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDateTimeDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDateTimeDefaultFieldComponent, selector: "ncc-abstract-date-time-default-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDateTimeDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ncc-abstract-date-time-field',
+                    selector: 'ncc-abstract-date-time-default-field',
                     template: ''
                 }]
         }], ctorParameters: function () {
@@ -5068,12 +5353,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                        args: [DATA_FIELD_PORTAL_DATA]
                     }] }];
-    }, propDecorators: { dataField: [{
-                type: Input
-            }] } });
+    } });
 
+/**
+ * @deprecated
+ * */
 class AbstractEnumerationFieldComponent extends AbstractDataFieldComponent {
     constructor(informAboutInvalidData) {
         super(informAboutInvalidData);
@@ -5099,44 +5385,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
-class AbstractEnumerationSelectFieldComponent {
+class AbstractEnumerationSelectFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(dataFieldPortalData) {
+        super(dataFieldPortalData);
+    }
 }
-AbstractEnumerationSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractEnumerationSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationSelectFieldComponent, selector: "ncc-abstract-enumeration-select-field", inputs: { enumerationField: "enumerationField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, ngImport: i0, template: '', isInline: true });
+AbstractEnumerationSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationSelectFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractEnumerationSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationSelectFieldComponent, selector: "ncc-abstract-enumeration-select-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationSelectFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-enumeration-select-field',
                     template: ''
                 }]
-        }], propDecorators: { enumerationField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
-class AbstractEnumerationListFieldComponent {
+class AbstractEnumerationListFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(dataFieldPortalData) {
+        super(dataFieldPortalData);
+    }
     resetEnum() {
         this.formControlRef.reset();
     }
 }
-AbstractEnumerationListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractEnumerationListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationListFieldComponent, selector: "ncc-abstract-enumeration-list-field", inputs: { enumerationField: "enumerationField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, ngImport: i0, template: '', isInline: true });
+AbstractEnumerationListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationListFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractEnumerationListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationListFieldComponent, selector: "ncc-abstract-enumeration-list-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationListFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-enumeration-list-field',
                     template: ''
                 }]
-        }], propDecorators: { enumerationField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 /**
  * Contains types of renderable data fields.
@@ -5158,6 +5452,7 @@ var FieldTypeResource;
     FieldTypeResource["ENUMERATION_MAP"] = "enumeration_map";
     FieldTypeResource["MULTICHOICE_MAP"] = "multichoice_map";
     FieldTypeResource["TASK_REF"] = "taskRef";
+    FieldTypeResource["CASE_REF"] = "caseRef";
     FieldTypeResource["FILTER"] = "filter";
     FieldTypeResource["I18N"] = "i18n";
 })(FieldTypeResource || (FieldTypeResource = {}));
@@ -5183,9 +5478,15 @@ class EnumerationField extends DataField {
     get fieldType() {
         return this._fieldType;
     }
+    getUpdateOnStrategy() {
+        return UpdateStrategy.CHANGE;
+    }
     valueChanges() {
         return this._value.pipe(debounceTime(this.REQUEST_DEBOUNCE_TIME));
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.ENUMERATION + this.getComponentType();
+    }
     resolveFormControlValidators() {
         const result = [];
         if (this.behavior.required) {
@@ -5208,13 +5509,14 @@ var EnumerationAutocompleteFilterProperty;
     EnumerationAutocompleteFilterProperty["SUBSTRING"] = "substring";
 })(EnumerationAutocompleteFilterProperty || (EnumerationAutocompleteFilterProperty = {}));
 
-class AbstractEnumerationAutocompleteSelectFieldComponent {
-    constructor(_translate) {
+class AbstractEnumerationAutocompleteSelectFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(_translate, dataFieldPortalData) {
+        super(dataFieldPortalData);
         this._translate = _translate;
         this.renderSelection = (key) => {
             if (key !== undefined && key !== '' && key !== null) {
-                if (this.enumerationField.choices.find(choice => choice.key === key)) {
-                    return this.enumerationField.choices.find(choice => choice.key === key).value;
+                if (this.dataField.choices.find(choice => choice.key === key)) {
+                    return this.dataField.choices.find(choice => choice.key === key).value;
                 }
             }
             return key;
@@ -5226,12 +5528,9 @@ class AbstractEnumerationAutocompleteSelectFieldComponent {
     ngOnDestroy() {
         this.filteredOptions = undefined;
     }
-    checkPropertyInComponent(property) {
-        return !!this.enumerationField.component && !!this.enumerationField.component.properties && property in this.enumerationField.component.properties;
-    }
     filterType() {
         if (this.checkPropertyInComponent('filter')) {
-            return this.enumerationField.component.properties.filter;
+            return this.dataField.component.properties.filter;
         }
     }
     _filter(value) {
@@ -5248,7 +5547,7 @@ class AbstractEnumerationAutocompleteSelectFieldComponent {
     }
     _filterInclude(value) {
         const filterValue = value === null || value === void 0 ? void 0 : value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-        return this.enumerationField.choices.filter(option => option.value.toLowerCase()
+        return this.dataField.choices.filter(option => option.value.toLowerCase()
             .normalize('NFD')
             .replace(/[\u0300-\u036f]/g, '')
             .includes(filterValue));
@@ -5260,7 +5559,7 @@ class AbstractEnumerationAutocompleteSelectFieldComponent {
      */
     _filterIndexOf(value) {
         const filterValue = value === null || value === void 0 ? void 0 : value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-        return this.enumerationField.choices.filter(option => option.value.toLowerCase().normalize('NFD')
+        return this.dataField.choices.filter(option => option.value.toLowerCase().normalize('NFD')
             .replace(/[\u0300-\u036f]/g, '').indexOf(filterValue) === 0);
     }
     change() {
@@ -5277,76 +5576,116 @@ class AbstractEnumerationAutocompleteSelectFieldComponent {
         }
     }
 }
-AbstractEnumerationAutocompleteSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationAutocompleteSelectFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-AbstractEnumerationAutocompleteSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationAutocompleteSelectFieldComponent, selector: "ncc-abstract-enumeration-autocomplete-field", inputs: { enumerationField: "enumerationField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, viewQueries: [{ propertyName: "text", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: '', isInline: true });
+AbstractEnumerationAutocompleteSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationAutocompleteSelectFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractEnumerationAutocompleteSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationAutocompleteSelectFieldComponent, selector: "ncc-abstract-enumeration-autocomplete-field", viewQueries: [{ propertyName: "text", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationAutocompleteSelectFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-enumeration-autocomplete-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; }, propDecorators: { enumerationField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }], text: [{
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    }, propDecorators: { text: [{
                 type: ViewChild,
                 args: ['input']
             }] } });
 
-class AbstractEnumerationStepperFieldComponent {
-    constructor(ref) {
+class AbstractEnumerationStepperFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(ref, dataFieldPortalData) {
+        super(dataFieldPortalData);
         this.ref = ref;
         this.arrowStepper = false;
     }
     ngOnInit() {
-        if (this.enumerationField && this.enumerationField.component && this.enumerationField.component.properties &&
-            this.enumerationField.component.properties.arrowStepper) {
-            this.arrowStepper = this.enumerationField.component.properties.arrowStepper === 'true';
-        }
+        var _a, _b;
+        this.arrowStepper = ((_b = (_a = this.dataField.component) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.arrowStepper) === 'true';
     }
     canShowDoneIcon(index) {
-        return index <= this.enumerationField.choices.findIndex(choice => choice.key === this.enumerationField.value);
+        return index <= this.dataField.choices.findIndex(choice => choice.key === this.dataField.value);
     }
     isSelected(key) {
-        return key === this.enumerationField.value;
+        return key === this.dataField.value;
     }
     ngAfterViewChecked() {
         if (!!this.steps && !!this.steps.toArray()) {
             const width = this.ref.nativeElement.parentElement.offsetWidth;
-            const maxWidth = (width + (this.enumerationField.choices.length - 1) * 20) / this.enumerationField.choices.length;
+            const maxWidth = (width + (this.dataField.choices.length - 1) * 20) / this.dataField.choices.length;
             this.steps.toArray().forEach(step => {
                 step.nativeElement.style.maxWidth = maxWidth >= 72 ? maxWidth + 'px' : '72px';
             });
         }
     }
     setStepperValue(key) {
-        if (!this.enumerationField.disabled) {
+        if (!this.formControlRef.disabled) {
             this.formControlRef.setValue(key);
         }
     }
+    hasTitle() {
+        return this.dataField.title !== undefined && this.dataField.title !== '';
+    }
+    resolveValue(key) {
+        var _a;
+        return (_a = this.dataField.choices.find(k => k.key === key)) === null || _a === void 0 ? void 0 : _a.value;
+    }
 }
-AbstractEnumerationStepperFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationStepperFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AbstractEnumerationStepperFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationStepperFieldComponent, selector: "ncc-abstract-enumeration-stepper-field", inputs: { enumerationField: "enumerationField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, viewQueries: [{ propertyName: "steps", predicate: ["oneStep"], descendants: true }], ngImport: i0, template: '', isInline: true });
+AbstractEnumerationStepperFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationStepperFieldComponent, deps: [{ token: i0.ElementRef }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractEnumerationStepperFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationStepperFieldComponent, selector: "ncc-abstract-enumeration-stepper-field", viewQueries: [{ propertyName: "steps", predicate: ["oneStep"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationStepperFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-enumeration-stepper-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { enumerationField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }], steps: [{
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    }, propDecorators: { steps: [{
                 type: ViewChildren,
                 args: ['oneStep']
             }] } });
 
+/**
+ * @deprecated
+ * */
+/**
+ * Component that is created in the body of the task panel accord on the Petri Net, which must be bind properties.
+ */
+class AbstractFileFieldComponent extends AbstractDataFieldComponent {
+    constructor(informAboutInvalidData) {
+        super(informAboutInvalidData);
+    }
+}
+AbstractFileFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractFileFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractFileFieldComponent, selector: "ncc-abstract-file-field", inputs: { dataField: "dataField", taskId: "taskId" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-file-field',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                    }] }];
+    }, propDecorators: { dataField: [{
+                type: Input
+            }], taskId: [{
+                type: Input
+            }] } });
+
 /**
  * Supported types of files a user can select through a file picker.
  */
@@ -5407,6 +5746,9 @@ class FileField extends DataField {
     get updated() {
         return this._update.asObservable();
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.FILE + this.getComponentType();
+    }
     valueWithoutChange(value) {
         this.changed = false;
         this._value.next(value !== null && value !== void 0 ? value : {});
@@ -5435,6 +5777,7 @@ class FileField extends DataField {
             throw new Error('Data field can be initialized only once!'
                 + ' Disconnect the previous form control before initializing the data field again!');
         }
+        this.formControlRef = formControl;
         formControl.setValidators(this.resolveFormControlValidators());
         this._myValueSubscription = this._value.pipe(distinctUntilChanged(this.valueEquality)).subscribe(newValue => {
             var _a;
@@ -5453,6 +5796,11 @@ class FileField extends DataField {
     }
 }
 
+const PREVIEW = 'preview';
+const PREVIEW_BUTTON = 'preview_button';
+const FILE_FIELD_HEIGHT = 75;
+const FILE_FIELD_PADDING = 16;
+
 /**
  * Determines the type of resource the Filter can search for.
  *
@@ -5488,8 +5836,8 @@ var TextFieldComponent;
 })(TextFieldComponent || (TextFieldComponent = {}));
 var TextAreaHeight;
 (function (TextAreaHeight) {
-    TextAreaHeight[TextAreaHeight["OUTLINE"] = 27] = "OUTLINE";
-    TextAreaHeight[TextAreaHeight["FILL_STANDARD"] = 34] = "FILL_STANDARD";
+    TextAreaHeight[TextAreaHeight["OUTLINE"] = 20] = "OUTLINE";
+    TextAreaHeight[TextAreaHeight["FILL_STANDARD"] = 22] = "FILL_STANDARD";
 })(TextAreaHeight || (TextAreaHeight = {}));
 var TextFieldValidation;
 (function (TextFieldValidation) {
@@ -5508,6 +5856,9 @@ class TextField extends DataField {
     constructor(stringId, title, value, behavior, placeholder, description, layout, validations, _component, parentTaskId) {
         super(stringId, title, value, behavior, placeholder, description, layout, validations, _component, parentTaskId);
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.TEXT + this.getComponentType();
+    }
     resolveValidations() {
         const result = [];
         this.validations.forEach(item => {
@@ -5555,7 +5906,7 @@ class TextField extends DataField {
         }
     }
 }
-TextField.FIELD_HEIGHT = 105;
+TextField.FIELD_HEIGHT = 67;
 
 var NumberFieldValidation;
 (function (NumberFieldValidation) {
@@ -5579,6 +5930,9 @@ class NumberField extends DataField {
         super(stringId, title, value, behavior, placeholder, description, layout, validations, component, parentTaskId);
         this._formatFilter = format;
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.NUMBER + this.getComponentType();
+    }
     resolveValidations() {
         const result = [];
         this.validations.forEach(item => {
@@ -5702,6 +6056,12 @@ class MultichoiceField extends DataField {
     get fieldType() {
         return this._fieldType;
     }
+    getUpdateOnStrategy() {
+        return UpdateStrategy.CHANGE;
+    }
+    getTypedComponentType() {
+        return ComponentPrefixes.MULTICHOICE + this.getComponentType();
+    }
     valueEquality(a, b) {
         // we assume that multichoice options are always given in the same order
         return (!a && !b) || (!!a
@@ -5715,6 +6075,9 @@ class DateField extends AbstractTimeInstanceField {
     constructor(stringId, title, value, behavior, placeholder, description, layout, validations, component, parentTaskId) {
         super(stringId, title, value, behavior, placeholder, description, layout, validations, component, parentTaskId);
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.DATE + this.getComponentType();
+    }
     valueEquality(a, b) {
         return AbstractTimeInstanceField.isEqual(a, b, 'day');
     }
@@ -5724,6 +6087,9 @@ class DateTimeField extends AbstractTimeInstanceField {
     constructor(stringId, title, value, behavior, placeholder, description, layout, validations, component, parentTaskId) {
         super(stringId, title, value, behavior, placeholder, description, layout, validations, component, parentTaskId);
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.DATE_TIME + this.getComponentType();
+    }
     valueEquality(a, b) {
         return AbstractTimeInstanceField.isEqual(a, b, 'minute');
     }
@@ -5734,6 +6100,9 @@ class UserField extends DataField {
         super(stringId, title, value, behavior, placeholder, description, layout, validations, component, parentTaskId);
         this._roles = _roles;
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.USER + this.getComponentType();
+    }
     get roles() {
         return this._roles;
     }
@@ -5807,6 +6176,9 @@ class FileListField extends DataField {
     get value() {
         return this._value.getValue();
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.FILE_LIST + this.getComponentType();
+    }
     valueWithoutChange(value) {
         this.changed = false;
         this._value.next(value !== null && value !== void 0 ? value : { namesPaths: [] });
@@ -5839,6 +6211,7 @@ class FileListField extends DataField {
             throw new Error('Data field can be initialized only once!'
                 + ' Disconnect the previous form control before initializing the data field again!');
         }
+        this.formControlRef = formControl;
         formControl.setValidators(this.resolveFormControlValidators());
         this._myValueSubscription = this._value.pipe(distinctUntilChanged(this.valueEquality)).subscribe(newValue => {
             this.valid = this._determineFormControlValidity(formControl);
@@ -5890,6 +6263,9 @@ class TaskRefField extends DataField {
     set dashboardCols(value) {
         this._dashboardCols = value;
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.TASK_REF + this.getComponentType();
+    }
 }
 
 class DynamicEnumerationField extends EnumerationField {
@@ -5941,6 +6317,9 @@ class FilterField extends DataField {
     get allowedNets() {
         return this._allowedNets;
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.FILTER + this.getComponentType();
+    }
 }
 
 var I18nFieldValidation;
@@ -5951,6 +6330,9 @@ var I18nFieldValidation;
 })(I18nFieldValidation || (I18nFieldValidation = {}));
 const DEFAULT_LANGUAGE_CODE = 'xx';
 class I18nField extends DataField {
+    getTypedComponentType() {
+        return ComponentPrefixes.I18N + this.getComponentType();
+    }
     static defaultValueNonEquality(a, b) {
         return (!(!a.defaultValue && !b.defaultValue)
             && ((!a.defaultValue && !!b.defaultValue)
@@ -6092,7 +6474,8 @@ class I18nField extends DataField {
         };
     }
     validRequiredI18n(fc) {
-        return (fc.value.defaultValue === '' && Object.keys(fc.value.translations).length === 0)
+        var _a;
+        return (fc.value.defaultValue === '' && !!((_a = fc.value) === null || _a === void 0 ? void 0 : _a.translations) && Object.keys(fc.value.translations).length === 0)
             ? ({ requiredI18n: true }) : null;
     }
 }
@@ -6105,6 +6488,9 @@ class UserListField extends DataField {
     get roles() {
         return this._roles;
     }
+    getTypedComponentType() {
+        return ComponentPrefixes.USER_LIST + this.getComponentType();
+    }
     valueEquality(a, b) {
         return (!a && !b) ||
             (!!a && !!b && a.userValues.size === b.userValues.size);
@@ -6190,6 +6576,15 @@ function decodeBase64(encoded) {
     return Buffer.Buffer.from(encoded, 'base64').toString('utf-8');
 }
 
+class CaseRefField extends DataField {
+    constructor(stringId, title, initialValue, behavior, placeholder, description, layout, validations, component, parentTaskId) {
+        super(stringId, title, initialValue, behavior, placeholder, description, layout, validations, component, parentTaskId);
+    }
+    getTypedComponentType() {
+        return ComponentPrefixes.CASE_REF + this.getComponentType();
+    }
+}
+
 class FieldConverterService {
     constructor() {
         this.textFieldNames = ['textarea', 'richtextarea', 'htmltextarea', 'editor', 'htmlEditor', 'area'];
@@ -6245,6 +6640,8 @@ class FieldConverterService {
                 return new FileListField(item.stringId, item.name, item.behavior, item.value ? item.value : {}, item.placeholder, item.description, item.layout, item.validations, null, null, item.component, item.parentTaskId);
             case FieldTypeResource.TASK_REF:
                 return new TaskRefField(item.stringId, item.name, item.value ? item.value : [], item.behavior, item.placeholder, item.description, item.layout, item.validations, item.component, item.parentTaskId);
+            case FieldTypeResource.CASE_REF:
+                return new CaseRefField(item.stringId, item.name, item.value ? item.value : [], item.behavior, item.placeholder, item.description, item.layout, item.validations, item.component, item.parentTaskId);
             case FieldTypeResource.FILTER:
                 return new FilterField(item.stringId, item.name, (_b = item.value) !== null && _b !== void 0 ? _b : '', item.filterMetadata, item.allowedNets, item.behavior, item.placeholder, item.description, item.layout, item.validations, item.component, item.parentTaskId);
             case FieldTypeResource.I18N:
@@ -6803,13 +7200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-const preview = 'preview';
-const fieldHeight = 75;
-const fieldPadding = 16;
-/**
- * Component that is created in the body of the task panel accord on the Petri Net, which must be bind properties.
- */
-class AbstractFileFieldComponent extends AbstractDataFieldComponent {
+class AbstractFileDefaultFieldComponent extends AbstractBaseDataFieldComponent {
     /**
      * Only inject services.
      * @param _taskResourceService Provides to download a file from the backend
@@ -6817,28 +7208,27 @@ class AbstractFileFieldComponent extends AbstractDataFieldComponent {
      * @param _snackbar Snackbar service to notify user
      * @param _translate Translate service for I18N
      * @param _eventService used for parsing of backend response
-     * @param informAboutInvalidData whether the backend should be notified about invalid values.
      * Option injected trough `NAE_INFORM_ABOUT_INVALID_DATA` InjectionToken
      * @param _sanitizer Sanitize url of image preview
+     * @param dataFieldPortalData Field and form control data if field is provided with portal
      */
-    constructor(_taskResourceService, _log, _snackbar, _translate, _eventService, informAboutInvalidData, _sanitizer) {
-        super(informAboutInvalidData);
+    constructor(_taskResourceService, _log, _snackbar, _translate, _eventService, _sanitizer, dataFieldPortalData) {
+        super(dataFieldPortalData);
         this._taskResourceService = _taskResourceService;
         this._log = _log;
         this._snackbar = _snackbar;
         this._translate = _translate;
         this._eventService = _eventService;
         this._sanitizer = _sanitizer;
-        /**
-         * If file preview should be displayed
-         */
-        this.filePreview = false;
         /**
          * If file type can be displayed
          */
         this.isDisplayable = false;
+        this.isFilePreview = false;
+        this.isFilePreviewButton = false;
         this.state = this.defaultState;
         this.fullSource = new BehaviorSubject(null);
+        this.taskId = dataFieldPortalData.additionalFieldProperties.taskId;
     }
     /**
      * Set :
@@ -6846,9 +7236,9 @@ class AbstractFileFieldComponent extends AbstractDataFieldComponent {
      *  - Display name
      */
     ngOnInit() {
-        super.ngOnInit();
-        this.filePreview = this.dataField && this.dataField.component && this.dataField.component.name
-            && this.dataField.component.name === preview;
+        var _a, _b, _c, _d;
+        this.isFilePreview = ((_b = (_a = this.dataField) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.name) === PREVIEW;
+        this.isFilePreviewButton = ((_d = (_c = this.dataField) === null || _c === void 0 ? void 0 : _c.component) === null || _d === void 0 ? void 0 : _d.name) === PREVIEW_BUTTON;
     }
     ngAfterViewInit() {
         if (this.fileUploadEl) {
@@ -6856,18 +7246,27 @@ class AbstractFileFieldComponent extends AbstractDataFieldComponent {
                 this.upload();
             };
         }
-        if (this.filePreview) {
+        if (this.isFilePreview) {
             if (!!this.imageDivEl) {
                 if (!this.isEmpty()) {
                     this.initializePreviewIfDisplayable();
                 }
             }
         }
+        if (this.isFilePreviewButton) {
+            if (!this.isEmpty()) {
+                this.initializePreviewIfDisplayable();
+            }
+        }
         this.updatedFieldSubscription = this.dataField.updated.subscribe(() => {
+            var _a, _b, _c, _d;
             this.previewSource = undefined;
-            if (!!this.filePreview
-                && !!this.dataField.value
-                && !!this.dataField.value.name) {
+            if (!!this.isFilePreview && !!((_b = (_a = this.dataField) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.name)) {
+                this.fileForDownload = undefined;
+                this.fileForPreview = undefined;
+                this.initializePreviewIfDisplayable();
+            }
+            if (!!this.isFilePreviewButton && !!((_d = (_c = this.dataField) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.name)) {
                 this.fileForDownload = undefined;
                 this.fileForPreview = undefined;
                 this.initializePreviewIfDisplayable();
@@ -6880,7 +7279,7 @@ class AbstractFileFieldComponent extends AbstractDataFieldComponent {
         this.updatedFieldSubscription.unsubscribe();
     }
     chooseFile() {
-        if (this.state.uploading || this.formControl.disabled) {
+        if (this.state.uploading || this.formControlRef.disabled) {
             return;
         }
         this.fileUploadEl.nativeElement.click();
@@ -6950,12 +7349,12 @@ class AbstractFileFieldComponent extends AbstractDataFieldComponent {
                     this.state.error = false;
                     this.dataField.downloaded = false;
                     this.dataField.value.name = fileToUpload.name;
-                    if (this.filePreview) {
+                    if (this.isFilePreview) {
                         this.initializePreviewIfDisplayable();
                     }
                     this.fullSource.next(undefined);
                     this.fileForDownload = undefined;
-                    this.formControl.setValue(this.dataField.value.name);
+                    this.formControlRef.setValue(this.dataField.value.name);
                 }
                 this.dataField.touch = true;
                 this.dataField.update();
@@ -6993,7 +7392,7 @@ class AbstractFileFieldComponent extends AbstractDataFieldComponent {
             if (!response.type || response.type !== ProgressType.DOWNLOAD) {
                 this._log.debug(`File [${this.dataField.stringId}] ${this.dataField.value.name} was successfully downloaded`);
                 this.downloadViaAnchor(response);
-                if (this.filePreview) {
+                if (this.isFilePreview) {
                     this.initDownloadFile(response);
                 }
                 this.state.downloading = false;
@@ -7047,7 +7446,7 @@ class AbstractFileFieldComponent extends AbstractDataFieldComponent {
             if (response.success) {
                 const filename = this.dataField.value.name;
                 this.dataField.value = {};
-                this.formControl.setValue('');
+                this.formControlRef.setValue('');
                 this.dataField.update();
                 this.dataField.downloaded = false;
                 this.fullSource.next(undefined);
@@ -7055,7 +7454,7 @@ class AbstractFileFieldComponent extends AbstractDataFieldComponent {
                 this.previewSource = undefined;
                 this.fileForPreview = undefined;
                 this._log.debug(`File [${this.dataField.stringId}] ${filename} was successfully deleted`);
-                this.formControl.markAsTouched();
+                this.formControlRef.markAsTouched();
             }
             else {
                 this._log.error(`Deleting file [${this.dataField.stringId}] ${this.dataField.value.name} has failed!`, response.error);
@@ -7153,25 +7552,25 @@ class AbstractFileFieldComponent extends AbstractDataFieldComponent {
     }
     getHeight() {
         return this.dataField.layout && this.dataField.layout.rows && this.dataField.layout.rows !== 1 ?
-            (this.dataField.layout.rows) * fieldHeight - fieldPadding : fieldHeight - fieldPadding;
+            (this.dataField.layout.rows) * FILE_FIELD_HEIGHT - FILE_FIELD_PADDING : FILE_FIELD_HEIGHT - FILE_FIELD_PADDING;
     }
     getPreviewBorderWidth() {
         if (this.borderPropertyEnabled('borderWidth')) {
             return this.dataField.component.properties.borderWidth + 'px';
         }
-        return `${AbstractFileFieldComponent.DEFAULT_PREVIEW_BORDER_WIDTH}px`;
+        return `${AbstractFileDefaultFieldComponent.DEFAULT_PREVIEW_BORDER_WIDTH}px`;
     }
     getPreviewBorderStyle() {
         if (this.borderPropertyEnabled('borderStyle')) {
             return this.dataField.component.properties.borderStyle;
         }
-        return AbstractFileFieldComponent.DEFAULT_PREVIEW_BORDER_STYLE;
+        return AbstractFileDefaultFieldComponent.DEFAULT_PREVIEW_BORDER_STYLE;
     }
     getPreviewBorderColor() {
         if (this.borderPropertyEnabled('borderColor')) {
             return this.dataField.component.properties.borderColor;
         }
-        return AbstractFileFieldComponent.DEFAULT_PREVIEW_BORDER_COLOR;
+        return AbstractFileDefaultFieldComponent.DEFAULT_PREVIEW_BORDER_COLOR;
     }
     isBorderLGBTQ() {
         if (this.borderPropertyEnabled('borderLGBTQ')) {
@@ -7191,38 +7590,50 @@ class AbstractFileFieldComponent extends AbstractDataFieldComponent {
     resolveParentTaskId() {
         return !!this.dataField.parentTaskId ? this.dataField.parentTaskId : this.taskId;
     }
+    hasTitle() {
+        return this.dataField.title !== undefined && this.dataField.title !== '';
+    }
+    hasHint() {
+        return this.dataField.description !== undefined && this.dataField.description !== '';
+    }
+    getCutProperty(i18nLabel) {
+        if (this.labelWidth !== i18nLabel.offsetWidth) {
+            this.labelWidth = i18nLabel.offsetWidth;
+            const calculatedWidth = 'calc(0.5em + ' + i18nLabel.offsetWidth / 4 * 3 + 'px)';
+            this.cutProperty = `polygon(0 0, 0 100%, 100% 100%, 100% 0%, ${calculatedWidth} 0, ${calculatedWidth} 6%, 0.5em 6%, 0.5em 0)`;
+        }
+        return this.cutProperty;
+    }
 }
 /**
  * The width of the default file preview border in pixels. The `px` string is appended in the code.
  */
-AbstractFileFieldComponent.DEFAULT_PREVIEW_BORDER_WIDTH = 0;
+AbstractFileDefaultFieldComponent.DEFAULT_PREVIEW_BORDER_WIDTH = 0;
 /**
  * The CSS style attribute of the default file preview border.
  */
-AbstractFileFieldComponent.DEFAULT_PREVIEW_BORDER_STYLE = 'none';
+AbstractFileDefaultFieldComponent.DEFAULT_PREVIEW_BORDER_STYLE = 'none';
 /**
  * The CSS color string of the default file preview border.
  */
-AbstractFileFieldComponent.DEFAULT_PREVIEW_BORDER_COLOR = 'black';
-AbstractFileFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileFieldComponent, deps: [{ token: TaskResourceService }, { token: LoggerService }, { token: SnackBarService }, { token: i1$2.TranslateService }, { token: EventService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }, { token: i2$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-AbstractFileFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractFileFieldComponent, selector: "ncc-abstract-file-field", inputs: { taskId: "taskId", dataField: "dataField" }, viewQueries: [{ propertyName: "fileUploadEl", first: true, predicate: ["fileUploadInput"], descendants: true }, { propertyName: "imageEl", first: true, predicate: ["imageEl"], descendants: true }, { propertyName: "imageDivEl", first: true, predicate: ["imageDiv"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileFieldComponent, decorators: [{
+AbstractFileDefaultFieldComponent.DEFAULT_PREVIEW_BORDER_COLOR = 'black';
+AbstractFileDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileDefaultFieldComponent, deps: [{ token: TaskResourceService }, { token: LoggerService }, { token: SnackBarService }, { token: i1$2.TranslateService }, { token: EventService }, { token: i2$1.DomSanitizer }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractFileDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractFileDefaultFieldComponent, selector: "ncc-abstract-file-default-fied", inputs: { taskId: "taskId" }, viewQueries: [{ propertyName: "fileUploadEl", first: true, predicate: ["fileUploadInput"], descendants: true }, { propertyName: "imageEl", first: true, predicate: ["imageEl"], descendants: true }, { propertyName: "imageDivEl", first: true, predicate: ["imageDiv"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ncc-abstract-file-field',
+                    selector: 'ncc-abstract-file-default-fied',
                     template: ''
                 }]
         }], ctorParameters: function () {
-        return [{ type: TaskResourceService }, { type: LoggerService }, { type: SnackBarService }, { type: i1$2.TranslateService }, { type: EventService }, { type: undefined, decorators: [{
+        return [{ type: TaskResourceService }, { type: LoggerService }, { type: SnackBarService }, { type: i1$2.TranslateService }, { type: EventService }, { type: i2$1.DomSanitizer }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
-                    }] }, { type: i2$1.DomSanitizer }];
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
     }, propDecorators: { taskId: [{
                 type: Input
-            }], dataField: [{
-                type: Input
             }], fileUploadEl: [{
                 type: ViewChild,
                 args: ['fileUploadInput']
@@ -7234,9 +7645,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['imageDiv']
             }] } });
 
+/**
+ * @deprecated
+ * */
 class AbstractFileListFieldComponent extends AbstractDataFieldComponent {
-    constructor(_taskResourceService, _log, _snackbar, _translate, _eventService, informAboutInvalidData) {
+    constructor(informAboutInvalidData) {
         super(informAboutInvalidData);
+    }
+}
+AbstractFileListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileListFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractFileListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractFileListFieldComponent, selector: "ncc-abstract-filelist-field", inputs: { dataField: "dataField", taskId: "taskId" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileListFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-filelist-field',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                    }] }];
+    }, propDecorators: { dataField: [{
+                type: Input
+            }], taskId: [{
+                type: Input
+            }] } });
+
+class AbstractFileListDefaultFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(_taskResourceService, _log, _snackbar, _translate, _eventService, dataFieldPortalData) {
+        super(dataFieldPortalData);
         this._taskResourceService = _taskResourceService;
         this._log = _log;
         this._snackbar = _snackbar;
@@ -7245,9 +7685,9 @@ class AbstractFileListFieldComponent extends AbstractDataFieldComponent {
         this.state = this.defaultState;
         this.uploadedFiles = new Array();
         this.maxFilesNumber = Number.POSITIVE_INFINITY;
+        this.taskId = dataFieldPortalData.additionalFieldProperties.taskId;
     }
     ngOnInit() {
-        super.ngOnInit();
         this.valueChange$ = this.dataField.valueChanges().subscribe(() => {
             this.parseResponse();
         });
@@ -7276,7 +7716,7 @@ class AbstractFileListFieldComponent extends AbstractDataFieldComponent {
         this.valueChange$.unsubscribe();
     }
     chooseFile() {
-        if (this.state.uploading || this.formControl.disabled) {
+        if (this.state.uploading || this.formControlRef.disabled) {
             return;
         }
         this.fileUploadEl.nativeElement.click();
@@ -7360,7 +7800,7 @@ class AbstractFileListFieldComponent extends AbstractDataFieldComponent {
                     filesToUpload.forEach(fileToUpload => {
                         this.uploadedFiles.push(fileToUpload.name);
                         this.dataField.value.namesPaths.push({ name: fileToUpload.name });
-                        this.formControl.setValue(this.dataField.value.namesPaths.map(namePath => {
+                        this.formControlRef.setValue(this.dataField.value.namesPaths.map(namePath => {
                             return namePath['name'];
                         }).join('/'));
                     });
@@ -7447,14 +7887,14 @@ class AbstractFileListFieldComponent extends AbstractDataFieldComponent {
                 this.uploadedFiles = this.uploadedFiles.filter(uploadedFile => uploadedFile !== fileName);
                 if (this.dataField.value.namesPaths) {
                     this.dataField.value.namesPaths = this.dataField.value.namesPaths.filter(namePath => namePath.name !== fileName);
-                    this.formControl.setValue(this.dataField.value.namesPaths.map(namePath => {
+                    this.formControlRef.setValue(this.dataField.value.namesPaths.map(namePath => {
                         return namePath['name'];
                     }).join('/'));
                     this.dataField.update();
                 }
                 this.dataField.downloaded = this.dataField.downloaded.filter(one => one !== fileName);
                 this._log.debug(`File [${this.dataField.stringId}] ${fileName} was successfully deleted`);
-                this.formControl.markAsTouched();
+                this.formControlRef.markAsTouched();
             }
             else {
                 this._log.error(`Deleting file [${this.dataField.stringId}] ${fileName} has failed!`, response.error);
@@ -7497,13 +7937,21 @@ class AbstractFileListFieldComponent extends AbstractDataFieldComponent {
     resolveParentTaskId() {
         return !!this.dataField.parentTaskId ? this.dataField.parentTaskId : this.taskId;
     }
+    getCutProperty(i18nLabel) {
+        if (this.labelWidth !== i18nLabel.offsetWidth) {
+            this.labelWidth = i18nLabel.offsetWidth;
+            const calculatedWidth = 'calc(0.5em + ' + i18nLabel.offsetWidth / 4 * 3 + 'px)';
+            this.cutProperty = `polygon(0 0, 0 100%, 100% 100%, 100% 0%, ${calculatedWidth} 0, ${calculatedWidth} 3px, 0.5em 3px, 0.5em 0)`;
+        }
+        return this.cutProperty;
+    }
 }
-AbstractFileListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileListFieldComponent, deps: [{ token: TaskResourceService }, { token: LoggerService }, { token: SnackBarService }, { token: i1$2.TranslateService }, { token: EventService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AbstractFileListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractFileListFieldComponent, selector: "ncc-abstract-filelist-field", inputs: { taskId: "taskId", dataField: "dataField" }, viewQueries: [{ propertyName: "fileUploadEl", first: true, predicate: ["fileUploadInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileListFieldComponent, decorators: [{
+AbstractFileListDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileListDefaultFieldComponent, deps: [{ token: TaskResourceService }, { token: LoggerService }, { token: SnackBarService }, { token: i1$2.TranslateService }, { token: EventService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractFileListDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractFileListDefaultFieldComponent, selector: "ncc-abstract-file-list-default-field", inputs: { taskId: "taskId" }, viewQueries: [{ propertyName: "fileUploadEl", first: true, predicate: ["fileUploadInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFileListDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ncc-abstract-filelist-field',
+                    selector: 'ncc-abstract-file-list-default-field',
                     template: ''
                 }]
         }], ctorParameters: function () {
@@ -7511,17 +7959,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                        args: [DATA_FIELD_PORTAL_DATA]
                     }] }];
     }, propDecorators: { taskId: [{
                 type: Input
-            }], dataField: [{
-                type: Input
             }], fileUploadEl: [{
                 type: ViewChild,
                 args: ['fileUploadInput']
             }] } });
 
+/**
+ * @deprecated
+ * */
 class AbstractMultichoiceFieldComponent extends AbstractDataFieldComponent {
     constructor(informAboutInvalidData) {
         super(informAboutInvalidData);
@@ -7553,13 +8002,15 @@ var MultichoiceAutocompleteFilterProperty;
     MultichoiceAutocompleteFilterProperty["SUBSTRING"] = "substring";
 })(MultichoiceAutocompleteFilterProperty || (MultichoiceAutocompleteFilterProperty = {}));
 
-class AbstractMultichoiceAutocompleteFieldComponentComponent {
-    constructor() {
+class AbstractMultichoiceAutocompleteFieldComponentComponent extends AbstractBaseDataFieldComponent {
+    constructor(dataFieldPortalData) {
+        super(dataFieldPortalData);
         this.separatorKeysCodes = [ENTER, COMMA];
         this.renderSelection = (key) => {
             if (key !== undefined && key !== '' && key !== null) {
-                if (this.multichoiceField.choices.find(choice => choice.key === key)) {
-                    return this.multichoiceField.choices.find(choice => choice.key === key).value;
+                const choice = this.dataField.choices.find(c => c.key === key);
+                if (choice) {
+                    return choice.value;
                 }
             }
             return key;
@@ -7567,7 +8018,7 @@ class AbstractMultichoiceAutocompleteFieldComponentComponent {
     }
     ngOnInit() {
         this.subscriptionChangeData$ = this.formControlRef.valueChanges.subscribe(newVal => {
-            this.filteredOptions = of(this._filter(newVal !== null && newVal !== void 0 ? newVal : '').filter((option) => { var _a; return !((_a = this.multichoiceField.value) === null || _a === void 0 ? void 0 : _a.includes(option.key)); }));
+            this.filteredOptions = of(this._filter(newVal !== null && newVal !== void 0 ? newVal : '').filter((option) => { var _a; return !((_a = this.dataField.value) === null || _a === void 0 ? void 0 : _a.includes(option.key)); }));
         });
     }
     ngOnDestroy() {
@@ -7578,10 +8029,10 @@ class AbstractMultichoiceAutocompleteFieldComponentComponent {
         var _a;
         const value = (_a = event['key']) !== null && _a !== void 0 ? _a : '';
         if (value) {
-            this.multichoiceField.value = this.multichoiceField.value === null ? [] : this.multichoiceField.value;
-            const choiceArray = [...this.multichoiceField.value];
+            this.dataField.value = this.dataField.value === null ? [] : this.dataField.value;
+            const choiceArray = [...this.dataField.value];
             choiceArray.push(value);
-            this.multichoiceField.value = choiceArray;
+            this.dataField.value = choiceArray;
             this.input.nativeElement.value = '';
             this.change();
         }
@@ -7591,25 +8042,22 @@ class AbstractMultichoiceAutocompleteFieldComponentComponent {
         }
     }
     remove(value) {
-        const index = this.multichoiceField.value.indexOf(value);
+        const index = this.dataField.value.indexOf(value);
         if (index >= 0) {
-            const choiceArray = [...this.multichoiceField.value];
+            const choiceArray = [...this.dataField.value];
             choiceArray.splice(index, 1);
-            this.multichoiceField.value = choiceArray;
+            this.dataField.value = choiceArray;
             this.change();
         }
     }
     change() {
         if (this.input.nativeElement.value !== undefined) {
-            this.filteredOptions = of(this._filter(this.input.nativeElement.value).filter((option) => !this.multichoiceField.value.includes(option.key)));
+            this.filteredOptions = of(this._filter(this.input.nativeElement.value).filter((option) => !this.dataField.value.includes(option.key)));
         }
     }
-    checkPropertyInComponent(property) {
-        return !!this.multichoiceField.component && !!this.multichoiceField.component.properties && property in this.multichoiceField.component.properties;
-    }
     filterType() {
         if (this.checkPropertyInComponent('filter')) {
-            return this.multichoiceField.component.properties.filter;
+            return this.dataField.component.properties.filter;
         }
     }
     _filter(value) {
@@ -7629,76 +8077,88 @@ class AbstractMultichoiceAutocompleteFieldComponentComponent {
             value = '';
         }
         const filterValue = value === null || value === void 0 ? void 0 : value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-        return this.multichoiceField.choices.filter(option => option.value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').includes(filterValue));
+        return this.dataField.choices.filter(option => option.value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').includes(filterValue));
     }
     _filterIndexOf(value) {
         if (Array.isArray(value)) {
             value = '';
         }
         const filterValue = value === null || value === void 0 ? void 0 : value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-        return this.multichoiceField.choices.filter(option => option.value.toLowerCase().normalize('NFD')
+        return this.dataField.choices.filter(option => option.value.toLowerCase().normalize('NFD')
             .replace(/[\u0300-\u036f]/g, '').indexOf(filterValue) === 0);
     }
     getValueFromKey(key) {
         var _a;
-        return (_a = this.multichoiceField.choices.find(choice => choice.key === key)) === null || _a === void 0 ? void 0 : _a.value;
+        return (_a = this.dataField.choices.find(choice => choice.key === key)) === null || _a === void 0 ? void 0 : _a.value;
     }
 }
-AbstractMultichoiceAutocompleteFieldComponentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractMultichoiceAutocompleteFieldComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractMultichoiceAutocompleteFieldComponentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractMultichoiceAutocompleteFieldComponentComponent, selector: "ncc-abstract-multichoice-autocomplete-field", inputs: { multichoiceField: "multichoiceField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: '', isInline: true });
+AbstractMultichoiceAutocompleteFieldComponentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractMultichoiceAutocompleteFieldComponentComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractMultichoiceAutocompleteFieldComponentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractMultichoiceAutocompleteFieldComponentComponent, selector: "ncc-abstract-multichoice-autocomplete-field", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractMultichoiceAutocompleteFieldComponentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-multichoice-autocomplete-field',
                     template: ''
                 }]
-        }], propDecorators: { multichoiceField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }], input: [{
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
             }] } });
 
-class AbstractMultichoiceListFieldComponent {
+class AbstractMultichoiceListFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(dataFieldPortalData) {
+        super(dataFieldPortalData);
+    }
 }
-AbstractMultichoiceListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractMultichoiceListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractMultichoiceListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractMultichoiceListFieldComponent, selector: "ncc-abstract-multichoice-list-field", inputs: { multichoiceField: "multichoiceField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, ngImport: i0, template: '', isInline: true });
+AbstractMultichoiceListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractMultichoiceListFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractMultichoiceListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractMultichoiceListFieldComponent, selector: "ncc-abstract-multichoice-list-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractMultichoiceListFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-multichoice-list-field',
                     template: ''
                 }]
-        }], propDecorators: { multichoiceField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
-class AbstractMultichoiceSelectFieldComponent {
+class AbstractMultichoiceSelectFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(dataFieldPortalData) {
+        super(dataFieldPortalData);
+    }
 }
-AbstractMultichoiceSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractMultichoiceSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractMultichoiceSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractMultichoiceSelectFieldComponent, selector: "ncc-abstract-multichoice-select-field", inputs: { multichoiceField: "multichoiceField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, ngImport: i0, template: '', isInline: true });
+AbstractMultichoiceSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractMultichoiceSelectFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractMultichoiceSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractMultichoiceSelectFieldComponent, selector: "ncc-abstract-multichoice-select-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractMultichoiceSelectFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-multichoice-select-field',
                     template: ''
                 }]
-        }], propDecorators: { multichoiceField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
+/**
+ * @deprecated
+ * */
 class AbstractNumberFieldComponent extends AbstractDataFieldComponent {
     constructor(_translate, informAboutInvalidData) {
         super(informAboutInvalidData);
@@ -7724,8 +8184,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
-class AbstractNumberErrorsComponent {
-    constructor(_translate) {
+class AbstractNumberErrorsComponent extends AbstractBaseDataFieldComponent {
+    constructor(_translate, dataFieldPortalData) {
+        super(dataFieldPortalData);
         this._translate = _translate;
     }
     getErrorMessage() {
@@ -7748,38 +8209,39 @@ class AbstractNumberErrorsComponent {
             return this.resolveErrorMessage(NumberFieldValidation.DECIMAL, this._translate.instant('dataField.validations.decimal'));
         }
         if (this.formControlRef.hasError(NumberFieldValidation.VALID_IN_RANGE)) {
-            const tmp = this.numberField.validations.find(value => value.validationRule.includes(NumberFieldValidation.IN_RANGE)).validationRule.split(' ');
+            const tmp = this.dataField.validations.find(value => value.validationRule.includes(NumberFieldValidation.IN_RANGE)).validationRule.split(' ');
             return this.resolveErrorMessage(NumberFieldValidation.IN_RANGE, this._translate.instant('dataField.validations.inrange', { range: tmp[1] }));
         }
         return '';
     }
     resolveErrorMessage(search, generalMessage) {
-        const validation = this.numberField.validations.find(value => value.validationRule.includes(search));
+        const validation = this.dataField.validations.find(value => value.validationRule.includes(search));
         if (validation.validationMessage && validation.validationMessage !== '') {
             return validation.validationMessage;
         }
         return generalMessage;
     }
 }
-AbstractNumberErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractNumberErrorsComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-AbstractNumberErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractNumberErrorsComponent, selector: "ncc-abstract-number-errors-field", inputs: { showLargeLayout: "showLargeLayout", formControlRef: "formControlRef", numberField: "numberField" }, ngImport: i0, template: '', isInline: true });
+AbstractNumberErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractNumberErrorsComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractNumberErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractNumberErrorsComponent, selector: "ncc-abstract-number-errors-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractNumberErrorsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-number-errors-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; }, propDecorators: { showLargeLayout: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], numberField: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractCurrencyNumberFieldComponent extends AbstractNumberErrorsComponent {
-    constructor(_currencyPipe, translateService) {
-        super(translateService);
+    constructor(_currencyPipe, translateService, dataFieldPortalData) {
+        super(translateService, dataFieldPortalData);
         this._currencyPipe = _currencyPipe;
         this.NUMBER_TYPE = 'number';
         this.TEXT_TYPE = 'text';
@@ -7788,8 +8250,8 @@ class AbstractCurrencyNumberFieldComponent extends AbstractNumberErrorsComponent
     ngAfterViewInit() {
         var _a;
         this.fieldType = this.TEXT_TYPE;
-        this.transformedValue = this.transformCurrency((_a = this.numberField.value) === null || _a === void 0 ? void 0 : _a.toString());
-        this.numberField.valueChanges().subscribe(value => {
+        this.transformedValue = this.transformCurrency((_a = this.dataField.value) === null || _a === void 0 ? void 0 : _a.toString());
+        this.dataField.valueChanges().subscribe(value => {
             if (value !== undefined && value !== null) {
                 if (this.fieldType === this.TEXT_TYPE) {
                     this.transformedValue = this.transformCurrency(value.toString()) + this.WHITESPACE;
@@ -7807,26 +8269,26 @@ class AbstractCurrencyNumberFieldComponent extends AbstractNumberErrorsComponent
     }
     transformToNumber() {
         this.fieldType = this.NUMBER_TYPE;
-        this.transformedValue = !!this.numberField.value ? this.numberField.value.toString() : '0';
+        this.transformedValue = !!this.dataField.value ? this.dataField.value.toString() : '0';
     }
     getCurrencySymbol() {
-        if (this.numberField._formatFilter === undefined) {
-            return getCurrencySymbol(this.numberField.component.properties['code'], 'wide', this.numberField.component.properties['locale']);
+        if (this.dataField._formatFilter === undefined) {
+            return getCurrencySymbol(this.dataField.component.properties['code'], 'wide', this.dataField.component.properties['locale']);
         }
-        return getCurrencySymbol(this.numberField._formatFilter.code, 'wide', this.numberField._formatFilter.locale);
+        return getCurrencySymbol(this.dataField._formatFilter.code, 'wide', this.dataField._formatFilter.locale);
     }
     isNumberType() {
         return this.fieldType === this.NUMBER_TYPE;
     }
     transformCurrency(value) {
         value = !!value ? value : '0';
-        if (this.numberField._formatFilter === undefined) {
-            return this._currencyPipe.transform(parseFloat(value), this.numberField.component.properties['code'], 'symbol', '1.' + this.numberField.component.properties['fractionSize'] + '-' + this.numberField.component.properties['fractionSize'], this.numberField.component.properties['locale']);
+        if (this.dataField._formatFilter === undefined) {
+            return this._currencyPipe.transform(parseFloat(value), this.dataField.component.properties['code'], 'symbol', '1.' + this.dataField.component.properties['fractionSize'] + '-' + this.dataField.component.properties['fractionSize'], this.dataField.component.properties['locale']);
         }
-        return this._currencyPipe.transform(parseFloat(value), this.numberField._formatFilter.code, 'symbol', '1.' + this.numberField._formatFilter.fractionSize + '-' + this.numberField._formatFilter.fractionSize, this.numberField._formatFilter.locale);
+        return this._currencyPipe.transform(parseFloat(value), this.dataField._formatFilter.code, 'symbol', '1.' + this.dataField._formatFilter.fractionSize + '-' + this.dataField._formatFilter.fractionSize, this.dataField._formatFilter.locale);
     }
 }
-AbstractCurrencyNumberFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractCurrencyNumberFieldComponent, deps: [{ token: i5.CurrencyPipe }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+AbstractCurrencyNumberFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractCurrencyNumberFieldComponent, deps: [{ token: i5.CurrencyPipe }, { token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AbstractCurrencyNumberFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractCurrencyNumberFieldComponent, selector: "ncc-abstract-currency-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractCurrencyNumberFieldComponent, decorators: [{
             type: Component,
@@ -7834,14 +8296,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'ncc-abstract-currency-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i5.CurrencyPipe }, { type: i1$2.TranslateService }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i5.CurrencyPipe }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractDefaultNumberFieldComponent extends AbstractNumberErrorsComponent {
-    constructor(translateService) {
-        super(translateService);
+    constructor(translateService, dataFieldPortalData) {
+        super(translateService, dataFieldPortalData);
     }
 }
-AbstractDefaultNumberFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDefaultNumberFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDefaultNumberFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDefaultNumberFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AbstractDefaultNumberFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDefaultNumberFieldComponent, selector: "ncc-abstract-number-default-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDefaultNumberFieldComponent, decorators: [{
             type: Component,
@@ -7849,7 +8318,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'ncc-abstract-number-default-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractTextFieldComponent extends AbstractDataFieldComponent {
     constructor(informAboutInvalidData) {
@@ -7875,8 +8351,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
-class AbstractTextErrorsComponent {
-    constructor(_translate) {
+class AbstractTextErrorsComponent extends AbstractBaseDataFieldComponent {
+    constructor(_translate, dataFieldPortalData) {
+        super(dataFieldPortalData);
         this._translate = _translate;
     }
     buildErrorMessage(textField, formControlRef) {
@@ -7908,61 +8385,79 @@ class AbstractTextErrorsComponent {
         return generalMessage;
     }
 }
+AbstractTextErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTextErrorsComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractTextErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractTextErrorsComponent, selector: "ncc-text-errors", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTextErrorsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-text-errors',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractSimpleTextFieldComponent extends AbstractTextErrorsComponent {
-    constructor(_translate) {
-        super(_translate);
+    constructor(_translate, dataFieldPortalData) {
+        super(_translate, dataFieldPortalData);
         this._translate = _translate;
     }
     getErrorMessage() {
-        return this.buildErrorMessage(this.textField, this.formControlRef);
+        return this.buildErrorMessage(this.dataField, this.formControlRef);
     }
 }
-AbstractSimpleTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractSimpleTextFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-AbstractSimpleTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractSimpleTextFieldComponent, selector: "ncc-abstract-simple-text-field", inputs: { textField: "textField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractSimpleTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractSimpleTextFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractSimpleTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractSimpleTextFieldComponent, selector: "ncc-abstract-simple-text-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractSimpleTextFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-simple-text-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; }, propDecorators: { textField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractRichTextareaFieldComponent extends AbstractTextErrorsComponent {
     // TODO BUG: update on blur dont working, switch back to update on ngModel
-    constructor(_translate) {
-        super(_translate);
+    constructor(_translate, dataFieldPortalData) {
+        super(_translate, dataFieldPortalData);
         this._translate = _translate;
     }
     getErrorMessage() {
-        return this.buildErrorMessage(this.textAreaField, this.formControlRef);
+        return this.buildErrorMessage(this.dataField, this.formControlRef);
     }
 }
-AbstractRichTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractRichTextareaFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-AbstractRichTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractRichTextareaFieldComponent, selector: "ncc-abstract-rich-text-field", inputs: { textAreaField: "textAreaField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractRichTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractRichTextareaFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractRichTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractRichTextareaFieldComponent, selector: "ncc-abstract-rich-text-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractRichTextareaFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-rich-text-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; }, propDecorators: { textAreaField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractHtmlTextareaFieldComponent extends AbstractTextErrorsComponent {
-    constructor(_translate, _sanitizer) {
-        super(_translate);
+    constructor(_translate, _sanitizer, dataFieldPortalData) {
+        super(_translate, dataFieldPortalData);
         this._translate = _translate;
         this._sanitizer = _sanitizer;
         this.quillModules = {
@@ -7983,61 +8478,63 @@ class AbstractHtmlTextareaFieldComponent extends AbstractTextErrorsComponent {
     }
     ngOnInit() {
         this.disabledDisplay = this.sanitizeValue();
-        this.textAreaField.valueChanges().subscribe(() => {
+        this.dataField.valueChanges().subscribe(() => {
             this.disabledDisplay = this.sanitizeValue();
         });
     }
     sanitizeValue() {
-        return this._sanitizer.bypassSecurityTrustHtml(this.textAreaField.value !== undefined ? this.textAreaField.value : '');
+        return this._sanitizer.bypassSecurityTrustHtml(this.dataField.value !== undefined ? this.dataField.value : '');
     }
     getErrorMessage() {
-        return this.buildErrorMessage(this.textAreaField, this.formControlRef);
+        return this.buildErrorMessage(this.dataField, this.formControlRef);
     }
 }
-AbstractHtmlTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractHtmlTextareaFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: i2$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-AbstractHtmlTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractHtmlTextareaFieldComponent, selector: "ncc-abstract-html-area-field", inputs: { textAreaField: "textAreaField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractHtmlTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractHtmlTextareaFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: i2$1.DomSanitizer }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractHtmlTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractHtmlTextareaFieldComponent, selector: "ncc-abstract-html-area-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractHtmlTextareaFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-html-area-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }, { type: i2$1.DomSanitizer }]; }, propDecorators: { textAreaField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: i2$1.DomSanitizer }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractPasswordTextFieldComponent extends AbstractTextErrorsComponent {
-    constructor(_translate) {
-        super(_translate);
+    constructor(_translate, dataFieldPortalData) {
+        super(_translate, dataFieldPortalData);
         this._translate = _translate;
     }
     getErrorMessage() {
-        return this.buildErrorMessage(this.passwordTextField, this.formControlRef);
+        return this.buildErrorMessage(this.dataField, this.formControlRef);
     }
 }
-AbstractPasswordTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractPasswordTextFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-AbstractPasswordTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractPasswordTextFieldComponent, selector: "ncc-abstract-password-text-field", inputs: { passwordTextField: "passwordTextField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractPasswordTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractPasswordTextFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractPasswordTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractPasswordTextFieldComponent, selector: "ncc-abstract-password-text-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractPasswordTextFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-password-text-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; }, propDecorators: { passwordTextField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractTextareaFieldComponent extends AbstractTextErrorsComponent {
-    constructor(_translate, _ngZone) {
-        super(_translate);
+    constructor(_translate, _ngZone, dataFieldPortalData) {
+        super(_translate, dataFieldPortalData);
         this._translate = _translate;
         this._ngZone = _ngZone;
     }
@@ -8049,34 +8546,35 @@ class AbstractTextareaFieldComponent extends AbstractTextErrorsComponent {
         }
     }
     getHeight() {
-        const oneHeight = this.textAreaField.layout && this.textAreaField.layout.appearance === 'outline' ?
+        const oneHeight = this.dataField.layout && this.dataField.layout.appearance === 'outline' ?
             TextAreaHeight.OUTLINE : TextAreaHeight.FILL_STANDARD;
-        return this.textAreaField.layout && this.textAreaField.layout.rows && this.textAreaField.layout.rows !== 1 ?
-            (this.textAreaField.layout.rows - 1) * TextField.FIELD_HEIGHT + oneHeight : oneHeight;
+        return this.dataField.layout && this.dataField.layout.rows && this.dataField.layout.rows !== 1 ?
+            (this.dataField.layout.rows - 1) * TextField.FIELD_HEIGHT + oneHeight : oneHeight;
     }
     triggerResize() {
         this._ngZone.onStable.pipe(take(1))
             .subscribe(() => this.dynamicTextArea.resizeToFitContent(true));
     }
     getErrorMessage() {
-        return this.buildErrorMessage(this.textAreaField, this.formControlRef);
+        return this.buildErrorMessage(this.dataField, this.formControlRef);
     }
 }
-AbstractTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTextareaFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AbstractTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractTextareaFieldComponent, selector: "ncc-abstract-text-area-field", inputs: { textAreaField: "textAreaField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, viewQueries: [{ propertyName: "dynamicTextArea", first: true, predicate: ["dynamicTextArea"], descendants: true }, { propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTextareaFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: i0.NgZone }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractTextareaFieldComponent, selector: "ncc-abstract-text-area-field", viewQueries: [{ propertyName: "dynamicTextArea", first: true, predicate: ["dynamicTextArea"], descendants: true }, { propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTextareaFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-text-area-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }, { type: i0.NgZone }]; }, propDecorators: { textAreaField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }], dynamicTextArea: [{
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    }, propDecorators: { dynamicTextArea: [{
                 type: ViewChild,
                 args: ['dynamicTextArea']
             }], textArea: [{
@@ -8085,8 +8583,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 class AbstractDashboardTextFieldComponent extends AbstractTextErrorsComponent {
-    constructor(translate) {
-        super(translate);
+    constructor(translate, dataFieldPortalData) {
+        super(translate, dataFieldPortalData);
         this.initialized = false;
     }
     ngOnInit() {
@@ -8103,24 +8601,25 @@ class AbstractDashboardTextFieldComponent extends AbstractTextErrorsComponent {
         this._sub.unsubscribe();
     }
     getErrorMessage() {
-        return this.buildErrorMessage(this.textField, this.formControlRef);
+        return this.buildErrorMessage(this.dataField, this.formControlRef);
     }
 }
-AbstractDashboardTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardTextFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-AbstractDashboardTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDashboardTextFieldComponent, selector: "ncc-abstract-dashboard-text-field", inputs: { textField: "textField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractDashboardTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardTextFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDashboardTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDashboardTextFieldComponent, selector: "ncc-abstract-dashboard-text-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardTextFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-dashboard-text-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; }, propDecorators: { textField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 var DashboardCardTypes;
 (function (DashboardCardTypes) {
@@ -8137,8 +8636,8 @@ var DashboardCardTypes;
 })(DashboardCardTypes || (DashboardCardTypes = {}));
 
 class AbstractDashboardLineChartTextFieldComponent extends AbstractDashboardTextFieldComponent {
-    constructor(translate) {
-        super(translate);
+    constructor(translate, dataFieldPortalData) {
+        super(translate, dataFieldPortalData);
     }
     createCard(textFieldValue) {
         const parsedValue = JSON.parse(textFieldValue);
@@ -8153,7 +8652,7 @@ class AbstractDashboardLineChartTextFieldComponent extends AbstractDashboardText
         };
     }
 }
-AbstractDashboardLineChartTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardLineChartTextFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDashboardLineChartTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardLineChartTextFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AbstractDashboardLineChartTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDashboardLineChartTextFieldComponent, selector: "ncc-abstract-dashboard-line-chart-text-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardLineChartTextFieldComponent, decorators: [{
             type: Component,
@@ -8161,11 +8660,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'ncc-abstract-dashboard-line-chart-text-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractDashboardPieChartTextFieldComponent extends AbstractDashboardTextFieldComponent {
-    constructor(translate) {
-        super(translate);
+    constructor(translate, dataFieldPortalData) {
+        super(translate, dataFieldPortalData);
     }
     createCard(textFieldValue) {
         const parsedValue = JSON.parse(textFieldValue);
@@ -8178,7 +8684,7 @@ class AbstractDashboardPieChartTextFieldComponent extends AbstractDashboardTextF
         };
     }
 }
-AbstractDashboardPieChartTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardPieChartTextFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDashboardPieChartTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardPieChartTextFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AbstractDashboardPieChartTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDashboardPieChartTextFieldComponent, selector: "ncc-abstract-dashboard-pie-chart-text-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardPieChartTextFieldComponent, decorators: [{
             type: Component,
@@ -8186,11 +8692,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'ncc-abstract-dashboard-pie-chart-text-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractDashboardBarChartTextFieldComponent extends AbstractDashboardTextFieldComponent {
-    constructor(translate) {
-        super(translate);
+    constructor(translate, dataFieldPortalData) {
+        super(translate, dataFieldPortalData);
     }
     createCard(textFieldValue) {
         const parsedValue = JSON.parse(textFieldValue);
@@ -8205,7 +8718,7 @@ class AbstractDashboardBarChartTextFieldComponent extends AbstractDashboardTextF
         };
     }
 }
-AbstractDashboardBarChartTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardBarChartTextFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDashboardBarChartTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardBarChartTextFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AbstractDashboardBarChartTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDashboardBarChartTextFieldComponent, selector: "ncc-abstract-dashboard-bar-chart-text-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardBarChartTextFieldComponent, decorators: [{
             type: Component,
@@ -8213,11 +8726,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'ncc-abstract-dashboard-bar-chart-text-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractDashboardIframeTextFieldComponent extends AbstractDashboardTextFieldComponent {
-    constructor(translate) {
-        super(translate);
+    constructor(translate, dataFieldPortalData) {
+        super(translate, dataFieldPortalData);
     }
     createCard(textFieldValue) {
         return {
@@ -8227,7 +8747,7 @@ class AbstractDashboardIframeTextFieldComponent extends AbstractDashboardTextFie
         };
     }
 }
-AbstractDashboardIframeTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardIframeTextFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDashboardIframeTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardIframeTextFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AbstractDashboardIframeTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDashboardIframeTextFieldComponent, selector: "ncc-abstract-dashboard-iframe-text-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardIframeTextFieldComponent, decorators: [{
             type: Component,
@@ -8235,11 +8755,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'ncc-abstract-dashboard-iframe-text-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractDashboardPortalTextFieldComponent extends AbstractDashboardTextFieldComponent {
-    constructor(translate) {
-        super(translate);
+    constructor(translate, dataFieldPortalData) {
+        super(translate, dataFieldPortalData);
     }
     createCard(textFieldValue) {
         return {
@@ -8249,7 +8776,7 @@ class AbstractDashboardPortalTextFieldComponent extends AbstractDashboardTextFie
         };
     }
 }
-AbstractDashboardPortalTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardPortalTextFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDashboardPortalTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardPortalTextFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AbstractDashboardPortalTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractDashboardPortalTextFieldComponent, selector: "ncc-abstract-dashboard-pie-chart-text-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractDashboardPortalTextFieldComponent, decorators: [{
             type: Component,
@@ -8257,211 +8784,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'ncc-abstract-dashboard-pie-chart-text-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; } });
-
-var SideMenuSize;
-(function (SideMenuSize) {
-    SideMenuSize["SMALL"] = "side-menu-width-small";
-    SideMenuSize["MEDIUM"] = "side-menu-width-medium";
-    SideMenuSize["LARGE"] = "side-menu-width-large";
-    SideMenuSize["XL"] = "side-menu-width-xl";
-})(SideMenuSize || (SideMenuSize = {}));
-
-const NAE_SIDE_MENU_CONTROL = new InjectionToken('NaeSideMenuControl');
-
-class PortalWrapper {
-    constructor(_portal, _width) {
-        this._portal = _portal;
-        this._width = _width;
-    }
-    get portal() {
-        return this._portal;
-    }
-    get size() {
-        return this._width;
-    }
-}
-
-class SideMenuRef {
-    constructor(_event$) {
-        this._event$ = _event$;
-    }
-    get onEvent() {
-        return !!this._event$ ? this._event$.asObservable() :
-            throwError(new Error('Side menu event stream was not correctly bound to side menu component!'));
-    }
-    get onClose() {
-        return !!this._event$ ? this._event$.pipe(filter((event) => !event.opened)) :
-            throwError(new Error('Side menu close event stream was not correctly bound to side menu component!'));
-    }
-}
-
-class SideMenuControl {
-    constructor(bindingsFunction = () => { }, sideMenuOpenedStateChange = of(true), sideMenuCloseFunction, _injectionData, isVersionVisible, allVersionEnabled) {
-        this.sideMenuCloseFunction = sideMenuCloseFunction;
-        this._injectionData = _injectionData;
-        this.isVersionVisible = isVersionVisible;
-        this.allVersionEnabled = allVersionEnabled;
-        this._event$ = new Subject();
-        bindingsFunction(this._event$);
-        sideMenuOpenedStateChange.subscribe((opened) => {
-            if (!opened) {
-                this._event$.next({ opened, message: 'Side menu closed unexpectedly' });
-                this._event$.complete();
-            }
-        });
-    }
-    get data() {
-        return this._injectionData;
-    }
-    publish(event) {
-        this._event$.next(event);
-    }
-    close(event) {
-        if (!event.message) {
-            event.message = 'Side menu is closing';
-        }
-        this._event$.next(Object.assign(Object.assign({}, event), { opened: false }));
-        return this.sideMenuCloseFunction().pipe(tap((closed) => {
-            if (closed === 'close') {
-                this._event$.complete();
-            }
-        }));
-    }
-}
-
-const NAE_NET_VERSION_VISIBLE = new InjectionToken('NaeNetVersionVisible');
-const NAE_NET_ALL_VERSIONS = new InjectionToken('NaeNetAllVersion');
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
-class SideMenuService {
-    constructor(isVersionVisible, allVersionEnabled) {
-        this.isVersionVisible = isVersionVisible !== null ? isVersionVisible : true;
-        this.allVersionEnabled = allVersionEnabled !== null ? allVersionEnabled : false;
-    }
-    /**
-     * register SideMenuContainerComponent
-     *
-     * params menu is SideMenuContainerComponent
-     */
-    registerSideMenu(menu) {
-        if (this._sideMenuComponent) {
-            throw new Error('SideMenuContainerComponent has been already registered!');
-        }
-        this._sideMenuComponent = menu;
-    }
-    isOpened() {
-        return this._sideMenuComponent.isOpened();
-    }
-    /**
-     * Open this _sideMenu, and return a Observable that will resolve when it's fully opened (or get rejected if it didn't).
-     *
-     * @returns Observable<MatDrawerToggleResult>
-     */
-    open(componentOrTemplateRef, width = SideMenuSize.MEDIUM, injectionData) {
-        if (!this.componentIsPresent()) {
-            throw new Error('Side menu is not initialized');
-        }
-        if (this._sideMenuComponent.isOpened()) {
-            throw new Error('Side menu has been already opened with another content');
-        }
-        let ref = new SideMenuRef(null);
-        this._controlObject = new SideMenuControl(((event) => {
-            ref = new SideMenuRef(event);
-        }), this._sideMenuComponent.openedChange(), () => this._sideMenuComponent.close(this._sideMenuComponent), injectionData, this.isVersionVisible, this.allVersionEnabled);
-        const wrapper = this._createPortal(componentOrTemplateRef, width, this._controlObject);
-        this._sideMenuComponent.open(wrapper).subscribe((opened) => {
-            if (opened === 'open') {
-                this._controlObject.publish({ opened: true });
-            }
-        });
-        return ref;
-    }
-    _createPortal(template, size, controlObject) {
-        if (template === undefined || template === null) {
-            throw new Error('A component template must be provided to open a side menu!');
-        }
-        if (template instanceof TemplateRef) {
-            return new PortalWrapper(new TemplatePortal(template, null), size);
-        }
-        if (template instanceof Type) {
-            const injector = Injector.create({ providers: [{ provide: NAE_SIDE_MENU_CONTROL, useValue: controlObject }] });
-            return new PortalWrapper(new ComponentPortal(template, null, injector), size);
-        }
-    }
-    /**
-     * Close this _sideMenu, and return a Observable that will resolve when it's fully closed (or get rejected if it didn't).
-     *
-     * @returns Observable<MatDrawerToggleResult>
-     */
-    close(closeEvent) {
-        return this._controlObject.close(closeEvent);
+/**
+ * @deprecated
+ * */
+/**
+ * Component that is created in the body of the task panel accord on the Petri Net, which must be bind properties.
+ */
+class AbstractUserFieldComponent extends AbstractDataFieldComponent {
+    constructor(informAboutInvalidData) {
+        super(informAboutInvalidData);
     }
-    /**
-     * Toggle this _sideMenu. This is equivalent to calling close() when it's already opened, or open() when it's closed.
-     *
-     * @param  isOpen  Whether the _sideMenu should be open.
-     *
-     * @returns open or close side menu
-     */
-    // public toggle(isOpen?: boolean): Observable<MatDrawerToggleResult> {
-    //     return from(this._sideMenu.toggle(isOpen));
-    // }
-    componentIsPresent() {
-        return !!this._sideMenuComponent;
+    ngOnInit() {
+        super.ngOnInit();
     }
 }
-SideMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuService, deps: [{ token: NAE_NET_VERSION_VISIBLE, optional: true }, { token: NAE_NET_ALL_VERSIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-SideMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuService, decorators: [{
-            type: Injectable,
+AbstractUserFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractUserFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractUserFieldComponent, selector: "ncc-abstract-user-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserFieldComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root'
+                    selector: 'ncc-abstract-user-field',
+                    template: ''
                 }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_NET_VERSION_VISIBLE]
-                    }] }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [NAE_NET_ALL_VERSIONS]
+                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
                     }] }];
-    } });
+    }, propDecorators: { dataField: [{
+                type: Input
+            }] } });
 
-/**
- * Component that is created in the body of the task panel accord on the Petri Net, which must be bind properties.
- */
-class AbstractUserFieldComponent extends AbstractDataFieldComponent {
+class AbstractUserDefaultFieldComponent extends AbstractBaseDataFieldComponent {
     /**
      * Inject services.
-     * @param _sideMenuService Service to open and close [UserAssignComponent]{@link AbstractUserAssignComponent} with user data.
+     * @param _dialog Service to open and close [UserAssignDialogComponent]{@link UserAssignDialogComponent} with user data.
      * @param _snackbar Service to displaying information to the user.
      * @param _translate Service to translate text.
      * @param informAboutInvalidData whether the backend should be notified about invalid values.
      * Option injected trough `NAE_INFORM_ABOUT_INVALID_DATA` InjectionToken
      */
-    constructor(_sideMenuService, _snackbar, _translate, informAboutInvalidData) {
-        super(informAboutInvalidData);
-        this._sideMenuService = _sideMenuService;
+    constructor(_dialog, _snackbar, _translate, dataFieldPortalData) {
+        super(dataFieldPortalData);
+        this._dialog = _dialog;
         this._snackbar = _snackbar;
         this._translate = _translate;
     }
-    ngOnInit() {
-        super.ngOnInit();
-    }
     /**
      * Call after click on user field button.
      *
-     * Open [UserAssignComponent]{@link AbstractUserAssignComponent} in side menu with data represents preselected user from backend.
+     * Open [UserAssignDialogComponent]{@link UserAssignDialogComponent} in side menu with data represents preselected user from backend.
      *
      * After close side menu, the snackbar info will be displayed either for the unselected user or the selected one.
      */
     selectAbstractUser(component) {
         let valueReturned = false;
-        this._sideMenuService.open(component, SideMenuSize.MEDIUM, { roles: this.dataField.roles, value: this.dataField.value }).onClose.subscribe($event => {
+        const dialogRef = this._dialog.open(component, {
+            panelClass: "dialog-responsive",
+            data: { roles: this.dataField.roles, value: this.dataField.value },
+        });
+        dialogRef.afterClosed().subscribe($event => {
             if ($event.data) {
                 this.dataField.value = $event.data;
                 this._snackbar.openGenericSnackBar(this._translate.instant('dataField.snackBar.userAssigned', { userName: this.dataField.value.fullName }), 'how_to_reg');
@@ -8472,97 +8865,113 @@ class AbstractUserFieldComponent extends AbstractDataFieldComponent {
             }
         });
     }
+    getCutProperty(i18nLabel) {
+        if (this.labelWidth !== i18nLabel.offsetWidth) {
+            this.labelWidth = i18nLabel.offsetWidth;
+            const calculatedWidth = 'calc(0.5em + ' + i18nLabel.offsetWidth / 4 * 3 + 'px)';
+            this.cutProperty = `polygon(0 0, 0 100%, 100% 100%, 100% 0%, ${calculatedWidth} 0, ${calculatedWidth} 6%, 0.5em 6%, 0.5em 0)`;
+        }
+        return this.cutProperty;
+    }
 }
-AbstractUserFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserFieldComponent, deps: [{ token: SideMenuService }, { token: SnackBarService }, { token: i1$2.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AbstractUserFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractUserFieldComponent, selector: "ncc-abstract-user-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserFieldComponent, decorators: [{
+AbstractUserDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserDefaultFieldComponent, deps: [{ token: i1$3.MatDialog }, { token: SnackBarService }, { token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractUserDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractUserDefaultFieldComponent, selector: "ncc-abstract-user-default-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ncc-abstract-user-field',
+                    selector: 'ncc-abstract-user-default-field',
                     template: ''
                 }]
         }], ctorParameters: function () {
-        return [{ type: SideMenuService }, { type: SnackBarService }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
+        return [{ type: i1$3.MatDialog }, { type: SnackBarService }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                        args: [DATA_FIELD_PORTAL_DATA]
                     }] }];
-    }, propDecorators: { dataField: [{
-                type: Input
-            }] } });
+    } });
 
-class AbstractEnumerationIconFieldComponent {
-    constructor() {
+class AbstractEnumerationIconFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(dataFieldPortalData) {
+        super(dataFieldPortalData);
+    }
+    ngOnInit() {
+        var _a, _b;
+        if ((_b = (_a = this.dataField.component) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.horizontal) {
+            this.horizontal = this.dataField.component.properties.horizontal === "true";
+        }
     }
     resolveIconValue(key) {
         var _a, _b;
-        return (_b = (_a = this.enumerationField.component) === null || _a === void 0 ? void 0 : _a.optionIcons.find(icon => icon.key === key)) === null || _b === void 0 ? void 0 : _b.value;
+        return (_b = (_a = this.dataField.component) === null || _a === void 0 ? void 0 : _a.optionIcons.find(icon => icon.key === key)) === null || _b === void 0 ? void 0 : _b.value;
     }
     resolveIconType(key) {
         var _a, _b;
-        return (_b = (_a = this.enumerationField.component) === null || _a === void 0 ? void 0 : _a.optionIcons.find(icon => icon.key === key)) === null || _b === void 0 ? void 0 : _b.type;
+        return (_b = (_a = this.dataField.component) === null || _a === void 0 ? void 0 : _a.optionIcons.find(icon => icon.key === key)) === null || _b === void 0 ? void 0 : _b.type;
     }
     resolveArrow(key) {
         var _a;
-        return ((_a = this.enumerationField.component) === null || _a === void 0 ? void 0 : _a.properties.arrow) === 'true';
+        return ((_a = this.dataField.component) === null || _a === void 0 ? void 0 : _a.properties.arrow) === 'true';
     }
     resolveDivider(key) {
         var _a;
-        return ((_a = this.enumerationField.component) === null || _a === void 0 ? void 0 : _a.properties.divider) === 'true';
+        return ((_a = this.dataField.component) === null || _a === void 0 ? void 0 : _a.properties.divider) === 'true';
     }
     setEnumValue(key) {
-        if (!this.enumerationField.disabled) {
+        if (!this.formControlRef.disabled) {
             this.formControlRef.setValue(key);
         }
     }
     isSelected(key) {
-        return key === this.enumerationField.value;
+        return key === this.dataField.value;
     }
 }
-AbstractEnumerationIconFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationIconFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractEnumerationIconFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationIconFieldComponent, selector: "ncc-abstract-enumerataion-icon-field", inputs: { enumerationField: "enumerationField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, ngImport: i0, template: '', isInline: true });
+AbstractEnumerationIconFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationIconFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractEnumerationIconFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationIconFieldComponent, selector: "ncc-abstract-enumerataion-icon-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationIconFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-enumerataion-icon-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { enumerationField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
-class AbstractEnumerationAutocompleteDynamicFieldComponent {
-    constructor(_translate) {
+class AbstractEnumerationAutocompleteDynamicFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(_translate, dataFieldPortalData) {
+        super(dataFieldPortalData);
         this._translate = _translate;
         this.renderSelection = (key) => {
             if (key !== undefined && key !== '' && key !== null) {
-                if (this.enumerationField.choices.find(choice => choice.key === key)) {
-                    return this.enumerationField.choices.find(choice => choice.key === key).value;
+                if (this.dataField.choices.find(choice => choice.key === key)) {
+                    return this.dataField.choices.find(choice => choice.key === key).value;
                 }
             }
             return key;
         };
     }
     ngOnInit() {
-        this.filteredOptions = this.formControlRef.valueChanges.pipe(startWith(''), map(() => this.enumerationField.choices));
-        this.enumerationField.choicesChange$.subscribe(() => {
-            this.filteredOptions = of(this.enumerationField.choices);
+        this.filteredOptions = this.formControlRef.valueChanges.pipe(startWith(''), map(() => this.dataField.choices));
+        this.choiceSubscription = this.dataField.choicesChange$.subscribe(() => {
+            this.filteredOptions = of(this.dataField.choices);
         });
     }
     ngAfterViewInit() {
-        this.enumerationField.input = this.text;
+        this.dataField.input = this.text;
     }
     ngOnDestroy() {
         this.filteredOptions = undefined;
+        this.choiceSubscription.unsubscribe();
     }
     change() {
         if (this.text.nativeElement.value !== undefined) {
-            this.filteredOptions = of(this.enumerationField.choices);
+            this.filteredOptions = of(this.dataField.choices);
         }
     }
     buildErrorMessage() {
@@ -8571,50 +8980,35 @@ class AbstractEnumerationAutocompleteDynamicFieldComponent {
         }
     }
 }
-AbstractEnumerationAutocompleteDynamicFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationAutocompleteDynamicFieldComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-AbstractEnumerationAutocompleteDynamicFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationAutocompleteDynamicFieldComponent, selector: "ncc-abstract-enumeration-autocomplete-dynamic-field", inputs: { enumerationField: "enumerationField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, viewQueries: [{ propertyName: "text", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: '', isInline: true });
+AbstractEnumerationAutocompleteDynamicFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationAutocompleteDynamicFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractEnumerationAutocompleteDynamicFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractEnumerationAutocompleteDynamicFieldComponent, selector: "ncc-abstract-enumeration-autocomplete-dynamic-field", viewQueries: [{ propertyName: "text", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractEnumerationAutocompleteDynamicFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-enumeration-autocomplete-dynamic-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; }, propDecorators: { enumerationField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }], text: [{
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    }, propDecorators: { text: [{
                 type: ViewChild,
                 args: ['input']
             }] } });
 
 /**
- * Provides access to the {@link FilterField} instance for dependency injection inside
- * an {@link AbstractFilterFieldComponent} implementation.
- */
-const NAE_FILTER_FIELD = new InjectionToken('NaeFilterField');
-
+ * @deprecated
+ * */
 class AbstractFilterFieldComponent extends AbstractDataFieldComponent {
-    constructor(_parentInjector, informAboutInvalidData) {
+    constructor(informAboutInvalidData) {
         super(informAboutInvalidData);
-        this._parentInjector = _parentInjector;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        const providers = [
-            { provide: NAE_FILTER_FIELD, useValue: this.dataField }
-        ];
-        const injector = Injector.create({ providers, parent: this._parentInjector });
-        this.portal = new ComponentPortal(this.getFilterContentComponent(), null, injector);
-        this.initialized = true;
-    }
-    get editable() {
-        return !!this.dataField.behavior.editable;
     }
 }
-AbstractFilterFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFilterFieldComponent, deps: [{ token: i0.Injector }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractFilterFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFilterFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AbstractFilterFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractFilterFieldComponent, selector: "ncc-abstract-filter-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFilterFieldComponent, decorators: [{
             type: Component,
@@ -8623,7 +9017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     template: ''
                 }]
         }], ctorParameters: function () {
-        return [{ type: i0.Injector }, { type: undefined, decorators: [{
+        return [{ type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -8633,6 +9027,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Provides access to the {@link FilterField} instance for dependency injection inside
+ * an {@link AbstractFilterFieldComponent} implementation.
+ */
+const NAE_FILTER_FIELD = new InjectionToken('NaeFilterField');
+
 // TODO 23.4.2020 - Same as MergeOperator for Filters, should these Enums be kept separate, or should just one exist?
 /**
  * Determines the way {@link Predicate}s are combined together.
@@ -13605,39 +14005,6 @@ var Dashboard;
     Dashboard["FILTER_TAB_VIEW_COMPONENT_ID"] = "filter-tab-view";
 })(Dashboard || (Dashboard = {}));
 
-class DashboardPortalComponentRegistryService {
-    constructor() {
-        this.registry = new Map();
-        this.typeRegistry = new Map();
-    }
-    register(component, factory) {
-        this.registry.set(component, factory);
-    }
-    registerType(key, type) {
-        this.typeRegistry.set(key, type);
-    }
-    get(component, injector) {
-        if (!this.registry.has(component)) {
-            return undefined;
-        }
-        return this.registry.get(component)(injector);
-    }
-    getType(key) {
-        if (!this.typeRegistry.has(key)) {
-            return undefined;
-        }
-        return this.typeRegistry.get(key);
-    }
-}
-DashboardPortalComponentRegistryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardPortalComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DashboardPortalComponentRegistryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardPortalComponentRegistryService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardPortalComponentRegistryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
-
 class AbstractFilterFieldTabViewComponent {
     constructor(_registry, _filterField, _tabContentComponent, _tabViewComponent) {
         var _a, _b;
@@ -13677,7 +14044,7 @@ class AbstractFilterFieldTabViewComponent {
     }
     ;
 }
-AbstractFilterFieldTabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFilterFieldTabViewComponent, deps: [{ token: DashboardPortalComponentRegistryService }, { token: FilterField }, { token: i0.Type }, { token: i0.Type }], target: i0.ɵɵFactoryTarget.Component });
+AbstractFilterFieldTabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFilterFieldTabViewComponent, deps: [{ token: ComponentRegistryService }, { token: FilterField }, { token: i0.Type }, { token: i0.Type }], target: i0.ɵɵFactoryTarget.Component });
 AbstractFilterFieldTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractFilterFieldTabViewComponent, selector: "ncc-abstract-filter-field-tab-view", ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFilterFieldTabViewComponent, decorators: [{
             type: Component,
@@ -13685,7 +14052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'ncc-abstract-filter-field-tab-view',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: DashboardPortalComponentRegistryService }, { type: FilterField }, { type: i0.Type }, { type: i0.Type }]; } });
+        }], ctorParameters: function () { return [{ type: ComponentRegistryService }, { type: FilterField }, { type: i0.Type }, { type: i0.Type }]; } });
 
 const NAE_VIEW_ID = new InjectionToken('NaeViewId');
 const NAE_VIEW_ID_SEGMENT = new InjectionToken('NaeViewIdSegment');
@@ -13755,7 +14122,7 @@ class AbstractFilterFieldTabViewContentComponent extends AbstractFilterFieldCont
         this.componentPortal = this.registry.get(Dashboard.FILTER_TAB_VIEW_ID, portalInjector);
     }
 }
-AbstractFilterFieldTabViewContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFilterFieldTabViewContentComponent, deps: [{ token: DashboardPortalComponentRegistryService }, { token: i0.Injector }, { token: NAE_FILTER_FIELD }, { token: SearchService }], target: i0.ɵɵFactoryTarget.Component });
+AbstractFilterFieldTabViewContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFilterFieldTabViewContentComponent, deps: [{ token: ComponentRegistryService }, { token: i0.Injector }, { token: NAE_FILTER_FIELD }, { token: SearchService }], target: i0.ɵɵFactoryTarget.Component });
 AbstractFilterFieldTabViewContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractFilterFieldTabViewContentComponent, selector: "ncc-abstract-filter-field-tab-view-content", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFilterFieldTabViewContentComponent, decorators: [{
             type: Component,
@@ -13764,12 +14131,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     template: ''
                 }]
         }], ctorParameters: function () {
-        return [{ type: DashboardPortalComponentRegistryService }, { type: i0.Injector }, { type: FilterField, decorators: [{
+        return [{ type: ComponentRegistryService }, { type: i0.Injector }, { type: FilterField, decorators: [{
                         type: Inject,
                         args: [NAE_FILTER_FIELD]
                     }] }, { type: SearchService }];
     } });
 
+class AbstractFilterDefaultFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(_parentInjector, dataFieldPortalData) {
+        super(dataFieldPortalData);
+        this._parentInjector = _parentInjector;
+    }
+    ngOnInit() {
+        const providers = [
+            { provide: NAE_FILTER_FIELD, useValue: this.dataField }
+        ];
+        const injector = Injector.create({ providers, parent: this._parentInjector });
+        this.portal = new ComponentPortal(this.getFilterContentComponent(), null, injector);
+        this.initialized = true;
+    }
+    get editable() {
+        return !!this.dataField.behavior.editable;
+    }
+}
+AbstractFilterDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFilterDefaultFieldComponent, deps: [{ token: i0.Injector }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractFilterDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractFilterDefaultFieldComponent, selector: "ncc-abstract-filter-default-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFilterDefaultFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-filter-default-field',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.Injector }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
+
+/**
+ * @deprecated
+ * */
 class AbstractI18nFieldComponent extends AbstractDataFieldComponent {
     constructor(informAboutInvalidData) {
         super(informAboutInvalidData);
@@ -14045,8 +14449,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i2$1.DomSanitizer }]; } });
 
-class AbstractI18nErrorsComponent {
-    constructor(languageIconsService, _translate) {
+class AbstractI18nErrorsComponent extends AbstractBaseDataFieldComponent {
+    constructor(languageIconsService, _translate, dataFieldPortalData) {
+        super(dataFieldPortalData);
         this.languageIconsService = languageIconsService;
         this._translate = _translate;
     }
@@ -14055,7 +14460,7 @@ class AbstractI18nErrorsComponent {
             return this._translate.instant('dataField.validations.requiredI18n');
         }
         if (this.formControlRef.hasError(I18nFieldValidation.TRANSLATION_REQUIRED)) {
-            const tmp = this.textI18nField.validations.find(value => value.validationRule.includes(I18nFieldValidation.TRANSLATION_REQUIRED)).validationRule.split(' ');
+            const tmp = this.dataField.validations.find(value => value.validationRule.includes(I18nFieldValidation.TRANSLATION_REQUIRED)).validationRule.split(' ');
             const missingLanguages = tmp[1]
                 .replace(' ', '')
                 .split(',')
@@ -14065,7 +14470,7 @@ class AbstractI18nErrorsComponent {
             return this.resolveErrorMessage(I18nFieldValidation.TRANSLATION_REQUIRED, this._translate.instant('dataField.validations.translationRequired', { translation: missingLanguages }));
         }
         if (this.formControlRef.hasError(I18nFieldValidation.TRANSLATION_ONLY)) {
-            const tmp = this.textI18nField.validations.find(value => value.validationRule.includes(I18nFieldValidation.TRANSLATION_ONLY)).validationRule.split(' ');
+            const tmp = this.dataField.validations.find(value => value.validationRule.includes(I18nFieldValidation.TRANSLATION_ONLY)).validationRule.split(' ');
             const onlyLanguages = tmp[1]
                 .replace(' ', '')
                 .split(',')
@@ -14076,32 +14481,33 @@ class AbstractI18nErrorsComponent {
         return '';
     }
     resolveErrorMessage(search, generalMessage) {
-        const validation = this.textI18nField.validations.find(value => value.validationRule.includes(search));
+        const validation = this.dataField.validations.find(value => value.validationRule.includes(search));
         if (validation.validationMessage && validation.validationMessage !== '') {
             return validation.validationMessage;
         }
         return generalMessage;
     }
 }
-AbstractI18nErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractI18nErrorsComponent, deps: [{ token: LanguageIconsService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-AbstractI18nErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractI18nErrorsComponent, selector: "ncc-abstract-i18n-errors", inputs: { showLargeLayout: "showLargeLayout", formControlRef: "formControlRef", textI18nField: "textI18nField" }, ngImport: i0, template: '', isInline: true });
+AbstractI18nErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractI18nErrorsComponent, deps: [{ token: LanguageIconsService }, { token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractI18nErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractI18nErrorsComponent, selector: "ncc-abstract-i18n-errors", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractI18nErrorsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-i18n-errors',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: LanguageIconsService }, { type: i1$2.TranslateService }]; }, propDecorators: { showLargeLayout: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], textI18nField: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: LanguageIconsService }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
 class AbstractI18nTextFieldComponent extends AbstractI18nErrorsComponent {
-    constructor(languageIconsService, _translateService, _domSanitizer) {
-        super(languageIconsService, _translateService);
+    constructor(languageIconsService, _translateService, _domSanitizer, dataFieldPortalData) {
+        super(languageIconsService, _translateService, dataFieldPortalData);
         this.languageIconsService = languageIconsService;
         this._translateService = _translateService;
         this._domSanitizer = _domSanitizer;
@@ -14112,11 +14518,11 @@ class AbstractI18nTextFieldComponent extends AbstractI18nErrorsComponent {
         this.languageKeys = Object.keys(this.languageIconsService.languageIcons);
     }
     ngOnInit() {
-        this.currentValue = I18nField.toObject(this.textI18nField.value);
-        this.fieldUpdateSubscription = this.textI18nField.updated.subscribe(() => {
+        this.currentValue = I18nField.toObject(this.dataField.value);
+        this.fieldUpdateSubscription = this.dataField.updated.subscribe(() => {
             this.refreshCurrentValue();
         });
-        this.fieldValueChangesSubscription = this.textI18nField.valueChanges().subscribe(newValue => {
+        this.fieldValueChangesSubscription = this.dataField.valueChanges().subscribe(newValue => {
             this.refreshCurrentValue(newValue);
         });
     }
@@ -14124,8 +14530,8 @@ class AbstractI18nTextFieldComponent extends AbstractI18nErrorsComponent {
         this.fieldUpdateSubscription.unsubscribe();
         this.fieldValueChangesSubscription.unsubscribe();
     }
-    refreshCurrentValue(newValue = this.textI18nField.value) {
-        if (this.textI18nField.disabled) {
+    refreshCurrentValue(newValue = this.dataField.value) {
+        if (this.dataField.disabled) {
             this.selectedLanguage = this._translateService.currentLang.split('-')[0];
             this.filledShown = false;
             this.initializedLanguage = false;
@@ -14154,7 +14560,7 @@ class AbstractI18nTextFieldComponent extends AbstractI18nErrorsComponent {
         if (!this.isDefaultValue(this.selectedLanguage) && this.currentValue[this.selectedLanguage] === '') {
             delete this.currentValue[this.selectedLanguage];
         }
-        this.textI18nField.value = I18nField.fromObject(this.currentValue, this.textI18nField.value.key);
+        this.dataField.value = I18nField.fromObject(this.currentValue, this.dataField.value.key);
         this.formControlRef.markAsTouched();
     }
     refreshFilledMap() {
@@ -14171,7 +14577,7 @@ class AbstractI18nTextFieldComponent extends AbstractI18nErrorsComponent {
     }
     removeTranslation(key) {
         delete this.currentValue[key];
-        this.textI18nField.value = I18nField.fromObject(this.currentValue, this.textI18nField.value.key);
+        this.dataField.value = I18nField.fromObject(this.currentValue, this.dataField.value.key);
         this.formControlRef.markAsTouched();
         this.refreshFilledMap();
     }
@@ -14182,120 +14588,151 @@ class AbstractI18nTextFieldComponent extends AbstractI18nErrorsComponent {
         if (this.labelWidth !== i18nLabel.offsetWidth) {
             this.labelWidth = i18nLabel.offsetWidth;
             const calculatedWidth = 'calc(0.5em + ' + i18nLabel.offsetWidth / 4 * 3 + 'px)';
-            this.cutProperty = `polygon(0 0, 0 100%, 100% 100%, 100% 0%, ${calculatedWidth} 0, ${calculatedWidth} 5%, 0.5em 5%, 0.5em 0)`;
+            this.cutProperty = `polygon(0 0, 0 100%, 100% 100%, 100% 0%, ${calculatedWidth} 0, ${calculatedWidth} 6%, 0.5em 6%, 0.5em 0)`;
         }
         return this.cutProperty;
     }
+    hasHint() {
+        return this.dataField.description !== undefined && this.dataField.description !== '';
+    }
     getTranslation() {
         const locale = this._translateService.currentLang.split('-')[0];
-        return locale in this.textI18nField.value.translations
-            ? this.textI18nField.value.translations[locale]
-            : this.textI18nField.value.defaultValue;
+        return locale in this.dataField.value.translations
+            ? this.dataField.value.translations[locale]
+            : this.dataField.value.defaultValue;
     }
     isPlainText() {
-        if (this.textPropertyEnabled('plainText')) {
-            return this.textI18nField.component.properties.plainText === 'true';
+        if (this.checkPropertyInComponent('plainText')) {
+            return this.dataField.component.properties.plainText === 'true';
         }
     }
     getTextColor() {
-        if (this.textPropertyEnabled('textColor')) {
-            return this.textI18nField.component.properties.textColor;
+        if (this.checkPropertyInComponent('textColor')) {
+            return this.dataField.component.properties.textColor;
         }
     }
     getTextFontSize() {
-        if (this.textPropertyEnabled('fontSize')) {
-            return this.textI18nField.component.properties.fontSize + 'px';
+        if (this.checkPropertyInComponent('fontSize')) {
+            return this.dataField.component.properties.fontSize + 'px';
         }
     }
     textPropertyEnabled(property) {
         var _a, _b;
-        return !!((_b = (_a = this.textI18nField) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.properties)
-            && property in this.textI18nField.component.properties;
+        return !!((_b = (_a = this.dataField) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.properties)
+            && property in this.dataField.component.properties;
     }
 }
-AbstractI18nTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractI18nTextFieldComponent, deps: [{ token: LanguageIconsService }, { token: i1$2.TranslateService }, { token: i2$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-AbstractI18nTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractI18nTextFieldComponent, selector: "ncc-abstract-i18n-text-field", inputs: { textI18nField: "textI18nField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractI18nTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractI18nTextFieldComponent, deps: [{ token: LanguageIconsService }, { token: i1$2.TranslateService }, { token: i2$1.DomSanitizer }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractI18nTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractI18nTextFieldComponent, selector: "ncc-abstract-i18n-text-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractI18nTextFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-i18n-text-field',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: LanguageIconsService }, { type: i1$2.TranslateService }, { type: i2$1.DomSanitizer }]; }, propDecorators: { textI18nField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: LanguageIconsService }, { type: i1$2.TranslateService }, { type: i2$1.DomSanitizer }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
-class AbstractI18nDividerFieldComponent {
+class AbstractI18nDividerFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(dataFieldPortalData) {
+        super(dataFieldPortalData);
+    }
     getDividerColor() {
-        if (this.dividerPropertyEnabled('dividerColor')) {
-            return this.dividerI18nField.component.properties.dividerColor;
+        if (this.checkPropertyInComponent('dividerColor')) {
+            return this.dataField.component.properties.dividerColor;
         }
     }
     isDividerLGBTQ() {
-        if (this.dividerPropertyEnabled('dividerLGBTQ')) {
-            return this.dividerI18nField.component.properties.dividerLGBTQ === 'true';
+        if (this.checkPropertyInComponent('dividerLGBTQ')) {
+            return this.dataField.component.properties.dividerLGBTQ === 'true';
         }
         return false;
     }
     getDividerFontSize() {
-        if (this.dividerPropertyEnabled('fontSize')) {
-            return this.dividerI18nField.component.properties.fontSize + 'px';
+        if (this.checkPropertyInComponent('fontSize')) {
+            return this.dataField.component.properties.fontSize + 'px';
         }
     }
     dividerPropertyEnabled(property) {
         var _a, _b;
-        return !!((_b = (_a = this.dividerI18nField) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.properties)
-            && property in this.dividerI18nField.component.properties;
+        return !!((_b = (_a = this.dataField) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.properties)
+            && property in this.dataField.component.properties;
     }
 }
-AbstractI18nDividerFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractI18nDividerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractI18nDividerFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractI18nDividerFieldComponent, selector: "ncc-abstract-i18n-divider-field", inputs: { dividerI18nField: "dividerI18nField", formControlRef: "formControlRef", showLargeLayout: "showLargeLayout" }, ngImport: i0, template: '', isInline: true });
+AbstractI18nDividerFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractI18nDividerFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractI18nDividerFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractI18nDividerFieldComponent, selector: "ncc-abstract-i18n-divider-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractI18nDividerFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ncc-abstract-i18n-divider-field',
                     template: ''
                 }]
-        }], propDecorators: { dividerI18nField: [{
-                type: Input
-            }], formControlRef: [{
-                type: Input
-            }], showLargeLayout: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
 
+/**
+ * @deprecated
+ * */
 class AbstractUserListFieldComponent extends AbstractDataFieldComponent {
-    /**
-     * Inject services.
-     * @param _sideMenuService Service to open and close [UserAssignComponent]{@link AbstractUserAssignComponent} with user data.
-     * @param _snackbar Service to displaying information to the user.
-     * @param _translate Service to translate text.
-     * @param informAboutInvalidData whether the backend should be notified about invalid values.
-     * Option injected trough `NAE_INFORM_ABOUT_INVALID_DATA` InjectionToken
-     */
-    constructor(_sideMenuService, _snackbar, _translate, informAboutInvalidData) {
+    constructor(informAboutInvalidData) {
         super(informAboutInvalidData);
-        this._sideMenuService = _sideMenuService;
-        this._snackbar = _snackbar;
-        this._translate = _translate;
     }
     ngOnInit() {
         super.ngOnInit();
     }
+}
+AbstractUserListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserListFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractUserListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractUserListFieldComponent, selector: "ncc-abstract-user-list-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserListFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-user-list-field',
+                    template: '',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                    }] }];
+    }, propDecorators: { dataField: [{
+                type: Input
+            }] } });
+
+class AbstractUserListDefaultFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(_dialog, _snackbar, _translate, dataFieldPortalData) {
+        super(dataFieldPortalData);
+        this._dialog = _dialog;
+        this._snackbar = _snackbar;
+        this._translate = _translate;
+    }
     /**
      * Call after click on user field button.
      *
-     * Open [UserAssignComponent]{@link AbstractUserAssignComponent} in side menu with data represents preselected user from backend.
+     * Open [MultiUserAssignDialogComponent]{@link MultiUserAssignDialogComponent} in side menu with data represents preselected user from backend.
      *
      * After close side menu, the snackbar info will be displayed either for the unselected user or the selected one.
      */
     selectAbstractUser(component) {
         let valueReturned = false;
-        this._sideMenuService.open(component, SideMenuSize.MEDIUM, { roles: this.dataField.roles, value: this.dataField.value }).onClose.subscribe($event => {
+        const dialogRef = this._dialog.open(component, {
+            panelClass: "dialog-responsive",
+            data: { roles: this.dataField.roles, value: this.dataField.value },
+        });
+        dialogRef.afterClosed().subscribe($event => {
             if ($event.data) {
                 this.dataField.value = new UserListValue(new Map($event.data.map(v => [v.id, v])));
                 this._snackbar.openGenericSnackBar(this._translate.instant('dataField.snackBar.userListAssigned', { userNames: this.dataField.value.toString() }), 'how_to_reg');
@@ -14312,24 +14749,47 @@ class AbstractUserListFieldComponent extends AbstractDataFieldComponent {
         this.dataField.value = existingUsers;
     }
 }
-AbstractUserListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserListFieldComponent, deps: [{ token: SideMenuService }, { token: SnackBarService }, { token: i1$2.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AbstractUserListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractUserListFieldComponent, selector: "ncc-abstract-user-list-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserListFieldComponent, decorators: [{
+AbstractUserListDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserListDefaultFieldComponent, deps: [{ token: i1$3.MatDialog }, { token: SnackBarService }, { token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractUserListDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractUserListDefaultFieldComponent, selector: "ncc-abstract-user-list-default-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractUserListDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ncc-abstract-user-list-field',
+                    selector: 'ncc-abstract-user-list-default-field',
                     template: '',
                 }]
         }], ctorParameters: function () {
-        return [{ type: SideMenuService }, { type: SnackBarService }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
+        return [{ type: i1$3.MatDialog }, { type: SnackBarService }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
+
+/**
+ * @deprecated
+ * */
+class AbstractTaskRefFieldComponent extends AbstractDataFieldComponent {
+    constructor(informAboutInvalidData) {
+        super(informAboutInvalidData);
+    }
+}
+AbstractTaskRefFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTaskRefFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractTaskRefFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractTaskRefFieldComponent, selector: "ncc-abstract-task-ref-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTaskRefFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-task-ref-field',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
                         args: [NAE_INFORM_ABOUT_INVALID_DATA]
                     }] }];
-    }, propDecorators: { dataField: [{
-                type: Input
-            }] } });
+    } });
 
 /**
  * A collection of Task ref field dashboard component constants used to reference elements of the underlying processes
@@ -14354,134 +14814,6 @@ var TaskRefDashboardTileConstants;
     TaskRefDashboardTileConstants["DASHBOARD_TILE_PROCESS_IDENTIFIER"] = "dashboard_tile";
 })(TaskRefDashboardTileConstants || (TaskRefDashboardTileConstants = {}));
 
-class AbstractTaskRefFieldComponent extends AbstractDataFieldComponent {
-    constructor(_logger, informAboutInvalidData) {
-        super(informAboutInvalidData);
-        this._logger = _logger;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.createDashboardTiles();
-    }
-    createDashboardTiles() {
-        const gridRows = this.dataField.dashboardRows;
-        if (gridRows === undefined) {
-            this._logger.error(`TaskRef Dashboard '${this.dataField.stringId}' does not specify grid height! Add a number field with id '${TaskRefDashboardConstants.DASHBOARD_ROWS}' to the same task as the task ref field, to specify the height.`);
-        }
-        const gridCols = this.dataField.dashboardCols;
-        if (gridCols === undefined) {
-            this._logger.error(`TaskRef Dashboard '${this.dataField.stringId}' does not specify grid width! Add a number field with id '${TaskRefDashboardConstants.DASHBOARD_COLS}' to the same task as the task ref field, to specify the width.`);
-        }
-        const occupiedTiles = this.createFlagGrid(gridRows, gridCols);
-        this.dashboardTiles = [];
-        if (this.dataField.dashboardTiles && this.dataField.dashboardTiles.length > 0) {
-            for (const extractedTile of this.dataField.dashboardTiles) {
-                const tile = this.createDashboardTile(extractedTile);
-                this.dashboardTiles.push(tile);
-                this.occupySpace(occupiedTiles, tile.y, tile.x, tile.cols, tile.rows);
-            }
-        }
-        for (let y = 0; y < occupiedTiles.length; y++) {
-            for (let x = 0; x < occupiedTiles[y].length; x++) {
-                if (!occupiedTiles[y][x]) {
-                    this.dashboardTiles.push(this.createEmptyDashboardTile(x, y));
-                }
-            }
-        }
-    }
-    createFlagGrid(rows = 1, cols = 1) {
-        const result = [];
-        for (let r = 0; r < rows; r++) {
-            result.push(Array(cols).fill(false));
-        }
-        return result;
-    }
-    createDashboardTile(tile) {
-        const result = {
-            dataGroups: tile.dataGroups
-        };
-        for (const dg of tile.dataGroups) {
-            for (const field of dg.fields) {
-                switch (field.stringId) {
-                    case TaskRefDashboardTileConstants.DASHBOARD_TILE_X:
-                        result.x = field.value;
-                        break;
-                    case TaskRefDashboardTileConstants.DASHBOARD_TILE_Y:
-                        result.y = field.value;
-                        break;
-                    case TaskRefDashboardTileConstants.DASHBOARD_TILE_ROWS:
-                        result.rows = field.value;
-                        break;
-                    case TaskRefDashboardTileConstants.DASHBOARD_TILE_COLS:
-                        result.cols = field.value;
-                        break;
-                }
-            }
-        }
-        if (result.x === undefined) {
-            if (tile.dataGroups.length > 0) {
-                this._logger.error(`Task ref dashboard tile from task '${tile.dataGroups[0].parentTaskId}' transition '${tile.dataGroups[0].parentTransitionId}' case '${tile.dataGroups[0].parentCaseId}' does not specify tile grid X coordinate! Add a number field with ID '${TaskRefDashboardTileConstants.DASHBOARD_TILE_X}' to the referenced task to specify it.`);
-            }
-            result.x = 0;
-        }
-        if (result.y === undefined) {
-            if (tile.dataGroups.length > 0) {
-                this._logger.error(`Task ref dashboard tile from task '${tile.dataGroups[0].parentTaskId}' transition '${tile.dataGroups[0].parentTransitionId}' case '${tile.dataGroups[0].parentCaseId}' does not specify tile grid Y coordinate! Add a number field with ID '${TaskRefDashboardTileConstants.DASHBOARD_TILE_Y}' to the referenced task to specify it.`);
-            }
-            result.y = 0;
-        }
-        if (result.rows === undefined) {
-            if (tile.dataGroups.length > 0) {
-                this._logger.error(`Task ref dashboard tile from task '${tile.dataGroups[0].parentTaskId}' transition '${tile.dataGroups[0].parentTransitionId}' case '${tile.dataGroups[0].parentCaseId}' does not specify tile height coordinate! Add a number field with ID '${TaskRefDashboardTileConstants.DASHBOARD_TILE_ROWS}' to the referenced task to specify it.`);
-            }
-            result.rows = 1;
-        }
-        if (result.cols === undefined) {
-            if (tile.dataGroups.length > 0) {
-                this._logger.error(`Task ref dashboard tile from task '${tile.dataGroups[0].parentTaskId}' transition '${tile.dataGroups[0].parentTransitionId}' case '${tile.dataGroups[0].parentCaseId}' does not specify tile width coordinate! Add a number field with ID '${TaskRefDashboardTileConstants.DASHBOARD_TILE_COLS}' to the referenced task to specify it.`);
-            }
-            result.cols = 1;
-        }
-        return result;
-    }
-    // TODO a modified copy of a method of the same name from AbstractTaskContentComponent
-    occupySpace(grid, y, x, width, height) {
-        for (let j = y; j < y + height; j++) {
-            for (let i = x; i < x + width; i++) {
-                grid[j][i] = true;
-            }
-        }
-    }
-    createEmptyDashboardTile(x, y) {
-        return {
-            dataGroups: [],
-            x,
-            y,
-            rows: 1,
-            cols: 1,
-            isEmpty: true
-        };
-    }
-}
-AbstractTaskRefFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTaskRefFieldComponent, deps: [{ token: LoggerService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AbstractTaskRefFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractTaskRefFieldComponent, selector: "ncc-abstract-task-ref-field", inputs: { dataField: "dataField" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTaskRefFieldComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ncc-abstract-task-ref-field',
-                    template: ''
-                }]
-        }], ctorParameters: function () {
-        return [{ type: LoggerService }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
-                    }] }];
-    }, propDecorators: { dataField: [{
-                type: Input
-            }] } });
-
 const NAE_TASK_OPERATIONS = new InjectionToken('NaeTaskOperationsInterface');
 
 class AfterAction extends Subject {
@@ -15993,6 +16325,242 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+class AbstractTaskRefDashboardFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(_logger, dataFieldPortalData) {
+        super(dataFieldPortalData);
+        this._logger = _logger;
+    }
+    ngOnInit() {
+        this.createDashboardTiles();
+    }
+    createDashboardTiles() {
+        const gridRows = this.dataField.dashboardRows;
+        if (gridRows === undefined) {
+            this._logger.error(`TaskRef Dashboard '${this.dataField.stringId}' does not specify grid height! Add a number field with id '${TaskRefDashboardConstants.DASHBOARD_ROWS}' to the same task as the task ref field, to specify the height.`);
+        }
+        const gridCols = this.dataField.dashboardCols;
+        if (gridCols === undefined) {
+            this._logger.error(`TaskRef Dashboard '${this.dataField.stringId}' does not specify grid width! Add a number field with id '${TaskRefDashboardConstants.DASHBOARD_COLS}' to the same task as the task ref field, to specify the width.`);
+        }
+        const occupiedTiles = this.createFlagGrid(gridRows, gridCols);
+        this.dashboardTiles = [];
+        if (this.dataField.dashboardTiles && this.dataField.dashboardTiles.length > 0) {
+            for (const extractedTile of this.dataField.dashboardTiles) {
+                const tile = this.createDashboardTile(extractedTile);
+                this.dashboardTiles.push(tile);
+                this.occupySpace(occupiedTiles, tile.y, tile.x, tile.cols, tile.rows);
+            }
+        }
+        for (let y = 0; y < occupiedTiles.length; y++) {
+            for (let x = 0; x < occupiedTiles[y].length; x++) {
+                if (!occupiedTiles[y][x]) {
+                    this.dashboardTiles.push(this.createEmptyDashboardTile(x, y));
+                }
+            }
+        }
+    }
+    createFlagGrid(rows = 1, cols = 1) {
+        const result = [];
+        for (let r = 0; r < rows; r++) {
+            result.push(Array(cols).fill(false));
+        }
+        return result;
+    }
+    createDashboardTile(tile) {
+        const result = {
+            dataGroups: tile.dataGroups
+        };
+        for (const dg of tile.dataGroups) {
+            for (const field of dg.fields) {
+                switch (field.stringId) {
+                    case TaskRefDashboardTileConstants.DASHBOARD_TILE_X:
+                        result.x = field.value;
+                        break;
+                    case TaskRefDashboardTileConstants.DASHBOARD_TILE_Y:
+                        result.y = field.value;
+                        break;
+                    case TaskRefDashboardTileConstants.DASHBOARD_TILE_ROWS:
+                        result.rows = field.value;
+                        break;
+                    case TaskRefDashboardTileConstants.DASHBOARD_TILE_COLS:
+                        result.cols = field.value;
+                        break;
+                }
+            }
+        }
+        if (result.x === undefined) {
+            if (tile.dataGroups.length > 0) {
+                this._logger.error(`Task ref dashboard tile from task '${tile.dataGroups[0].parentTaskId}' transition '${tile.dataGroups[0].parentTransitionId}' case '${tile.dataGroups[0].parentCaseId}' does not specify tile grid X coordinate! Add a number field with ID '${TaskRefDashboardTileConstants.DASHBOARD_TILE_X}' to the referenced task to specify it.`);
+            }
+            result.x = 0;
+        }
+        if (result.y === undefined) {
+            if (tile.dataGroups.length > 0) {
+                this._logger.error(`Task ref dashboard tile from task '${tile.dataGroups[0].parentTaskId}' transition '${tile.dataGroups[0].parentTransitionId}' case '${tile.dataGroups[0].parentCaseId}' does not specify tile grid Y coordinate! Add a number field with ID '${TaskRefDashboardTileConstants.DASHBOARD_TILE_Y}' to the referenced task to specify it.`);
+            }
+            result.y = 0;
+        }
+        if (result.rows === undefined) {
+            if (tile.dataGroups.length > 0) {
+                this._logger.error(`Task ref dashboard tile from task '${tile.dataGroups[0].parentTaskId}' transition '${tile.dataGroups[0].parentTransitionId}' case '${tile.dataGroups[0].parentCaseId}' does not specify tile height coordinate! Add a number field with ID '${TaskRefDashboardTileConstants.DASHBOARD_TILE_ROWS}' to the referenced task to specify it.`);
+            }
+            result.rows = 1;
+        }
+        if (result.cols === undefined) {
+            if (tile.dataGroups.length > 0) {
+                this._logger.error(`Task ref dashboard tile from task '${tile.dataGroups[0].parentTaskId}' transition '${tile.dataGroups[0].parentTransitionId}' case '${tile.dataGroups[0].parentCaseId}' does not specify tile width coordinate! Add a number field with ID '${TaskRefDashboardTileConstants.DASHBOARD_TILE_COLS}' to the referenced task to specify it.`);
+            }
+            result.cols = 1;
+        }
+        return result;
+    }
+    // TODO a modified copy of a method of the same name from AbstractTaskContentComponent
+    occupySpace(grid, y, x, width, height) {
+        for (let j = y; j < y + height; j++) {
+            for (let i = x; i < x + width; i++) {
+                grid[j][i] = true;
+            }
+        }
+    }
+    createEmptyDashboardTile(x, y) {
+        return {
+            dataGroups: [],
+            x,
+            y,
+            rows: 1,
+            cols: 1,
+            isEmpty: true
+        };
+    }
+}
+AbstractTaskRefDashboardFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTaskRefDashboardFieldComponent, deps: [{ token: LoggerService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractTaskRefDashboardFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractTaskRefDashboardFieldComponent, selector: "ncc-abstract-task-ref-dashboard", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTaskRefDashboardFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-task-ref-dashboard',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: LoggerService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
+
+class AbstractTaskRefListFieldComponent extends AbstractBaseDataFieldComponent {
+    constructor(injector, taskViewType, dataFieldPortalData) {
+        super(dataFieldPortalData);
+        this.injector = injector;
+        this.taskViewType = taskViewType;
+    }
+    ngAfterViewInit() {
+        this.createFilter();
+        this.dataField.valueChanges().subscribe(() => {
+            this.createFilter();
+        });
+    }
+    createFilter() {
+        const portalInjector = Injector.create({
+            providers: [
+                {
+                    provide: NAE_BASE_FILTER,
+                    useValue: { filter: SimpleFilter.fromTaskQuery({ stringId: this.dataField.value }) }
+                },
+                {
+                    provide: NAE_VIEW_ID_SEGMENT,
+                    useValue: this.dataField.parentCaseId + '_' + this.dataField.parentTaskId + '_' + this.dataField.stringId
+                },
+                { provide: ViewIdService, useClass: ViewIdService }
+            ],
+            parent: this.injector
+        });
+        this.componentPortal = new ComponentPortal(this.taskViewType, null, portalInjector);
+    }
+}
+AbstractTaskRefListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTaskRefListFieldComponent, deps: [{ token: i0.Injector }, { token: i0.Type }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractTaskRefListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractTaskRefListFieldComponent, selector: "ncc-abstract-task-ref-list-field", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTaskRefListFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-task-ref-list-field',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.Injector }, { type: i0.Type }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
+
+const NAE_DEFAULT_HEADERS = new InjectionToken('NaeDefaultHeaders');
+
+const NAE_CASE_REF_CREATE_CASE = new InjectionToken('NaeCaseRefCreateCase');
+const NAE_CASE_REF_SEARCH = new InjectionToken('NaeCaseRefSearch');
+
+class AbstractCaseRefDefaultComponent extends AbstractBaseDataFieldComponent {
+    constructor(injector, caseViewType, dataFieldPortalData) {
+        super(dataFieldPortalData);
+        this.injector = injector;
+        this.caseViewType = caseViewType;
+    }
+    ngAfterViewInit() {
+        this.createFilter();
+        this.dataField.valueChanges().subscribe(() => {
+            this.createFilter();
+        });
+    }
+    createFilter() {
+        var _a, _b, _c, _d, _e, _f;
+        let portalInjector;
+        const filterValue = this.dataField.value.length > 0 ? this.dataField.value : '';
+        portalInjector = Injector.create({
+            providers: [
+                {
+                    provide: NAE_DEFAULT_HEADERS, useValue: (_b = (_a = this.dataField.component) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.headers.split(',')
+                },
+                {
+                    provide: NAE_CASE_REF_CREATE_CASE, useValue: ((_d = (_c = this.dataField.component) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.createCase) === 'true'
+                },
+                {
+                    provide: NAE_CASE_REF_SEARCH, useValue: ((_f = (_e = this.dataField.component) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.search) === 'true'
+                },
+                {
+                    provide: NAE_BASE_FILTER,
+                    useValue: { filter: SimpleFilter.fromCaseQuery({ stringId: filterValue }) }
+                },
+                {
+                    provide: NAE_VIEW_ID_SEGMENT,
+                    useValue: this.dataField.parentCaseId + '_' + this.dataField.parentTaskId + '_' + this.dataField.stringId
+                },
+                { provide: ViewIdService, useClass: ViewIdService }
+            ],
+            parent: this.injector
+        });
+        this.componentPortal = new ComponentPortal(this.caseViewType, null, portalInjector);
+    }
+}
+AbstractCaseRefDefaultComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractCaseRefDefaultComponent, deps: [{ token: i0.Injector }, { token: i0.Type }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AbstractCaseRefDefaultComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractCaseRefDefaultComponent, selector: "ncc-abstract-case-ref-default", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractCaseRefDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ncc-abstract-case-ref-default',
+                    template: ''
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.Injector }, { type: i0.Type }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
+
 const BOOLEAN_VALUE_LABEL_ENABLED = new InjectionToken('BooleanValueLabelEnabledToken');
 
 /**
@@ -17353,15 +17921,6 @@ var PermissionType;
     PermissionType["SET"] = "set";
 })(PermissionType || (PermissionType = {}));
 
-const NAE_USER_ASSIGN_COMPONENT = new InjectionToken('NaeUserAssignComponent');
-const NAE_FILES_UPLOAD_COMPONENT = new InjectionToken('NaeFilesUploadComponent');
-const NAE_NEW_CASE_COMPONENT = new InjectionToken('NaeNewCaseComponent');
-const NAE_OPTION_SELECTOR_COMPONENT = new InjectionToken('NaeOptionSelectorComponent');
-const NAE_SAVE_FILTER_COMPONENT = new InjectionToken('NaeSaveFilterComponent');
-const NAE_LOAD_FILTER_COMPONENT = new InjectionToken('NaeLoadFilterComponent');
-const NAE_USER_IMPERSONATE_COMPONENT = new InjectionToken('NaeUserImpersonateComponent');
-const NAE_ADMIN_IMPERSONATE_COMPONENT = new InjectionToken('NaeAdminImpersonateComponent');
-
 /**
  * Holds the information that accompanies a page load request. These information are held outside of the
  * service that handles the requests, so that state information about multiple requests can be handled independently of each other.
@@ -17534,6 +18093,15 @@ function createSortParam(attribute, direction) {
     return `${attribute},${direction}`;
 }
 
+const NAE_USER_ASSIGN_DIALOG_COMPONENT = new InjectionToken('NaeUserAssignDialogComponent');
+const NAE_FILES_UPLOAD_DIALOG_COMPONENT = new InjectionToken('NaeFilesUploadDialogComponent');
+const NAE_NEW_CASE_DIALOG_COMPONENT = new InjectionToken('NaeNewCaseDialogComponent');
+const NAE_OPTION_SELECTOR_DIALOG_COMPONENT = new InjectionToken('NaeOptionSelectorDialogComponent');
+const NAE_SAVE_FILTER_DIALOG_COMPONENT = new InjectionToken('NaeSaveFilterDialogComponent');
+const NAE_LOAD_FILTER_DIALOG_COMPONENT = new InjectionToken('NaeLoadFilterDialogComponent');
+const NAE_USER_IMPERSONATE_DIALOG_COMPONENT = new InjectionToken('NaeUserImpersonateDialogComponent');
+const NAE_ADMIN_IMPERSONATE_DIALOG_COMPONENT = new InjectionToken('NaeAdminImpersonateDialogComponent');
+
 /**
  * Enum AssignPolicy
  *
@@ -17664,10 +18232,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: UserComparatorService }, { type: UserService }]; } });
 
 class CaseViewService extends AbstractSortableViewComponent {
-    constructor(_allowedNetsService, _sideMenuService, _caseResourceService, _log, _snackBarService, _searchService, _translate, _user, _processService, resolver, _newCaseComponent, newCaseConfig, _permissionService) {
+    constructor(_allowedNetsService, _dialog, _caseResourceService, _log, _snackBarService, _searchService, _translate, _user, _processService, resolver, _newCaseComponent, newCaseConfig, _permissionService) {
         super(resolver);
         this._allowedNetsService = _allowedNetsService;
-        this._sideMenuService = _sideMenuService;
+        this._dialog = _dialog;
         this._caseResourceService = _caseResourceService;
         this._log = _log;
         this._snackBarService = _snackBarService;
@@ -17800,12 +18368,18 @@ class CaseViewService extends AbstractSortableViewComponent {
         isCaseTitleRequired: true
     }) {
         const myCase = new Subject();
-        this._sideMenuService.open(this._newCaseComponent, SideMenuSize.MEDIUM, {
-            allowedNets$: this.getNewCaseAllowedNets(),
-            newCaseCreationConfiguration
-        }).onClose.subscribe($event => {
-            this._log.debug($event.message, $event.data);
-            if ($event.data) {
+        const dialogRef = this._dialog.open(this._newCaseComponent, {
+            width: '40%',
+            minWidth: '300px',
+            panelClass: "dialog-responsive",
+            data: {
+                allowedNets$: this.getNewCaseAllowedNets(),
+                newCaseCreationConfiguration
+            },
+        });
+        dialogRef.afterClosed().subscribe($event => {
+            if ($event === null || $event === void 0 ? void 0 : $event.data) {
+                this._log.debug($event.message, $event.data);
                 this.reload();
                 myCase.next($event.data);
             }
@@ -17892,16 +18466,16 @@ class CaseViewService extends AbstractSortableViewComponent {
         return this._permissionService.hasCasePermission(aCase, PermissionType.VIEW);
     }
 }
-CaseViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CaseViewService, deps: [{ token: AllowedNetsService }, { token: SideMenuService }, { token: CaseResourceService }, { token: LoggerService }, { token: SnackBarService }, { token: SearchService }, { token: i1$2.TranslateService }, { token: UserService }, { token: ProcessService }, { token: SearchIndexResolverService }, { token: NAE_NEW_CASE_COMPONENT, optional: true }, { token: NAE_NEW_CASE_CONFIGURATION, optional: true }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Injectable });
+CaseViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CaseViewService, deps: [{ token: AllowedNetsService }, { token: i1$3.MatDialog }, { token: CaseResourceService }, { token: LoggerService }, { token: SnackBarService }, { token: SearchService }, { token: i1$2.TranslateService }, { token: UserService }, { token: ProcessService }, { token: SearchIndexResolverService }, { token: NAE_NEW_CASE_DIALOG_COMPONENT, optional: true }, { token: NAE_NEW_CASE_CONFIGURATION, optional: true }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Injectable });
 CaseViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CaseViewService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CaseViewService, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
-        return [{ type: AllowedNetsService }, { type: SideMenuService }, { type: CaseResourceService }, { type: LoggerService }, { type: SnackBarService }, { type: SearchService }, { type: i1$2.TranslateService }, { type: UserService }, { type: ProcessService }, { type: SearchIndexResolverService }, { type: undefined, decorators: [{
+        return [{ type: AllowedNetsService }, { type: i1$3.MatDialog }, { type: CaseResourceService }, { type: LoggerService }, { type: SnackBarService }, { type: SearchService }, { type: i1$2.TranslateService }, { type: UserService }, { type: ProcessService }, { type: SearchIndexResolverService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_NEW_CASE_COMPONENT]
+                        args: [NAE_NEW_CASE_DIALOG_COMPONENT]
                     }] }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
@@ -18483,6 +19057,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     }] }, { type: TaskContentService }];
     } });
 
+var SideMenuSize;
+(function (SideMenuSize) {
+    SideMenuSize["SMALL"] = "side-menu-width-small";
+    SideMenuSize["MEDIUM"] = "side-menu-width-medium";
+    SideMenuSize["LARGE"] = "side-menu-width-large";
+    SideMenuSize["XL"] = "side-menu-width-xl";
+})(SideMenuSize || (SideMenuSize = {}));
+
+const NAE_USER_ASSIGN_COMPONENT = new InjectionToken('NaeUserAssignComponent');
+const NAE_FILES_UPLOAD_COMPONENT = new InjectionToken('NaeFilesUploadComponent');
+const NAE_NEW_CASE_COMPONENT = new InjectionToken('NaeNewCaseComponent');
+const NAE_OPTION_SELECTOR_COMPONENT = new InjectionToken('NaeOptionSelectorComponent');
+const NAE_SAVE_FILTER_COMPONENT = new InjectionToken('NaeSaveFilterComponent');
+const NAE_LOAD_FILTER_COMPONENT = new InjectionToken('NaeLoadFilterComponent');
+const NAE_USER_IMPERSONATE_COMPONENT = new InjectionToken('NaeUserImpersonateComponent');
+const NAE_ADMIN_IMPERSONATE_COMPONENT = new InjectionToken('NaeAdminImpersonateComponent');
+
+const NAE_SIDE_MENU_CONTROL = new InjectionToken('NaeSideMenuControl');
+
+class PortalWrapper {
+    constructor(_portal, _width) {
+        this._portal = _portal;
+        this._width = _width;
+    }
+    get portal() {
+        return this._portal;
+    }
+    get size() {
+        return this._width;
+    }
+}
+
+class SideMenuRef {
+    constructor(_event$) {
+        this._event$ = _event$;
+    }
+    get onEvent() {
+        return !!this._event$ ? this._event$.asObservable() :
+            throwError(new Error('Side menu event stream was not correctly bound to side menu component!'));
+    }
+    get onClose() {
+        return !!this._event$ ? this._event$.pipe(filter((event) => !event.opened)) :
+            throwError(new Error('Side menu close event stream was not correctly bound to side menu component!'));
+    }
+}
+
+class SideMenuControl {
+    constructor(bindingsFunction = () => { }, sideMenuOpenedStateChange = of(true), sideMenuCloseFunction, _injectionData, isVersionVisible, allVersionEnabled) {
+        this.sideMenuCloseFunction = sideMenuCloseFunction;
+        this._injectionData = _injectionData;
+        this.isVersionVisible = isVersionVisible;
+        this.allVersionEnabled = allVersionEnabled;
+        this._event$ = new Subject();
+        bindingsFunction(this._event$);
+        sideMenuOpenedStateChange.subscribe((opened) => {
+            if (!opened) {
+                this._event$.next({ opened, message: 'Side menu closed unexpectedly' });
+                this._event$.complete();
+            }
+        });
+    }
+    get data() {
+        return this._injectionData;
+    }
+    publish(event) {
+        this._event$.next(event);
+    }
+    close(event) {
+        if (!event.message) {
+            event.message = 'Side menu is closing';
+        }
+        this._event$.next(Object.assign(Object.assign({}, event), { opened: false }));
+        return this.sideMenuCloseFunction().pipe(tap((closed) => {
+            if (closed === 'close') {
+                this._event$.complete();
+            }
+        }));
+    }
+}
+
+const NAE_NET_VERSION_VISIBLE = new InjectionToken('NaeNetVersionVisible');
+const NAE_NET_ALL_VERSIONS = new InjectionToken('NaeNetAllVersion');
+
+class SideMenuService {
+    constructor(isVersionVisible, allVersionEnabled) {
+        this.isVersionVisible = isVersionVisible !== null ? isVersionVisible : true;
+        this.allVersionEnabled = allVersionEnabled !== null ? allVersionEnabled : false;
+    }
+    /**
+     * register SideMenuContainerComponent
+     *
+     * params menu is SideMenuContainerComponent
+     */
+    registerSideMenu(menu) {
+        if (this._sideMenuComponent) {
+            throw new Error('SideMenuContainerComponent has been already registered!');
+        }
+        this._sideMenuComponent = menu;
+    }
+    isOpened() {
+        return this._sideMenuComponent.isOpened();
+    }
+    /**
+     * Open this _sideMenu, and return a Observable that will resolve when it's fully opened (or get rejected if it didn't).
+     *
+     * @returns Observable<MatDrawerToggleResult>
+     */
+    open(componentOrTemplateRef, width = SideMenuSize.MEDIUM, injectionData) {
+        if (!this.componentIsPresent()) {
+            throw new Error('Side menu is not initialized');
+        }
+        if (this._sideMenuComponent.isOpened()) {
+            throw new Error('Side menu has been already opened with another content');
+        }
+        let ref = new SideMenuRef(null);
+        this._controlObject = new SideMenuControl(((event) => {
+            ref = new SideMenuRef(event);
+        }), this._sideMenuComponent.openedChange(), () => this._sideMenuComponent.close(this._sideMenuComponent), injectionData, this.isVersionVisible, this.allVersionEnabled);
+        const wrapper = this._createPortal(componentOrTemplateRef, width, this._controlObject);
+        this._sideMenuComponent.open(wrapper).subscribe((opened) => {
+            if (opened === 'open') {
+                this._controlObject.publish({ opened: true });
+            }
+        });
+        return ref;
+    }
+    _createPortal(template, size, controlObject) {
+        if (template === undefined || template === null) {
+            throw new Error('A component template must be provided to open a side menu!');
+        }
+        if (template instanceof TemplateRef) {
+            return new PortalWrapper(new TemplatePortal(template, null), size);
+        }
+        if (template instanceof Type) {
+            const injector = Injector.create({ providers: [{ provide: NAE_SIDE_MENU_CONTROL, useValue: controlObject }] });
+            return new PortalWrapper(new ComponentPortal(template, null, injector), size);
+        }
+    }
+    /**
+     * Close this _sideMenu, and return a Observable that will resolve when it's fully closed (or get rejected if it didn't).
+     *
+     * @returns Observable<MatDrawerToggleResult>
+     */
+    close(closeEvent) {
+        return this._controlObject.close(closeEvent);
+    }
+    /**
+     * Toggle this _sideMenu. This is equivalent to calling close() when it's already opened, or open() when it's closed.
+     *
+     * @param  isOpen  Whether the _sideMenu should be open.
+     *
+     * @returns open or close side menu
+     */
+    // public toggle(isOpen?: boolean): Observable<MatDrawerToggleResult> {
+    //     return from(this._sideMenu.toggle(isOpen));
+    // }
+    componentIsPresent() {
+        return !!this._sideMenuComponent;
+    }
+}
+SideMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuService, deps: [{ token: NAE_NET_VERSION_VISIBLE, optional: true }, { token: NAE_NET_ALL_VERSIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SideMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NAE_NET_VERSION_VISIBLE]
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NAE_NET_ALL_VERSIONS]
+                    }] }];
+    } });
+
 /**
  * Service that handles the logic of delegating a task.
  */
@@ -20131,7 +20886,7 @@ class AbstractWorkflowPanelComponent extends AbstractPanelWithHeaderBindingCompo
     }
 }
 AbstractWorkflowPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractWorkflowPanelComponent, deps: [{ token: LoggerService }, { token: i1$2.TranslateService }, { token: WorkflowViewService }, { token: PetriNetResourceService }, { token: OverflowService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AbstractWorkflowPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractWorkflowPanelComponent, selector: "ncc-abstract-workflow-panel", inputs: { workflow: "workflow", selectedHeaders$: "selectedHeaders$", responsiveBody: "responsiveBody", showDeleteMenu: "showDeleteMenu" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractWorkflowPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractWorkflowPanelComponent, selector: "ncc-abstract-workflow-panel", inputs: { workflow: "workflow", selectedHeaders$: "selectedHeaders$", responsiveBody: "responsiveBody", showDeleteMenu: "showDeleteMenu", first: "first", last: "last" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractWorkflowPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -20150,6 +20905,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], showDeleteMenu: [{
                 type: Input
+            }], first: [{
+                type: Input
+            }], last: [{
+                type: Input
             }] } });
 
 /**
@@ -22548,7 +23307,7 @@ function getFieldIndexFromDataGroups(groups, fieldId) {
  * Service that manages filters created by users of the application.
  */
 class UserFiltersService {
-    constructor(_caseService, _taskService, _processService, _callChainService, _sideMenuService, _log, _categoryResolverService, _saveFilterComponent, _loadFilterComponent) {
+    constructor(_caseService, _taskService, _processService, _callChainService, _sideMenuService, _log, _categoryResolverService, _dialog, _saveFilterComponent, _loadFilterComponent) {
         this._caseService = _caseService;
         this._taskService = _taskService;
         this._processService = _processService;
@@ -22556,6 +23315,7 @@ class UserFiltersService {
         this._sideMenuService = _sideMenuService;
         this._log = _log;
         this._categoryResolverService = _categoryResolverService;
+        this._dialog = _dialog;
         this._saveFilterComponent = _saveFilterComponent;
         this._loadFilterComponent = _loadFilterComponent;
         this._initialized$ = new ReplaySubject(1);
@@ -22622,10 +23382,13 @@ class UserFiltersService {
             filterCasesFilter = filterCasesFilter.merge(additionalFilter, MergeOperator.AND);
         }
         const result = new ReplaySubject(1);
-        const ref = this._sideMenuService.open(this._loadFilterComponent, SideMenuSize.LARGE, {
-            filter: filterCasesFilter
+        const ref = this._dialog.open(this._loadFilterComponent, {
+            panelClass: "dialog-responsive",
+            data: {
+                filter: filterCasesFilter
+            },
         });
-        ref.onClose.pipe(filter(e => !e.opened), take(1)).subscribe(event => {
+        ref.afterClosed().subscribe(event => {
             if (event.message === 'Side menu closed unexpectedly') {
                 result.next();
             }
@@ -22672,10 +23435,13 @@ class UserFiltersService {
         }
         const result = new ReplaySubject(1);
         this.createFilterCaseAndSetData(searchService, allowedNets, searchCategories, viewId, additionalData, withDefaultCategories, inheritAllowedNets, navigationItemTaskData).subscribe(filterCaseId => {
-            const ref = this._sideMenuService.open(this._saveFilterComponent, SideMenuSize.LARGE, {
-                newFilterCaseId: filterCaseId
+            const ref = this._dialog.open(this._saveFilterComponent, {
+                panelClass: "dialog-responsive",
+                data: {
+                    newFilterCaseId: filterCaseId
+                },
             });
-            ref.onClose.pipe(filter(e => !e.opened), take(1)).subscribe(event => {
+            ref.afterClosed().subscribe(event => {
                 if (event.message === 'Side menu closed unexpectedly') {
                     this.delete(filterCaseId);
                     result.next();
@@ -22826,7 +23592,7 @@ class UserFiltersService {
         };
     }
 }
-UserFiltersService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserFiltersService, deps: [{ token: CaseResourceService }, { token: TaskResourceService }, { token: ProcessService }, { token: CallChainService }, { token: SideMenuService }, { token: LoggerService }, { token: CategoryResolverService }, { token: NAE_SAVE_FILTER_COMPONENT, optional: true }, { token: NAE_LOAD_FILTER_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+UserFiltersService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserFiltersService, deps: [{ token: CaseResourceService }, { token: TaskResourceService }, { token: ProcessService }, { token: CallChainService }, { token: SideMenuService }, { token: LoggerService }, { token: CategoryResolverService }, { token: i1$3.MatDialog }, { token: NAE_SAVE_FILTER_DIALOG_COMPONENT, optional: true }, { token: NAE_LOAD_FILTER_DIALOG_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 UserFiltersService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserFiltersService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserFiltersService, decorators: [{
             type: Injectable,
@@ -22834,16 +23600,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     providedIn: 'root'
                 }]
         }], ctorParameters: function () {
-        return [{ type: CaseResourceService }, { type: TaskResourceService }, { type: ProcessService }, { type: CallChainService }, { type: SideMenuService }, { type: LoggerService }, { type: CategoryResolverService }, { type: undefined, decorators: [{
+        return [{ type: CaseResourceService }, { type: TaskResourceService }, { type: ProcessService }, { type: CallChainService }, { type: SideMenuService }, { type: LoggerService }, { type: CategoryResolverService }, { type: i1$3.MatDialog }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_SAVE_FILTER_COMPONENT]
+                        args: [NAE_SAVE_FILTER_DIALOG_COMPONENT]
                     }] }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_LOAD_FILTER_COMPONENT]
+                        args: [NAE_LOAD_FILTER_DIALOG_COMPONENT]
                     }] }];
     } });
 
@@ -23673,8 +24439,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     }] }];
     } });
 
-const NAE_DEFAULT_HEADERS = new InjectionToken('NaeDefaultHeaders');
-
 class CaseHeaderService extends AbstractHeaderService {
     constructor(_allowedNetsService, preferences, logger, viewIdService, overflowService, naeDefaultHeaders) {
         super(HeaderType.CASE, preferences, logger, viewIdService, overflowService);
@@ -26713,12 +27477,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: ResourceProvider }, { type: i2$3.Router }, { type: ConfigurationService }, { type: UserService }, { type: SnackBarService }, { type: FilterRepository }, { type: LoggerService }, { type: i1$2.TranslateService }]; } });
 
 class ImpersonationUserSelectService {
-    constructor(_log, _sideMenuService, _snackBar, _impersonation, _user, _userImpersonateComponent, _adminImpersonateComponent) {
+    constructor(_log, _snackBar, _impersonation, _user, _dialog, _userImpersonateComponent, _adminImpersonateComponent) {
         this._log = _log;
-        this._sideMenuService = _sideMenuService;
         this._snackBar = _snackBar;
         this._impersonation = _impersonation;
         this._user = _user;
+        this._dialog = _dialog;
         this._userImpersonateComponent = _userImpersonateComponent;
         this._adminImpersonateComponent = _adminImpersonateComponent;
     }
@@ -26727,18 +27491,26 @@ class ImpersonationUserSelectService {
      */
     selectImpersonate() {
         if (this.isAdmin()) {
-            this._sideMenuService.open(this._adminImpersonateComponent, SideMenuSize.LARGE, this.injectedData()).onClose.subscribe(event => {
+            const dialogRef = this._dialog.open(this._adminImpersonateComponent, {
+                panelClass: "dialog-responsive",
+                data: this.injectedData(),
+            });
+            dialogRef.afterClosed().subscribe(event => {
                 this._log.debug('Impersonable user select :' + event);
-                if (event.data === undefined) {
+                if ((event === null || event === void 0 ? void 0 : event.data) === undefined) {
                     return;
                 }
                 this._impersonation.impersonateUser(event.data._id);
             });
         }
         else {
-            this._sideMenuService.open(this._userImpersonateComponent, SideMenuSize.XL, this.injectedData()).onClose.subscribe(event => {
+            const dialogRef = this._dialog.open(this._userImpersonateComponent, {
+                panelClass: "dialog-responsive",
+                data: this.injectedData(),
+            });
+            dialogRef.afterClosed().subscribe(event => {
                 this._log.debug('Impersonable config select :' + event);
-                if (event.data === undefined) {
+                if ((event === null || event === void 0 ? void 0 : event.data) === undefined) {
                     return;
                 }
                 this._impersonation.impersonateByConfig(event.data.stringId);
@@ -26766,7 +27538,7 @@ class ImpersonationUserSelectService {
         return this._user.hasAuthority('ROLE_ADMIN');
     }
 }
-ImpersonationUserSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ImpersonationUserSelectService, deps: [{ token: LoggerService }, { token: SideMenuService }, { token: SnackBarService }, { token: ImpersonationService }, { token: UserService }, { token: NAE_USER_IMPERSONATE_COMPONENT, optional: true }, { token: NAE_ADMIN_IMPERSONATE_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+ImpersonationUserSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ImpersonationUserSelectService, deps: [{ token: LoggerService }, { token: SnackBarService }, { token: ImpersonationService }, { token: UserService }, { token: i1$3.MatDialog }, { token: NAE_USER_IMPERSONATE_DIALOG_COMPONENT, optional: true }, { token: NAE_ADMIN_IMPERSONATE_DIALOG_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 ImpersonationUserSelectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ImpersonationUserSelectService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ImpersonationUserSelectService, decorators: [{
             type: Injectable,
@@ -26774,16 +27546,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     providedIn: 'root'
                 }]
         }], ctorParameters: function () {
-        return [{ type: LoggerService }, { type: SideMenuService }, { type: SnackBarService }, { type: ImpersonationService }, { type: UserService }, { type: undefined, decorators: [{
+        return [{ type: LoggerService }, { type: SnackBarService }, { type: ImpersonationService }, { type: UserService }, { type: i1$3.MatDialog }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_USER_IMPERSONATE_COMPONENT]
+                        args: [NAE_USER_IMPERSONATE_DIALOG_COMPONENT]
                     }] }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
-                        args: [NAE_ADMIN_IMPERSONATE_COMPONENT]
+                        args: [NAE_ADMIN_IMPERSONATE_DIALOG_COMPONENT]
                     }] }];
     } });
 
@@ -28869,9 +29641,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return []; } });
 
 class AbstractWorkflowViewComponent extends AbstractViewWithHeadersComponent {
-    constructor(_sideMenuService, _workflowViewService, _log, _processService, _activatedRoute) {
+    constructor(_dialog, _workflowViewService, _log, _processService, _activatedRoute) {
         super(_workflowViewService, _activatedRoute);
-        this._sideMenuService = _sideMenuService;
+        this._dialog = _dialog;
         this._workflowViewService = _workflowViewService;
         this._log = _log;
         this._processService = _processService;
@@ -28885,7 +29657,12 @@ class AbstractWorkflowViewComponent extends AbstractViewWithHeadersComponent {
         this.initializeHeader(this.workflowHeader);
     }
     importSidemenuNet(component) {
-        this._sideMenuService.open(component).onClose.subscribe(event => {
+        const dialogRef = this._dialog.open(component, {
+            width: '40%',
+            minWidth: '300px',
+            panelClass: "dialog-responsive",
+        });
+        dialogRef.afterClosed().subscribe(event => {
             var _a, _b;
             if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.net) !== undefined) {
                 this._workflowViewService.reload();
@@ -28924,7 +29701,7 @@ class AbstractWorkflowViewComponent extends AbstractViewWithHeadersComponent {
         }
     }
 }
-AbstractWorkflowViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractWorkflowViewComponent, deps: [{ token: SideMenuService }, { token: WorkflowViewService }, { token: LoggerService }, { token: ProcessService }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+AbstractWorkflowViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractWorkflowViewComponent, deps: [{ token: i1$3.MatDialog }, { token: WorkflowViewService }, { token: LoggerService }, { token: ProcessService }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
 AbstractWorkflowViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractWorkflowViewComponent, selector: "ncc-abstract-workflow-view", inputs: { footerSize: "footerSize", showDeleteMenu: "showDeleteMenu" }, viewQueries: [{ propertyName: "workflowHeader", first: true, predicate: ["header"], descendants: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractWorkflowViewComponent, decorators: [{
             type: Component,
@@ -28932,7 +29709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'ncc-abstract-workflow-view',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: SideMenuService }, { type: WorkflowViewService }, { type: LoggerService }, { type: ProcessService }, { type: i2$3.ActivatedRoute }]; }, propDecorators: { footerSize: [{
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: WorkflowViewService }, { type: LoggerService }, { type: ProcessService }, { type: i2$3.ActivatedRoute }]; }, propDecorators: { footerSize: [{
                 type: Input
             }], showDeleteMenu: [{
                 type: Input
@@ -33363,7 +34140,7 @@ class AbstractTaskContentComponent {
         const result = [];
         for (let i = 0; i < dataGroups.length; i++) {
             const group = dataGroups[i];
-            if (!group.fields.some(f => this.isTaskRef(f))) {
+            if (!group.fields.some(f => this.isTaskRef(f) && this.shouldResolveTaskRefData(f))) {
                 result.push(group);
                 continue;
             }
@@ -33371,9 +34148,9 @@ class AbstractTaskContentComponent {
             if (split.startGroup !== undefined) {
                 result.push(split.startGroup);
             }
-            if (((_a = split.taskRef.component) === null || _a === void 0 ? void 0 : _a.name) === TaskRefComponents.DASHBOARD) {
-                result.push(this.createDashboardTaskRefDataGroup(group, split.taskRef));
-                containsDashboard = true;
+            if (!!((_a = split.taskRef.component) === null || _a === void 0 ? void 0 : _a.name)) {
+                result.push(this.createComponentTaskRefDataGroup(group, split.taskRef));
+                containsDashboard = split.taskRef.component.name === TaskRefComponents.DASHBOARD;
             }
             if (split.taskRef.value.length === 0 || split.endGroup === undefined) {
                 if (split.endGroup !== undefined) {
@@ -33488,14 +34265,15 @@ class AbstractTaskContentComponent {
      * The information about nesting and parent task/case are preserved from the passed original data group.
      * @param originalDataGroup source of the information about parent task/case
      * @param taskRef the task ref that will be added to the new data group
+     * @param title optional title for taskref
      * @protected
      */
-    createDashboardTaskRefDataGroup(originalDataGroup, taskRef) {
+    createComponentTaskRefDataGroup(originalDataGroup, taskRef, title) {
         return {
             fields: [taskRef],
             alignment: undefined,
             stretch: false,
-            title: undefined,
+            title: title,
             parentTaskId: originalDataGroup.parentTaskId,
             parentTransitionId: originalDataGroup.parentTransitionId,
             parentCaseId: originalDataGroup.parentCaseId,
@@ -33866,6 +34644,18 @@ class AbstractTaskContentComponent {
                 return element.item.stringId + '-' + this.taskContentService.$shouldCreateCounter.getValue();
         }
     }
+    shouldResolveTaskRefData(dataRef) {
+        if (!!dataRef.component) {
+            return this.hasRequiredComponentProperty(dataRef.component, "resolve_data", "true");
+        }
+        return true;
+    }
+    hasRequiredComponentProperty(component, propertyName, propertyValue) {
+        return component != null
+            && component.properties != null
+            && !!component.properties[propertyName]
+            && component.properties[propertyName] === propertyValue;
+    }
 }
 AbstractTaskContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractTaskContentComponent, deps: [{ token: FieldConverterService }, { token: TaskContentService }, { token: PaperViewService }, { token: LoggerService }, { token: TaskEventService, optional: true }, { token: NAE_ASYNC_RENDERING_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AbstractTaskContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractTaskContentComponent, selector: "ncc-abstract-task-content", inputs: { noDataText: "noDataText", noDataIcon: "noDataIcon", displayNoDataIcon: "displayNoDataIcon" }, outputs: { taskEvent: "taskEvent" }, ngImport: i0, template: '', isInline: true });
@@ -33898,11 +34688,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Resolves the correct {@link AbstractDataFieldComponent} implementation for the provided data field object.
  */
 class AbstractFieldComponentResolverComponent {
-    constructor(taskContentService) {
+    constructor(taskContentService, _informAboutInvalidData) {
         this.taskContentService = taskContentService;
+        this._informAboutInvalidData = _informAboutInvalidData;
         this.fieldTypeEnum = FieldTypeResource;
         this.taskElementEnum = TaskElementType;
     }
+    ngOnInit() {
+        if (!!this.gridElement.item) {
+            this.gridElement.item.registerFormControl(new FormControl('', { updateOn: this.gridElement.item.getUpdateOnStrategy() }));
+            this.gridElement.item.sendInvalidValues = this._informAboutInvalidData;
+        }
+    }
+    ngOnDestroy() {
+        var _a;
+        if (!!((_a = this.gridElement) === null || _a === void 0 ? void 0 : _a.item)) {
+            this.gridElement.item.disconnectFormControl();
+        }
+    }
     isOffsetPresent() {
         return !!this.taskContentService.task && !!this.taskContentService.task.layout && !!this.taskContentService.task.layout.offset;
     }
@@ -33932,7 +34735,7 @@ class AbstractFieldComponentResolverComponent {
                 || (!!component.properties && 'plainText' in component.properties && component.properties.plaintText === 'true'));
     }
 }
-AbstractFieldComponentResolverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFieldComponentResolverComponent, deps: [{ token: TaskContentService }], target: i0.ɵɵFactoryTarget.Component });
+AbstractFieldComponentResolverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFieldComponentResolverComponent, deps: [{ token: TaskContentService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AbstractFieldComponentResolverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AbstractFieldComponentResolverComponent, selector: "ncc-abstract-field-component-resolver", inputs: { gridElement: "gridElement" }, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AbstractFieldComponentResolverComponent, decorators: [{
             type: Component,
@@ -33940,7 +34743,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'ncc-abstract-field-component-resolver',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: TaskContentService }]; }, propDecorators: { gridElement: [{
+        }], ctorParameters: function () {
+        return [{ type: TaskContentService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                    }] }];
+    }, propDecorators: { gridElement: [{
                 type: Input
             }] } });
 
@@ -34290,5 +35100,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractAddChildNodeComponent, AbstractAdvancedSearchComponent, AbstractAuthenticationOverlayComponent, AbstractBooleanFieldComponent, AbstractBreadcrumbsComponent, AbstractButtonFieldComponent, AbstractCaseListComponent, AbstractCaseListPaginatorComponent, AbstractCasePanelComponent, AbstractCaseViewComponent, AbstractChangePasswordComponent, AbstractCountCardComponent, AbstractCurrencyNumberFieldComponent, AbstractCustomCardComponent, AbstractDashboardBarChartTextFieldComponent, AbstractDashboardContentComponent, AbstractDashboardIframeTextFieldComponent, AbstractDashboardLineChartTextFieldComponent, AbstractDashboardPieChartTextFieldComponent, AbstractDashboardPortalTextFieldComponent, AbstractDashboardTextFieldComponent, AbstractDataFieldTemplateComponent, AbstractDateFieldComponent, AbstractDateTimeFieldComponent, AbstractDefaultNumberFieldComponent, AbstractEditModeComponent, AbstractEmailSubmissionFormComponent, AbstractEnumerationAutocompleteDynamicFieldComponent, AbstractEnumerationAutocompleteSelectFieldComponent, AbstractEnumerationFieldComponent, AbstractEnumerationIconFieldComponent, AbstractEnumerationListFieldComponent, AbstractEnumerationSelectFieldComponent, AbstractEnumerationStepperFieldComponent, AbstractFieldComponentResolverComponent, AbstractFileFieldComponent, AbstractFileListFieldComponent, AbstractFilterFieldComponent, AbstractFilterFieldContentComponent, AbstractFilterFieldTabViewComponent, AbstractFilterFieldTabViewContentComponent, AbstractFilterSelectorComponent, AbstractFilterSelectorListItemComponent, AbstractForgottenPasswordComponent, AbstractFulltextSearchComponent, AbstractGroupNavigationComponentResolverComponent, AbstractHeaderComponent, AbstractHeaderService, AbstractHtmlTextareaFieldComponent, AbstractI18nDividerFieldComponent, AbstractI18nErrorsComponent, AbstractI18nFieldComponent, AbstractI18nTextFieldComponent, AbstractIframeCardComponent, AbstractImmediateFilterTextComponent, AbstractImmediateFilterTextContentComponent, AbstractImportNetComponent, AbstractInternalLinkComponent, AbstractLanguageSelectorComponent, AbstractLdapGroupRoleAssignmentComponent, AbstractLegalNoticeComponent, AbstractLoadFilterComponent, AbstractLoadingModeComponent, AbstractLoggerService, AbstractLoginFormComponent, AbstractLogoutShortcutComponent, AbstractMultiUserAssignComponent, AbstractMultiUserAssignItemComponent, AbstractMultiUserAssignListComponent, AbstractMultichoiceAutocompleteFieldComponentComponent, AbstractMultichoiceFieldComponent, AbstractMultichoiceListFieldComponent, AbstractMultichoiceSelectFieldComponent, AbstractNavigationDoubleDrawerComponent, AbstractNavigationDrawerComponent, AbstractNavigationRailComponent, AbstractNavigationTreeComponent, AbstractNewCaseComponent, AbstractNumberErrorsComponent, AbstractNumberFieldComponent, AbstractOptionSelectorComponent, AbstractPanelComponent, AbstractPanelItemComponent, AbstractPasswordTextFieldComponent, AbstractProfileComponent, AbstractQuickPanelComponent, AbstractRegistrationComponent, AbstractRegistrationFormComponent, AbstractRemoveNodeComponent, AbstractResourceProvider, AbstractResourceService, AbstractRichTextareaFieldComponent, AbstractRoleAssignmentComponent, AbstractSaveFilterComponent, AbstractSearchClauseComponent, AbstractSearchComponent, AbstractSearchConfigurationInputComponent, AbstractSearchModeComponent, AbstractSearchOperandInputComponent, AbstractSearchPredicateComponent, AbstractSessionIdleComponent, AbstractSideMenuContainerComponent, AbstractSimpleTextFieldComponent, AbstractSingleTaskComponent, AbstractSingleTaskViewComponent, AbstractSortModeComponent, AbstractSortableViewComponent, AbstractTabCreationDetectorComponent, AbstractTabViewComponent, AbstractTabbedCaseViewComponent, AbstractTabbedTaskViewComponent, AbstractTaskContentComponent, AbstractTaskListComponent, AbstractTaskListPaginationComponent, AbstractTaskPanelComponent, AbstractTaskRefDashboardTileComponent, AbstractTaskRefFieldComponent, AbstractTaskViewComponent, AbstractTextErrorsComponent, AbstractTextFieldComponent, AbstractTextareaFieldComponent, AbstractToolbarComponent, AbstractTreeComponent, AbstractTreeTaskContentComponent, AbstractUserAssignComponent, AbstractUserAssignItemComponent, AbstractUserAssignListComponent, AbstractUserCardComponent, AbstractUserFieldComponent, AbstractUserImpersonateComponent, AbstractUserInviteComponent, AbstractUserListFieldComponent, AbstractViewWithHeadersComponent, AbstractWorkflowPanelComponent, AbstractWorkflowViewComponent, AccessService, ActiveGroupService, AdvancedSearchComponentInitializationService, AfterAction, AlertDialogComponent, AlertDialogModule, AllowedNetsService, AllowedNetsServiceFactory, AnonymousAuthenticationInterceptor, AnonymousService, AssignPolicy, AssignPolicyService, AssignTaskService, AuthenticationGuardService, AuthenticationInterceptor, AuthenticationMethodService, AuthenticationModule, AuthenticationService, AuthorityGuardService, AutocompleteCategory, BOOLEAN_VALUE_LABEL_ENABLED, BaseAllowedNetsService, BasicAuthenticationService, BooleanField, BooleanFieldValidation, BooleanOperator, ButtonField, ButtonFieldValidation, CONFIRM_PASSWORD, CallChainService, CancelTaskService, CaseAuthor, CaseCreationDate, CaseCreationDateTime, CaseDataset, CaseHeaderService, CaseListFontColorService, CaseMetaField, CaseNetAttributeAutocompleteCategory, CaseProcess, CaseResourceService, CaseRole, CaseSearch, CaseSimpleDataset, CaseStringId, CaseTask, CaseTitle, CaseTreeNode, CaseTreeService, CaseViewService, CaseVisualId, Categories, Category, CategoryFactory, CategoryResolverService, ChangedFieldsService, ClausePredicate, ConfigParams, ConfigurationInput, ConfigurationService, ConfirmDialogComponent, ConfirmDialogModule, ConsoleLogPublisher, ContainsPipe, CovalentModule, CurrencyModule, CustomDateAdapter, DATE_FORMAT, DATE_FORMAT_STRING, DATE_TIME_FORMAT, DATE_TIME_FORMAT_STRING, DEFAULT_LANGUAGE_CODE, Dashboard, DashboardCardTypes, DashboardMultiData, DashboardPortalComponentRegistryService, DashboardResourceService, DashboardSingleData, DataField, DataFieldsModule, DataFocusPolicy, DataFocusPolicyService, DataGroupAlignment, DatafieldMapKey, DateField, DateTimeField, DefaultSearchCategoriesModule, DelegateTaskService, DialogModule, DialogService, DynamicEnumerationField, DynamicNavigationRouteProviderService, EditableClausePredicate, EditableClausePredicateWithGenerators, EditableElementaryPredicate, EditablePredicate, EditablePredicateWithGenerator, ElementaryPredicate, EnumerationAutocompleteFilterProperty, EnumerationField, EnumerationFieldValidation, Equals, EqualsDate, ErrorSnackBarComponent, EventConstants, EventQueueService, EventService, FILTER_DEFAULT_HEADERS_ID, FILTER_IDENTIFIERS, FILTER_VIEW_TASK_TRANSITION_ID, FieldAlignment, FieldConverterService, FieldTypeResource, FileField, FileListField, FileListFieldValidation, FilePreviewType, FileUploadMIMEType, FileUploadModel, Filter, FilterExtractionService, FilterField, FilterRepository, FilterType, FinishPolicy, FinishPolicyService, FinishTaskService, GenericSnackBarComponent, GroupGuardService, GroupNavigationComponentResolverService, GroupNavigationConstants, HeaderColumn, HeaderColumnType, HeaderMode, HeaderSearchService, HeaderType, HttpLoaderFactory, I18nField, I18nFieldValidation, ImpersonationService, ImpersonationUserListService, ImpersonationUserResourceService, ImpersonationUserSelectService, InRange, InRangeDate, IncrementingCounter, IsEmptyPipe, IsNonEmptyPipe, IsNull, LanguageIconsService, LanguageService, LdapGroupListService, LdapGroupResourceService, LessThan, LessThanDate, LessThanDateTime, LetContext, LetDirective, Like, LoadingEmitter, LoadingWithFilterEmitter, LocalStorageLogPublisher, LogEntry, LogLevel, LogPublisher, LogPublisherService, LoggerService, MaterialAppearance, MaterialModule, MergeOperator, MergedFilter, MockAuthenticationMethodService, MockAuthenticationService, MockEndpoint, MockProfileService, MockSignUpService, MockUserPreferenceService, MockUserResourceService, MockUserService, MoreThan, MoreThanDate, MoreThanDateTime, MultichoiceAutocompleteFilterProperty, MultichoiceField, NAE_ADMIN_IMPERSONATE_COMPONENT, NAE_ASYNC_RENDERING_CONFIGURATION, NAE_AUTOSWITCH_TAB_TOKEN, NAE_BASE_FILTER, NAE_DEFAULT_CASE_SEARCH_CATEGORIES, NAE_DEFAULT_HEADERS, NAE_DEFAULT_MIN_PASSWORD_LENGTH, NAE_DEFAULT_TASK_SEARCH_CATEGORIES, NAE_FILES_UPLOAD_COMPONENT, NAE_FILTERS_FILTER, NAE_FILTER_FIELD, NAE_FILTER_TEXT, NAE_GROUP_NAVIGATION_COMPONENT_RESOLVER_COMPONENT, NAE_INFORM_ABOUT_INVALID_DATA, NAE_LOAD_FILTER_COMPONENT, NAE_MIN_PASSWORD_LENGTH, NAE_NAVIGATION_ITEM_TASK_DATA, NAE_NET_ALL_VERSIONS, NAE_NET_VERSION_VISIBLE, NAE_NEW_CASE_COMPONENT, NAE_NEW_CASE_CONFIGURATION, NAE_NEW_CASE_CREATION_CONFIGURATION_DATA, NAE_OPEN_EXISTING_TAB, NAE_OPTION_SELECTOR_COMPONENT, NAE_PREFERRED_TASK_ENDPOINT, NAE_ROUTING_CONFIGURATION_PATH, NAE_SAVE_FILTER_COMPONENT, NAE_SEARCH_CATEGORIES, NAE_SEARCH_COMPONENT_CONFIGURATION, NAE_SIDE_MENU_CONTROL, NAE_SNACKBAR_HORIZONTAL_POSITION, NAE_SNACKBAR_VERTICAL_POSITION, NAE_TAB_DATA, NAE_TASK_FORCE_OPEN, NAE_TASK_OPERATIONS, NAE_TASK_PANEL_DISABLE_BUTTON_FUNCTIONS, NAE_TASK_VIEW_CONFIGURATION, NAE_TREE_CASE_VIEW_CONFIGURATION, NAE_URI_NODE_CASES_PAGE_SIZE, NAE_USER_ASSIGN_COMPONENT, NAE_USER_IMPERSONATE_COMPONENT, NAE_VIEW_ID, NAE_VIEW_ID_SEGMENT, NAE_WORKFLOW_SERVICE_CONFIRM_DELETE, NAE_WORKFLOW_SERVICE_FILTER, Net, NetAttributeAutocompleteCategory, NextGroupService, NoConfigurationAutocompleteCategory, NoConfigurationCategory, NoConfigurationUserAutocompleteCategory, NotEquals, NotEqualsDate, NotEqualsDateTime, NullAuthenticationService, NullTaskOperations, NumberField, NumberFieldValidation, OLD_PASSWORD, OpenedTab, Operator, OperatorResolverService, OperatorService, OperatorTemplatePart, OperatorTemplatePartType, Operators, OrganizationListService, OverflowService, PASSWORD, PUBLISHERS, PageLoadRequestContext, PaginationParams, PaginationSort, PaperViewService, PermissionService, PermissionType, PetriNetResourceService, Predicate, PredicateWithGenerator, ProcessList, ProcessService, ProfileModule, ProfileService, ProgressType, PromptDialogComponent, PromptDialogModule, PublicCaseResourceService, PublicPetriNetResourceService, PublicProcessService, PublicTaskLoadingService, PublicTaskResourceService, PublicUrlResolverService, Query, QueuedEvent, RedirectService, ResourceProvider, ResultWithAfterActions, RoleAssignmentLdapGroupService, RoleAssignmentService, RoleGuardService, RoutingBuilderService, SearchIndex, SearchIndexResolverService, SearchInputType, SearchMode, SearchService, SelectedCaseService, SessionIdleTimerService, SessionService, SideMenuControl, SideMenuRef, SideMenuService, SideMenuSize, SignUpModule, SignUpService, SimpleFilter, SingleTaskContentService, SnackBarComponent, SnackBarHorizontalPosition, SnackBarModule, SnackBarService, SnackBarVerticalPosition, SpinnerOverlayService, Subgrid, SubjectTaskOperations, Substring, SuccessSnackBarComponent, TabLabelStream, TabView, TabbedVirtualScrollComponent, TaskAssignee, TaskConst, TaskContentService, TaskDataService, TaskElementType, TaskEndpoint, TaskEvent, TaskEventService, TaskHandlingService, TaskHeaderService, TaskMetaField, TaskNetAttributeAutocompleteCategory, TaskProcess, TaskRefComponents, TaskRefDashboardConstants, TaskRefDashboardTileConstants, TaskRefField, TaskRequestStateService, TaskResourceService, TaskRole, TaskTask, TaskViewService, TemplateAppearance, TestCaseBaseFilterProvider, TestCaseViewAllowedNetsFactory, TestConfigurationService, TestMockDependenciesModule, TestNoAllowedNetsFactory, TestTaskBaseFilterProvider, TestTaskViewAllowedNetsFactory, TestViewService, TextAreaField, TextAreaHeight, TextField, TextFieldComponent, TextFieldValidation, TextFieldView, TranslateLibModule, TreeCaseViewService, TreePetriflowIdentifiers, TreeTaskContentService, UnlimitedTaskContentService, UriContentType, UriResourceService, UriService, User, UserAutocomplete, UserComparatorService, UserField, UserFilterConstants, UserFiltersService, UserImpersonationConstants, UserInviteService, UserListField, UserListService, UserListValue, UserPreferenceService, UserResourceService, UserService, UserTransformer, UserValue, UtilityModule, ViewIdService, ViewService, WarningSnackBarComponent, WorkflowHeaderService, WorkflowMetaField, WorkflowViewService, WrappedBoolean, arrayToObservable, authenticationServiceFactory, clearTimeInformation, configureCategory, createMockCase, createMockCaseOutcome, createMockDataGroup, createMockDependencies, createMockField, createMockGetDataOutcome, createMockImmediateData, createMockNet, createMockPage, createMockPetriNetOutcome, createMockSetDataOutcome, createMockTask, createMockTaskOutcome, createSortParam, createTaskEventNotification, decodeBase64, defaultCaseSearchCategoriesFactory, defaultTaskSearchCategoriesFactory, destroySubscription, encodeBase64, extractFilterFieldFromData, extractFilterFromData, extractFilterFromFilterField, extractIconAndTitle, extractRoles, getField, getFieldFromDataGroups, getFieldIndex, getFieldIndexFromDataGroups, getImmediateData, getNetAndCreateCase, groupNavigationViewIdSegmentFactory, hasContent, loadAllPages, mockUserAutocompleteValue, navigationItemTaskAllowedNetsServiceFactory, navigationItemTaskCategoryFactory, navigationItemTaskFilterFactory, ofVoid, processMessageResponse, publicBaseFilterFactory, publicFactoryResolver, refreshTree, tabbedAllowedNetsServiceFactory, tabbedTaskViewConfigurationFactory, toMoment };
+export { AbstractAddChildNodeComponent, AbstractAdvancedSearchComponent, AbstractAuthenticationOverlayComponent, AbstractBaseDataFieldComponent, AbstractBooleanDefaultFieldComponent, AbstractBooleanFieldComponent, AbstractBreadcrumbsComponent, AbstractButtonDefaultFieldComponent, AbstractButtonFieldComponent, AbstractCaseListComponent, AbstractCaseListPaginatorComponent, AbstractCasePanelComponent, AbstractCaseRefDefaultComponent, AbstractCaseViewComponent, AbstractChangePasswordComponent, AbstractCountCardComponent, AbstractCurrencyNumberFieldComponent, AbstractCustomCardComponent, AbstractDashboardBarChartTextFieldComponent, AbstractDashboardContentComponent, AbstractDashboardIframeTextFieldComponent, AbstractDashboardLineChartTextFieldComponent, AbstractDashboardPieChartTextFieldComponent, AbstractDashboardPortalTextFieldComponent, AbstractDashboardTextFieldComponent, AbstractDataFieldTemplateComponent, AbstractDateDefaultFieldComponent, AbstractDateFieldComponent, AbstractDateTimeDefaultFieldComponent, AbstractDateTimeFieldComponent, AbstractDefaultNumberFieldComponent, AbstractEditModeComponent, AbstractEmailSubmissionFormComponent, AbstractEnumerationAutocompleteDynamicFieldComponent, AbstractEnumerationAutocompleteSelectFieldComponent, AbstractEnumerationFieldComponent, AbstractEnumerationIconFieldComponent, AbstractEnumerationListFieldComponent, AbstractEnumerationSelectFieldComponent, AbstractEnumerationStepperFieldComponent, AbstractFieldComponentResolverComponent, AbstractFileDefaultFieldComponent, AbstractFileFieldComponent, AbstractFileListDefaultFieldComponent, AbstractFileListFieldComponent, AbstractFilterDefaultFieldComponent, AbstractFilterFieldComponent, AbstractFilterFieldContentComponent, AbstractFilterFieldTabViewComponent, AbstractFilterFieldTabViewContentComponent, AbstractFilterSelectorComponent, AbstractFilterSelectorListItemComponent, AbstractForgottenPasswordComponent, AbstractFulltextSearchComponent, AbstractGroupNavigationComponentResolverComponent, AbstractHeaderComponent, AbstractHeaderService, AbstractHtmlTextareaFieldComponent, AbstractI18nDividerFieldComponent, AbstractI18nErrorsComponent, AbstractI18nFieldComponent, AbstractI18nTextFieldComponent, AbstractIframeCardComponent, AbstractImmediateFilterTextComponent, AbstractImmediateFilterTextContentComponent, AbstractImportNetComponent, AbstractInternalLinkComponent, AbstractLanguageSelectorComponent, AbstractLdapGroupRoleAssignmentComponent, AbstractLegalNoticeComponent, AbstractLoadFilterComponent, AbstractLoadingModeComponent, AbstractLoggerService, AbstractLoginFormComponent, AbstractLogoutShortcutComponent, AbstractMultiUserAssignComponent, AbstractMultiUserAssignItemComponent, AbstractMultiUserAssignListComponent, AbstractMultichoiceAutocompleteFieldComponentComponent, AbstractMultichoiceFieldComponent, AbstractMultichoiceListFieldComponent, AbstractMultichoiceSelectFieldComponent, AbstractNavigationDoubleDrawerComponent, AbstractNavigationDrawerComponent, AbstractNavigationRailComponent, AbstractNavigationTreeComponent, AbstractNewCaseComponent, AbstractNumberErrorsComponent, AbstractNumberFieldComponent, AbstractOptionSelectorComponent, AbstractPanelComponent, AbstractPanelItemComponent, AbstractPasswordTextFieldComponent, AbstractProfileComponent, AbstractQuickPanelComponent, AbstractRegistrationComponent, AbstractRegistrationFormComponent, AbstractRemoveNodeComponent, AbstractResourceProvider, AbstractResourceService, AbstractRichTextareaFieldComponent, AbstractRoleAssignmentComponent, AbstractSaveFilterComponent, AbstractSearchClauseComponent, AbstractSearchComponent, AbstractSearchConfigurationInputComponent, AbstractSearchModeComponent, AbstractSearchOperandInputComponent, AbstractSearchPredicateComponent, AbstractSessionIdleComponent, AbstractSideMenuContainerComponent, AbstractSimpleTextFieldComponent, AbstractSingleTaskComponent, AbstractSingleTaskViewComponent, AbstractSortModeComponent, AbstractSortableViewComponent, AbstractTabCreationDetectorComponent, AbstractTabViewComponent, AbstractTabbedCaseViewComponent, AbstractTabbedTaskViewComponent, AbstractTaskContentComponent, AbstractTaskListComponent, AbstractTaskListPaginationComponent, AbstractTaskPanelComponent, AbstractTaskRefDashboardFieldComponent, AbstractTaskRefDashboardTileComponent, AbstractTaskRefFieldComponent, AbstractTaskRefListFieldComponent, AbstractTaskViewComponent, AbstractTextErrorsComponent, AbstractTextFieldComponent, AbstractTextareaFieldComponent, AbstractToolbarComponent, AbstractTreeComponent, AbstractTreeTaskContentComponent, AbstractUserAssignComponent, AbstractUserAssignItemComponent, AbstractUserAssignListComponent, AbstractUserCardComponent, AbstractUserDefaultFieldComponent, AbstractUserFieldComponent, AbstractUserImpersonateComponent, AbstractUserInviteComponent, AbstractUserListDefaultFieldComponent, AbstractUserListFieldComponent, AbstractViewWithHeadersComponent, AbstractWorkflowPanelComponent, AbstractWorkflowViewComponent, AccessService, ActiveGroupService, AdvancedSearchComponentInitializationService, AfterAction, AlertDialogComponent, AlertDialogModule, AllowedNetsService, AllowedNetsServiceFactory, AnonymousAuthenticationInterceptor, AnonymousService, AssignPolicy, AssignPolicyService, AssignTaskService, AuthenticationGuardService, AuthenticationInterceptor, AuthenticationMethodService, AuthenticationModule, AuthenticationService, AuthorityGuardService, AutocompleteCategory, BOOLEAN_VALUE_LABEL_ENABLED, BaseAllowedNetsService, BasicAuthenticationService, BooleanField, BooleanFieldValidation, BooleanOperator, ButtonField, ButtonFieldValidation, CONFIRM_PASSWORD, CallChainService, CancelTaskService, CaseAuthor, CaseCreationDate, CaseCreationDateTime, CaseDataset, CaseHeaderService, CaseListFontColorService, CaseMetaField, CaseNetAttributeAutocompleteCategory, CaseProcess, CaseRefField, CaseResourceService, CaseRole, CaseSearch, CaseSimpleDataset, CaseStringId, CaseTask, CaseTitle, CaseTreeNode, CaseTreeService, CaseViewService, CaseVisualId, Categories, Category, CategoryFactory, CategoryResolverService, ChangedFieldsService, ClausePredicate, ComponentPrefixes, ComponentRegistryService, ConfigParams, ConfigurationInput, ConfigurationService, ConfirmDialogComponent, ConfirmDialogModule, ConsoleLogPublisher, ContainsPipe, CovalentModule, CurrencyModule, CustomDateAdapter, DATA_FIELD_PORTAL_DATA, DATE_FORMAT, DATE_FORMAT_STRING, DATE_TIME_FORMAT, DATE_TIME_FORMAT_STRING, DEFAULT, DEFAULT_LANGUAGE_CODE, Dashboard, DashboardCardTypes, DashboardMultiData, DashboardResourceService, DashboardSingleData, DataField, DataFieldsModule, DataFocusPolicy, DataFocusPolicyService, DataGroupAlignment, DatafieldMapKey, DateField, DateTimeField, DefaultSearchCategoriesModule, DelegateTaskService, DialogModule, DialogService, DynamicEnumerationField, DynamicNavigationRouteProviderService, EditableClausePredicate, EditableClausePredicateWithGenerators, EditableElementaryPredicate, EditablePredicate, EditablePredicateWithGenerator, ElementaryPredicate, EnumerationAutocompleteFilterProperty, EnumerationField, EnumerationFieldValidation, Equals, EqualsDate, ErrorSnackBarComponent, EventConstants, EventQueueService, EventService, FILTER_DEFAULT_HEADERS_ID, FILTER_IDENTIFIERS, FILTER_VIEW_TASK_TRANSITION_ID, FieldAlignment, FieldConverterService, FieldTypeResource, FileField, FileListField, FileListFieldValidation, FilePreviewType, FileUploadMIMEType, FileUploadModel, Filter, FilterExtractionService, FilterField, FilterRepository, FilterType, FilteredArray, FinishPolicy, FinishPolicyService, FinishTaskService, GenericSnackBarComponent, GroupGuardService, GroupNavigationComponentResolverService, GroupNavigationConstants, HeaderColumn, HeaderColumnType, HeaderMode, HeaderSearchService, HeaderType, HttpLoaderFactory, I18nField, I18nFieldValidation, ImpersonationService, ImpersonationUserListService, ImpersonationUserResourceService, ImpersonationUserSelectService, InRange, InRangeDate, IncrementingCounter, IsEmptyPipe, IsNonEmptyPipe, IsNull, LanguageIconsService, LanguageService, LdapGroupListService, LdapGroupResourceService, LessThan, LessThanDate, LessThanDateTime, LetContext, LetDirective, Like, LoadingEmitter, LoadingWithFilterEmitter, LocalStorageLogPublisher, LogEntry, LogLevel, LogPublisher, LogPublisherService, LoggerService, MaterialAppearance, MaterialModule, MergeOperator, MergedFilter, MockAuthenticationMethodService, MockAuthenticationService, MockEndpoint, MockProfileService, MockSignUpService, MockUserPreferenceService, MockUserResourceService, MockUserService, MoreThan, MoreThanDate, MoreThanDateTime, MultichoiceAutocompleteFilterProperty, MultichoiceField, NAE_ADMIN_IMPERSONATE_COMPONENT, NAE_ADMIN_IMPERSONATE_DIALOG_COMPONENT, NAE_ASYNC_RENDERING_CONFIGURATION, NAE_AUTOSWITCH_TAB_TOKEN, NAE_BASE_FILTER, NAE_CASE_REF_CREATE_CASE, NAE_CASE_REF_SEARCH, NAE_DEFAULT_CASE_SEARCH_CATEGORIES, NAE_DEFAULT_HEADERS, NAE_DEFAULT_MIN_PASSWORD_LENGTH, NAE_DEFAULT_TASK_SEARCH_CATEGORIES, NAE_FILES_UPLOAD_COMPONENT, NAE_FILES_UPLOAD_DIALOG_COMPONENT, NAE_FILTERS_FILTER, NAE_FILTER_FIELD, NAE_FILTER_TEXT, NAE_GROUP_NAVIGATION_COMPONENT_RESOLVER_COMPONENT, NAE_INFORM_ABOUT_INVALID_DATA, NAE_LOAD_FILTER_COMPONENT, NAE_LOAD_FILTER_DIALOG_COMPONENT, NAE_MIN_PASSWORD_LENGTH, NAE_NAVIGATION_ITEM_TASK_DATA, NAE_NET_ALL_VERSIONS, NAE_NET_VERSION_VISIBLE, NAE_NEW_CASE_COMPONENT, NAE_NEW_CASE_CONFIGURATION, NAE_NEW_CASE_CREATION_CONFIGURATION_DATA, NAE_NEW_CASE_DIALOG_COMPONENT, NAE_OPEN_EXISTING_TAB, NAE_OPTION_SELECTOR_COMPONENT, NAE_OPTION_SELECTOR_DIALOG_COMPONENT, NAE_PREFERRED_TASK_ENDPOINT, NAE_ROUTING_CONFIGURATION_PATH, NAE_SAVE_FILTER_COMPONENT, NAE_SAVE_FILTER_DIALOG_COMPONENT, NAE_SEARCH_CATEGORIES, NAE_SEARCH_COMPONENT_CONFIGURATION, NAE_SIDE_MENU_CONTROL, NAE_SNACKBAR_HORIZONTAL_POSITION, NAE_SNACKBAR_VERTICAL_POSITION, NAE_TAB_DATA, NAE_TASK_FORCE_OPEN, NAE_TASK_OPERATIONS, NAE_TASK_PANEL_DISABLE_BUTTON_FUNCTIONS, NAE_TASK_VIEW_CONFIGURATION, NAE_TREE_CASE_VIEW_CONFIGURATION, NAE_URI_NODE_CASES_PAGE_SIZE, NAE_USER_ASSIGN_COMPONENT, NAE_USER_ASSIGN_DIALOG_COMPONENT, NAE_USER_IMPERSONATE_COMPONENT, NAE_USER_IMPERSONATE_DIALOG_COMPONENT, NAE_VIEW_ID, NAE_VIEW_ID_SEGMENT, NAE_WORKFLOW_SERVICE_CONFIRM_DELETE, NAE_WORKFLOW_SERVICE_FILTER, Net, NetAttributeAutocompleteCategory, NextGroupService, NoConfigurationAutocompleteCategory, NoConfigurationCategory, NoConfigurationUserAutocompleteCategory, NotEquals, NotEqualsDate, NotEqualsDateTime, NullAuthenticationService, NullTaskOperations, NumberField, NumberFieldValidation, OLD_PASSWORD, OpenedTab, Operator, OperatorResolverService, OperatorService, OperatorTemplatePart, OperatorTemplatePartType, Operators, OrganizationListService, OverflowService, PASSWORD, PUBLISHERS, PageLoadRequestContext, PaginationParams, PaginationSort, PaperViewService, PermissionService, PermissionType, PetriNetResourceService, Predicate, PredicateWithGenerator, ProcessList, ProcessService, ProfileModule, ProfileService, ProgressType, PromptDialogComponent, PromptDialogModule, PublicCaseResourceService, PublicPetriNetResourceService, PublicProcessService, PublicTaskLoadingService, PublicTaskResourceService, PublicUrlResolverService, Query, QueuedEvent, RedirectService, ResourceProvider, ResultWithAfterActions, RoleAssignmentLdapGroupService, RoleAssignmentService, RoleGuardService, RoutingBuilderService, SearchIndex, SearchIndexResolverService, SearchInputType, SearchMode, SearchService, SelectedCaseService, SessionIdleTimerService, SessionService, SideMenuControl, SideMenuRef, SideMenuService, SideMenuSize, SignUpModule, SignUpService, SimpleFilter, SingleTaskContentService, SnackBarComponent, SnackBarHorizontalPosition, SnackBarModule, SnackBarService, SnackBarVerticalPosition, SpinnerOverlayService, Subgrid, SubjectTaskOperations, Substring, SuccessSnackBarComponent, TabLabelStream, TabView, TabbedVirtualScrollComponent, TaskAssignee, TaskConst, TaskContentService, TaskDataService, TaskElementType, TaskEndpoint, TaskEvent, TaskEventService, TaskHandlingService, TaskHeaderService, TaskMetaField, TaskNetAttributeAutocompleteCategory, TaskProcess, TaskRefComponents, TaskRefDashboardConstants, TaskRefDashboardTileConstants, TaskRefField, TaskRequestStateService, TaskResourceService, TaskRole, TaskTask, TaskViewService, TemplateAppearance, TestCaseBaseFilterProvider, TestCaseViewAllowedNetsFactory, TestConfigurationService, TestMockDependenciesModule, TestNoAllowedNetsFactory, TestTaskBaseFilterProvider, TestTaskViewAllowedNetsFactory, TestViewService, TextAreaField, TextAreaHeight, TextField, TextFieldComponent, TextFieldValidation, TextFieldView, TranslateLibModule, TreeCaseViewService, TreePetriflowIdentifiers, TreeTaskContentService, UnlimitedTaskContentService, UriContentType, UriResourceService, UriService, User, UserAutocomplete, UserComparatorService, UserField, UserFilterConstants, UserFiltersService, UserImpersonationConstants, UserInviteService, UserListField, UserListService, UserListValue, UserPreferenceService, UserResourceService, UserService, UserTransformer, UserValue, UtilityModule, ViewIdService, ViewService, WarningSnackBarComponent, WorkflowHeaderService, WorkflowMetaField, WorkflowViewService, WrappedBoolean, arrayToObservable, authenticationServiceFactory, clearTimeInformation, configureCategory, createMockCase, createMockCaseOutcome, createMockDataGroup, createMockDependencies, createMockField, createMockGetDataOutcome, createMockImmediateData, createMockNet, createMockPage, createMockPetriNetOutcome, createMockSetDataOutcome, createMockTask, createMockTaskOutcome, createSortParam, createTaskEventNotification, decodeBase64, defaultCaseSearchCategoriesFactory, defaultTaskSearchCategoriesFactory, destroySubscription, encodeBase64, extractFilterFieldFromData, extractFilterFromData, extractFilterFromFilterField, extractIconAndTitle, extractRoles, getField, getFieldFromDataGroups, getFieldIndex, getFieldIndexFromDataGroups, getImmediateData, getNetAndCreateCase, groupNavigationViewIdSegmentFactory, hasContent, loadAllPages, mockUserAutocompleteValue, navigationItemTaskAllowedNetsServiceFactory, navigationItemTaskCategoryFactory, navigationItemTaskFilterFactory, ofVoid, processMessageResponse, publicBaseFilterFactory, publicFactoryResolver, refreshTree, tabbedAllowedNetsServiceFactory, tabbedTaskViewConfigurationFactory, toMoment };
 //# sourceMappingURL=netgrif-components-core.mjs.map